cleanup even more

frontend/www/src/index.ts

@@ -8,14 +8,6 @@ import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout";
 import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
 import { VoronoiBuilder } from "./voronoi/voronoi";
 
-const LAYERS = {
-    'vor':          -1,  // Background
-    'planet':       1,
-    'planet_label': 2,
-    'ship':         3,
-    'ship_label':   4
-}
-
 function f32v(ptr: number, size: number): Float32Array {
     return new Float32Array(memory.buffer, ptr, size);
 }
@@ -25,39 +17,39 @@ function i32v(ptr: number, size: number): Int32Array {
 }
 
 export function set_game_name(name: string) {
-    GAMENAME.innerHTML = name;
+    ELEMENTS["name"].innerHTML = name;
 }
 
-const GAMENAME = document.getElementById("name");
-
-const TURNCOUNTER = document.getElementById("turnCounter");
-
-const COUNTER = new FPSCounter();
-const LOADER = document.getElementById("main");
-
-const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
-const FILESELECTOR = <HTMLInputElement>document.getElementById("fileselect");
-const SPEED = <HTMLInputElement>document.getElementById("speed");
-
 export function set_loading(loading: boolean) {
     if (loading) {
-        if (!LOADER.classList.contains("loading")) {
+        if (!ELEMENTS["main"].classList.contains("loading")) {
-            LOADER.classList.add("loading");
+            ELEMENTS["main"].classList.add("loading");
         }
     } else {
-        LOADER.classList.remove("loading");
+        ELEMENTS["main"].classList.remove("loading");
     }
 }
 
-const CANVAS = <HTMLCanvasElement>document.getElementById("c");
+const ELEMENTS = {};
+["name", "turnCounter", "main", "turnSlider", "fileselect", "speed", "canvas"].forEach(n => ELEMENTS[n] = document.getElementById(n));
+
+const CANVAS = ELEMENTS["canvas"];
 const RESOLUTION = [CANVAS.width, CANVAS.height];
 
+const LAYERS = {
+    'vor': -1,  // Background
+    'planet': 1,
+    'planet_label': 2,
+    'ship': 3,
+    'ship_label': 4
+}
+
+const COUNTER = new FPSCounter();
+
+var ms_per_frame = parseInt(ELEMENTS["speed"].value);
+
 const GL = CANVAS.getContext("webgl");
 
-var ms_per_frame = parseInt(SPEED.value);
-
-
-
 GL.clearColor(0, 0, 0, 1);
 GL.clear(GL.COLOR_BUFFER_BIT);
 
@@ -83,7 +75,7 @@ class GameInstance {
 
     vor_counter = 3;
     use_vor = true;
-    playing = true;    // 0 is paused, 1 is playing but not rerendered, 2 is playing and rerendered
+    playing = true;
     time_stopped_delta = 0;
     last_time = 0;
     frame = -1;
@@ -111,7 +103,16 @@ class GameInstance {
 
         // List of [(x, y, r)] for all planets
         const planets = f32v(game.get_planets(), this.planet_count * 3);
+        this._create_voronoi(planets);
+        this._create_planets(planets, meshes);
+        this._create_shipes(ship_mesh);
 
+        // Set slider correctly
+        this.turn_count = game.turn_count();
+        ELEMENTS["turnSlider"].max = this.turn_count - 1 + '';
+    }
+
+    _create_voronoi(planets: Float32Array) {
         const planet_points = [];
         for (let i = 0; i < planets.length; i += 3) {
             planet_points.push({ 'x': -planets[i], 'y': -planets[i + 1] });
@@ -124,7 +125,9 @@ class GameInstance {
 
         this.vor_builder = new VoronoiBuilder(GL, this.vor_shader, planet_points, bbox);
         this.renderer.addRenderable(this.vor_builder.getRenderable(), LAYERS.vor);
+    }
 
+    _create_planets(planets: Float32Array, meshes: Mesh[]) {
         for (let i = 0; i < this.planet_count; i++) {
             {
                 const transform = new UniformMatrix3fv([
@@ -166,9 +169,9 @@ class GameInstance {
                 this.renderer.addRenderable(label.getRenderable(), LAYERS.planet_label);
             }
         }
+    }
 
-        this.turn_count = game.turn_count();
+    _create_shipes(ship_mesh: Mesh) {
-
         const ship_ibo = new IndexBuffer(GL, ship_mesh.cells);
         const ship_positions = new VertexBuffer(GL, ship_mesh.positions);
         const ship_layout = new VertexBufferLayout();
@@ -190,9 +193,6 @@ class GameInstance {
             this.ship_labels.push(label);
             this.renderer.addRenderable(label.getRenderable(), LAYERS.ship_label)
         }
-
-        // Set slider correctly
-        SLIDER.max = this.turn_count - 1 + '';
     }
 
     on_resize() {
@@ -208,6 +208,11 @@ class GameInstance {
     }
 
     _update_state() {
+        this._update_planets();
+        this._update_ships();
+    }
+
+    _update_planets() {
         const colours = f32v(this.game.get_planet_colors(), this.planet_count * 6);
         const planet_ships = i32v(this.game.get_planet_ships(), this.planet_count);
 
@@ -221,7 +226,9 @@ class GameInstance {
 
             this.planet_labels[i].setText(GL, "*" + planet_ships[i], Align.Middle, Align.Begin);
         }
+    }
 
+    _update_ships() {
         const ship_count = this.game.get_ship_count();
         const ships = f32v(this.game.get_ship_locations(), ship_count * 9 * 2);
         const labels = f32v(this.game.get_ship_label_locations(), ship_count * 9 * 2);
@@ -328,8 +335,8 @@ class GameInstance {
             this.playing = true;
         }
 
-        TURNCOUNTER.innerHTML = this.frame + " / " + (this.turn_count - 1);
+        ELEMENTS["turnCounter"].innerHTML = this.frame + " / " + (this.turn_count - 1);
-        SLIDER.value = this.frame + '';
+        ELEMENTS["turnSlider"].value = this.frame + '';
     }
 
     handleKey(event: KeyboardEvent) {
@@ -355,14 +362,14 @@ class GameInstance {
 
         // d key
         if (event.keyCode == 68) {
-            SPEED.value = ms_per_frame + 10 + '';
+            ELEMENTS["speed"].value = ms_per_frame + 10 + '';
-            SPEED.onchange(undefined);
+            ELEMENTS["speed"].onchange(undefined);
         }
 
         // a key
         if (event.keyCode == 65) {
-            SPEED.value = Math.max(ms_per_frame - 10, 0) + '';
+            ELEMENTS["speed"].value = Math.max(ms_per_frame - 10, 0) + '';
-            SPEED.onchange(undefined);
+            ELEMENTS["speed"].onchange(undefined);
         }
     }
 }
@@ -409,26 +416,14 @@ window.addEventListener('resize', function () {
     }
 }, { capture: false, passive: true })
 
-SLIDER.oninput = function () {
+ELEMENTS["turnSlider"].oninput = function () {
     if (game_instance) {
-        game_instance.updateTurn(parseInt(SLIDER.value));
+        game_instance.updateTurn(parseInt(ELEMENTS["turnSlider"].value));
     }
 }
 
-FILESELECTOR.onchange = function () {
+ELEMENTS["speed"].onchange = function () {
-    const file = FILESELECTOR.files[0];
+    ms_per_frame = parseInt(ELEMENTS["speed"].value);
-    if (!file) { return; }
-    var reader = new FileReader();
-
-    reader.onload = function () {
-        set_instance(<string>reader.result);
-    }
-
-    reader.readAsText(file);
-}
-
-SPEED.onchange = function () {
-    ms_per_frame = parseInt(SPEED.value);
 }
 
 function step(time: number) {

frontend/www/static/res/style.css

@@ -184,7 +184,7 @@
         width: 100px;
     }
     
-    #c {
+    #canvas {
         position: relative;
         background-color: black;
         width: 100%;