Kelder/planet-wars
32
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

cleanup even more

Browse source
This commit is contained in:
ajuvercr 2020-04-20 12:39:53 +02:00
parent 217341e381
commit ae5cbdca79
2 changed files with 60 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
frontend/www/src/index.ts
View file

@ -8,14 +8,6 @@ import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout";
import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text"; import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
import { VoronoiBuilder } from "./voronoi/voronoi"; 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 { function f32v(ptr: number, size: number): Float32Array {
return new Float32Array(memory.buffer, ptr, size); 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) { 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) { export function set_loading(loading: boolean) {
if (loading) { if (loading) {
if (!LOADER.classList.contains("loading")) { if (!ELEMENTS["main"].classList.contains("loading")) {
LOADER.classList.add("loading"); ELEMENTS["main"].classList.add("loading");
} }
} else { } 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 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"); const GL = CANVAS.getContext("webgl");
var ms_per_frame = parseInt(SPEED.value);
GL.clearColor(0, 0, 0, 1); GL.clearColor(0, 0, 0, 1);
GL.clear(GL.COLOR_BUFFER_BIT); GL.clear(GL.COLOR_BUFFER_BIT);
@ -83,7 +75,7 @@ class GameInstance {
vor_counter = 3; vor_counter = 3;
use_vor = true; 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; time_stopped_delta = 0;
last_time = 0; last_time = 0;
frame = -1; frame = -1;
@ -111,10 +103,19 @@ class GameInstance {
// List of [(x, y, r)] for all planets // List of [(x, y, r)] for all planets
const planets = f32v(game.get_planets(), this.planet_count * 3); 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 = []; const planet_points = [];
for(let i = 0; i < planets.length; i += 3) { for (let i = 0; i < planets.length; i += 3) {
planet_points.push({'x': -planets[i], 'y': -planets[i+1]}); planet_points.push({ 'x': -planets[i], 'y': -planets[i + 1] });
} }
const _bbox = this.resizer.get_viewbox(); const _bbox = this.resizer.get_viewbox();
const bbox = { const bbox = {
@ -124,7 +125,9 @@ class GameInstance {
this.vor_builder = new VoronoiBuilder(GL, this.vor_shader, planet_points, bbox); this.vor_builder = new VoronoiBuilder(GL, this.vor_shader, planet_points, bbox);
this.renderer.addRenderable(this.vor_builder.getRenderable(), LAYERS.vor); this.renderer.addRenderable(this.vor_builder.getRenderable(), LAYERS.vor);
}
_create_planets(planets: Float32Array, meshes: Mesh[]) {
for (let i = 0; i < this.planet_count; i++) { for (let i = 0; i < this.planet_count; i++) {
{ {
const transform = new UniformMatrix3fv([ const transform = new UniformMatrix3fv([
@ -158,7 +161,7 @@ class GameInstance {
const transform = new UniformMatrix3fv([ const transform = new UniformMatrix3fv([
1., 0, 0, 1., 0, 0,
0, 1., 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); const label = this.text_factory.build(GL, transform);
@ -166,9 +169,9 @@ class GameInstance {
this.renderer.addRenderable(label.getRenderable(), LAYERS.planet_label); 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_ibo = new IndexBuffer(GL, ship_mesh.cells);
const ship_positions = new VertexBuffer(GL, ship_mesh.positions); const ship_positions = new VertexBuffer(GL, ship_mesh.positions);
const ship_layout = new VertexBufferLayout(); const ship_layout = new VertexBufferLayout();
@ -190,9 +193,6 @@ class GameInstance {
this.ship_labels.push(label); this.ship_labels.push(label);
this.renderer.addRenderable(label.getRenderable(), LAYERS.ship_label) this.renderer.addRenderable(label.getRenderable(), LAYERS.ship_label)
} }
// Set slider correctly
SLIDER.max = this.turn_count - 1 + '';
} }
on_resize() { on_resize() {
@ -208,6 +208,11 @@ class GameInstance {
} }
_update_state() { _update_state() {
this._update_planets();
this._update_ships();
}
_update_planets() {
const colours = f32v(this.game.get_planet_colors(), this.planet_count * 6); const colours = f32v(this.game.get_planet_colors(), this.planet_count * 6);
const planet_ships = i32v(this.game.get_planet_ships(), this.planet_count); 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]); 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.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 ship_count = this.game.get_ship_count();
const ships = f32v(this.game.get_ship_locations(), ship_count * 9 * 2); 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); 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++) { for (let i = 0; i < this.game.get_max_ships(); i++) {
if (i < ship_count) { 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);
this.renderer.enableRenderable(i, LAYERS.ship_label); this.renderer.enableRenderable(i, LAYERS.ship_label);
@ -328,8 +335,8 @@ class GameInstance {
this.playing = true; 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) { handleKey(event: KeyboardEvent) {
@ -355,14 +362,14 @@ class GameInstance {
// d key // d key
if (event.keyCode == 68) { 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 // a key
if (event.keyCode == 65) { 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);
} }
} }
} }
@ -378,9 +385,9 @@ export async function set_instance(source: string) {
).map(url_to_mesh); ).map(url_to_mesh);
const shader_promies = [ const shader_promies = [
(async () => <[string, ShaderFactory]> ["normal", await ShaderFactory.create_factory("static/shaders/frag/simple.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]>["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]>["image", await ShaderFactory.create_factory("static/shaders/frag/image.glsl", "static/shaders/vert/simple.glsl")])(),
]; ];
let shaders_array: [string, ShaderFactory][]; let shaders_array: [string, ShaderFactory][];
[meshes, shaders_array] = await Promise.all( [meshes, shaders_array] = await Promise.all(
@ -409,26 +416,14 @@ window.addEventListener('resize', function () {
} }
}, { capture: false, passive: true }) }, { capture: false, passive: true })
SLIDER.oninput = function () { ELEMENTS["turnSlider"].oninput = function () {
if (game_instance) { 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) { function step(time: number) {

2
frontend/www/static/res/style.css
View file

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