planet-wars/frontend/www/index.ts

439 lines
14 KiB
TypeScript
Raw Normal View History

2019-09-17 14:03:16 +02:00
import { Game } from "planetwars";
2020-03-29 06:21:24 +02:00
import { memory } from "planetwars/planetwars_bg";
2019-09-19 17:52:48 +02:00
import { Resizer, resizeCanvasToDisplaySize, FPSCounter, url_to_mesh, Mesh } from "./webgl/util";
2020-03-29 07:15:50 +02:00
import { Shader, Uniform4f, Uniform2fv, Uniform3fv, Uniform1i, Uniform1f, Uniform2f, ShaderFactory, Uniform3f, UniformMatrix3fv, UniformBool } from './webgl/shader';
2019-09-17 20:19:04 +02:00
import { Renderer } from "./webgl/renderer";
import { VertexBuffer, IndexBuffer } from "./webgl/buffer";
import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout";
import { Texture } from "./webgl/texture";
2019-09-17 20:19:04 +02:00
import { callbackify } from "util";
import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
2019-09-17 18:27:44 +02:00
2019-09-18 12:29:56 +02:00
function f32v(ptr: number, size: number): Float32Array {
return new Float32Array(memory.buffer, ptr, size);
}
function i32v(ptr: number, size: number): Int32Array {
return new Int32Array(memory.buffer, ptr, size);
}
2019-09-24 15:38:04 +02:00
export function set_game_name(name: string) {
GAMENAME.innerHTML = name;
}
const GAMENAME = document.getElementById("name");
2019-09-21 17:06:24 +02:00
const TURNCOUNTER = document.getElementById("turnCounter");
2019-09-17 20:19:04 +02:00
const COUNTER = new FPSCounter();
2019-09-21 16:54:48 +02:00
const LOADER = document.getElementById("main");
2019-09-17 20:19:04 +02:00
2019-09-21 10:43:03 +02:00
const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
2020-04-11 08:17:27 +02:00
const FILESELECTOR = <HTMLInputElement> document.getElementById("fileselect");
const SPEED = <HTMLInputElement> document.getElementById("speed");
2019-09-21 16:54:48 +02:00
2019-09-21 20:13:57 +02:00
export function set_loading(loading: boolean) {
2019-09-17 20:19:04 +02:00
if (loading) {
if (!LOADER.classList.contains("loading")) {
LOADER.classList.add("loading");
}
} else {
LOADER.classList.remove("loading");
}
}
const URL = window.location.origin + window.location.pathname;
2019-09-21 18:56:46 +02:00
export const LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
2019-09-17 18:27:44 +02:00
const CANVAS = <HTMLCanvasElement>document.getElementById("c");
2019-09-17 20:19:04 +02:00
const RESOLUTION = [CANVAS.width, CANVAS.height];
const GL = CANVAS.getContext("webgl");
2019-09-19 17:52:48 +02:00
var ms_per_frame = parseInt(SPEED.value);
2019-09-21 11:30:00 +02:00
2019-09-22 12:01:24 +02:00
resizeCanvasToDisplaySize(CANVAS);
2019-09-17 20:19:04 +02:00
GL.clearColor(0, 0, 0, 0);
GL.clear(GL.COLOR_BUFFER_BIT);
GL.enable(GL.BLEND);
GL.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);
var SHADERFACOTRY: ShaderFactory;
ShaderFactory.create_factory(
LOCATION + "static/shaders/frag/simple.glsl", LOCATION + "static/shaders/vert/simple.glsl"
).then((e) => SHADERFACOTRY = e);
2019-09-17 18:27:44 +02:00
2019-09-24 14:29:13 +02:00
var VOR_SHADER_FACTORY: ShaderFactory;
ShaderFactory.create_factory(
LOCATION + "static/shaders/frag/vor.glsl", LOCATION + "static/shaders/vert/vor.glsl"
).then((e) => VOR_SHADER_FACTORY = e);
var IMAGE_SHADER_FACTORY: ShaderFactory;
ShaderFactory.create_factory(
LOCATION + "static/shaders/frag/image.glsl", LOCATION + "static/shaders/vert/simple.glsl"
).then((e) => IMAGE_SHADER_FACTORY = e);
2019-09-17 20:19:04 +02:00
class GameInstance {
resizer: Resizer;
game: Game;
2019-09-17 20:19:04 +02:00
shader: Shader;
2019-09-24 14:29:13 +02:00
vor_shader: Shader;
image_shader: Shader;
text_factory: LabelFactory;
planet_labels: Label[];
ship_labels: Label[];
2019-09-17 20:19:04 +02:00
renderer: Renderer;
2019-09-18 12:29:56 +02:00
planet_count: number;
2020-03-29 07:15:50 +02:00
vor_counter = 3;
use_vor = true;
2019-09-21 10:17:35 +02:00
playing = true; // 0 is paused, 1 is playing but not rerendered, 2 is playing and rerendered
time_stopped_delta = 0;
2019-09-18 12:29:56 +02:00
last_time = 0;
frame = -1;
2019-09-17 20:19:04 +02:00
2019-09-20 17:48:00 +02:00
ship_indices: number[];
2019-09-21 17:06:24 +02:00
turn_count = 0;
constructor(game: Game, meshes: Mesh[], ship_mesh: Mesh) {
2019-09-17 20:19:04 +02:00
this.game = game;
2019-09-18 12:29:56 +02:00
this.planet_count = this.game.get_planet_count();
this.shader = SHADERFACOTRY.create_shader(GL, { "MAX_CIRCLES": '' + this.planet_count });
this.image_shader = IMAGE_SHADER_FACTORY.create_shader(GL);
this.vor_shader = VOR_SHADER_FACTORY.create_shader(GL, { "PLANETS": '' + this.planet_count });
this.text_factory = defaultLabelFactory(GL, this.image_shader);
this.planet_labels = [];
this.ship_labels = [];
2019-09-18 12:29:56 +02:00
this.resizer = new Resizer(CANVAS, [...f32v(game.get_viewbox(), 4)], true);
2019-09-17 20:19:04 +02:00
this.renderer = new Renderer();
2019-09-19 18:07:46 +02:00
this.game.update_turn(0);
2019-09-19 17:52:48 +02:00
2019-09-24 14:29:13 +02:00
const indexBuffer = new IndexBuffer(GL, [
0, 1, 2,
1, 2, 3,
]);
const positionBuffer = new VertexBuffer(GL, [
-1, -1,
-1, 1,
1, -1,
1, 1,
]);
const layout = new VertexBufferLayout();
layout.push(GL.FLOAT, 2, 4, "a_pos");
const vao = new VertexArray();
vao.addBuffer(positionBuffer, layout);
this.renderer.addToDraw(indexBuffer, vao, this.vor_shader);
2019-09-21 10:17:35 +02:00
// Setup key handling
document.addEventListener('keydown', this.handleKey.bind(this));
2019-09-19 17:52:48 +02:00
const planets = f32v(game.get_planets(), this.planet_count * 3);
for (let i = 0; i < this.planet_count; i++) {
{
const transform = new UniformMatrix3fv([
1, 0, 0,
0, 1, 0,
-planets[i * 3], -planets[i * 3 + 1], 1,
]);
const indexBuffer = new IndexBuffer(GL, meshes[i % meshes.length].cells);
const positionBuffer = new VertexBuffer(GL, meshes[i % meshes.length].positions);
const layout = new VertexBufferLayout();
layout.push(GL.FLOAT, 3, 4, "a_position");
const vao = new VertexArray();
vao.addBuffer(positionBuffer, layout);
this.renderer.addToDraw(
indexBuffer,
vao,
this.shader,
{
"u_trans": transform,
"u_trans_next": transform,
}
);
}
{
const transform = new UniformMatrix3fv([
1., 0, 0,
0, 1., 0,
-planets[i * 3], -planets[i * 3 + 1] -1.2, 1.,
]);
const label = this.text_factory.build(GL, transform);
this.renderer.addRenderable(label);
this.planet_labels.push(label);
}
2019-09-19 17:52:48 +02:00
}
2019-09-18 12:29:56 +02:00
2019-09-21 17:06:24 +02:00
this.turn_count = game.turn_count();
2019-09-20 17:48:00 +02:00
this.ship_indices = [];
const ship_ibo = new IndexBuffer(GL, ship_mesh.cells);
const ship_positions = new VertexBuffer(GL, ship_mesh.positions);
const ship_layout = new VertexBufferLayout();
ship_layout.push(GL.FLOAT, 3, 4, "a_position");
const ship_vao = new VertexArray();
ship_vao.addBuffer(ship_positions, ship_layout);
for (let i = 0; i < this.game.get_max_ships(); i++) {
this.ship_indices.push(
this.renderer.addToDraw(
ship_ibo,
ship_vao,
this.shader,
{}
)
);
const label = this.text_factory.build(GL);
this.ship_labels.push(label);
this.renderer.addRenderable(label)
2019-09-20 17:48:00 +02:00
}
2019-09-21 10:43:03 +02:00
2019-09-24 14:29:13 +02:00
this.vor_shader.uniform(GL, "u_planets", new Uniform3fv(planets));
2019-09-21 10:43:03 +02:00
// Set slider correctly
2019-09-21 17:06:24 +02:00
SLIDER.max = this.turn_count - 1 + '';
2019-09-17 20:19:04 +02:00
}
2019-09-21 20:19:31 +02:00
on_resize() {
this.resizer = new Resizer(CANVAS, [...f32v(this.game.get_viewbox(), 4)], true);
}
2019-09-21 10:32:57 +02:00
_update_state() {
const colours = f32v(this.game.get_planet_colors(), this.planet_count * 6);
const planet_ships = i32v(this.game.get_planet_ships(), this.planet_count);
2019-09-24 14:29:13 +02:00
this.vor_shader.uniform(GL, "u_planet_colours", new Uniform3fv(colours));
for (let i = 0; i < this.planet_count; i++) {
const u = new Uniform3f(colours[i * 6], colours[i * 6 + 1], colours[i * 6 + 2]);
this.renderer.updateUniform(2 * i + 1, (us) => us["u_color"] = u);
const u2 = new Uniform3f(colours[i * 6 + 3], colours[i * 6 + 4], colours[i * 6 + 5]);
this.renderer.updateUniform(2 * i + 1, (us) => us["u_color_next"] = u2);
this.planet_labels[i].setText(GL, "*"+planet_ships[i], Align.Middle, Align.Begin);
2019-09-21 10:32:57 +02:00
}
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);
const ship_counts = i32v(this.game.get_ship_counts(), ship_count);
const ship_colours = f32v(this.game.get_ship_colours(), ship_count * 3);
2019-09-21 10:32:57 +02:00
for (let i = 0; i < this.game.get_max_ships(); i++) {
2019-09-21 10:32:57 +02:00
const index = this.ship_indices[i];
if (i < ship_count) {
this.ship_labels[i].setText(GL, ""+ship_counts[i], Align.Middle, Align.Middle);
2019-09-21 10:32:57 +02:00
this.renderer.enableRendershit(index);
this.renderer.enableRendershit(index+1);
2019-09-21 10:32:57 +02:00
const u = new Uniform3f(ship_colours[i * 3], ship_colours[i * 3 + 1], ship_colours[i * 3 + 2]);
2019-09-21 10:32:57 +02:00
// const t1 = new UniformMatrix3fv(new Float32Array(ships, i * 18, 9));
// const t2 = new UniformMatrix3fv(new Float32Array(ships, i * 18 + 9, 9));
const t1 = new UniformMatrix3fv(ships.slice(i * 18, i * 18 + 9));
const t2 = new UniformMatrix3fv(ships.slice(i * 18 + 9, i * 18 + 18));
const tl1 = new UniformMatrix3fv(labels.slice(i * 18, i * 18 + 9));
const tl2 = new UniformMatrix3fv(labels.slice(i * 18 + 9, i * 18 + 18));
2019-09-21 10:32:57 +02:00
this.renderer.updateUniform(index, (us) => {
us["u_color"] = u;
us["u_color_next"] = u;
us["u_trans"] = t1;
us["u_trans_next"] = t2;
});
this.renderer.updateUniform(index+1, (us) => {
us["u_trans"] = tl1;
us["u_trans_next"] = tl2;
});
2019-09-21 10:32:57 +02:00
} else {
this.renderer.disableRenderShift(index);
this.renderer.disableRenderShift(index+1);
2019-09-21 10:32:57 +02:00
}
}
}
2019-09-17 20:19:04 +02:00
render(time: number) {
2019-09-21 10:17:35 +02:00
COUNTER.frame(time);
2020-03-29 07:15:50 +02:00
if (COUNTER.delta(time) < 30) {
this.vor_counter = Math.min(3, this.vor_counter + 1);
} else {
this.vor_counter = Math.max(-3, this.vor_counter - 1);
}
if (this.vor_counter < -2) {
this.use_vor = false;
}
2019-09-21 10:17:35 +02:00
if (!this.playing) {
this.last_time = time;
2019-09-21 11:31:28 +02:00
this.shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
2019-09-24 14:29:13 +02:00
this.vor_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
this.image_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
2019-09-24 14:29:13 +02:00
2019-09-21 11:31:28 +02:00
this.renderer.render(GL);
2019-09-21 10:17:35 +02:00
return;
}
2019-09-21 11:30:00 +02:00
if (time > this.last_time + ms_per_frame) {
2019-09-20 17:48:00 +02:00
2019-09-18 12:29:56 +02:00
this.last_time = time;
2019-09-21 10:32:57 +02:00
this.updateTurn(this.frame + 1);
2019-09-19 17:52:48 +02:00
}
2019-09-20 17:48:00 +02:00
2019-09-19 17:52:48 +02:00
GL.bindFramebuffer(GL.FRAMEBUFFER, null);
GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
2019-09-17 20:19:04 +02:00
2019-09-24 14:29:13 +02:00
this.vor_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
this.vor_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
2020-03-29 07:15:50 +02:00
this.vor_shader.uniform(GL, "u_vor", new UniformBool(this.use_vor));
2019-09-24 14:29:13 +02:00
2019-09-21 11:30:00 +02:00
this.shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / ms_per_frame));
2019-09-17 20:19:04 +02:00
this.shader.uniform(GL, "u_mouse", new Uniform2f(this.resizer.get_mouse_pos()));
this.shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
this.shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
this.image_shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / ms_per_frame));
this.image_shader.uniform(GL, "u_mouse", new Uniform2f(this.resizer.get_mouse_pos()));
this.image_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
this.image_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
2019-09-17 20:19:04 +02:00
this.renderer.render(GL);
2019-09-21 10:17:35 +02:00
}
2019-09-19 17:52:48 +02:00
2019-09-21 10:32:57 +02:00
updateTurn(turn: number) {
this.frame = Math.max(0, turn);
const new_frame = this.game.update_turn(this.frame);
if (new_frame < this.frame) {
this.frame = new_frame;
this.playing = false;
} else {
this._update_state();
2019-09-21 10:43:03 +02:00
this.playing = true;
2019-09-21 10:32:57 +02:00
}
2019-09-21 10:43:03 +02:00
2019-09-21 17:06:24 +02:00
TURNCOUNTER.innerHTML = this.frame + " / " + this.turn_count;
2019-09-21 10:43:03 +02:00
SLIDER.value = this.frame + '';
2019-09-21 10:32:57 +02:00
}
2019-09-21 10:17:35 +02:00
handleKey(event: KeyboardEvent) {
// Space
if (event.keyCode == 32) {
if (this.playing) {
this.playing = false;
} else {
this.playing = true;
}
2019-09-21 10:32:57 +02:00
}
// Arrow left
if (event.keyCode == 37) {
// This feels more natural than -1 what it should be, I think
this.updateTurn(this.frame - 2);
}
2019-09-21 10:17:35 +02:00
2019-09-21 10:32:57 +02:00
// Arrow right
if (event.keyCode == 39) {
this.updateTurn(this.frame + 1);
2019-09-21 10:17:35 +02:00
}
2019-09-21 11:30:00 +02:00
// d key
if (event.keyCode == 68) {
SPEED.value = ms_per_frame + 10 + '';
SPEED.onchange(undefined);
}
// a key
if (event.keyCode == 65) {
SPEED.value = Math.max(ms_per_frame - 10, 0) + '';
SPEED.onchange(undefined);
}
2019-09-17 20:19:04 +02:00
}
}
var game_instance: GameInstance;
var meshes;
export async function set_instance(source: string) {
if (!meshes) {
meshes = await Promise.all(
["ship.svg", "earth.svg", "mars.svg", "venus.svg"].map(
(name) => "static/res/assets/" + name
).map(url_to_mesh)
);
}
2019-09-21 16:54:48 +02:00
2019-09-22 12:01:24 +02:00
resizeCanvasToDisplaySize(CANVAS);
game_instance = new GameInstance(Game.new(source), meshes.slice(1), meshes[0]);
2019-09-21 20:13:57 +02:00
set_loading(false);
2019-09-17 14:03:16 +02:00
}
2019-09-17 20:19:04 +02:00
window.addEventListener('resize', function () {
2019-09-22 12:01:24 +02:00
resizeCanvasToDisplaySize(CANVAS);
2019-09-21 20:19:31 +02:00
if (game_instance) {
game_instance.on_resize();
}
}, { capture: false, passive: true })
2019-09-21 20:19:31 +02:00
SLIDER.oninput = function () {
2019-09-21 10:43:03 +02:00
if (game_instance) {
game_instance.updateTurn(parseInt(SLIDER.value));
}
}
FILESELECTOR.onchange = function () {
2019-09-21 11:20:07 +02:00
const file = FILESELECTOR.files[0];
if (!file) { return; }
2019-09-21 11:20:07 +02:00
var reader = new FileReader();
reader.onload = function () {
set_instance(<string>reader.result);
2019-09-21 11:20:07 +02:00
}
reader.readAsText(file);
}
2019-09-17 20:19:04 +02:00
SPEED.onchange = function () {
2019-09-21 11:30:00 +02:00
ms_per_frame = parseInt(SPEED.value);
}
2019-09-17 20:19:04 +02:00
function step(time: number) {
if (game_instance) {
2019-09-20 17:48:00 +02:00
game_instance.render(time);
2019-09-17 20:19:04 +02:00
}
requestAnimationFrame(step);
}
2020-04-07 14:13:38 +02:00
// set_loading(false);
2019-09-17 20:19:04 +02:00
requestAnimationFrame(step);