13 files changed, 355 insertions, 66 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
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..73d8764
--- /dev/null
+++ b/index.css
@@ -0,0 +1,50 @@
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    background-color: #ffffff;
+    margin: 0;
+    overflow: hidden;
+    font-family: arial;
+}
+
+#block {
+
+    position: absolute;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: rgba(0,0,0,0.5);
+
+}
+
+#instructions {
+
+    width: 100%;
+    height: 100%;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: box;
+
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    box-orient: horizontal;
+
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    box-pack: center;
+
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    box-align: center;
+
+    color: #ffffff;
+    text-align: center;
+
+    cursor: pointer;
+
+}
diff --git a/index.html b/index.html
index 7eafeb6..69e022f 100644
--- a/index.html
+++ b/index.html
@@ -3,45 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <title>Transmuto</title>
+    <link rel="stylesheet" type="text/css" href="index.css"/>
     <script type="text/javascript" src="three_js/dist/three.min.js"></script>
     <script type="text/javascript" src="three_js/src/Detector.js"></script>
+    <script type="text/javascript" src="three_js/dist/PointerLockControls.js"></script>
     <script type="text/javascript" src="physi_js/physi.js"></script>
 </head>
 <body>
-<script id="fragment_shader" type="x-shader/x-fragment">
+<div id="block">
 
-			uniform float time;
-			uniform vec2 resolution;
+    <div id="instructions">
+        <span style="font-size:40px">Transmuto</span>
+    </div>
 
-			varying vec2 vUv;
-
-			void main( void ) {
-
-				vec2 position = -1.0 + 2.0 * vUv;
-
-				float red = abs( sin( position.x * position.y + time / 5.0 ) );
-				float green = abs( sin( position.x * position.y + time / 4.0 ) );
-				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
-				gl_FragColor = vec4( red, green, blue, 1.0 );
-
-			}
-
-
-
-</script>
-<script id="vertex_shader" type="x-shader/x-vertex">
-
-			varying vec2 vUv;
-
-			void main()
-			{
-				vUv = uv;
-				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-				gl_Position = projectionMatrix * mvPosition;
-			}
-
-
-</script>
+</div>
+<script id="vertex_shader" type="x-shader/x-vertex" src="shader/vertex_shader.vert"></script>
+<script id="world_shader" type="x-shader/x-fragment" src="shader/world_shader.frag"></script>
+<script id="player_shader" type="x-shader/x-fragment" src="shader/player_shader.frag"></script>
+<script id="enemy_shader" type="x-shader/x-fragment" src="shader/enemy_shader.frag"></script>
 <script type="text/javascript" src="game.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/shader/enemy_shader.frag b/shader/enemy_shader.frag
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/shader/enemy_shader.frag
diff --git a/shader/player_shader.frag b/shader/player_shader.frag
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/shader/player_shader.frag
diff --git a/shader/vertex_shader.vert b/shader/vertex_shader.vert
new file mode 100644
index 0000000..9a07371
--- /dev/null
+++ b/shader/vertex_shader.vert
@@ -0,0 +1,10 @@
+
+varying vec3 vWorldPosition;
+
+void main() {
+	vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
+	vWorldPosition = worldPosition.xyz;
+
+	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+}
diff --git a/shader/world_shader.frag b/shader/world_shader.frag
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/shader/world_shader.frag
diff --git a/Enemy.ts b/ts/Enemy.ts
index 5193991..c461941 100644
--- a/Enemy.ts
+++ b/ts/Enemy.ts
@@ -1,5 +1,5 @@
-/// <reference path="three_js/ts/three.d.ts"/>
-/// <reference path="physi_js/physijs.d.ts"/>
+/// <reference path="../three_js/ts/three.d.ts"/>
+/// <reference path="../physi_js/physijs.d.ts"/>
 
 import {Morph} from "./Morph";
 
diff --git a/Morph.ts b/ts/Morph.ts
index f97ea5c..f01b7ef 100644
--- a/Morph.ts
+++ b/ts/Morph.ts
@@ -1,5 +1,5 @@
-/// <reference path="three_js/ts/three.d.ts"/>
-/// <reference path="physi_js/physijs.d.ts"/>
+/// <reference path="../three_js/ts/three.d.ts"/>
+/// <reference path="../physi_js/physijs.d.ts"/>
 
 export class Morph extends Physijs.Mesh {
     faces:number;
diff --git a/Player.ts b/ts/Player.ts
index 07718d2..a118b64 100644
--- a/Player.ts
+++ b/ts/Player.ts
@@ -1,5 +1,5 @@
-/// <reference path="three_js/ts/three.d.ts"/>
-/// <reference path="physi_js/physijs.d.ts"/>
+/// <reference path="../three_js/ts/three.d.ts"/>
+/// <reference path="../physi_js/physijs.d.ts"/>
 
 import {Morph} from "./Morph";
 
diff --git a/TargetCamera.ts b/ts/TargetCamera.ts
index 8b13789..8b13789 100644
--- a/TargetCamera.ts
+++ b/ts/TargetCamera.ts
diff --git a/World.ts b/ts/World.ts
index b3203be..356aa61 100644
--- a/World.ts
+++ b/ts/World.ts
@@ -1,5 +1,5 @@
-/// <reference path="three_js/ts/three.d.ts"/>
-/// <reference path="physi_js/physijs.d.ts"/>
+/// <reference path="../three_js/ts/three.d.ts"/>
+/// <reference path="../physi_js/physijs.d.ts"/>
 
 import {Player} from "./Player";
 
diff --git a/main.ts b/ts/main.ts
index 757c4b8..b328a3b 100644
--- a/main.ts
+++ b/ts/main.ts
@@ -1,5 +1,5 @@
-/// <reference path="three_js/ts/three.d.ts"/>
-/// <reference path="three_js/ts/detector.d.ts"/>
+/// <reference path="../three_js/ts/three.d.ts"/>
+/// <reference path="../three_js/ts/detector.d.ts"/>
 
 import {Player} from "./Player";
 import {World} from "./World";