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

actually wait for shader factories to be created + cleanup

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

77
frontend/www/src/games.ts
View file

@ -1,17 +1,12 @@
import { set_game_name, set_loading, LOCATION, set_instance } from './index' import { set_game_name, set_loading, set_instance } from './index'
import { ConfigIniParser } from 'config-ini-parser'
const OPTIONS = document.getElementById("options");
const game_location = LOCATION + "static/games/mod.ini";
var game_name, game_file; var game_name, game_file;
document.getElementById("addbutton").onclick = function() { document.getElementById("addbutton").onclick = function () {
const loc = window.location; const loc = window.location;
const query = `?game=${game_file}&name=${game_name}`; const query = `?game=${game_file}&name=${game_name}`;
navigator.clipboard.writeText(loc.origin+loc.pathname+encodeURI(query)).then(() => { navigator.clipboard.writeText(loc.origin + loc.pathname + encodeURI(query)).then(() => {
console.log("Success"); console.log("Success");
}, () => { }, () => {
console.log("Failed"); console.log("Failed");
@ -19,29 +14,23 @@ document.getElementById("addbutton").onclick = function() {
} }
async function on_load() { async function on_load() {
console.log("ON LOAD");
if (OPTIONS) {
const r = await fetch(game_location);
const response = await r.text();
parse_ini(response);
} else {
const options = document.getElementsByClassName("options"); const options = document.getElementsByClassName("options");
const urlVars = new URLSearchParams(window.location.search); const urlVars = new URLSearchParams(window.location.search);
if (urlVars.get("game") && urlVars.get("name")) { if (urlVars.get("game") && urlVars.get("name")) {
console.log(urlVars.get("game")+' '+urlVars.get("name")) console.log(urlVars.get("game") + ' ' + urlVars.get("name"))
handle(urlVars.get("game"),urlVars.get("name")) handle(urlVars.get("game"), urlVars.get("name"))
} else if (options[0]) { } else if (options[0]) {
const options_div = <HTMLDivElement> options[0]; const options_div = <HTMLDivElement>options[0];
if (options_div.children[0]) { if (options_div.children[0]) {
options_div.children[0].dispatchEvent(new Event('click')); options_div.children[0].dispatchEvent(new Event('click'));
} }
} }
}
} }
// window.addEventListener("load", on_load, false);
export function handle(location, name: string) { window.addEventListener("load", on_load, false);
export function handle(location: string, name: string) {
game_file = location; game_file = location;
game_name = name; game_name = name;
@ -55,52 +44,4 @@ export function handle(location, name: string) {
}).catch(console.error); }).catch(console.error);
} }
function create_option(location: string, name: string, turns: string, players: string): HTMLElement {
const div = document.createElement("div");
div.className = "option";
div.onclick = (_) => handle(location, name);
console.log("hello there");
console.log(`"${location}, "${name}"`);
let ps = "";
if (players) {
ps += "<p>Players</p>";
for (let [index, player] of players.split('"').entries()) {
if (index % 2 == 0) {
continue;
}
ps += `<p>${player}</p>`;
}
}
const html = `
<p>${name}</p>
<p>Turns: ${turns}</p>
` + ps;
div.innerHTML = html;
return div;
}
function parse_ini(inifile: string) {
const parser = new ConfigIniParser();
parser.parse(inifile);
const loc = parser.get(undefined, "path");
OPTIONS.innerHTML = '';
for (let name of parser.sections()) {
const game = parser.get(name, "name");
const turns = parser.get(name, "turns");
const players = parser.get(name, "players")
OPTIONS.appendChild(
create_option(loc+name, game , turns, players)
);
}
}
on_load(); on_load();

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

@ -1,6 +1,6 @@
import { Game } from "planetwars"; import { Game } from "planetwars";
import { memory } from "planetwars/planetwars_bg"; import { memory } from "planetwars/planetwars_bg";
import { Resizer, resizeCanvasToDisplaySize, FPSCounter, url_to_mesh, Mesh } from "./webgl/util"; import { Resizer, resizeCanvasToDisplaySize, FPSCounter, url_to_mesh, Mesh, Dictionary } from "./webgl/util";
import { Shader, Uniform4f, Uniform3fv, Uniform1f, Uniform2f, ShaderFactory, Uniform3f, UniformMatrix3fv, UniformBool } from './webgl/shader'; import { Shader, Uniform4f, Uniform3fv, Uniform1f, Uniform2f, ShaderFactory, Uniform3f, UniformMatrix3fv, UniformBool } from './webgl/shader';
import { Renderer } from "./webgl/renderer"; import { Renderer } from "./webgl/renderer";
import { VertexBuffer, IndexBuffer } from "./webgl/buffer"; import { VertexBuffer, IndexBuffer } from "./webgl/buffer";
@ -49,8 +49,6 @@ export function set_loading(loading: boolean) {
} }
} }
const URL = window.location.origin + window.location.pathname;
export const LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
const CANVAS = <HTMLCanvasElement>document.getElementById("c"); const CANVAS = <HTMLCanvasElement>document.getElementById("c");
const RESOLUTION = [CANVAS.width, CANVAS.height]; const RESOLUTION = [CANVAS.width, CANVAS.height];
@ -58,7 +56,7 @@ const GL = CANVAS.getContext("webgl");
var ms_per_frame = parseInt(SPEED.value); var ms_per_frame = parseInt(SPEED.value);
resizeCanvasToDisplaySize(CANVAS);
GL.clearColor(0, 0, 0, 1); GL.clearColor(0, 0, 0, 1);
GL.clear(GL.COLOR_BUFFER_BIT); GL.clear(GL.COLOR_BUFFER_BIT);
@ -66,22 +64,6 @@ GL.clear(GL.COLOR_BUFFER_BIT);
GL.enable(GL.BLEND); GL.enable(GL.BLEND);
GL.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA); GL.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);
// TODO: fix this
var SHADERFACOTRY: ShaderFactory;
ShaderFactory.create_factory(
LOCATION + "static/shaders/frag/simple.glsl", LOCATION + "static/shaders/vert/simple.glsl"
).then((e) => SHADERFACOTRY = e);
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);
class GameInstance { class GameInstance {
resizer: Resizer; resizer: Resizer;
game: Game; game: Game;
@ -108,13 +90,13 @@ class GameInstance {
turn_count = 0; turn_count = 0;
constructor(game: Game, meshes: Mesh[], ship_mesh: Mesh) { constructor(game: Game, meshes: Mesh[], ship_mesh: Mesh, shaders: Dictionary<ShaderFactory>) {
this.game = game; this.game = game;
this.planet_count = this.game.get_planet_count(); this.planet_count = this.game.get_planet_count();
this.shader = SHADERFACOTRY.create_shader(GL, { "MAX_CIRCLES": '' + this.planet_count }); this.shader = shaders["normal"].create_shader(GL, { "MAX_CIRCLES": '' + this.planet_count });
this.image_shader = IMAGE_SHADER_FACTORY.create_shader(GL); this.image_shader = shaders["image"].create_shader(GL);
this.vor_shader = VOR_SHADER_FACTORY.create_shader(GL, { "PLANETS": '' + this.planet_count }); this.vor_shader = shaders["vor"].create_shader(GL, { "PLANETS": '' + this.planet_count });
this.text_factory = defaultLabelFactory(GL, this.image_shader); this.text_factory = defaultLabelFactory(GL, this.image_shader);
this.planet_labels = []; this.planet_labels = [];
@ -293,6 +275,7 @@ class GameInstance {
this.use_vor = false; this.use_vor = false;
} }
// If not playing, still reder with different viewbox, so people can still pan etc.
if (!this.playing) { if (!this.playing) {
this.last_time = time; this.last_time = time;
@ -303,12 +286,14 @@ class GameInstance {
this.renderer.render(GL); this.renderer.render(GL);
return; return;
} }
if (time > this.last_time + ms_per_frame) {
// Check if turn is still correct
if (time > this.last_time + ms_per_frame) {
this.last_time = time; this.last_time = time;
this.updateTurn(this.frame + 1); this.updateTurn(this.frame + 1);
} }
// Do GL things
GL.bindFramebuffer(GL.FRAMEBUFFER, null); GL.bindFramebuffer(GL.FRAMEBUFFER, null);
GL.viewport(0, 0, GL.canvas.width, GL.canvas.height); GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT); GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
@ -328,6 +313,7 @@ class GameInstance {
this.image_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox())); this.image_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
this.image_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION)); this.image_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
// Render
this.renderer.render(GL); this.renderer.render(GL);
} }
@ -342,7 +328,7 @@ class GameInstance {
this.playing = true; this.playing = true;
} }
TURNCOUNTER.innerHTML = this.frame + " / " + this.turn_count; TURNCOUNTER.innerHTML = this.frame + " / " + (this.turn_count - 1);
SLIDER.value = this.frame + ''; SLIDER.value = this.frame + '';
} }
@ -382,20 +368,35 @@ class GameInstance {
} }
var game_instance: GameInstance; var game_instance: GameInstance;
var meshes; var meshes: Mesh[];
var shaders: Dictionary<ShaderFactory>;
export async function set_instance(source: string) { export async function set_instance(source: string) {
if (!meshes) { if (!meshes || !shaders) {
meshes = await Promise.all( const mesh_promises = ["ship.svg", "earth.svg", "mars.svg", "venus.svg"].map(
["ship.svg", "earth.svg", "mars.svg", "venus.svg"].map(
(name) => "static/res/assets/" + name (name) => "static/res/assets/" + name
).map(url_to_mesh) ).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")])(),
];
let shaders_array: [string, ShaderFactory][];
[meshes, shaders_array] = await Promise.all(
[
Promise.all(mesh_promises),
Promise.all(shader_promies),
]
); );
shaders = {};
shaders_array.forEach(([name, fac]) => shaders[name] = fac);
} }
resizeCanvasToDisplaySize(CANVAS); resizeCanvasToDisplaySize(CANVAS);
game_instance = new GameInstance(Game.new(source), meshes.slice(1), meshes[0]); game_instance = new GameInstance(Game.new(source), meshes.slice(1), meshes[0], shaders);
set_loading(false); set_loading(false);
} }
@ -437,6 +438,5 @@ function step(time: number) {
requestAnimationFrame(step); requestAnimationFrame(step);
} }
// set_loading(false);
requestAnimationFrame(step); requestAnimationFrame(step);