diff --git a/frontend/www/games.ts b/frontend/www/games.ts index dea4a76..0d4b3df 100644 --- a/frontend/www/games.ts +++ b/frontend/www/games.ts @@ -34,8 +34,12 @@ function create_option(location: string, name: string, turns: string, players: s if (players) { ps += "

Players

"; - for (let player of players.split(' ')) { - ps += `

${eval(player)}

`; + for (let [index, player] of players.split('"').entries()) { + if (index % 2 == 0) { + continue; + } + console.log(player); + ps += `

${player}

`; } } diff --git a/frontend/www/index.ts b/frontend/www/index.ts index d512eb1..c1460d7 100644 --- a/frontend/www/index.ts +++ b/frontend/www/index.ts @@ -60,10 +60,16 @@ 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); + class GameInstance { resizer: Resizer; game: Game; shader: Shader; + vor_shader: Shader; renderer: Renderer; planet_count: number; @@ -80,10 +86,31 @@ class GameInstance { this.game = game; this.planet_count = this.game.get_planet_count(); this.shader = SHADERFACOTRY.create_shader(GL, {"MAX_CIRCLES": ''+this.planet_count}); + this.vor_shader = VOR_SHADER_FACTORY.create_shader(GL, {"PLANETS": ''+this.planet_count}); this.resizer = new Resizer(CANVAS, [...f32v(game.get_viewbox(), 4)], true); this.renderer = new Renderer(); this.game.update_turn(0); + 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); + // Setup key handling document.addEventListener('keydown', this.handleKey.bind(this)); @@ -137,6 +164,8 @@ class GameInstance { ); } + this.vor_shader.uniform(GL, "u_planets", new Uniform3fv(planets)); + // Set slider correctly SLIDER.max = this.turn_count - 1 + ''; } @@ -147,11 +176,14 @@ class GameInstance { _update_state() { const colours = f32v(this.game.get_planet_colors(), this.planet_count * 6); + + 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(i, (us) => us["u_color"] = u); + this.renderer.updateUniform(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(i, (us) => us["u_color_next"] = u2); + this.renderer.updateUniform(i+1, (us) => us["u_color_next"] = u2); } const ships = f32v(this.game.get_ship_locations(), this.game.get_ship_count() * 9 * 2); @@ -189,6 +221,8 @@ class GameInstance { this.last_time = time; this.shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox())); + this.vor_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox())); + this.renderer.render(GL); return; } @@ -202,6 +236,9 @@ class GameInstance { GL.viewport(0, 0, GL.canvas.width, GL.canvas.height); GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT); + this.vor_shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox())); + this.vor_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION)); + this.shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / ms_per_frame)); 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())); diff --git a/frontend/www/static/shaders/frag/vor.glsl b/frontend/www/static/shaders/frag/vor.glsl new file mode 100644 index 0000000..bfb4968 --- /dev/null +++ b/frontend/www/static/shaders/frag/vor.glsl @@ -0,0 +1,26 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec3 u_planets[$PLANETS]; +uniform vec3 u_planet_colours[$PLANETS * 2]; + +uniform float u_step_interval; +uniform float u_time; + +varying vec2 v_pos; + +void main() { + vec3 color = vec3(0.2); + float dis = 1000000.0; + + for(int i = 0; i < $PLANETS; i++) { + float d = distance(v_pos, u_planets[i].xy); + if (d < dis) { + dis = d; + color = u_planet_colours[2 * i]; + } + } + + gl_FragColor = vec4(color, 0.2); +} diff --git a/frontend/www/static/shaders/vert/vor.glsl b/frontend/www/static/shaders/vert/vor.glsl new file mode 100644 index 0000000..a60110d --- /dev/null +++ b/frontend/www/static/shaders/vert/vor.glsl @@ -0,0 +1,26 @@ +#ifdef GL_ES +precision mediump float; +#endif + +attribute vec2 a_pos; + +uniform vec4 u_viewbox; // [x, y, width, height] +uniform vec2 u_resolution; + +varying vec2 v_pos; + +void main() { + + vec2 uv = (a_pos.xy + 1.0) * 0.5; + uv = 1.0 - uv; + // uv *= -1.0; + + // Viewbox's center is top left, a_position's is in the center to the screen + // So translate and scale the viewbox** + uv *= u_viewbox.zw; + uv -= u_viewbox.xy + u_viewbox.zw; + + v_pos = uv.xy; + + gl_Position = vec4(a_pos, 0.0, 1.0); +}