1 files changed, 274 insertions, 24 deletions

diff --git a/game.ts b/game.ts
index 8d5da32..27ac5c6 100644
--- a/game.ts
+++ b/game.ts
@@ -3,9 +3,153 @@
 /// <reference path="three_js/ts/detector.d.ts"/>
 
 import Vector3 = THREE.Vector3;
+import ShaderMaterial = THREE.ShaderMaterial;
+import Material = THREE.Material;
+import Geometry = THREE.Geometry;
+
+
+class PointerLock {
+    hasLock:boolean = false;
+
+    constructor(private game:Game, private blocker:HTMLElement, private instructions:HTMLElement) {
+    }
+
+
+    gain() {
+        let havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
+        if (!havePointerLock) {
+            return;
+        }
+        document.addEventListener('pointerlockchange', (event) => this.onChange(event), false);
+        document.addEventListener('mozpointerlockchange', (event) => this.onChange(event), false);
+        document.addEventListener('webkitpointerlockchange', (event) => this.onChange(event), false);
+
+        document.addEventListener('pointerlockerror', (event) => this.onError(event), false);
+        document.addEventListener('mozpointerlockerror', (event) => this.onError(event), false);
+        document.addEventListener('webkitpointerlockerror', (event) => this.onError(event), false);
+
+        this.instructions.addEventListener("click", (event) => this.onClick(event), false)
+    }
+
+    onChange(event) {
+        let element = document.body;
+        let doc:any = document;
+
+        if (doc.pointerLockElement === element || doc.mozPointerLockElement === element || doc.webkitPointerLockElement === element) {
+            //gained
+            this.hasLock = true;
+            this.blocker.style.display = "none";
+            if(this.game.state == GameState.INITIALIZED || this.game.state == GameState.PAUSED) {
+                this.game.start();
+            }
+            console.log("gained");
+        } else {
+            //lost
+            this.hasLock = false;
+            this.blocker.style.display = '-webkit-box';
+            this.blocker.style.display = '-moz-box';
+            this.blocker.style.display = 'box';
+
+            this.instructions.style.display = "";
+            if(this.game.state == GameState.STARTED) {
+                this.game.pause();
+            }
+            console.log("lost");
+        }
+    }
+
+    onError(event) {
+        this.instructions.style.display = "";
+    }
+
+    onClick(event) {
+        let element:any = document.body;
+        element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
+        this.instructions.style.display = "none";
+
+        element.requestPointerLock();
+    }
+}
+
+class Keyboard {
+    static k = {
+        8: "backspace", 9: "tab", 13: "enter", 16: "shift",
+        17: "ctrl", 18: "alt", 27: "esc", 32: "space",
+        33: "pageup", 34: "pagedown", 35: "end", 36: "home",
+        37: "left", 38: "up", 39: "right", 40: "down",
+        45: "insert", 46: "delete", 186: ";", 187: "=",
+        188: ",", 189: "-", 190: ".", 191: "/",
+        219: "[", 220: "\\", 221: "]", 222: "'"
+    };
+    private status = {};
+
+    constructor() {
+
+    }
+
+    update() {
+        for (var key in this.status) {
+            // insure that every keypress has "down" status exactly once
+            if (!this.status[key].updatedPreviously) {
+                this.status[key].down = true;
+                this.status[key].pressed = true;
+                this.status[key].updatedPreviously = true;
+            }
+            else // updated previously
+            {
+                this.status[key].down = false;
+            }
+
+            // key has been flagged as "up" since last update
+            if (this.status[key].up) {
+                delete this.status[key];
+                continue; // move on to next key
+            }
+
+            if (!this.status[key].pressed) // key released
+                this.status[key].up = true;
+        }
+    }
+
+    onKeyDown(event) {
+        var key = Keyboard.keyName(event.keyCode);
+        if (!this.status[key])
+            this.status[key] = {down: false, pressed: false, up: false, updatedPreviously: false};
+    }
+
+    onKeyUp(event) {
+        var key = Keyboard.keyName(event.keyCode);
+        if (this.status[key])
+            this.status[key].pressed = false;
+    }
+
+    down(key) {
+        return (this.status[key] && this.status[key].down);
+    }
+
+    pressed(key) {
+        return (this.status[key] && this.status[key].pressed);
+    }
+
+    up(key) {
+        return (this.status[key] && this.status[key].up);
+    }
+
+    register() {
+        document.addEventListener("keydown", (event) => this.onKeyDown(event), false);
+        document.addEventListener("keyup", (event) => this.onKeyUp(event), false);
+    }
+
+    static keyName(keyCode) {
+        return ( Keyboard.k[keyCode] != null ) ?
+            Keyboard.k[keyCode] :
+            String.fromCharCode(keyCode);
+    }
+}
+
+
 class Morph extends Physijs.Mesh {
     faces:number;
-    //TODO, probelm s tym ze ked extendujem Mesh, tak sa nedostanem k Geometry ale iba k BufferGeometry
 
     constructor(numFaces:number, material:THREE.Material, mass:number) {
         let geometry = Morph.generateGeometry(numFaces);
@@ -47,36 +191,80 @@ class Morph extends Physijs.Mesh {
 class Enemy extends Morph {
 
     constructor() {
-        super(null, null, null);
-        //todo
+        super(6, Enemy.getMaterial(), 2);
+    }
+
+    static getMaterial():Material {
+        return new THREE.MeshBasicMaterial({
+            color: 0xb02000
+        });
+        /*
+         return new THREE.ShaderMaterial({
+         uniforms:{},
+         fragmentShader: document.getElementById(Enemy.shader).textContent,
+         vertexShader: document.getElementById(World.vertex_shader).textContent,
+         });*/
+
     }
 }
 
 class Player extends Morph {
 
     constructor() {
-        let mat = new THREE.MeshBasicMaterial({
-            color: 0x00b0a0,
+        super(4, Player.getMaterial(), 1);
+    }
+
+    static getMaterial():Material {
+        return new THREE.MeshBasicMaterial({
+            color: 0x00a0b0
         });
-        super(4, mat, 1);
+        /*
+         return new THREE.ShaderMaterial({
+         uniforms:{},
+         fragmentShader: document.getElementById(Player.shader).textContent,
+         vertexShader: document.getElementById(World.vertex_shader).textContent,
+         });*/
     }
 }
 
 class World {
 
-    constructor(player: Player, scene:THREE.Scene, camera:THREE.Camera) {
+    constructor(player:Player, scene:THREE.Scene, camera:THREE.Camera) {
+        player.position.set(0, 0, 0);
         scene.add(player);
+
+        let enemy = new Enemy();
+        enemy.position.set(0, 5, 0);
+        scene.add(enemy);
     }
 }
 
+enum GameState {
+    INITIALIZED,
+    STARTED,
+    PAUSED,
+    STOPPED
+}
+
 class Game {
     renderer:THREE.WebGLRenderer;
     scene:THREE.Scene;
     camera:THREE.PerspectiveCamera;
+
     player:Player;
-    world: World;
-    private ticks:number;
-    private running:boolean;
+    world:World;
+    state:GameState;
+
+    keyboard:Keyboard;
+
+    private ticks:number = 0;
+    private delta:number = 0;
+    private lastFrame:number = 0;
+    private timestep:number = 1000 / 30;
+    private maxFPS:number = 30;
+
+    private keepRunning:boolean;
+
 
     constructor() {
         this.renderer = new THREE.WebGLRenderer({
@@ -86,42 +274,101 @@ class Game {
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(this.renderer.domElement);
+        window.addEventListener("resize", () => this.onWindowResize(), false);
 
         this.scene = new THREE.Scene();
         this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
+
+        this.keyboard = new Keyboard();
+        this.keyboard.register();
     }
 
     init():void {
         //init world
         this.player = new Player();
         this.world = new World(this.player, this.scene, this.camera);
-        this.player.position.set(0,0,0);
-        this.camera.position.set(10,10,10);
-        this.camera.lookAt(this.player.position);
+
         //init camera
+        this.camera.position.set(10, 10, 10);
+        this.camera.lookAt(this.player.position);
+
+        this.state = GameState.INITIALIZED;
     }
 
+
+    onWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    /**
+     * Just render the scene.
+     */
     render():void {
+        //console.log("render");
         this.renderer.render(this.scene, this.camera);
     }
 
-    tick():void {
+    /**
+     * Update logic based on @param delta.
+     * @param delta
+     */
+    tick(delta):void {
+        //console.log("tick " + delta);
         this.ticks++;
+        this.keyboard.update();
 
     }
 
-    run():void {
-        this.running = true;
-        while (this.running) {
-            this.tick();
-            let shouldRender = true;
-            if (shouldRender) {
-                this.render();
+    run(timestamp?):void {
+        if (!timestamp) {
+            timestamp = performance.now();
+        }
+
+        if (timestamp < this.lastFrame + (1000 / this.maxFPS)) {
+            if (this.keepRunning) {
+                requestAnimationFrame(() => this.run());
             }
+            return;
+        }
+        this.delta += timestamp - this.lastFrame;
+        this.lastFrame = timestamp;
 
+        var numUpdateSteps = 0;
+        while (this.delta >= this.timestep) {
+            this.tick(this.timestep);
+            this.delta -= this.timestep;
+            if (++numUpdateSteps >= 240) {
+                // panic here, reset delta
+                this.delta = 0;
+                break;
+            }
         }
+        this.render();
+        if (this.keepRunning) {
+            requestAnimationFrame(() => this.run());
+        }
+    }
+
+    start() {
+        this.state = GameState.STARTED;
+        this.keepRunning = true;
+        this.run();
     }
 
+    pause() {
+        this.state = GameState.PAUSED;
+        this.keepRunning = false;
+    }
+
+    stop() {
+        this.pause();
+        this.state = GameState.STOPPED;
+        //end here!!
+        //todo
+    }
 }
 
 if (!Detector.webgl) {
@@ -129,8 +376,11 @@ if (!Detector.webgl) {
 }
 
 window.onload = () => {
-    var game = new Game();
+    let game = new Game();
     game.init();
-
-    //game.run();
+    //make sure we have pointerlock here
+    let block = document.getElementById("block");
+    let instructions = document.getElementById("instructions");
+    let plock = new PointerLock(game, block, instructions);
+    plock.gain();
 };
\ No newline at end of file