diff --git a/frontend/www/src/index.ts b/frontend/www/src/index.ts index e40924f..e6d9a87 100644 --- a/frontend/www/src/index.ts +++ b/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 = document.getElementById("turnSlider"); -const FILESELECTOR = document.getElementById("fileselect"); -const SPEED = document.getElementById("speed"); - export function set_loading(loading: boolean) { if (loading) { - if (!LOADER.classList.contains("loading")) { - LOADER.classList.add("loading"); + if (!ELEMENTS["main"].classList.contains("loading")) { + ELEMENTS["main"].classList.add("loading"); } } else { - LOADER.classList.remove("loading"); + ELEMENTS["main"].classList.remove("loading"); } } -const CANVAS = 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,10 +103,19 @@ 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]}); + for (let i = 0; i < planets.length; i += 3) { + planet_points.push({ 'x': -planets[i], 'y': -planets[i + 1] }); } const _bbox = this.resizer.get_viewbox(); const bbox = { @@ -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([ @@ -158,7 +161,7 @@ class GameInstance { const transform = new UniformMatrix3fv([ 1., 0, 0, 0, 1., 0, - -planets[i * 3], -planets[i * 3 + 1] -1.2, 1., + -planets[i * 3], -planets[i * 3 + 1] - 1.2, 1., ]); const label = this.text_factory.build(GL, transform); @@ -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); @@ -219,9 +224,11 @@ class GameInstance { const u2 = new Uniform3f(colours[i * 6 + 3], colours[i * 6 + 4], colours[i * 6 + 5]); this.renderer.updateUniform(i, (us) => us["u_color_next"] = u2, LAYERS.planet); - this.planet_labels[i].setText(GL, "*"+planet_ships[i], Align.Middle, Align.Begin); + 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); @@ -230,7 +237,7 @@ class GameInstance { for (let i = 0; i < this.game.get_max_ships(); i++) { if (i < ship_count) { - this.ship_labels[i].setText(GL, ""+ship_counts[i], Align.Middle, Align.Middle); + this.ship_labels[i].setText(GL, "" + ship_counts[i], Align.Middle, Align.Middle); this.renderer.enableRenderable(i, LAYERS.ship); this.renderer.enableRenderable(i, LAYERS.ship_label); @@ -328,8 +335,8 @@ class GameInstance { this.playing = true; } - TURNCOUNTER.innerHTML = this.frame + " / " + (this.turn_count - 1); - SLIDER.value = this.frame + ''; + ELEMENTS["turnCounter"].innerHTML = this.frame + " / " + (this.turn_count - 1); + 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 + ''; - SPEED.onchange(undefined); + ELEMENTS["speed"].value = ms_per_frame + 10 + ''; + ELEMENTS["speed"].onchange(undefined); } // a key if (event.keyCode == 65) { - SPEED.value = Math.max(ms_per_frame - 10, 0) + ''; - SPEED.onchange(undefined); + ELEMENTS["speed"].value = Math.max(ms_per_frame - 10, 0) + ''; + ELEMENTS["speed"].onchange(undefined); } } } @@ -378,9 +385,9 @@ export async function set_instance(source: string) { ).map(url_to_mesh); const shader_promies = [ - (async () => <[string, ShaderFactory]> ["normal", await ShaderFactory.create_factory("static/shaders/frag/simple.glsl", "static/shaders/vert/simple.glsl")])(), - (async () => <[string, ShaderFactory]> ["vor", await ShaderFactory.create_factory("static/shaders/frag/vor.glsl", "static/shaders/vert/vor.glsl")])(), - (async () => <[string, ShaderFactory]> ["image", await ShaderFactory.create_factory("static/shaders/frag/image.glsl", "static/shaders/vert/simple.glsl")])(), + (async () => <[string, ShaderFactory]>["normal", await ShaderFactory.create_factory("static/shaders/frag/simple.glsl", "static/shaders/vert/simple.glsl")])(), + (async () => <[string, ShaderFactory]>["vor", await ShaderFactory.create_factory("static/shaders/frag/vor.glsl", "static/shaders/vert/vor.glsl")])(), + (async () => <[string, ShaderFactory]>["image", await ShaderFactory.create_factory("static/shaders/frag/image.glsl", "static/shaders/vert/simple.glsl")])(), ]; let shaders_array: [string, ShaderFactory][]; [meshes, shaders_array] = await Promise.all( @@ -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 () { - const file = FILESELECTOR.files[0]; - if (!file) { return; } - var reader = new FileReader(); - - reader.onload = function () { - set_instance(reader.result); - } - - reader.readAsText(file); -} - -SPEED.onchange = function () { - ms_per_frame = parseInt(SPEED.value); +ELEMENTS["speed"].onchange = function () { + ms_per_frame = parseInt(ELEMENTS["speed"].value); } function step(time: number) { diff --git a/frontend/www/static/res/style.css b/frontend/www/static/res/style.css index 6ca71a0..8c5119e 100644 --- a/frontend/www/static/res/style.css +++ b/frontend/www/static/res/style.css @@ -184,7 +184,7 @@ width: 100px; } - #c { + #canvas { position: relative; background-color: black; width: 100%;