aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/pw-frontend/.editorconfig2
-rw-r--r--web/pw-frontend/.gitignore5
-rw-r--r--web/pw-frontend/README.md48
-rw-r--r--web/pw-frontend/index.html19
-rw-r--r--web/pw-frontend/package.json33
-rw-r--r--web/pw-frontend/planetwars-rs/.gitignore2
-rw-r--r--web/pw-frontend/planetwars-rs/Cargo.toml44
-rw-r--r--web/pw-frontend/planetwars-rs/src/lib.rs373
-rw-r--r--web/pw-frontend/planetwars-rs/src/types.rs45
-rw-r--r--web/pw-frontend/planetwars-rs/src/utils.rs65
-rw-r--r--web/pw-frontend/public/favicon.icobin0 -> 3985 bytes
-rw-r--r--web/pw-frontend/public/static/res/assets/earth.svg114
-rw-r--r--web/pw-frontend/public/static/res/assets/font.pngbin0 -> 912 bytes
-rw-r--r--web/pw-frontend/public/static/res/assets/jupiter.svg118
-rw-r--r--web/pw-frontend/public/static/res/assets/leaves.jpgbin0 -> 36902 bytes
-rw-r--r--web/pw-frontend/public/static/res/assets/mars.svg114
-rw-r--r--web/pw-frontend/public/static/res/assets/neptune.svg186
-rw-r--r--web/pw-frontend/public/static/res/assets/ship.svg78
-rw-r--r--web/pw-frontend/public/static/res/assets/uranus.svg150
-rw-r--r--web/pw-frontend/public/static/res/assets/venus.svg114
-rw-r--r--web/pw-frontend/public/static/shaders/frag/image.glsl14
-rw-r--r--web/pw-frontend/public/static/shaders/frag/simple.glsl15
-rw-r--r--web/pw-frontend/public/static/shaders/frag/vor.glsl18
-rw-r--r--web/pw-frontend/public/static/shaders/vert/image.glsl33
-rw-r--r--web/pw-frontend/public/static/shaders/vert/simple.glsl36
-rw-r--r--web/pw-frontend/public/static/shaders/vert/vor.glsl43
-rw-r--r--web/pw-frontend/src/App.svelte14
-rw-r--r--web/pw-frontend/src/lib/MatchBrowser.svelte140
-rw-r--r--web/pw-frontend/src/lib/Visualizer.svelte61
-rw-r--r--web/pw-frontend/src/lib/visualizer/LICENSE-MIT25
-rw-r--r--web/pw-frontend/src/lib/visualizer/README.md1
-rw-r--r--web/pw-frontend/src/lib/visualizer/index.html102
-rw-r--r--web/pw-frontend/src/lib/visualizer/index.ts666
-rw-r--r--web/pw-frontend/src/lib/visualizer/src/games.ts47
-rw-r--r--web/pw-frontend/src/lib/visualizer/style.css309
-rw-r--r--web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.d.ts56
-rw-r--r--web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.js1726
-rw-r--r--web/pw-frontend/src/lib/visualizer/voronoi/voronoi.ts165
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/buffer.ts55
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/index.ts122
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/renderer.ts157
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/shader.ts327
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/text.ts192
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/texture.ts106
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/util.ts229
-rw-r--r--web/pw-frontend/src/lib/visualizer/webgl/vertexBufferLayout.ts115
-rw-r--r--web/pw-frontend/src/main.ts8
-rw-r--r--web/pw-frontend/src/vite-env.d.ts2
-rw-r--r--web/pw-frontend/svelte.config.js7
-rw-r--r--web/pw-frontend/tsconfig.json22
-rw-r--r--web/pw-frontend/vite.config.js26
51 files changed, 6349 insertions, 0 deletions
diff --git a/web/pw-frontend/.editorconfig b/web/pw-frontend/.editorconfig
new file mode 100644
index 0000000..3007779
--- /dev/null
+++ b/web/pw-frontend/.editorconfig
@@ -0,0 +1,2 @@
+[*.{js,ts,html,svelte}]
+indent_size = 2 \ No newline at end of file
diff --git a/web/pw-frontend/.gitignore b/web/pw-frontend/.gitignore
new file mode 100644
index 0000000..012c26e
--- /dev/null
+++ b/web/pw-frontend/.gitignore
@@ -0,0 +1,5 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store
+package-lock.json \ No newline at end of file
diff --git a/web/pw-frontend/README.md b/web/pw-frontend/README.md
new file mode 100644
index 0000000..a9d516a
--- /dev/null
+++ b/web/pw-frontend/README.md
@@ -0,0 +1,48 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+ `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```
diff --git a/web/pw-frontend/index.html b/web/pw-frontend/index.html
new file mode 100644
index 0000000..dc46fa0
--- /dev/null
+++ b/web/pw-frontend/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+ <!-- polyfill global -->
+ <script>
+ const global = globalThis;
+ </script>
+ <!-- end polyfill -->
+
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Planetwars</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
diff --git a/web/pw-frontend/package.json b/web/pw-frontend/package.json
new file mode 100644
index 0000000..f011162
--- /dev/null
+++ b/web/pw-frontend/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "pw-frontend",
+ "version": "0.0.1",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "build-wasm": "wasm-pack build ./planetwars-rs --target web",
+ "preview": "vite preview",
+ "check": "svelte-check --tsconfig ./tsconfig.json"
+ },
+ "devDependencies": {
+ "@originjs/vite-plugin-commonjs": "^1.0.1",
+ "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
+ "@tsconfig/svelte": "^2.0.1",
+ "rollup-plugin-polyfill-node": "^0.8.0",
+ "svelte": "^3.44.0",
+ "svelte-check": "^2.2.7",
+ "svelte-preprocess": "^4.9.8",
+ "tslib": "^2.3.1",
+ "typescript": "^4.4.4",
+ "vite": "^2.7.2",
+ "vite-plugin-wasm-pack": "^0.1.9"
+ },
+ "dependencies": {
+ "buffer": "^6.0.3",
+ "extract-svg-path": "^2.1.0",
+ "load-svg": "^1.0.0",
+ "moment": "^2.29.1",
+ "svg-mesh-3d": "^1.1.0",
+ "ts-heap": "^1.1.3"
+ }
+}
diff --git a/web/pw-frontend/planetwars-rs/.gitignore b/web/pw-frontend/planetwars-rs/.gitignore
new file mode 100644
index 0000000..a04eea2
--- /dev/null
+++ b/web/pw-frontend/planetwars-rs/.gitignore
@@ -0,0 +1,2 @@
+pkg/**
+target/**
diff --git a/web/pw-frontend/planetwars-rs/Cargo.toml b/web/pw-frontend/planetwars-rs/Cargo.toml
new file mode 100644
index 0000000..a5dc949
--- /dev/null
+++ b/web/pw-frontend/planetwars-rs/Cargo.toml
@@ -0,0 +1,44 @@
+[package]
+name = "planetwars-rs"
+version = "0.1.0"
+authors = ["ajuvercr <arthur.vercruysse@ugent.be>"]
+edition = "2018"
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = ["-Oz", "--enable-mutable-globals"]
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+wasm-bindgen = "0.2.63"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.6", optional = true }
+
+# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
+# compared to the default allocator's ~10K. It is slower than the default
+# allocator, however.
+#
+# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
+wee_alloc = { version = "0.4.5", optional = true }
+serde = "1.0.100"
+serde_derive = "1.0.100"
+serde_json = "1.0"
+octoon-math = "0.1.7"
+voronoi = "0.1.4"
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.13"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"
+
+[workspace] \ No newline at end of file
diff --git a/web/pw-frontend/planetwars-rs/src/lib.rs b/web/pw-frontend/planetwars-rs/src/lib.rs
new file mode 100644
index 0000000..f2ba7e1
--- /dev/null
+++ b/web/pw-frontend/planetwars-rs/src/lib.rs
@@ -0,0 +1,373 @@
+extern crate serde;
+#[macro_use]
+extern crate serde_derive;
+extern crate octoon_math;
+extern crate serde_json;
+extern crate voronoi;
+
+use octoon_math::Mat3;
+use voronoi::{make_polygons, voronoi, Point};
+
+mod types;
+mod utils;
+
+use std::collections::HashMap;
+use wasm_bindgen::prelude::*;
+
+macro_rules! console_log {
+ // Note that this is using the `log` function imported above during
+ // `bare_bones`
+ ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
+}
+
+// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
+// allocator.
+#[cfg(feature = "wee_alloc")]
+#[global_allocator]
+static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+
+#[derive(Debug, Clone)]
+pub struct Circle {
+ r: f32,
+ x: f32,
+ y: f32,
+ a0: f32,
+ ad: f32,
+ distance: usize,
+}
+
+use std::f32::consts::PI;
+fn spr(from: f32) -> f32 {
+ let pi2 = PI * 2.;
+ ((from % pi2) + pi2) % pi2
+}
+
+impl Circle {
+ pub fn new(p1: &types::Planet, p2: &types::Planet) -> Self {
+ let x1 = p1.x;
+ let y1 = p1.y;
+ let x2 = p2.x;
+ let y2 = p2.y;
+
+ // Distance between planets
+ let q = ((x2 - x1).powi(2) + (y2 - y1).powi(2)).sqrt();
+ // Center of between planets
+ let x3 = (x1 + x2) / 2.0;
+ let y3 = (y1 + y2) / 2.0;
+
+ // Radius of circle
+ let r = q * 1.0;
+
+ // Center of circle
+ let x = x3 + (r.powi(2) - (q / 2.0).powi(2)).sqrt() * (y1 - y2) / q;
+ let y = y3 + (r.powi(2) - (q / 2.0).powi(2)).sqrt() * (x2 - x1) / q;
+ // console_log!("{},{} -> {},{} ({},{} r={})", x1, y1, x2, y2, x, y, r);
+
+ let a0 = spr((y - y1).atan2(x - x1));
+ let a2 = spr((y - y2).atan2(x - x2));
+
+ let mut ad = spr(a0 - a2);
+ if ad > PI {
+ ad = spr(a2 - a0);
+ }
+ // console_log!("a1 {} a2 {} ad {}", a0/PI * 180.0, a2/PI * 180.0, ad/PI*180.0);
+
+ let distance = q.ceil() as usize + 1;
+ Self {
+ r,
+ x,
+ y,
+ a0,
+ ad,
+ distance,
+ }
+ }
+
+ pub fn get_for_remaining(&self, remaining: usize) -> ((Mat3<f32>, f32), (Mat3<f32>, f32)) {
+ (
+ self.get_remaining(remaining),
+ self.get_remaining((remaining + 1).min(self.distance - 1)),
+ )
+ }
+
+ fn get_remaining(&self, remaining: usize) -> (Mat3<f32>, f32) {
+ let alpha = self.a0 + (1.0 - (remaining as f32 / self.distance as f32)) * self.ad;
+
+ let cos = alpha.cos();
+ let sin = alpha.sin();
+ (
+ Mat3::new(
+ 0.3,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.3,
+ 0.0,
+ -self.x + cos * self.r,
+ -self.y + sin * self.r,
+ 0.3,
+ ),
+ alpha,
+ )
+ }
+}
+
+fn create_voronoi(planets: &Vec<types::Planet>, bbox: f32) -> (Vec<f32>, Vec<usize>) {
+ let mut verts: Vec<[f32; 2]> = planets.iter().map(|p| [p.x, p.y]).collect();
+ let mut ids = Vec::new();
+
+ let vor_points = planets
+ .iter()
+ .map(|p| Point::new(p.x as f64, p.y as f64))
+ .collect();
+
+ let vor = voronoi(vor_points, bbox as f64);
+ let vor = make_polygons(&vor);
+
+ for poly in vor.iter() {
+ // Get planet index for planet that is inside this poligon
+ let idx = 0;
+
+ let mut prev = ids.len() + poly.len() - 1;
+ for p in poly.iter() {
+ let now = verts.len();
+ verts.push([p.x.0 as f32, p.y.0 as f32]);
+
+ ids.push(idx);
+ ids.push(now);
+ ids.push(prev);
+ prev = now;
+ }
+ }
+
+ (verts.concat(), ids)
+}
+
+#[wasm_bindgen]
+pub struct Game {
+ states: Vec<types::State>,
+ turn: usize,
+
+ planet_map: HashMap<(String, String), Circle>,
+
+ /* put extra shit here */
+ view_box: Vec<f32>,
+
+ planets: Vec<f32>,
+ planet_ships: Vec<usize>,
+
+ ship_locations: Vec<f32>,
+ ship_label_locations: Vec<f32>,
+ ship_colours: Vec<f32>,
+ ship_counts: Vec<usize>,
+
+ current_planet_colours: Vec<f32>,
+
+ voronoi_vertices: Vec<f32>,
+ voronoi_colors: Vec<f32>,
+ voronoi_indices: Vec<usize>,
+}
+
+#[wasm_bindgen]
+impl Game {
+ pub fn new(file: &str) -> Self {
+ utils::set_panic_hook();
+
+ // First line is fucked but we just filter out things that cannot parse
+ let states: Vec<types::State> = file
+ .split("\n")
+ .filter_map(|line| serde_json::from_str(line).ok())
+ .collect();
+
+ let mut planet_map = HashMap::new();
+
+ // Iterator?
+ for p1 in states[0].planets.iter() {
+ for p2 in states[0].planets.iter() {
+ planet_map.insert((p1.name.clone(), p2.name.clone()), Circle::new(&p1, &p2));
+ }
+ }
+ let view_box = utils::caclulate_viewbox(&states[0].planets);
+
+ let (voronoi_vertices, voronoi_indices) =
+ create_voronoi(&states[0].planets, view_box[2].max(view_box[3]));
+
+ let voronoi_colors: Vec<f32> = voronoi_indices
+ .iter()
+ .map(|_| [0.0, 0.0, 0.0])
+ .collect::<Vec<[f32; 3]>>()
+ .concat(); // Init these colours on black
+
+ Self {
+ planets: utils::get_planets(&states[0].planets, 2.0),
+ planet_ships: Vec::new(),
+ view_box,
+
+ planet_map,
+ turn: 0,
+ states,
+ ship_locations: Vec::new(),
+ ship_label_locations: Vec::new(),
+ ship_colours: Vec::new(),
+ ship_counts: Vec::new(),
+ current_planet_colours: Vec::new(),
+
+ voronoi_vertices,
+ voronoi_indices,
+ voronoi_colors,
+ }
+ }
+
+ pub fn push_state(&mut self, state_str: &str) {
+ if let Ok(state) = serde_json::from_str(state_str) {
+ self.states.push(state);
+ }
+ }
+
+ pub fn get_viewbox(&self) -> Vec<f32> {
+ self.view_box.clone()
+ }
+
+ pub fn get_planets(&self) -> Vec<f32> {
+ self.planets.clone()
+ }
+
+ pub fn get_planet_ships(&self) -> Vec<usize> {
+ self.planet_ships.clone()
+ }
+
+ pub fn get_planet_colors(&self) -> Vec<f32> {
+ self.current_planet_colours.clone()
+ }
+
+ pub fn turn_count(&self) -> usize {
+ self.states.len()
+ }
+
+ pub fn update_turn(&mut self, turn: usize) -> usize {
+ self.turn = turn.min(self.states.len() - 1);
+
+ self.update_planet_ships();
+ self.update_planet_colours();
+ self.update_voronoi_colors();
+ self.update_ship_locations();
+ self.update_ship_counts();
+
+ self.turn
+ }
+
+ fn update_planet_ships(&mut self) {
+ self.planet_ships = self.states[self.turn]
+ .planets
+ .iter()
+ .map(|p| p.ship_count as usize)
+ .collect();
+ }
+
+ fn update_voronoi_colors(&mut self) {
+ for (i, p) in self.states[self.turn].planets.iter().enumerate() {
+ let color = utils::COLORS[p.owner.unwrap_or(0) as usize % utils::COLORS.len()];
+ self.voronoi_colors[i * 3 + 0] = color[0];
+ self.voronoi_colors[i * 3 + 1] = color[1];
+ self.voronoi_colors[i * 3 + 2] = color[2];
+ }
+ }
+
+ fn update_planet_colours(&mut self) {
+ let mut new_vec: Vec<[f32; 3]> = Vec::new();
+ let planets_now = self.states[self.turn].planets.iter();
+ let planets_later = self.states[(self.turn + 1).min(self.states.len() - 1)]
+ .planets
+ .iter();
+
+ for (p1, p2) in planets_now.zip(planets_later) {
+ new_vec
+ .push(utils::COLORS[p1.owner.unwrap_or(0) as usize % utils::COLORS.len()].into());
+ new_vec
+ .push(utils::COLORS[p2.owner.unwrap_or(0) as usize % utils::COLORS.len()].into());
+ }
+
+ self.current_planet_colours = new_vec.concat::<f32>();
+ }
+
+ fn update_ship_locations(&mut self) {
+ let mut new_sl = Vec::new();
+ let mut new_sll = Vec::new();
+
+ let t = Mat3::new(0.2, 0., 0., 0., 0.2, 0.0, 0., -0.5, 0.2);
+
+ for ship in self.states[self.turn].expeditions.iter() {
+ let ((o1, a1), (o2, a2)) = self
+ .planet_map
+ .get(&(ship.origin.clone(), ship.destination.clone()))
+ .unwrap()
+ .get_for_remaining(ship.turns_remaining as usize);
+ new_sl.push((o1 * Mat3::rotate_z(a1)).to_array());
+ new_sl.push((o2 * Mat3::rotate_z(a2)).to_array());
+
+ new_sll.push((o1 + t).to_array());
+ new_sll.push((o2 + t).to_array());
+ }
+
+ self.ship_locations = new_sl.concat();
+ self.ship_label_locations = new_sll.concat();
+
+ self.ship_colours = self.states[self.turn]
+ .expeditions
+ .iter()
+ .map(|s| utils::COLORS[s.owner as usize % utils::COLORS.len()])
+ .collect::<Vec<[f32; 3]>>()
+ .concat();
+ }
+
+ fn update_ship_counts(&mut self) {
+ self.ship_counts = self.states[self.turn]
+ .expeditions
+ .iter()
+ .map(|s| s.ship_count as usize)
+ .collect();
+ }
+
+ pub fn get_max_ships(&self) -> usize {
+ self.states
+ .iter()
+ .map(|s| s.expeditions.len())
+ .max()
+ .unwrap()
+ }
+
+ pub fn get_ship_locations(&self) -> Vec<f32> {
+ self.ship_locations.clone()
+ }
+
+ pub fn get_ship_label_locations(&self) -> Vec<f32> {
+ self.ship_label_locations.clone()
+ }
+
+ pub fn get_ship_colours(&self) -> Vec<f32> {
+ self.ship_colours.clone()
+ }
+
+ pub fn get_ship_counts(&self) -> Vec<usize> {
+ self.ship_counts.clone()
+ }
+
+ pub fn get_voronoi_verts(&self) -> Vec<f32> {
+ self.voronoi_vertices.clone()
+ }
+
+ pub fn get_voronoi_colours(&self) -> Vec<f32> {
+ self.voronoi_colors.clone()
+ }
+
+ pub fn get_voronoi_inds(&self) -> Vec<usize> {
+ self.voronoi_indices.clone()
+ }
+}
+
+#[wasm_bindgen]
+extern "C" {
+ fn alert(s: &str);
+ #[wasm_bindgen(js_namespace = console)]
+ fn log(s: &str);
+}
diff --git a/web/pw-frontend/planetwars-rs/src/types.rs b/web/pw-frontend/planetwars-rs/src/types.rs
new file mode 100644
index 0000000..2d7d8c0
--- /dev/null
+++ b/web/pw-frontend/planetwars-rs/src/types.rs
@@ -0,0 +1,45 @@
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Expedition {
+ pub id: u64,
+ pub ship_count: u64,
+ pub origin: String,
+ pub destination: String,
+ pub owner: u64,
+ pub turns_remaining: u64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Planet {
+ pub ship_count: u64,
+ pub x: f32,
+ pub y: f32,
+ pub owner: Option<u32>,
+ pub name: String,
+}
+
+use std::hash::{Hash, Hasher};
+use std::mem;
+
+impl Hash for Planet {
+ fn hash<H: Hasher>(&self, state: &mut H) {
+ unsafe {
+ let x: u32 = mem::transmute_copy(&self.x);
+ let y: u32 = mem::transmute_copy(&self.y);
+ state.write_u32(x);
+ state.write_u32(y);
+ }
+ }
+}
+
+impl PartialEq for Planet {
+ fn eq(&self, other: &Self) -> bool {
+ (self.x - other.x).abs() < 0.0001 && (self.y - other.y).abs() < 0.0001
+ }
+}
+impl Eq for Planet {}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct State {
+ pub planets: Vec<Planet>,
+ pub expeditions: Vec<Expedition>,
+}
diff --git a/web/pw-frontend/planetwars-rs/src/utils.rs b/web/pw-frontend/planetwars-rs/src/utils.rs
new file mode 100644
index 0000000..a903912
--- /dev/null
+++ b/web/pw-frontend/planetwars-rs/src/utils.rs
@@ -0,0 +1,65 @@
+pub fn set_panic_hook() {
+ // When the `console_error_panic_hook` feature is enabled, we can call the
+ // `set_panic_hook` function at least once during initialization, and then
+ // we will get better error messages if our code ever panics.
+ //
+ // For more details see
+ // https://github.com/rustwasm/console_error_panic_hook#readme
+ #[cfg(feature = "console_error_panic_hook")]
+ console_error_panic_hook::set_once();
+}
+
+/// this is total extra, so it the planet viewbox is like 100px wide, it will now be in total 110 pixels wide
+static VIEWBOX_SCALE: f32 = 0.1;
+
+pub static COLORS: [[f32; 3]; 10] = [
+ [0.5, 0.5, 0.5],
+ [1.0, 0.50, 0.0], // #FF8000
+ [0.0, 0.50, 1.0], // #0080ff
+ [1.0, 0.4, 0.58], // #FF6693
+ [0.24, 0.79, 0.33], // #3fcb55
+ [0.79, 0.76, 0.24], // #cbc33f
+ [0.81, 0.25, 0.91], // #cf40e9
+ [0.94, 0.32, 0.32], // #FF3F0D
+ [0.11, 0.93, 0.94], // #1beef0
+ [0.05, 0.77, 1.0], // #0DC5FF
+];
+
+use super::types;
+
+pub fn caclulate_viewbox(planets: &Vec<types::Planet>) -> Vec<f32> {
+ let mut iter = planets.iter();
+
+ let init = match iter.next() {
+ Some(p) => (p.x, p.y, p.x, p.y),
+ None => return vec![0.0, 0.0, 0.0, 0.0],
+ };
+ let (min_x, min_y, max_x, max_y) =
+ planets
+ .iter()
+ .fold(init, |(min_x, min_y, max_x, max_y), p| {
+ (
+ min_x.min(p.x),
+ min_y.min(p.y),
+ max_x.max(p.x),
+ max_y.max(p.y),
+ )
+ });
+
+ let (width, height) = (max_x - min_x, max_y - min_y);
+ let (dx, dy) = (
+ (VIEWBOX_SCALE * width).max(6.0),
+ (VIEWBOX_SCALE * height).max(6.0),
+ );
+
+ vec![min_x - dx / 2.0, min_y - dy / 2.0, width + dx, height + dy]
+}
+
+pub fn get_planets(planets: &Vec<types::Planet>, r: f32) -> Vec<f32> {
+ planets.iter().fold(Vec::new(), |mut cum, p| {
+ cum.push(p.x);
+ cum.push(p.y);
+ cum.push(r);
+ cum
+ })
+}
diff --git a/web/pw-frontend/public/favicon.ico b/web/pw-frontend/public/favicon.ico
new file mode 100644
index 0000000..628e6ed
--- /dev/null
+++ b/web/pw-frontend/public/favicon.ico
Binary files differ
diff --git a/web/pw-frontend/public/static/res/assets/earth.svg b/web/pw-frontend/public/static/res/assets/earth.svg
new file mode 100644
index 0000000..f1be561
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/earth.svg
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 272.17002 272.17002"
+ xml:space="preserve"
+ sodipodi:docname="earth-and-moon.svg"
+ width="272.17001"
+ height="272.17001"
+ inkscape:version="0.92.1 r15371"><metadata
+ id="metadata43"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs41" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1536"
+ inkscape:window-height="801"
+ id="namedview39"
+ showgrid="false"
+ inkscape:zoom="0.75616063"
+ inkscape:cx="-41.25547"
+ inkscape:cy="136.0845"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g6" />
+<g
+ id="g6"
+ transform="translate(-39.933,-19.966)">
+ <path
+ d="m 176.018,19.966 c -75.038,0 -136.085,61.047 -136.085,136.085 0,75.038 61.048,136.085 136.085,136.085 75.037,0 136.085,-61.048 136.085,-136.085 0,-75.037 -61.048,-136.085 -136.085,-136.085 z M 300.279,124.962 277.78,123.68 c -1.66,-0.094 -3.2,0.845 -3.878,2.359 -0.678,1.515 -0.351,3.291 0.824,4.464 l 7.51,7.504 c 1.412,1.412 2.143,3.288 2.058,5.283 -0.086,1.996 -0.976,3.804 -2.505,5.09 -3.653,3.072 -5.787,4.683 -6.991,5.52 -2.502,-2.6 -7.928,-9.22 -15.849,-19.869 l 2.317,-7.889 c 1.165,-3.967 -0.649,-8.237 -4.313,-10.152 L 225.465,99.532 c -0.963,-0.503 -2.088,-0.593 -3.117,-0.25 l -16.802,5.597 c -0.129,0.042 -0.271,0.019 -0.381,-0.066 l -7.203,-5.6 c -0.047,-0.037 -0.173,-0.135 -0.158,-0.354 0.009,-0.121 0.055,-0.199 0.103,-0.25 l 23.65,-9.68 c 1.453,-0.595 2.423,-1.983 2.482,-3.552 0.059,-1.569 -0.805,-3.026 -2.208,-3.728 l -16.519,-8.259 9.453,-12.493 c 3.28,-4.333 8.5,-6.826 13.911,-6.678 l 8.011,0.224 -3.093,2.857 c -1.586,1.465 -1.723,3.924 -0.31,5.557 l 10.305,11.899 c 0.718,0.829 1.745,1.327 2.84,1.377 1.098,0.053 2.164,-0.352 2.955,-1.111 l 13.522,-12.987 c 18.007,16.655 31.235,38.4 37.373,62.927 z m -43.405,49.354 c 0.429,1.609 1.81,2.784 3.467,2.949 l 6.865,0.687 0.089,0.135 -20.902,65.844 c -0.287,0.904 -1.117,1.512 -2.066,1.512 h -9.432 c -1.038,0 -1.933,-0.739 -2.128,-1.758 L 221.829,186.81 c -0.319,-1.66 -1.648,-2.94 -3.319,-3.198 l -20.329,-3.131 -14.311,-32.585 28.614,-13.285 35.524,6.459 z M 250.437,51.863 c 2.189,1.568 4.324,3.205 6.408,4.904 l -9.963,9.569 -5.012,-5.788 c -0.001,10e-4 8.366,-8.012 8.567,-8.685 z M 140.058,35.219 c 0.071,0.66 0.031,1.88 -0.928,2.976 -0.763,0.871 -1.347,1.883 -1.885,2.908 l -13.581,25.871 c -0.788,1.501 -2.323,2.461 -4.017,2.513 l -8.33,0.257 c -2.495,0.077 -5.043,0.729 -7.575,1.937 -0.93,0.444 -2.034,0.494 -3.027,0.141 -0.696,-0.249 -1.648,-0.803 -2.225,-2.028 0,0 -5.213,-11.354 -5.192,-11.451 13.297,-11.274 28.915,-19.887 46.027,-25.013 0.393,0.547 0.658,1.185 0.733,1.889 z m -69.355,48.02 -0.395,8.635 c -0.281,6.139 4.289,11.415 10.405,12.012 3.309,0.323 6.328,2.051 8.285,4.741 1.842,2.532 2.499,5.559 1.849,8.524 -0.361,1.649 -1.013,3.209 -1.938,4.637 l -11.877,18.334 c -4.927,7.604 -6.923,16.787 -5.766,25.668 l -23.317,-8.529 c -0.004,-0.404 -0.015,-0.806 -0.015,-1.211 -0.002,-27.027 8.421,-52.122 22.769,-72.811 z m 105.315,200.897 c -67.308,0 -122.657,-52.187 -127.709,-118.223 l 26.988,9.871 c 0,0 21.17,31.134 23.359,35.329 1.415,2.711 11.932,28.97 11.932,28.97 0.504,1.238 0.883,2.521 1.165,3.828 1.456,6.742 7.777,25.58 33.543,32.021 0.322,0.081 0.648,0.12 0.97,0.12 1.61,0 3.14,-0.974 3.761,-2.626 0.444,-1.182 0.225,-2.511 -0.427,-3.592 -18.101,-30 4.417,-52.269 5.378,-53.197 0.828,-0.791 1.278,-1.898 1.235,-3.042 l -1.19,-32.129 c -0.077,-2.088 -1.749,-3.765 -3.837,-3.849 l -28.746,-1.15 -19.364,-11.391 c -0.86,-0.506 -1.877,-0.673 -2.853,-0.466 l -20.188,4.25 c -2.283,-8.217 -0.95,-17.196 3.71,-24.389 l 11.877,-18.334 c 1.449,-2.237 2.472,-4.685 3.039,-7.276 1.128,-5.153 -0.036,-10.599 -3.195,-14.941 -3.294,-4.528 -8.375,-7.44 -13.944,-7.993 -1.876,-0.186 -3.312,-1.741 -3.226,-3.624 l 0.918,-20.039 c 2.462,-2.841 5.053,-5.568 7.752,-8.182 l 4.286,9.117 c 1.364,2.898 3.771,5.084 6.775,6.157 1.301,0.464 2.669,0.694 4.034,0.694 1.766,0 3.526,-0.386 5.126,-1.149 1.525,-0.728 2.999,-1.118 4.378,-1.161 l 8.33,-0.257 c 4.577,-0.141 8.724,-2.736 10.852,-6.791 l 13.39,-25.507 c 0.383,-0.73 0.801,-1.445 1.318,-2.087 1.974,-2.445 2.898,-5.55 2.557,-8.732 -0.117,-1.097 -0.393,-2.145 -0.783,-3.138 9.256,-2.134 18.893,-3.263 28.788,-3.263 24.323,0 47.084,6.816 66.474,18.637 L 228.9,46.223 c -8.01,-0.212 -15.678,3.458 -20.514,9.848 l -12.284,16.233 c -0.431,0.569 -0.751,1.229 -0.847,1.937 -0.241,1.773 0.678,3.404 2.174,4.153 l 12.942,6.471 c 0,0 -16.164,6.628 -16.313,6.712 -2.958,1.681 -4.652,4.992 -4.175,8.494 0.305,2.239 1.59,4.231 3.374,5.618 l 6.997,5.44 c 2.224,1.731 5.148,2.233 7.821,1.34 l 15.189,-5.06 29.983,15.671 c 0.293,0.153 0.436,0.491 0.343,0.808 0,0 -2.673,9.233 -2.716,9.569 l -38.208,-6.947 c -0.812,-0.148 -1.65,-0.04 -2.399,0.307 l -33.319,15.469 c -1.974,0.917 -2.853,3.244 -1.978,5.236 l 16.769,38.183 c 0.55,1.252 1.702,2.137 3.054,2.345 l 19.712,3.036 10.405,54.107 c 0.919,4.778 5.119,8.247 9.985,8.247 h 9.432 c 4.45,0 8.344,-2.85 9.691,-7.091 l 20.902,-65.844 c 0.856,-2.696 0.263,-5.63 -1.642,-7.811 -1.398,-1.601 -3.423,-2.519 -5.538,-2.731 l -3.849,-0.385 -6.475,-24.283 c 13.195,17.299 14.967,17.315 16.972,17.315 1.756,0 3.579,-0.564 12.55,-8.109 3.219,-2.707 5.168,-6.668 5.349,-10.87 0.181,-4.2 -1.421,-8.313 -4.396,-11.285 l -0.084,-0.084 14.228,0.811 c 1.356,7.456 2.068,15.134 2.068,22.975 0,70.629 -57.459,128.088 -128.085,128.088 z M 138.247,264.96 c -13.574,-6.561 -17.636,-18.63 -18.792,-23.374 -0.289,-1.185 -1.596,-4.859 -1.596,-4.859 l -9.814,-24.089 c -0.662,-1.804 -2.995,-6.804 -4.906,-9.513 l -18.096,-27.144 15.312,-3.224 18.892,11.113 c 0.569,0.334 1.211,0.523 1.87,0.55 l 26.048,1.042 0.992,26.77 c -4.777,5.391 -20.547,25.993 -9.91,52.728 z"
+ id="path2"
+ inkscape:connector-curvature="0" />
+
+</g>
+<g
+ id="g8"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g10"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g12"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g14"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g16"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g18"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g20"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g22"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g24"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g26"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g28"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g30"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g32"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g34"
+ transform="translate(-39.933,-19.966)">
+</g>
+<g
+ id="g36"
+ transform="translate(-39.933,-19.966)">
+</g>
+</svg> \ No newline at end of file
diff --git a/web/pw-frontend/public/static/res/assets/font.png b/web/pw-frontend/public/static/res/assets/font.png
new file mode 100644
index 0000000..1724e0d
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/font.png
Binary files differ
diff --git a/web/pw-frontend/public/static/res/assets/jupiter.svg b/web/pw-frontend/public/static/res/assets/jupiter.svg
new file mode 100644
index 0000000..e5fcd0f
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/jupiter.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 493.0475 493.16002"
+ xml:space="preserve"
+ sodipodi:docname="jupiter-with-satellite.svg"
+ width="493.04749"
+ height="493.16"
+ inkscape:version="0.92.1 r15371"><metadata
+ id="metadata45"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs43" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1536"
+ inkscape:window-height="801"
+ id="namedview41"
+ showgrid="false"
+ inkscape:zoom="0.38562218"
+ inkscape:cx="-121.54471"
+ inkscape:cy="246.58001"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g8" />
+<g
+ id="g8"
+ transform="translate(-118.9515,-59.419)">
+ <path
+ d="M 539.776,131.64 C 493.205,85.067 431.282,59.419 365.417,59.419 c -65.865,0 -127.785,25.649 -174.359,72.221 -96.142,96.142 -96.142,252.575 0,348.718 46.573,46.573 108.494,72.221 174.359,72.221 65.865,0 127.786,-25.648 174.359,-72.221 46.574,-46.573 72.223,-108.494 72.223,-174.359 0,-65.865 -25.647,-127.786 -72.223,-174.359 z M 375.169,405.983 c -12.849,11.452 -28.27,18.565 -40.247,18.565 -3.901,0 -9.259,-0.794 -12.626,-4.57 -3.823,-4.287 -4.311,-11.821 -1.337,-20.669 3.484,-10.375 11.047,-21.12 21.292,-30.252 12.849,-11.452 28.27,-18.565 40.247,-18.565 3.901,0 9.259,0.794 12.626,4.568 9.699,10.882 -2.733,35.57 -19.955,50.923 z m -59.521,27.38 c 5.126,3.72 11.674,5.68 19.274,5.68 15.617,0 34.268,-8.313 49.89,-22.24 23.566,-21.006 33.496,-48.135 25.096,-65.431 0.069,-0.069 0.138,-0.134 0.205,-0.203 l 0.245,-0.245 c 56.354,-56.355 104.89,-119.767 140.932,-183.964 9.652,12.849 17.879,26.565 24.597,40.957 -35.262,61.327 -80.521,119.83 -134.614,173.92 -54.098,54.099 -112.607,99.362 -173.935,134.623 -14.394,-6.719 -28.111,-14.945 -40.961,-24.599 30.178,-16.937 60.136,-36.571 89.271,-58.498 z M 466.754,97.09 c -35.38,61.735 -80.828,120.58 -135.241,174.991 -54.389,54.389 -113.209,99.824 -174.915,135.197 -5.757,-11.897 -10.44,-24.186 -14.05,-36.725 56.493,-34.46 110.419,-77.182 160.338,-127.099 49.957,-49.957 92.703,-103.921 127.17,-160.452 12.628,3.642 24.897,8.353 36.698,14.088 z m -265.444,44.8 c 43.835,-43.835 102.116,-67.977 164.109,-67.977 7.242,0 14.43,0.342 21.555,0.995 -31.234,48.087 -68.655,94.211 -111.341,137.176 -2.821,2.839 -2.807,7.429 0.034,10.25 1.413,1.404 3.262,2.107 5.108,2.107 1.863,0 3.725,-0.714 5.142,-2.14 44.565,-44.857 84.642,-94.977 116.958,-145.384 4.187,0.676 8.346,1.459 12.472,2.359 -33.458,54.163 -74.692,105.911 -122.709,153.927 -47.981,47.981 -99.69,89.192 -153.82,122.642 -16.314,-74.713 4.517,-155.981 62.492,-213.955 z m -37.988,278.24 c 62.996,-36.051 123.004,-82.362 178.439,-137.797 55.457,-55.457 101.781,-115.487 137.837,-178.506 18.062,10.238 34.849,22.985 49.928,38.064 4.164,4.164 8.148,8.46 11.953,12.874 -35.656,64.768 -84.421,128.944 -141.318,185.854 -4.865,-3.019 -10.834,-4.622 -17.665,-4.622 -15.617,0 -34.269,8.313 -49.892,22.24 -12.097,10.783 -21.113,23.731 -25.389,36.457 -3.457,10.294 -3.575,19.665 -0.495,27.248 -30.198,22.709 -61.277,42.902 -92.54,60.113 -4.414,-3.803 -8.708,-7.786 -12.872,-11.95 -15.228,-15.229 -27.882,-32.071 -37.986,-49.975 z m 366.205,49.976 c -43.835,43.835 -102.116,67.977 -164.109,67.977 -15.161,0 -30.098,-1.453 -44.659,-4.276 18.864,-11.87 37.661,-24.833 55.998,-38.625 3.2,-2.406 3.841,-6.951 1.435,-10.149 -2.406,-3.2 -6.952,-3.84 -10.149,-1.435 -19.855,14.934 -46.393,32.45 -67.363,45.368 -5.606,-1.62 -11.142,-3.448 -16.596,-5.487 58.968,-35.049 115.237,-79.19 167.435,-131.388 52.192,-52.19 96.333,-108.454 131.381,-167.423 2.049,5.485 3.887,11.051 5.512,16.69 -23.941,38.799 -55.866,83.002 -87.51,118.944 -2.645,3.004 -2.356,7.585 0.649,10.228 1.379,1.212 3.086,1.808 4.787,1.808 2.009,0 4.012,-0.832 5.443,-2.459 30.673,-34.837 58.031,-71.308 81.446,-108.536 2.821,14.559 4.276,29.493 4.276,44.652 10e-4,61.995 -24.139,120.276 -67.976,164.111 z"
+ id="path2"
+ inkscape:connector-curvature="0" />
+
+ <path
+ d="m 337.815,406.147 c -4.829,-5.418 0.615,-18.151 12.159,-28.441 11.544,-10.29 24.817,-14.24 29.646,-8.822 4.829,5.417 -0.615,18.151 -12.159,28.441 -11.545,10.29 -24.817,14.24 -29.646,8.822 z"
+ id="path6"
+ inkscape:connector-curvature="0" />
+</g>
+<g
+ id="g10"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g12"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g14"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g16"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g18"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g20"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g22"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g24"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g26"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g28"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g30"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g32"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g34"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g36"
+ transform="translate(-118.9515,-59.419)">
+</g>
+<g
+ id="g38"
+ transform="translate(-118.9515,-59.419)">
+</g>
+</svg> \ No newline at end of file
diff --git a/web/pw-frontend/public/static/res/assets/leaves.jpg b/web/pw-frontend/public/static/res/assets/leaves.jpg
new file mode 100644
index 0000000..529b94e
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/leaves.jpg
Binary files differ
diff --git a/web/pw-frontend/public/static/res/assets/mars.svg b/web/pw-frontend/public/static/res/assets/mars.svg
new file mode 100644
index 0000000..d92851d
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/mars.svg
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 272.17 272.17"
+ xml:space="preserve"
+ sodipodi:docname="mars-with-satellite.svg"
+ width="272.17001"
+ height="272.17001"
+ inkscape:version="0.92.1 r15371"><metadata
+ id="metadata43"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs41" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1536"
+ inkscape:window-height="801"
+ id="namedview39"
+ showgrid="false"
+ inkscape:zoom="0.74916113"
+ inkscape:cx="-15.912826"
+ inkscape:cy="157.50949"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g6" />
+<g
+ id="g6"
+ transform="translate(-14.578,-42.849)">
+ <path
+ d="m 150.663,42.849 c -75.037,0 -136.085,61.047 -136.085,136.085 0,75.038 61.048,136.085 136.085,136.085 75.037,0 136.085,-61.048 136.085,-136.085 0,-75.037 -61.048,-136.085 -136.085,-136.085 z m 94.519,49.737 C 215.47,98.072 194.155,95.67 181.775,85.417 166.119,72.442 142.824,62.802 112.41,56.684 c 12.085,-3.79 24.935,-5.835 38.253,-5.835 37.388,0 71.082,16.104 94.519,41.737 z M 49.864,99.992 c 7.659,4.116 14.848,7.336 20.496,9.16 l 1.405,0.455 c 11.474,3.718 26.173,8.48 38.353,8.48 9.974,0 18.259,-3.194 21.701,-12.769 1.564,-4.354 1.492,-8.272 -0.214,-11.644 -3.639,-7.188 -13.464,-10.107 -25.902,-13.801 -2.913,-0.865 -5.924,-1.76 -8.986,-2.75 -4.31,-1.395 -10.33,-3.021 -17.181,-4.657 5.813,-3.896 11.958,-7.332 18.388,-10.249 35.034,5.547 62.249,15.687 78.747,29.361 9.52,7.883 23.149,11.833 40.721,11.833 9.978,0 21.246,-1.291 33.734,-3.842 3.017,3.811 5.819,7.799 8.394,11.942 -7.815,0.09 -15.483,0.207 -23.256,0.357 -32.772,0.63 -51.646,9.594 -69.899,18.262 -16.304,7.742 -31.704,15.056 -56.158,15.056 -19.363,0 -45.543,-6.853 -75.875,-19.812 4.196,-9.082 9.42,-17.595 15.532,-25.382 z M 71.002,78.711 c 9.393,2.083 17.789,4.256 23.251,6.023 3.154,1.021 6.213,1.929 9.171,2.808 9.751,2.896 18.96,5.631 21.043,9.745 0.436,0.861 0.892,2.351 -0.177,5.326 -4.637,12.897 -27.272,6.767 -50.06,-0.616 L 72.82,101.54 C 67.967,99.972 61.794,97.234 55.123,93.723 59.98,88.283 65.292,83.259 71.002,78.711 Z M 23.02,168.333 c 35.942,5.647 57.003,15.954 59.452,29.178 0.284,1.535 -0.071,2.922 -1.119,4.364 -2.927,4.03 -13.653,11.492 -52.407,16.946 -4.126,-12.559 -6.367,-25.966 -6.367,-39.887 -0.001,-3.57 0.153,-7.104 0.441,-10.601 z m 23.365,84.896 c 22.439,-3.993 52.181,-14.162 77.357,-39.338 42.857,-42.857 53.898,-42.857 78.089,-42.857 9.532,0 21.889,5.026 34.971,10.348 13.57,5.52 27.555,11.194 41.059,12.592 -0.781,6.647 -2.069,13.141 -3.832,19.44 -9.441,0.149 -18.893,-1.263 -28.848,-2.765 -23.035,-3.475 -49.144,-7.414 -80.863,8.749 -36.661,18.676 -56.554,50.852 -67.026,75.957 -20.42,-9.398 -37.963,-24.01 -50.907,-42.126 z m 68.931,48.827 c -3.62,-1.041 -7.173,-2.242 -10.656,-3.586 9.935,-23.833 28.755,-54.35 63.288,-71.943 29.436,-14.998 53.129,-11.422 76.039,-7.966 9.394,1.417 18.359,2.748 27.51,2.855 -2.915,8.266 -6.65,16.149 -11.117,23.543 -29.036,-6.441 -59.028,-1.667 -89.203,14.214 -24.231,12.752 -43.497,30.024 -55.861,42.883 z m 35.347,4.963 c -9.027,0 -17.837,-0.944 -26.341,-2.729 11.947,-11.958 29.304,-26.84 50.581,-38.037 27.413,-14.427 54.562,-19.154 80.787,-14.093 -23.175,33.139 -61.609,54.859 -105.027,54.859 z M 278.55,186.003 c -12.347,-1.311 -25.739,-6.745 -38.734,-12.031 -13.827,-5.625 -26.889,-10.938 -37.985,-10.938 -27.418,0 -40.278,1.733 -83.745,45.2 -25.043,25.043 -54.972,34.354 -76.548,37.691 -3.79,-6.151 -7.074,-12.644 -9.795,-19.422 31.269,-4.529 49.643,-11.06 56.083,-19.926 2.324,-3.201 3.193,-6.839 2.513,-10.521 -3.943,-21.297 -37.42,-31.136 -66.412,-35.676 1.399,-9.598 3.865,-18.853 7.275,-27.643 31.702,13.558 58.277,20.448 79.003,20.448 26.258,0 42.448,-7.689 59.59,-15.83 17.488,-8.305 35.571,-16.893 66.622,-17.49 9.222,-0.177 18.305,-0.308 27.659,-0.402 9.362,17.782 14.672,38.016 14.672,59.47 0,2.373 -0.07,4.729 -0.198,7.07 z"
+ id="path2"
+ inkscape:connector-curvature="0" />
+
+</g>
+<g
+ id="g8"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g10"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g12"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g14"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g16"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g18"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g20"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g22"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g24"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g26"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g28"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g30"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g32"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g34"
+ transform="translate(-14.578,-42.849)">
+</g>
+<g
+ id="g36"
+ transform="translate(-14.578,-42.849)">
+</g>
+</svg> \ No newline at end of file
diff --git a/web/pw-frontend/public/static/res/assets/neptune.svg b/web/pw-frontend/public/static/res/assets/neptune.svg
new file mode 100644
index 0000000..995d440
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/neptune.svg
@@ -0,0 +1,186 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 272.044 272.17001"
+ xml:space="preserve"
+ sodipodi:docname="neptune-with-satellite.svg"
+ width="272.04401"
+ height="272.17001"
+ inkscape:version="0.92.1 r15371"><metadata
+ id="metadata79"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs77" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1536"
+ inkscape:window-height="801"
+ id="namedview75"
+ showgrid="false"
+ inkscape:zoom="0.75655574"
+ inkscape:cx="-13.59678"
+ inkscape:cy="155.969"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g42" />
+<g
+ id="g42"
+ transform="translate(-12.275,-39.769)">
+ <path
+ d="m 148.297,39.769 c -36.35,0 -70.524,14.155 -96.227,39.858 -53.06,53.06 -53.06,139.394 0,192.454 25.703,25.703 59.877,39.858 96.227,39.858 36.35,0 70.524,-14.155 96.227,-39.858 53.06,-53.06 53.06,-139.394 0,-192.454 C 218.821,53.924 184.647,39.769 148.297,39.769 Z M 271.474,165.86 c -8.235,-5.915 -18.998,-2.783 -29.532,8.588 -8.691,9.382 -15.31,21.945 -19.67,37.341 -0.602,2.125 0.633,4.336 2.759,4.938 2.127,0.601 4.336,-0.634 4.938,-2.759 4.013,-14.169 10.016,-25.637 17.842,-34.084 3.54,-3.822 12.475,-12.208 18.997,-7.527 8.074,5.799 7.154,21.44 6.385,27.895 -1.709,14.318 -7.573,26.757 -15.687,33.274 -2.358,1.895 -5.645,3.751 -7.902,1.84 -2.635,-2.23 -3.822,-7.371 -3.344,-14.476 0.148,-2.204 -1.519,-4.111 -3.723,-4.26 -2.226,-0.138 -4.111,1.519 -4.26,3.723 -0.672,9.986 1.399,17.091 6.158,21.119 2.164,1.832 4.646,2.741 7.302,2.741 1.832,0 3.748,-0.447 5.699,-1.306 -5.142,8.369 -11.327,16.273 -18.569,23.516 -1.59,1.59 -3.216,3.13 -4.873,4.625 -3.667,-4.799 -6.198,-12.047 -7.225,-20.88 -0.256,-2.194 -2.241,-3.763 -4.437,-3.511 -2.194,0.255 -3.766,2.241 -3.511,4.436 1.23,10.565 4.34,19.14 9.059,25.132 -16.61,13.223 -36.039,21.995 -56.813,25.702 5.189,-6.479 10.531,-16.472 12.156,-31.099 0.244,-2.196 -1.338,-4.173 -3.534,-4.417 -2.186,-0.244 -4.173,1.338 -4.417,3.534 -2.288,20.594 -12.727,30.327 -17.241,33.631 -3.223,0.241 -6.469,0.364 -9.735,0.364 -34.213,0 -66.378,-13.323 -90.57,-37.516 -33.004,-33.004 -44.189,-79.685 -33.57,-121.967 11.195,1.303 26.82,4.299 43.035,11.16 0.509,0.215 1.037,0.317 1.557,0.317 1.559,0 3.04,-0.917 3.686,-2.442 0.861,-2.034 -0.09,-4.381 -2.125,-5.242 C 53.868,141.293 38.021,138.111 26.373,136.664 32.383,117.86 42.832,100.179 57.727,85.285 68.941,74.071 81.87,65.197 95.92,58.898 c -0.781,0.832 -1.538,1.704 -2.252,2.627 -5.132,6.638 -6.665,13.818 -4.432,20.764 0.676,2.103 2.932,3.261 5.032,2.584 2.104,-0.676 3.26,-2.929 2.584,-5.032 -3.119,-9.701 6.766,-18.895 16.179,-23.821 8.789,-4.599 19.379,-7.341 31.542,-8.193 1.239,-0.035 2.48,-0.058 3.724,-0.058 12.251,0 24.237,1.717 35.691,5.022 2.36,0.884 4.63,1.872 6.793,2.972 5.949,3.025 9.001,6.12 9.604,9.737 0.85,5.096 -4.18,9.225 -6.381,10.763 -11.526,8.055 -26.655,7.89 -37.317,6.332 -2.189,-0.324 -4.217,1.194 -4.536,3.38 -0.319,2.186 1.194,4.217 3.38,4.536 3.699,0.54 7.881,0.924 12.299,0.924 10.028,0 21.264,-1.981 30.757,-8.614 7.284,-5.089 10.815,-11.882 9.689,-18.635 -0.103,-0.615 -0.243,-1.208 -0.409,-1.783 8.589,4.523 16.694,10.047 24.165,16.52 -8.145,14.582 -23.589,20.575 -35.122,23.032 -2.16,0.46 -3.538,2.585 -3.078,4.746 0.4,1.88 2.061,3.167 3.908,3.167 0.276,0 0.557,-0.029 0.838,-0.089 12.722,-2.711 29.678,-9.305 39.469,-25.296 0.273,0.269 0.551,0.531 0.823,0.803 23.661,23.662 36.104,54.354 37.344,85.415 -1.287,-1.834 -2.844,-3.479 -4.74,-4.841 z"
+ id="path2"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 137.556,85.235 c 0.603,0.324 1.251,0.478 1.891,0.478 1.425,0 2.804,-0.764 3.526,-2.106 1.046,-1.946 0.317,-4.371 -1.628,-5.417 -1.062,-0.571 -6.264,-3.626 -4.383,-7.716 1.226,-2.667 4.829,-4.64 11.012,-6.032 6.876,-1.548 17.445,-1.943 24.605,2.034 1.188,0.66 1.884,1.448 1.862,2.11 -0.027,0.803 -0.928,2.024 -2.877,2.94 -2,0.94 -2.858,3.322 -1.919,5.322 0.94,1.999 3.322,2.859 5.321,1.918 4.54,-2.133 7.332,-5.838 7.47,-9.91 0.128,-3.778 -2.05,-7.195 -5.973,-9.374 -9.12,-5.066 -21.604,-4.792 -30.247,-2.845 -5.602,1.261 -13.409,3.721 -16.523,10.494 -3.061,6.654 0.099,13.93 7.863,18.104 z"
+ id="path4"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 100.492,96.756 c 2.997,2.273 6.354,4.294 10.263,6.181 0.561,0.271 1.152,0.398 1.735,0.398 1.487,0 2.916,-0.833 3.605,-2.263 0.96,-1.99 0.125,-4.381 -1.864,-5.341 -3.424,-1.652 -6.337,-3.402 -8.906,-5.35 -1.76,-1.335 -4.27,-0.991 -5.604,0.77 -1.334,1.762 -0.989,4.271 0.771,5.605 z"
+ id="path6"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 179.091,111.757 c 0.047,10e-4 4.807,-0.026 7.63,-0.253 2.202,-0.177 3.844,-2.106 3.667,-4.308 -0.177,-2.203 -2.137,-3.843 -4.308,-3.667 -4.037,0.325 -6.639,0.235 -6.68,0.233 -2.181,-0.089 -4.063,1.634 -4.149,3.84 -0.086,2.208 1.633,4.068 3.84,4.155 z"
+ id="path8"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 201.867,133.619 c 0.336,0 9.337,-2.448 13.524,-3.81 2.101,-0.683 3.25,-2.94 2.566,-5.041 -0.684,-2.101 -2.938,-3.25 -5.041,-2.567 -4.04,1.314 -8.099,2.507 -12.062,3.547 -2.138,0.561 -3.415,2.748 -2.854,4.884 0.472,1.798 2.092,2.987 3.867,2.987 z"
+ id="path10"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 187.617,128.737 c -46.298,8.716 -77.082,-4.029 -94.75,-16.257 -1.817,-1.257 -4.309,-0.804 -5.565,1.013 -1.257,1.816 -0.804,4.308 1.013,5.565 14.605,10.108 37.502,20.561 69.73,20.561 9.526,0 19.871,-0.914 31.054,-3.02 2.171,-0.409 3.6,-2.5 3.19,-4.671 -0.41,-2.172 -2.508,-3.602 -4.672,-3.191 z"
+ id="path12"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 77.141,110.083 c 0.771,0.723 1.753,1.081 2.733,1.081 1.068,0 2.133,-0.425 2.92,-1.266 1.51,-1.612 1.427,-4.144 -0.185,-5.654 -3.733,-3.497 -5.615,-5.951 -5.675,-6.029 -1.327,-1.763 -3.831,-2.119 -5.596,-0.795 -1.768,1.326 -2.125,3.833 -0.8,5.6 0.092,0.121 2.267,3.001 6.603,7.063 z"
+ id="path14"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 41.149,171.992 c -1.633,-0.278 -3.294,-0.535 -4.938,-0.763 -2.188,-0.302 -4.208,1.224 -4.512,3.411 -0.304,2.188 1.223,4.208 3.412,4.513 1.563,0.217 5.149,0.783 5.373,0.783 1.915,0 3.607,-1.379 3.938,-3.33 0.37,-2.178 -1.095,-4.244 -3.273,-4.614 z"
+ id="path16"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 53.789,182.977 c 13.524,3.751 45.748,15.723 52.875,45.778 0.436,1.839 2.077,3.078 3.889,3.078 0.306,0 0.616,-0.035 0.926,-0.109 2.149,-0.51 3.479,-2.666 2.969,-4.815 -3.121,-13.162 -10.671,-24.582 -22.441,-33.944 -9.71,-7.724 -22.186,-13.843 -36.079,-17.697 -2.125,-0.589 -4.333,0.656 -4.924,2.785 -0.59,2.129 0.656,4.333 2.785,4.924 z"
+ id="path18"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 110.315,242.16 c -2.004,-0.927 -4.382,-0.057 -5.311,1.948 -1.013,2.187 -2.39,4.152 -4.093,5.843 -1.568,1.557 -1.577,4.089 -0.02,5.657 0.782,0.788 1.81,1.182 2.838,1.182 1.019,0 2.039,-0.387 2.818,-1.162 2.378,-2.362 4.301,-5.106 5.715,-8.157 0.929,-2.005 0.057,-4.383 -1.947,-5.311 z"
+ id="path20"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 90.255,255.468 c -8.356,1.642 -17.778,-1.182 -24.588,-7.365 -12.756,-11.582 -12.75,-24.255 -8.729,-29.174 3.817,-4.669 8.713,-5.013 12.147,-4.479 6.578,1.022 13.085,6.143 15.473,12.175 0.813,2.054 3.139,3.062 5.191,2.247 2.054,-0.813 3.06,-3.137 2.247,-5.191 -3.473,-8.774 -12.187,-15.66 -21.683,-17.136 -7.773,-1.208 -14.724,1.392 -19.57,7.321 -10.192,12.469 -0.554,30.991 9.545,40.16 6.995,6.351 16.232,9.895 25.219,9.894 2.12,0 4.228,-0.197 6.288,-0.602 2.168,-0.426 3.58,-2.528 3.155,-4.696 -0.425,-2.167 -2.526,-3.58 -4.695,-3.154 z"
+ id="path22"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 82.824,236.937 c -2.256,1.781 -4.846,1.359 -6.622,0.692 -3.652,-1.372 -6.874,-4.924 -7.496,-8.263 -0.404,-2.171 -2.489,-3.603 -4.665,-3.2 -2.172,0.405 -3.604,2.493 -3.2,4.665 1.129,6.061 6.289,11.936 12.547,14.287 1.924,0.723 3.86,1.08 5.739,1.08 3.157,0 6.152,-1.008 8.651,-2.98 1.734,-1.368 2.031,-3.883 0.663,-5.618 -1.367,-1.735 -3.883,-2.032 -5.617,-0.663 z"
+ id="path24"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 109.058,172.892 c -1.629,-1.493 -4.159,-1.385 -5.652,0.243 -1.494,1.628 -1.385,4.158 0.243,5.652 10.774,9.886 29.278,29.985 32.162,53.524 1.465,11.963 -1.974,23.543 -9.683,32.606 -3.238,3.808 -6.859,6.886 -10.763,9.15 -1.911,1.108 -2.562,3.556 -1.453,5.467 0.742,1.279 2.084,1.994 3.464,1.994 0.681,0 1.372,-0.174 2.003,-0.541 4.693,-2.722 9.014,-6.385 12.843,-10.887 9.176,-10.787 13.271,-24.552 11.53,-38.762 -3.196,-26.086 -23.109,-47.815 -34.694,-58.446 z"
+ id="path26"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 94.011,170.834 c 0.716,0.531 1.551,0.788 2.379,0.788 1.223,0 2.431,-0.56 3.216,-1.618 1.316,-1.774 0.944,-4.28 -0.831,-5.595 -1.901,-1.41 -3.876,-2.792 -5.871,-4.108 -1.844,-1.217 -4.325,-0.708 -5.542,1.135 -1.217,1.844 -0.708,4.325 1.135,5.542 1.874,1.235 3.729,2.533 5.514,3.856 z"
+ id="path28"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 151.585,173.576 c -1.26,-1.815 -3.749,-2.266 -5.564,-1.009 -1.815,1.257 -2.268,3.749 -1.012,5.564 0.312,0.451 30.974,45.477 13.988,80.185 -0.971,1.984 -0.149,4.38 1.835,5.351 0.565,0.277 1.165,0.408 1.755,0.408 1.479,0 2.901,-0.824 3.596,-2.243 7.945,-16.236 7.9,-36.706 -0.13,-59.195 -5.964,-16.7 -14.125,-28.565 -14.468,-29.061 z"
+ id="path30"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 257.729,197.605 c 2.204,-1.072 3.393,3.135 3.063,8.028 -0.148,2.204 1.518,4.112 3.722,4.26 0.092,0.006 0.183,0.009 0.273,0.009 2.086,0 3.845,-1.618 3.987,-3.73 0.482,-7.146 -1.438,-12.739 -5.267,-15.344 -2.692,-1.832 -5.965,-1.991 -9.21,-0.45 -1.996,0.948 -2.845,3.334 -1.897,5.33 0.948,1.996 3.344,2.863 5.329,1.897 z"
+ id="path32"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 219.052,227.503 c -0.246,1.928 -0.436,3.879 -0.563,5.801 -0.147,2.204 1.521,4.11 3.725,4.257 0.091,0.006 0.181,0.009 0.271,0.009 2.088,0 3.846,-1.62 3.987,-3.734 0.117,-1.762 0.291,-3.552 0.517,-5.322 0.279,-2.191 -1.271,-4.194 -3.463,-4.473 -2.187,-0.282 -4.195,1.272 -4.474,3.462 z"
+ id="path34"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 215.557,170.546 c -1.205,1.852 -0.681,4.33 1.171,5.535 0.674,0.438 1.43,0.647 2.178,0.647 1.309,0 2.59,-0.641 3.356,-1.819 11.387,-17.501 23.308,-27.803 36.441,-31.495 2.127,-0.598 3.366,-2.806 2.769,-4.933 -0.598,-2.126 -2.809,-3.368 -4.933,-2.768 -15.084,4.24 -28.491,15.634 -40.982,34.833 z"
+ id="path36"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 206.98,213.368 c 0.409,-2.171 -1.019,-4.263 -3.189,-4.672 -2.163,-0.412 -4.263,1.018 -4.672,3.189 -6.977,36.974 4.454,68.118 4.943,69.425 0.603,1.606 2.126,2.596 3.745,2.596 0.466,0 0.939,-0.082 1.4,-0.254 2.068,-0.773 3.118,-3.077 2.348,-5.146 -0.112,-0.3 -11.122,-30.441 -4.575,-65.138 z"
+ id="path38"
+ inkscape:connector-curvature="0" />
+
+</g>
+<g
+ id="g44"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g46"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g48"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g50"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g52"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g54"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g56"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g58"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g60"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g62"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g64"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g66"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g68"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g70"
+ transform="translate(-12.275,-39.769)">
+</g>
+<g
+ id="g72"
+ transform="translate(-12.275,-39.769)">
+</g>
+</svg> \ No newline at end of file
diff --git a/web/pw-frontend/public/static/res/assets/ship.svg b/web/pw-frontend/public/static/res/assets/ship.svg
new file mode 100644
index 0000000..ee202ff
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/ship.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="100mm"
+ height="100mm"
+ viewBox="0 0 100 99.999999"
+ version="1.1"
+ id="svg8"
+ sodipodi:docname="ship.svg"
+ inkscape:version="0.92.4 (f8dce91, 2019-08-02)">
+ <defs
+ id="defs2" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.0993438"
+ inkscape:cx="676.08563"
+ inkscape:cy="474.10966"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0"
+ inkscape:window-width="2560"
+ inkscape:window-height="1417"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="0"
+ gridtolerance="10">
+ <inkscape:grid
+ type="xygrid"
+ id="grid894" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(229.05372,-117.27915)">
+ <ellipse
+ ry="79.47506"
+ rx="48.672089"
+ cy="39.779182"
+ cx="439.0813"
+ id="ellipse888"
+ style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:none;stroke-width:6.61458302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:24.99999809;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="M 800 -448.82031 C 800 -448.82031 640 -342.04689 640 -92.046875 C 640 -16.101728 661.67774 51.924976 695.88672 97.775391 C 640.96482 152.90966 593.39426 234.74166 610 267.95312 C 620.00003 287.95314 720.00001 297.95311 730 287.95312 C 751.8315 266.12161 757.39662 198.03742 758.92773 149.62305 C 772.03579 155.04778 785.80002 157.95312 800 157.95312 C 814.19998 157.95312 827.96422 155.04778 841.07227 149.62305 C 842.60338 198.03742 848.1685 266.12161 870 287.95312 C 879.99999 297.95311 979.99997 287.95314 990 267.95312 C 1006.6057 234.74166 959.03518 152.90966 904.11328 97.775391 C 938.32226 51.924976 959.99999 -16.101728 960 -92.046875 C 960.00002 -342.04689 800 -448.82031 800 -448.82031 z M 800 -352.04688 C 800 -352.04688 908.96486 -279.33252 908.96484 -109.07617 C 908.96484 -15.046189 860.17918 61.179688 800 61.179688 C 739.82082 61.179688 691.03515 -15.046189 691.03516 -109.07617 C 691.03516 -279.33252 800 -352.04687 800 -352.04688 z "
+ transform="matrix(0.26458333,0,0,0.26458333,-229.05372,117.27915)"
+ id="path4600" />
+ </g>
+</svg>
diff --git a/web/pw-frontend/public/static/res/assets/uranus.svg b/web/pw-frontend/public/static/res/assets/uranus.svg
new file mode 100644
index 0000000..fb192a4
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/uranus.svg
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 272.04324 272.17001"
+ xml:space="preserve"
+ sodipodi:docname="uranus-with-satellite.svg"
+ inkscape:version="0.92.1 r15371"
+ width="272.04324"
+ height="272.17001"><metadata
+ id="metadata61"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs59" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1536"
+ inkscape:window-height="801"
+ id="namedview57"
+ showgrid="false"
+ inkscape:zoom="0.69664401"
+ inkscape:cx="-68.159453"
+ inkscape:cy="136.0855"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Capa_1" />
+<g
+ id="g24"
+ transform="translate(-66.724,-33.299)">
+ <path
+ d="M 298.973,73.157 C 273.271,47.454 239.096,33.299 202.746,33.299 c -36.35,0 -70.523,14.155 -96.227,39.858 -53.06,53.06 -53.06,139.394 0,192.454 25.703,25.703 59.877,39.858 96.227,39.858 36.35,0 70.524,-14.155 96.227,-39.858 53.059,-53.061 53.059,-139.395 0,-192.454 z m -5.657,186.796 c -11.681,11.681 -25.225,20.819 -39.956,27.156 17.744,-11.698 34.215,-26.208 48.558,-42.92 1.438,-1.676 1.246,-4.202 -0.43,-5.64 -1.678,-1.44 -4.202,-1.247 -5.641,0.43 -20.23,23.57 -48.084,44.664 -75.601,57.302 -5.753,0.781 -11.595,1.188 -17.501,1.188 -4.154,0 -8.276,-0.2 -12.359,-0.589 17.939,-6.343 34.995,-14.887 50.872,-25.52 1.836,-1.229 2.327,-3.714 1.098,-5.549 -1.229,-1.835 -3.712,-2.328 -5.549,-1.098 -19.625,13.143 -41.113,22.987 -63.873,29.279 -5.029,-1.193 -9.966,-2.688 -14.791,-4.477 4.071,-0.974 8.123,-2.079 12.128,-3.313 2.111,-0.651 3.296,-2.89 2.645,-5.001 -0.649,-2.11 -2.89,-3.294 -5,-2.645 -7.405,2.282 -14.973,4.095 -22.518,5.427 -11.638,-5.838 -22.419,-13.502 -31.997,-22.834 4.553,-0.896 9.091,-1.914 13.555,-3.076 2.138,-0.556 3.421,-2.74 2.864,-4.878 -0.555,-2.138 -2.736,-3.42 -4.878,-2.864 -5.959,1.55 -12.05,2.85 -18.137,3.902 C 96.417,242.502 88.55,229.31 83.208,215.361 c 7.844,-2.009 15.644,-4.451 23.246,-7.289 2.069,-0.772 3.121,-3.077 2.348,-5.146 -0.772,-2.069 -3.079,-3.122 -5.146,-2.348 -7.545,2.817 -15.292,5.233 -23.078,7.202 -1.7,-5.44 -3.033,-10.971 -3.992,-16.555 17.341,-5.604 33.99,-13.242 49.518,-22.786 1.882,-1.157 2.47,-3.62 1.313,-5.502 -1.158,-1.881 -3.62,-2.47 -5.503,-1.313 -14.584,8.964 -30.193,16.189 -46.445,21.555 -0.793,-7.386 -0.95,-14.826 -0.465,-22.234 8.314,-3.591 16.365,-7.688 23.955,-12.209 1.897,-1.13 2.521,-3.585 1.39,-5.483 -1.13,-1.898 -3.585,-2.521 -5.483,-1.39 -6.041,3.597 -12.387,6.918 -18.932,9.917 1.118,-8.127 3.015,-16.165 5.69,-23.995 12.924,-7.601 26.339,-17.69 37.186,-27.603 1.631,-1.49 1.745,-4.02 0.255,-5.651 -1.491,-1.632 -4.021,-1.745 -5.651,-0.254 -8.4,7.676 -17.365,14.679 -26.729,20.916 6.137,-13.178 14.632,-25.519 25.492,-36.379 24.192,-24.192 56.357,-37.516 90.57,-37.516 4.656,0 9.271,0.255 13.836,0.743 -1.347,4.072 -2.817,8.13 -4.393,12.113 -0.813,2.054 0.193,4.378 2.248,5.191 0.482,0.191 0.98,0.282 1.471,0.282 1.593,0 3.099,-0.958 3.721,-2.529 1.813,-4.582 3.485,-9.26 5.002,-13.947 5.613,0.961 11.128,2.297 16.52,3.984 -6.004,23.81 -15.831,46.266 -29.255,66.792 -1.209,1.849 -0.69,4.328 1.158,5.537 0.676,0.442 1.435,0.653 2.186,0.653 1.305,0 2.584,-0.638 3.352,-1.811 13.785,-21.077 23.913,-44.115 30.148,-68.536 14.147,5.434 27.287,13.409 38.866,23.679 -2.015,11.874 -5.07,23.73 -9.118,35.272 -0.731,2.084 0.365,4.367 2.45,5.099 0.438,0.154 0.885,0.227 1.324,0.227 1.651,0 3.197,-1.03 3.774,-2.677 3.599,-10.259 6.438,-20.76 8.495,-31.309 16.699,17.153 27.627,37.862 32.781,59.675 -6.798,23.85 -17.03,45.879 -30.438,65.486 -1.247,1.823 -0.779,4.313 1.044,5.56 0.69,0.472 1.477,0.699 2.254,0.699 1.276,0 2.531,-0.61 3.306,-1.743 11.018,-16.112 19.958,-33.794 26.699,-52.727 3.538,36.789 -8.748,74.828 -36.862,102.942 z"
+ id="path2"
+ inkscape:connector-curvature="0" />
+
+ <path
+ d="m 197.27,216.666 c -1.811,1.267 -2.251,3.761 -0.984,5.571 0.778,1.112 2.02,1.707 3.281,1.707 0.791,0 1.592,-0.235 2.289,-0.723 22.879,-16.008 42.555,-36.287 58.479,-60.273 4.438,-6.686 8.573,-13.669 12.288,-20.754 1.025,-1.957 0.271,-4.375 -1.686,-5.4 -1.952,-1.025 -4.374,-0.272 -5.4,1.685 -3.587,6.843 -7.58,13.587 -11.866,20.044 -15.37,23.149 -34.347,42.711 -56.401,58.143 z"
+ id="path6"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 164.66,235.919 c -4.826,2.292 -9.791,4.417 -14.757,6.314 -2.063,0.789 -3.098,3.101 -2.309,5.164 0.609,1.594 2.127,2.573 3.737,2.573 0.475,0 0.957,-0.085 1.427,-0.265 5.16,-1.972 10.319,-4.179 15.333,-6.561 1.996,-0.948 2.845,-3.334 1.897,-5.329 -0.946,-1.994 -3.333,-2.842 -5.328,-1.896 z"
+ id="path8"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 240.418,146.561 c 1.275,-1.804 0.846,-4.3 -0.958,-5.575 -1.803,-1.275 -4.3,-0.845 -5.575,0.958 -30.046,42.51 -72.305,73.713 -118.993,87.863 -2.114,0.641 -3.309,2.874 -2.668,4.988 0.523,1.728 2.11,2.841 3.826,2.841 0.385,0 0.775,-0.056 1.162,-0.173 48.383,-14.663 92.138,-46.946 123.206,-90.902 z"
+ id="path10"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 131.021,125.104 c 22.662,-18.894 41.814,-42.449 55.387,-68.119 1.032,-1.953 0.286,-4.373 -1.667,-5.406 -1.954,-1.035 -4.373,-0.286 -5.405,1.667 -13.09,24.758 -31.568,47.481 -53.438,65.714 -1.696,1.415 -1.926,3.937 -0.511,5.634 0.791,0.949 1.929,1.438 3.074,1.438 0.903,0 1.811,-0.304 2.56,-0.928 z"
+ id="path12"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 304.583,162.73 c 0.537,0.244 1.1,0.359 1.653,0.359 1.52,0 2.974,-0.872 3.644,-2.346 0.838,-1.843 1.658,-3.714 2.44,-5.563 0.861,-2.034 -0.091,-4.381 -2.125,-5.242 -2.035,-0.861 -4.382,0.09 -5.242,2.125 -0.755,1.784 -1.548,3.59 -2.356,5.37 -0.914,2.012 -0.025,4.383 1.986,5.297 z"
+ id="path14"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 301.081,169.845 c -1.931,-1.072 -4.365,-0.374 -5.438,1.557 -5.468,9.855 -11.719,19.443 -18.58,28.495 -25.229,33.293 -57.633,58.594 -93.705,73.166 -2.049,0.828 -3.038,3.159 -2.211,5.207 0.629,1.558 2.128,2.503 3.71,2.503 0.499,0 1.007,-0.094 1.497,-0.292 37.412,-15.114 70.983,-41.308 97.085,-75.752 7.089,-9.353 13.548,-19.26 19.2,-29.446 1.071,-1.932 0.374,-4.366 -1.558,-5.438 z"
+ id="path16"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 190.943,141.11 c -4.038,4.545 -8.354,8.994 -12.827,13.222 -1.605,1.518 -1.678,4.049 -0.16,5.655 0.787,0.833 1.846,1.252 2.908,1.252 0.985,0 1.974,-0.362 2.746,-1.093 4.643,-4.387 9.122,-9.004 13.313,-13.723 1.468,-1.652 1.318,-4.18 -0.334,-5.647 -1.651,-1.466 -4.179,-1.318 -5.646,0.334 z"
+ id="path18"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 161.323,130.713 c -1.609,1.514 -1.688,4.045 -0.174,5.654 0.787,0.837 1.85,1.26 2.915,1.26 0.982,0 1.967,-0.36 2.739,-1.086 18.801,-17.681 32.125,-35.242 40.733,-53.688 0.934,-2.001 0.068,-4.382 -1.934,-5.316 -2.001,-0.934 -4.382,-0.069 -5.316,1.933 -8.17,17.509 -20.915,34.271 -38.963,51.243 z"
+ id="path20"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 148.218,142.343 c -3.322,2.801 -6.804,5.649 -10.644,8.706 -1.729,1.376 -2.014,3.893 -0.638,5.621 0.789,0.992 1.955,1.508 3.132,1.508 0.873,0 1.752,-0.285 2.488,-0.871 3.899,-3.104 7.438,-5.999 10.817,-8.849 1.689,-1.424 1.904,-3.948 0.479,-5.637 -1.422,-1.687 -3.947,-1.902 -5.634,-0.478 z"
+ id="path22"
+ inkscape:connector-curvature="0" />
+</g>
+<g
+ id="g26"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g28"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g30"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g32"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g34"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g36"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g38"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g40"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g42"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g44"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g46"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g48"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g50"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g52"
+ transform="translate(-66.724,-33.299)">
+</g>
+<g
+ id="g54"
+ transform="translate(-66.724,-33.299)">
+</g>
+</svg> \ No newline at end of file
diff --git a/web/pw-frontend/public/static/res/assets/venus.svg b/web/pw-frontend/public/static/res/assets/venus.svg
new file mode 100644
index 0000000..3bebb10
--- /dev/null
+++ b/web/pw-frontend/public/static/res/assets/venus.svg
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 272.17001 272.17001"
+ xml:space="preserve"
+ sodipodi:docname="venus-with-satellite.svg"
+ width="272.17001"
+ height="272.17001"
+ inkscape:version="0.92.1 r15371"><metadata
+ id="metadata43"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs41" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1536"
+ inkscape:window-height="801"
+ id="namedview39"
+ showgrid="false"
+ inkscape:zoom="0.72525674"
+ inkscape:cx="-54.610822"
+ inkscape:cy="136.085"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g6" />
+<g
+ id="g6"
+ transform="translate(-53.232,-26.616)">
+ <path
+ d="m 189.317,26.616 c -75.038,0 -136.085,61.048 -136.085,136.085 0,75.037 61.047,136.085 136.085,136.085 75.038,0 136.085,-61.047 136.085,-136.085 0,-75.038 -61.048,-136.085 -136.085,-136.085 z m 114.537,78.799 c -19.285,81.007 -76.736,147.79 -154.087,179.114 -5.259,-1.711 -10.371,-3.751 -15.309,-6.102 80.857,-31.451 141.937,-101.332 162.187,-185.549 2.629,4.029 5.038,8.214 7.209,12.537 z M 163.18,139.149 c 26.371,-28.772 46.301,-63.476 57.841,-100.56 13.174,3.367 25.536,8.784 36.729,15.887 -19.382,87.483 -83.595,159.155 -168.504,188.074 -8.839,-11.054 -15.885,-23.598 -20.7,-37.19 35.734,-14.765 68.396,-37.583 94.634,-66.211 z M 66.097,197.717 C 64.659,192.664 63.525,187.485 62.714,182.201 125,152.771 174.179,99.363 198.318,34.937 c 5.041,0.352 10.001,0.997 14.865,1.918 -11.221,35.723 -30.474,69.147 -55.901,96.888 -25.304,27.609 -56.763,49.647 -91.185,63.974 z M 189.317,34.616 c 0.192,0 0.382,0.006 0.573,0.007 -23.415,60.543 -69.7,110.809 -128.17,139.196 -0.317,-3.665 -0.488,-7.372 -0.488,-11.118 0,-70.626 57.458,-128.085 128.085,-128.085 z M 94.827,249.08 c 85.048,-30.115 149.458,-102 170.022,-189.755 9.626,7.052 18.236,15.411 25.562,24.818 -18.383,87.024 -81.532,159.278 -165.428,189.276 -11.251,-6.562 -21.416,-14.787 -30.156,-24.339 z m 67.417,38.818 c 71.824,-32.367 125.65,-94.933 146.817,-170.653 4.421,11.608 7.2,24.017 8.052,36.946 -20.52,57.053 -60.724,105.217 -113.336,135.774 -4.748,0.536 -9.571,0.821 -14.46,0.821 -9.287,0 -18.342,-1.002 -27.073,-2.888 z m 63.449,-2.382 c 39.622,-27.44 71.097,-65.121 90.95,-108.895 -5.626,51.82 -42.283,94.456 -90.95,108.895 z"
+ id="path2"
+ inkscape:connector-curvature="0" />
+
+</g>
+<g
+ id="g8"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g10"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g12"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g14"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g16"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g18"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g20"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g22"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g24"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g26"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g28"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g30"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g32"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g34"
+ transform="translate(-53.232,-26.616)">
+</g>
+<g
+ id="g36"
+ transform="translate(-53.232,-26.616)">
+</g>
+</svg> \ No newline at end of file
diff --git a/web/pw-frontend/public/static/shaders/frag/image.glsl b/web/pw-frontend/public/static/shaders/frag/image.glsl
new file mode 100644
index 0000000..69c8b91
--- /dev/null
+++ b/web/pw-frontend/public/static/shaders/frag/image.glsl
@@ -0,0 +1,14 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+// Passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+// The texture.
+uniform sampler2D u_texture;
+
+void main() {
+ gl_FragColor = texture2D(u_texture, v_texCoord);
+// gl_FragColor = vec4(0.7, 0.7, 0.0, 1.0);
+}
diff --git a/web/pw-frontend/public/static/shaders/frag/simple.glsl b/web/pw-frontend/public/static/shaders/frag/simple.glsl
new file mode 100644
index 0000000..1292569
--- /dev/null
+++ b/web/pw-frontend/public/static/shaders/frag/simple.glsl
@@ -0,0 +1,15 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform float u_step_interval;
+uniform float u_time;
+uniform vec3 u_color;
+uniform vec3 u_color_next;
+
+void main() {
+
+ vec3 color = mix(u_color, u_color_next, u_time);
+
+ gl_FragColor = vec4(color, 1.0);
+}
diff --git a/web/pw-frontend/public/static/shaders/frag/vor.glsl b/web/pw-frontend/public/static/shaders/frag/vor.glsl
new file mode 100644
index 0000000..faaa68f
--- /dev/null
+++ b/web/pw-frontend/public/static/shaders/frag/vor.glsl
@@ -0,0 +1,18 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define PI 3.141592
+
+uniform float u_step_interval;
+uniform float u_time;
+uniform bool u_vor;
+
+varying float v_intensity;
+varying float v_dist;
+varying vec3 v_color;
+varying vec2 v_pos;
+
+void main() {
+ gl_FragColor = vec4(v_color, (1.0 - pow(1.0 - v_intensity, 1.23)) * 0.7);
+}
diff --git a/web/pw-frontend/public/static/shaders/vert/image.glsl b/web/pw-frontend/public/static/shaders/vert/image.glsl
new file mode 100644
index 0000000..5dd3f56
--- /dev/null
+++ b/web/pw-frontend/public/static/shaders/vert/image.glsl
@@ -0,0 +1,33 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+
+uniform float u_time;
+
+uniform vec4 u_viewbox; // [x, y, width, height]
+uniform vec2 u_resolution;
+uniform mat3 u_trans;
+
+varying vec2 v_pos;
+varying vec2 v_texCoord;
+
+void main() {
+ vec3 pos = vec3(a_position, 1.0);
+
+ pos = u_trans * pos;
+
+ vec2 uv = pos.xy;
+
+ // 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.xy + (u_viewbox.zw * 0.5);
+ uv /= u_viewbox.zw * 0.5;
+
+ v_pos = (uv.xy + 1.0) * 0.5;
+
+ gl_Position = vec4(uv.xy, 0.0, 1.0);
+ v_texCoord = a_texCoord;
+}
diff --git a/web/pw-frontend/public/static/shaders/vert/simple.glsl b/web/pw-frontend/public/static/shaders/vert/simple.glsl
new file mode 100644
index 0000000..935decf
--- /dev/null
+++ b/web/pw-frontend/public/static/shaders/vert/simple.glsl
@@ -0,0 +1,36 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+
+uniform float u_time;
+
+uniform vec4 u_viewbox; // [x, y, width, height]
+uniform vec2 u_resolution;
+uniform mat3 u_trans;
+uniform mat3 u_trans_next;
+
+varying vec2 v_pos;
+varying vec2 v_texCoord;
+
+void main() {
+ vec3 pos = vec3(a_position, 1.0);
+
+ mat3 trans = (u_trans_next * (1.0 - u_time)) + (u_trans * u_time);
+
+ pos = trans * pos;
+
+ vec2 uv = pos.xy;
+
+ // 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.xy + (u_viewbox.zw * 0.5);
+ uv /= u_viewbox.zw * 0.5;
+
+ v_pos = (uv.xy + 1.0) * 0.5;
+
+ gl_Position = vec4(uv.xy, 0.0, 1.0);
+ v_texCoord = a_texCoord;
+}
diff --git a/web/pw-frontend/public/static/shaders/vert/vor.glsl b/web/pw-frontend/public/static/shaders/vert/vor.glsl
new file mode 100644
index 0000000..75747c4
--- /dev/null
+++ b/web/pw-frontend/public/static/shaders/vert/vor.glsl
@@ -0,0 +1,43 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+attribute vec2 a_pos;
+attribute vec2 a_center;
+attribute float a_own;
+attribute float a_intensity;
+
+uniform vec3 u_planet_colours[$PLANETS * 2];
+uniform vec4 u_viewbox; // [x, y, width, height]
+uniform vec2 u_resolution;
+uniform float u_time;
+
+varying float v_intensity;
+varying float v_dist;
+varying vec2 v_pos;
+varying vec3 v_color;
+
+void main() {
+ v_intensity = a_intensity;
+ v_dist = distance(a_pos * u_resolution , a_center * u_resolution);
+
+ int own = int(a_own);
+
+ vec2 uv = a_pos;
+
+ // 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.xy + (u_viewbox.zw * 0.5);
+ uv /= u_viewbox.zw * 0.5;
+ v_pos = uv.xy;
+
+ // v_pos = (uv.xy + 1.0) * 0.5;
+
+ if (own < 0) {
+ v_color = vec3(0., 0., 0.);
+ } else {
+ v_color = mix(u_planet_colours[own * 2], u_planet_colours[own * 2 + 1], u_time);
+ }
+
+ gl_Position = vec4(uv.xy, 0.0, 1.0);
+}
diff --git a/web/pw-frontend/src/App.svelte b/web/pw-frontend/src/App.svelte
new file mode 100644
index 0000000..468b925
--- /dev/null
+++ b/web/pw-frontend/src/App.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+import MatchBrowser from './lib/MatchBrowser.svelte';
+</script>
+
+<main>
+ <MatchBrowser />
+</main>
+
+<style>
+ :root {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ }
+</style>
diff --git a/web/pw-frontend/src/lib/MatchBrowser.svelte b/web/pw-frontend/src/lib/MatchBrowser.svelte
new file mode 100644
index 0000000..aeb45be
--- /dev/null
+++ b/web/pw-frontend/src/lib/MatchBrowser.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+ import Visualizer from "./Visualizer.svelte";
+ import moment from "moment";
+
+ const PLAYER_COLORS = [
+ "#FF8000",
+ "#0080FF",
+ "#FF6693",
+ "#3FCB55",
+ "#CBC33F",
+ "#CF40E9",
+ "#FF3F0D",
+ "#1BEEF0",
+ "#0DC5FF",
+ ];
+
+ let matches = [];
+ let selectedMatch = null;
+ let selectedMatchLog = null;
+
+ onMount(() => {
+ fetch("/api/matches")
+ .then((response) => response.json())
+ .then((m) => (matches = m));
+ });
+
+ function selectMatch(matchName) {
+ selectedMatch = matchName;
+ selectedMatchLog = null;
+ fetch(`/api/matches/${matchName}`)
+ .then((resp) => resp.text())
+ .then((log) => {
+ selectedMatchLog = log;
+ });
+ }
+
+ function showTimestamp(dateStr: string): string {
+ let t = moment(dateStr);
+ if (t.day() == moment().day()) {
+ return moment(dateStr).format("HH:mm");
+ } else {
+ return moment(dateStr).format("DD/MM");
+ }
+ }
+
+ function playerColor(player_num: number): string {
+ return PLAYER_COLORS[player_num % PLAYER_COLORS.length];
+ }
+</script>
+
+<div class="container">
+ <div class="sidebar">
+ <div class="sidebar-header" />
+ <ul class="match-list">
+ {#each matches as match (match.name)}
+ <li
+ on:click={() => selectMatch(match.name)}
+ class:selected={selectedMatch === match.name}
+ class="match-card"
+ >
+ <div class="match-name">{match.name}</div>
+ <span class="match-timestamp">{showTimestamp(match.timestamp)}</span>
+ <span class="match-mapname">{match.map_name}</span>
+ <ul class="match-player-list">
+ {#each match.players as player, ix}
+ <li class="match-player" style="color: {playerColor(ix)}">
+ {player.name}
+ </li>
+ {/each}
+ </ul>
+ </li>
+ {/each}
+ </ul>
+ </div>
+ <Visualizer matchLog={selectedMatchLog} />
+</div>
+
+<style scoped>
+ .container {
+ display: flex;
+ width: 100vw;
+ height: 100vh;
+ overflow-y: hidden;
+ background-color: rgb(41, 41, 41);
+ }
+
+ .sidebar {
+ width: 20%;
+ width: 350px;
+ color: #eee;
+ overflow: hidden;
+ overflow-y: scroll;
+ height: 100%;
+ }
+
+ .sidebar-header {
+ margin-top: 2em;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 14px;
+ font-family: "Open Sans", sans-serif;
+ padding-left: 14px;
+ }
+
+ .match-list {
+ list-style: none;
+ padding: 0;
+ }
+
+ .match-card {
+ padding: 0.5em;
+ padding-left: 14px;
+ }
+
+ .match-card.selected {
+ background-color: #333;
+ }
+
+ .match-card:hover {
+ background-color: #333;
+ }
+
+ .match-timestamp {
+ color: #ccc;
+ }
+
+ .match-mapname {
+ padding: 0 0.5em;
+ color: #ccc;
+ }
+
+ .match-player-list {
+ list-style: none;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-left: 18px;
+ }
+</style>
diff --git a/web/pw-frontend/src/lib/Visualizer.svelte b/web/pw-frontend/src/lib/Visualizer.svelte
new file mode 100644
index 0000000..297659c
--- /dev/null
+++ b/web/pw-frontend/src/lib/Visualizer.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+ import { onMount } from 'svelte';
+ import * as visualizer from '../lib/visualizer/index';
+
+ export let matchLog = null;
+
+ let initialized = false;
+
+ onMount(() => {
+ visualizer.init();
+ initialized = true;
+ visualizer.set_loading(false);
+ });
+
+ $: if (initialized) {
+ if (matchLog === null) {
+ visualizer.set_loading(true);
+ } else {
+ visualizer.set_instance(matchLog);
+ visualizer.set_loading(false);
+ }
+ }
+</script>
+
+<div id="main" class="loading">
+ <canvas id="canvas" />
+ <div id="name" />
+ <div id="addbutton" class="button" />
+
+ <div id="meta">
+ <div id="turnCounter">0 / 0</div>
+ <div>
+ <span>Ms per frame:&nbsp;</span>
+ <input type="number" id="speed" value="300" />
+ </div>
+ <div class="slidecontainer">
+ <input
+ type="range"
+ min="0"
+ max="1"
+ value="1"
+ class="slider"
+ id="turnSlider"
+ />
+ </div>
+ </div>
+ <div class="lds-roller">
+ <div />
+ <div />
+ <div />
+ <div />
+ <div />
+ <div />
+ <div />
+ <div />
+ </div>
+</div>
+
+<style scoped>
+ @import 'visualizer/style.css';
+</style>
diff --git a/web/pw-frontend/src/lib/visualizer/LICENSE-MIT b/web/pw-frontend/src/lib/visualizer/LICENSE-MIT
new file mode 100644
index 0000000..8d459d1
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/LICENSE-MIT
@@ -0,0 +1,25 @@
+Copyright (c) 2018 Arthur Vercruysse
+
+Permission is hereby granted, free of charge, to any
+person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the
+Software without restriction, including without
+limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice
+shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
+SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
diff --git a/web/pw-frontend/src/lib/visualizer/README.md b/web/pw-frontend/src/lib/visualizer/README.md
new file mode 100644
index 0000000..aaba256
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/README.md
@@ -0,0 +1 @@
+Original by the amazing Arthur Vercruysse! \ No newline at end of file
diff --git a/web/pw-frontend/src/lib/visualizer/index.html b/web/pw-frontend/src/lib/visualizer/index.html
new file mode 100644
index 0000000..c2b2c33
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Hello wasm-pack!</title>
+ <link rel="stylesheet" type="text/css" href="static/res/style.css">
+ </head>
+ <body>
+ <input type="file" id="fileselect" style="display: none">
+ <div id=wrapper>
+
+ <div id="main" class="loading">
+ <canvas id="c"></canvas>
+ <div id="name"></div>
+ <div id="addbutton" class="button"></div>
+
+ <div id="meta">
+ <div id="turnCounter">
+ 0 / 0
+ </div>
+ <div>
+ <span>Ms per frame:&nbsp;</span>
+ <input type="number" id="speed" value="100">
+ </div>
+ <div class="slidecontainer">
+ <input type="range" min="0" max="1" value="1" class="slider" id="turnSlider">
+ </div>
+ </div>
+ </div>
+
+ <div class=".options" id=options>
+ <div class="option">
+ Option one
+ </div>
+ <div class="option">
+ Option two
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div><div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div><div class="option">
+ Option three
+ </div>
+ <div class="option">
+ Option three
+ </div>
+ </div>
+
+ </div>
+
+
+ <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+ <script src="bootstrap.js"></script>
+ <script>
+ const URL = window.location.origin + window.location.pathname;
+ const LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
+
+ const game_location = LOCATION + "static/games/Chandra Garrett.json";
+ const name = "Chandra Garrett";
+ window.setTimeout(
+ () => visualizer.handle(game_location, name), 1000
+ )
+ </script>
+ </body>
+</html>
diff --git a/web/pw-frontend/src/lib/visualizer/index.ts b/web/pw-frontend/src/lib/visualizer/index.ts
new file mode 100644
index 0000000..363a1c5
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/index.ts
@@ -0,0 +1,666 @@
+import { Game } from "planetwars-rs";
+// import { memory } from "planetwars-rs/planetwars_rs_bg";
+// const memory = planetwars_bg.memory;
+import type { Dictionary } from './webgl/util';
+import type { BBox } from "./voronoi/voronoi-core";
+
+import {
+ Resizer,
+ resizeCanvasToDisplaySize,
+ FPSCounter,
+ url_to_mesh,
+ Mesh,
+} from "./webgl/util";
+import {
+ Shader,
+ Uniform4f,
+ Uniform3fv,
+ Uniform1f,
+ Uniform2f,
+ ShaderFactory,
+ Uniform3f,
+ UniformMatrix3fv,
+ UniformBool,
+} from "./webgl/shader";
+import { Renderer } from "./webgl/renderer";
+import { VertexBuffer, IndexBuffer } from "./webgl/buffer";
+import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout";
+import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
+import { VoronoiBuilder } from "./voronoi/voronoi";
+
+// svg-mesh requires global to exist
+(window as any).global = window;
+
+
+
+function to_bbox(box: number[]): BBox {
+ return {
+ xl: box[0],
+ xr: box[0] + box[2],
+ yt: box[1],
+ yb: box[1] + box[3],
+ };
+}
+
+// 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);
+// }
+
+export function set_game_name(name: string) {
+ ELEMENTS["name"].innerHTML = name;
+}
+
+export function set_loading(loading: boolean) {
+ if (loading) {
+ if (!ELEMENTS["main"].classList.contains("loading")) {
+ ELEMENTS["main"].classList.add("loading");
+ }
+ } else {
+ ELEMENTS["main"].classList.remove("loading");
+ }
+}
+
+const ELEMENTS: any = {};
+var CANVAS: any;
+var RESOLUTION: any;
+var GL: any;
+var ms_per_frame: any;
+
+const LAYERS = {
+ vor: -1, // Background
+ planet: 1,
+ planet_label: 2,
+ ship: 3,
+ ship_label: 4,
+};
+
+const COUNTER = new FPSCounter();
+
+
+
+export function init() {
+ [
+ "name",
+ "turnCounter",
+ "main",
+ "turnSlider",
+ "fileselect",
+ "speed",
+ "canvas",
+ ].forEach((n) => (ELEMENTS[n] = document.getElementById(n)));
+
+ CANVAS = ELEMENTS["canvas"];
+ RESOLUTION = [CANVAS.width, CANVAS.height];
+
+ ms_per_frame = parseInt(ELEMENTS["speed"].value);
+
+ GL = CANVAS.getContext("webgl");
+
+ GL.clearColor(0, 0, 0, 1);
+ GL.clear(GL.COLOR_BUFFER_BIT);
+
+ GL.enable(GL.BLEND);
+ GL.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);
+
+ window.addEventListener(
+ "resize",
+ function () {
+ resizeCanvasToDisplaySize(CANVAS);
+
+ if (game_instance) {
+ game_instance.on_resize();
+ }
+ },
+ { capture: false, passive: true }
+ );
+
+ ELEMENTS["turnSlider"].oninput = function () {
+ if (game_instance) {
+ game_instance.updateTurn(parseInt(ELEMENTS["turnSlider"].value));
+ }
+ };
+
+ ELEMENTS["speed"].onchange = function () {
+ ms_per_frame = parseInt(ELEMENTS["speed"].value);
+ };
+}
+
+export class GameInstance {
+ resizer: Resizer;
+ game: Game;
+
+ shader: Shader;
+ vor_shader: Shader;
+ image_shader: Shader;
+
+ text_factory: LabelFactory;
+ planet_labels: Label[];
+ ship_labels: Label[];
+
+ ship_ibo: IndexBuffer;
+ ship_vao: VertexArray;
+ // TODO: find a better way
+ max_num_ships: number;
+
+ renderer: Renderer;
+ planet_count: number;
+
+ vor_builder: VoronoiBuilder;
+
+ vor_counter = 3;
+ use_vor = true;
+ playing = true;
+ time_stopped_delta = 0;
+ last_time = 0;
+ frame = -1;
+
+ turn_count = 0;
+
+ constructor(
+ game: Game,
+ meshes: Mesh[],
+ ship_mesh: Mesh,
+ shaders: Dictionary<ShaderFactory>
+ ) {
+ this.game = game;
+ const planets = game.get_planets();
+ this.planet_count = planets.length;
+
+ this.shader = shaders["normal"].create_shader(GL, {
+ MAX_CIRCLES: "" + planets.length,
+ });
+ this.image_shader = shaders["image"].create_shader(GL);
+ this.vor_shader = shaders["vor"].create_shader(GL, {
+ PLANETS: "" + planets.length,
+ });
+
+ this.text_factory = defaultLabelFactory(GL, this.image_shader);
+ this.planet_labels = [];
+ this.ship_labels = [];
+
+ this.resizer = new Resizer(CANVAS, [...game.get_viewbox()], true);
+ this.renderer = new Renderer();
+ this.game.update_turn(0);
+
+ // Setup key handling
+ document.addEventListener("keydown", this.handleKey.bind(this));
+
+ // List of [(x, y, r)] for all planets
+ this._create_voronoi(planets);
+ this._create_planets(planets, meshes);
+
+ // create_shipes
+ this.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");
+ this.ship_vao = new VertexArray();
+ this.ship_vao.addBuffer(ship_positions, ship_layout);
+ this.max_num_ships = 0;
+
+ // Set slider correctly
+ this.turn_count = game.turn_count();
+ ELEMENTS["turnSlider"].max = this.turn_count - 1 + "";
+ }
+
+ push_state(state: string) {
+ this.game.push_state(state);
+
+ if (this.frame == this.turn_count - 1) {
+ this.playing = true;
+ }
+
+ // Set slider correctly
+ this.turn_count = this.game.turn_count();
+ this.updateTurnCounters();
+ }
+
+ _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] });
+ }
+
+ const bbox = to_bbox(this.resizer.get_viewbox());
+
+ 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([
+ 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,
+ },
+ [],
+ LAYERS.planet
+ );
+ }
+
+ {
+ 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.planet_labels.push(label);
+ this.renderer.addRenderable(label.getRenderable(), LAYERS.planet_label);
+ }
+ }
+ }
+
+ on_resize() {
+ this.resizer = new Resizer(CANVAS, [...this.game.get_viewbox()], true);
+ const bbox = to_bbox(this.resizer.get_viewbox());
+ this.vor_builder.resize(GL, bbox);
+ }
+
+ _update_state() {
+ this._update_planets();
+ this._update_ships();
+ }
+
+ _update_planets() {
+ const colours = this.game.get_planet_colors();
+ const planet_ships = this.game.get_planet_ships();
+
+ 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),
+ LAYERS.planet
+ );
+ 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
+ );
+ }
+ }
+
+ _update_ships() {
+ const ships = this.game.get_ship_locations();
+ const labels = this.game.get_ship_label_locations();
+ const ship_counts = this.game.get_ship_counts();
+ const ship_colours = this.game.get_ship_colours();
+
+ for (let i = this.max_num_ships; i < ship_counts.length; i++) {
+ this.renderer.addToDraw(
+ this.ship_ibo,
+ this.ship_vao,
+ this.shader,
+ {},
+ [],
+ LAYERS.ship
+ );
+
+ const label = this.text_factory.build(GL);
+ this.ship_labels.push(label);
+ this.renderer.addRenderable(label.getRenderable(), LAYERS.ship_label);
+ }
+ if (ship_counts.length > this.max_num_ships)
+ this.max_num_ships = ship_counts.length;
+
+ // TODO: actually remove obsolete ships
+ for (let i = 0; i < this.max_num_ships; i++) {
+ if (i < ship_counts.length) {
+ 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);
+
+ const u = new Uniform3f(
+ ship_colours[i * 3],
+ ship_colours[i * 3 + 1],
+ ship_colours[i * 3 + 2]
+ );
+
+ 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));
+
+ this.renderer.updateUniform(
+ i,
+ (us) => {
+ us["u_color"] = u;
+ us["u_color_next"] = u;
+ us["u_trans"] = t1;
+ us["u_trans_next"] = t2;
+ },
+ LAYERS.ship
+ );
+
+ this.renderer.updateUniform(
+ i,
+ (us) => {
+ us["u_trans"] = tl1;
+ us["u_trans_next"] = tl2;
+ },
+ LAYERS.ship_label
+ );
+ } else {
+ this.renderer.disableRenderable(i, LAYERS.ship);
+ this.renderer.disableRenderable(i, LAYERS.ship_label);
+ }
+ }
+ }
+
+ render(time: number) {
+ COUNTER.frame(time);
+
+ 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;
+ }
+
+ // If not playing, still reder with different viewbox, so people can still pan etc.
+ if (!this.playing) {
+ 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.image_shader.uniform(
+ GL,
+ "u_viewbox",
+ new Uniform4f(this.resizer.get_viewbox())
+ );
+
+ this.renderer.render(GL);
+ return;
+ }
+
+ // Check if turn is still correct
+ if (time > this.last_time + ms_per_frame) {
+ this.last_time = time;
+ this.updateTurn(this.frame + 1);
+ if (this.frame == this.turn_count - 1) {
+ this.playing = false;
+ }
+ }
+
+ // Do GL things
+ 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);
+
+ this.vor_shader.uniform(
+ GL,
+ "u_time",
+ new Uniform1f((time - this.last_time) / ms_per_frame)
+ );
+ this.vor_shader.uniform(
+ GL,
+ "u_viewbox",
+ new Uniform4f(this.resizer.get_viewbox())
+ );
+ this.vor_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
+ this.vor_shader.uniform(GL, "u_vor", new UniformBool(this.use_vor));
+
+ 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())
+ );
+ 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));
+
+ // Render
+ this.renderer.render(GL);
+
+ COUNTER.frame_end();
+ }
+
+ 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();
+ this.playing = true;
+ }
+
+ this.updateTurnCounters();
+ }
+
+ updateTurnCounters() {
+ ELEMENTS["turnCounter"].innerHTML =
+ this.frame + " / " + (this.turn_count - 1);
+ ELEMENTS["turnSlider"].value = this.frame + "";
+ ELEMENTS["turnSlider"].max = this.turn_count - 1 + "";
+ }
+
+ handleKey(event: KeyboardEvent) {
+ // Space
+ if (event.keyCode == 32) {
+ if (this.playing) {
+ this.playing = false;
+ } else {
+ this.playing = true;
+ }
+ }
+
+ // Arrow left
+ if (event.keyCode == 37) {
+ // This feels more natural than -1 what it should be, I think
+ this.updateTurn(this.frame - 2);
+ }
+
+ // Arrow right
+ if (event.keyCode == 39) {
+ this.updateTurn(this.frame + 1);
+ }
+
+ // d key
+ if (event.keyCode == 68) {
+ ELEMENTS["speed"].value = ms_per_frame + 10 + "";
+ ELEMENTS["speed"].onchange(undefined);
+ }
+
+ // a key
+ if (event.keyCode == 65) {
+ ELEMENTS["speed"].value = Math.max(ms_per_frame - 10, 0) + "";
+ ELEMENTS["speed"].onchange(undefined);
+ }
+ }
+}
+
+var game_instance: GameInstance;
+var meshes: Mesh[];
+var shaders: Dictionary<ShaderFactory>;
+
+export async function set_instance(source: string): Promise<GameInstance> {
+ if (!meshes || !shaders) {
+ const mesh_promises = ["ship.svg", "earth.svg", "mars.svg", "venus.svg"]
+ .map((name) => "/static/res/assets/" + name)
+ .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);
+
+ game_instance = new GameInstance(
+ Game.new(source),
+ meshes.slice(1),
+ meshes[0],
+ shaders
+ );
+
+ set_loading(false);
+ start();
+ return game_instance;
+}
+
+var _animating = false;
+
+export function start() {
+ if (_animating) {
+ // already running
+ return;
+ }
+ _animating = true;
+ requestAnimationFrame(step);
+}
+
+export function stop() {
+ _animating = false;
+}
+
+function step(time: number) {
+ if (game_instance) {
+ game_instance.render(time);
+ }
+
+ if (_animating) {
+ requestAnimationFrame(step);
+ }
+}
diff --git a/web/pw-frontend/src/lib/visualizer/src/games.ts b/web/pw-frontend/src/lib/visualizer/src/games.ts
new file mode 100644
index 0000000..4b9e7e2
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/src/games.ts
@@ -0,0 +1,47 @@
+
+import { set_game_name, set_loading, set_instance } from '../index'
+
+var game_name, game_file;
+
+document.getElementById("addbutton").onclick = function () {
+ const loc = window.location;
+ const query = `?game=${game_file}&name=${game_name}`;
+ navigator.clipboard.writeText(loc.origin + loc.pathname + encodeURI(query)).then(() => {
+ console.log("Success");
+ }, () => {
+ console.log("Failed");
+ });
+}
+
+async function on_load() {
+ const options = document.getElementsByClassName("options");
+ const urlVars = new URLSearchParams(window.location.search);
+
+ if (urlVars.get("game") && urlVars.get("name")) {
+ console.log(urlVars.get("game") + ' ' + urlVars.get("name"))
+ handle(urlVars.get("game"), urlVars.get("name"))
+ } else if (options[0]) {
+ const options_div = <HTMLDivElement>options[0];
+ if (options_div.children[0]) {
+ options_div.children[0].dispatchEvent(new Event('click'));
+ }
+ }
+}
+
+window.addEventListener("load", on_load, false);
+
+export function handle(location: string, name: string) {
+ game_file = location;
+ game_name = name;
+
+ set_loading(true);
+
+ fetch(location)
+ .then((r) => r.text())
+ .then((response) => {
+ set_instance(response);
+ set_game_name(name);
+ }).catch(console.error);
+}
+
+on_load();
diff --git a/web/pw-frontend/src/lib/visualizer/style.css b/web/pw-frontend/src/lib/visualizer/style.css
new file mode 100644
index 0000000..8c5119e
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/style.css
@@ -0,0 +1,309 @@
+ * {
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ background-color: #333;
+ }
+
+ p {
+ padding: 3px 0;
+ }
+
+ #wrapper {
+ max-height: 100%;
+ min-height: 100%;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ }
+
+ #main {
+ height: 100%;
+ flex-grow: 1;
+ position: relative;
+ }
+
+ #name {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ color: white;
+ }
+
+ #meta {
+ padding: 10px 2%;
+ color: white;
+ position: absolute;
+ bottom: 0;
+ width: 96%;
+ }
+
+ .options {
+ background-color: black;
+ max-width: 300px;
+ width: 20%;
+ min-width: 150px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ }
+
+ .option {
+ color: white;
+ margin: 0 0 20px 0;
+ padding: 10px;
+ background-color: #333;
+ }
+
+ .option:last-child {
+ margin: 0;
+ }
+
+ .option:hover {
+ background-color: #777;
+ }
+
+ .lds-roller {
+ display: none;
+ }
+
+ .loading>.lds-roller {
+ display: inline-block;
+ }
+
+ .lds-roller {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 80px;
+ height: 80px;
+ }
+
+ .lds-roller div {
+ animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ transform-origin: 40px 40px;
+ }
+
+ .lds-roller div:after {
+ content: " ";
+ display: block;
+ position: absolute;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #fff;
+ margin: -4px 0 0 -4px;
+ }
+
+ .lds-roller div:nth-child(1) {
+ animation-delay: -0.036s;
+ }
+
+ .lds-roller div:nth-child(1):after {
+ top: 63px;
+ left: 63px;
+ }
+
+ .lds-roller div:nth-child(2) {
+ animation-delay: -0.072s;
+ }
+
+ .lds-roller div:nth-child(2):after {
+ top: 68px;
+ left: 56px;
+ }
+
+ .lds-roller div:nth-child(3) {
+ animation-delay: -0.108s;
+ }
+
+ .lds-roller div:nth-child(3):after {
+ top: 71px;
+ left: 48px;
+ }
+
+ .lds-roller div:nth-child(4) {
+ animation-delay: -0.144s;
+ }
+
+ .lds-roller div:nth-child(4):after {
+ top: 72px;
+ left: 40px;
+ }
+
+ .lds-roller div:nth-child(5) {
+ animation-delay: -0.18s;
+ }
+
+ .lds-roller div:nth-child(5):after {
+ top: 71px;
+ left: 32px;
+ }
+
+ .lds-roller div:nth-child(6) {
+ animation-delay: -0.216s;
+ }
+
+ .lds-roller div:nth-child(6):after {
+ top: 68px;
+ left: 24px;
+ }
+
+ .lds-roller div:nth-child(7) {
+ animation-delay: -0.252s;
+ }
+
+ .lds-roller div:nth-child(7):after {
+ top: 63px;
+ left: 17px;
+ }
+
+ .lds-roller div:nth-child(8) {
+ animation-delay: -0.288s;
+ }
+
+ .lds-roller div:nth-child(8):after {
+ top: 56px;
+ left: 12px;
+ }
+
+ @keyframes lds-roller {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ #speed {
+ width: 100px;
+ }
+
+ #canvas {
+ position: relative;
+ background-color: black;
+ width: 100%;
+ height: 100%;
+ }
+
+ .button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 0;
+ height: 0;
+ }
+
+ .button::before {
+ content: "";
+ display: block;
+ float: left;
+ margin: 0 -20px 0 0;
+ font-family: 'fontawesome';
+ content: "\f1e1";
+ transform: translate(-1em, 0px);
+ color: antiquewhite;
+ font-size: 1.5em;
+ }
+
+ .button:hover::before {
+ color: #ff7f00;
+ }
+ /* ----------------------------------------------
+ * Generated by Animista on 2019-9-17 14:35:13
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+ /**
+ * ----------------------------------------
+ * animation slide-top
+ * ----------------------------------------
+ */
+
+ @-webkit-keyframes slide-top {
+ 0% {
+ -webkit-transform: translate(-50%, 50%);
+ transform: translate(-50%, 50%);
+ }
+ 100% {
+ -webkit-transform: translate(-50%, -150%);
+ transform: translate(-50%, -150%);
+ }
+ }
+
+ @keyframes slide-top {
+ 0% {
+ -webkit-transform: translate(-50%, 50%);
+ transform: translate(-50%, 50%);
+ }
+ 100% {
+ -webkit-transform: translate(-50%, -150%);
+ transform: translate(-50%, -150%);
+ }
+ }
+ /**
+ * ----------------------------------------
+ * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
+ * ----------------------------------------
+ */
+
+ .slidecontainer {
+ margin-top: 10px;
+ width: 100%;
+ /* Width of the outside container */
+ }
+
+ .slider {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 15px;
+ border-radius: 5px;
+ background: #d3d3d3;
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: .2s;
+ transition: opacity .2s;
+ }
+
+ .slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #ff7000;
+ cursor: pointer;
+ }
+
+ .slider::-moz-range-thumb {
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #ff7000;
+ cursor: pointer;
+ }
+
+ ::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+ background-color: #444;
+ border-radius: 10px;
+ }
+
+ ::-webkit-scrollbar {
+ width: 10px;
+ background-color: #444;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: #F90;
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
+ } \ No newline at end of file
diff --git a/web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.d.ts b/web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.d.ts
new file mode 100644
index 0000000..e908fbb
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.d.ts
@@ -0,0 +1,56 @@
+
+declare namespace Voronoi {
+ class Point {
+ x: number;
+ y: number;
+ }
+
+ class Site {
+ x: number;
+ y: number;
+ voronoiId: number;
+ }
+
+ class Cell {
+ site: Site;
+ halfedges: HalfEdge[];
+ closeMe: boolean;
+ }
+
+ class Edge {
+ lSite: Site;
+ rSite: Site;
+ vb: Point;
+ va: Point;
+ }
+
+ class HalfEdge {
+ site: Site;
+ edge: Edge;
+ angle: number;
+ getStartpoint(): Point;
+ getEndpoint(): Point;
+ }
+
+ class BBox {
+ xl: number;
+ xr: number;
+ yt: number;
+ yb: number;
+ }
+
+ class VoronoiDiagram {
+ site: any;
+ cells: Cell[];
+ edges: Edge[];
+ vertices: Point[];
+ execTime: number;
+ }
+}
+
+declare class Voronoi {
+ constructor();
+ compute(sites: Voronoi.Point[], bbox: Voronoi.BBox): Voronoi.VoronoiDiagram;
+}
+
+export = Voronoi;
diff --git a/web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.js b/web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.js
new file mode 100644
index 0000000..9dcc5b3
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/voronoi/voronoi-core.js
@@ -0,0 +1,1726 @@
+/*!
+Copyright (C) 2010-2013 Raymond Hill: https://github.com/gorhill/Javascript-Voronoi
+MIT License: See https://github.com/gorhill/Javascript-Voronoi/LICENSE.md
+*/
+/*
+Author: Raymond Hill (rhill@raymondhill.net)
+Contributor: Jesse Morgan (morgajel@gmail.com)
+File: rhill-voronoi-core.js
+Version: 0.98
+Date: January 21, 2013
+Description: This is my personal Javascript implementation of
+Steven Fortune's algorithm to compute Voronoi diagrams.
+
+License: See https://github.com/gorhill/Javascript-Voronoi/LICENSE.md
+Credits: See https://github.com/gorhill/Javascript-Voronoi/CREDITS.md
+History: See https://github.com/gorhill/Javascript-Voronoi/CHANGELOG.md
+
+## Usage:
+
+ var sites = [{x:300,y:300}, {x:100,y:100}, {x:200,y:500}, {x:250,y:450}, {x:600,y:150}];
+ // xl, xr means x left, x right
+ // yt, yb means y top, y bottom
+ var bbox = {xl:0, xr:800, yt:0, yb:600};
+ var voronoi = new Voronoi();
+ // pass an object which exhibits xl, xr, yt, yb properties. The bounding
+ // box will be used to connect unbound edges, and to close open cells
+ result = voronoi.compute(sites, bbox);
+ // render, further analyze, etc.
+
+Return value:
+ An object with the following properties:
+
+ result.vertices = an array of unordered, unique Voronoi.Vertex objects making
+ up the Voronoi diagram.
+ result.edges = an array of unordered, unique Voronoi.Edge objects making up
+ the Voronoi diagram.
+ result.cells = an array of Voronoi.Cell object making up the Voronoi diagram.
+ A Cell object might have an empty array of halfedges, meaning no Voronoi
+ cell could be computed for a particular cell.
+ result.execTime = the time it took to compute the Voronoi diagram, in
+ milliseconds.
+
+Voronoi.Vertex object:
+ x: The x position of the vertex.
+ y: The y position of the vertex.
+
+Voronoi.Edge object:
+ lSite: the Voronoi site object at the left of this Voronoi.Edge object.
+ rSite: the Voronoi site object at the right of this Voronoi.Edge object (can
+ be null).
+ va: an object with an 'x' and a 'y' property defining the start point
+ (relative to the Voronoi site on the left) of this Voronoi.Edge object.
+ vb: an object with an 'x' and a 'y' property defining the end point
+ (relative to Voronoi site on the left) of this Voronoi.Edge object.
+
+ For edges which are used to close open cells (using the supplied bounding
+ box), the rSite property will be null.
+
+Voronoi.Cell object:
+ site: the Voronoi site object associated with the Voronoi cell.
+ halfedges: an array of Voronoi.Halfedge objects, ordered counterclockwise,
+ defining the polygon for this Voronoi cell.
+
+Voronoi.Halfedge object:
+ site: the Voronoi site object owning this Voronoi.Halfedge object.
+ edge: a reference to the unique Voronoi.Edge object underlying this
+ Voronoi.Halfedge object.
+ getStartpoint(): a method returning an object with an 'x' and a 'y' property
+ for the start point of this halfedge. Keep in mind halfedges are always
+ countercockwise.
+ getEndpoint(): a method returning an object with an 'x' and a 'y' property
+ for the end point of this halfedge. Keep in mind halfedges are always
+ countercockwise.
+
+TODO: Identify opportunities for performance improvement.
+
+TODO: Let the user close the Voronoi cells, do not do it automatically. Not only let
+ him close the cells, but also allow him to close more than once using a different
+ bounding box for the same Voronoi diagram.
+*/
+
+/*global Math */
+
+// ---------------------------------------------------------------------------
+
+function Voronoi() {
+ this.vertices = null;
+ this.edges = null;
+ this.cells = null;
+ this.toRecycle = null;
+ this.beachsectionJunkyard = [];
+ this.circleEventJunkyard = [];
+ this.vertexJunkyard = [];
+ this.edgeJunkyard = [];
+ this.cellJunkyard = [];
+ }
+
+// ---------------------------------------------------------------------------
+
+Voronoi.prototype.reset = function() {
+ if (!this.beachline) {
+ this.beachline = new this.RBTree();
+ }
+ // Move leftover beachsections to the beachsection junkyard.
+ if (this.beachline.root) {
+ var beachsection = this.beachline.getFirst(this.beachline.root);
+ while (beachsection) {
+ this.beachsectionJunkyard.push(beachsection); // mark for reuse
+ beachsection = beachsection.rbNext;
+ }
+ }
+ this.beachline.root = null;
+ if (!this.circleEvents) {
+ this.circleEvents = new this.RBTree();
+ }
+ this.circleEvents.root = this.firstCircleEvent = null;
+ this.vertices = [];
+ this.edges = [];
+ this.cells = [];
+ };
+
+Voronoi.prototype.sqrt = Math.sqrt;
+Voronoi.prototype.abs = Math.abs;
+Voronoi.prototype.ε = Voronoi.ε = 1e-9;
+Voronoi.prototype.invε = Voronoi.invε = 1.0 / Voronoi.ε;
+Voronoi.prototype.equalWithEpsilon = function(a,b){return this.abs(a-b)<1e-9;};
+Voronoi.prototype.greaterThanWithEpsilon = function(a,b){return a-b>1e-9;};
+Voronoi.prototype.greaterThanOrEqualWithEpsilon = function(a,b){return b-a<1e-9;};
+Voronoi.prototype.lessThanWithEpsilon = function(a,b){return b-a>1e-9;};
+Voronoi.prototype.lessThanOrEqualWithEpsilon = function(a,b){return a-b<1e-9;};
+
+// ---------------------------------------------------------------------------
+// Red-Black tree code (based on C version of "rbtree" by Franck Bui-Huu
+// https://github.com/fbuihuu/libtree/blob/master/rb.c
+
+Voronoi.prototype.RBTree = function() {
+ this.root = null;
+ };
+
+Voronoi.prototype.RBTree.prototype.rbInsertSuccessor = function(node, successor) {
+ var parent;
+ if (node) {
+ // >>> rhill 2011-05-27: Performance: cache previous/next nodes
+ successor.rbPrevious = node;
+ successor.rbNext = node.rbNext;
+ if (node.rbNext) {
+ node.rbNext.rbPrevious = successor;
+ }
+ node.rbNext = successor;
+ // <<<
+ if (node.rbRight) {
+ // in-place expansion of node.rbRight.getFirst();
+ node = node.rbRight;
+ while (node.rbLeft) {node = node.rbLeft;}
+ node.rbLeft = successor;
+ }
+ else {
+ node.rbRight = successor;
+ }
+ parent = node;
+ }
+ // rhill 2011-06-07: if node is null, successor must be inserted
+ // to the left-most part of the tree
+ else if (this.root) {
+ node = this.getFirst(this.root);
+ // >>> Performance: cache previous/next nodes
+ successor.rbPrevious = null;
+ successor.rbNext = node;
+ node.rbPrevious = successor;
+ // <<<
+ node.rbLeft = successor;
+ parent = node;
+ }
+ else {
+ // >>> Performance: cache previous/next nodes
+ successor.rbPrevious = successor.rbNext = null;
+ // <<<
+ this.root = successor;
+ parent = null;
+ }
+ successor.rbLeft = successor.rbRight = null;
+ successor.rbParent = parent;
+ successor.rbRed = true;
+ // Fixup the modified tree by recoloring nodes and performing
+ // rotations (2 at most) hence the red-black tree properties are
+ // preserved.
+ var grandpa, uncle;
+ node = successor;
+ while (parent && parent.rbRed) {
+ grandpa = parent.rbParent;
+ if (parent === grandpa.rbLeft) {
+ uncle = grandpa.rbRight;
+ if (uncle && uncle.rbRed) {
+ parent.rbRed = uncle.rbRed = false;
+ grandpa.rbRed = true;
+ node = grandpa;
+ }
+ else {
+ if (node === parent.rbRight) {
+ this.rbRotateLeft(parent);
+ node = parent;
+ parent = node.rbParent;
+ }
+ parent.rbRed = false;
+ grandpa.rbRed = true;
+ this.rbRotateRight(grandpa);
+ }
+ }
+ else {
+ uncle = grandpa.rbLeft;
+ if (uncle && uncle.rbRed) {
+ parent.rbRed = uncle.rbRed = false;
+ grandpa.rbRed = true;
+ node = grandpa;
+ }
+ else {
+ if (node === parent.rbLeft) {
+ this.rbRotateRight(parent);
+ node = parent;
+ parent = node.rbParent;
+ }
+ parent.rbRed = false;
+ grandpa.rbRed = true;
+ this.rbRotateLeft(grandpa);
+ }
+ }
+ parent = node.rbParent;
+ }
+ this.root.rbRed = false;
+ };
+
+Voronoi.prototype.RBTree.prototype.rbRemoveNode = function(node) {
+ // >>> rhill 2011-05-27: Performance: cache previous/next nodes
+ if (node.rbNext) {
+ node.rbNext.rbPrevious = node.rbPrevious;
+ }
+ if (node.rbPrevious) {
+ node.rbPrevious.rbNext = node.rbNext;
+ }
+ node.rbNext = node.rbPrevious = null;
+ // <<<
+ var parent = node.rbParent,
+ left = node.rbLeft,
+ right = node.rbRight,
+ next;
+ if (!left) {
+ next = right;
+ }
+ else if (!right) {
+ next = left;
+ }
+ else {
+ next = this.getFirst(right);
+ }
+ if (parent) {
+ if (parent.rbLeft === node) {
+ parent.rbLeft = next;
+ }
+ else {
+ parent.rbRight = next;
+ }
+ }
+ else {
+ this.root = next;
+ }
+ // enforce red-black rules
+ var isRed;
+ if (left && right) {
+ isRed = next.rbRed;
+ next.rbRed = node.rbRed;
+ next.rbLeft = left;
+ left.rbParent = next;
+ if (next !== right) {
+ parent = next.rbParent;
+ next.rbParent = node.rbParent;
+ node = next.rbRight;
+ parent.rbLeft = node;
+ next.rbRight = right;
+ right.rbParent = next;
+ }
+ else {
+ next.rbParent = parent;
+ parent = next;
+ node = next.rbRight;
+ }
+ }
+ else {
+ isRed = node.rbRed;
+ node = next;
+ }
+ // 'node' is now the sole successor's child and 'parent' its
+ // new parent (since the successor can have been moved)
+ if (node) {
+ node.rbParent = parent;
+ }
+ // the 'easy' cases
+ if (isRed) {return;}
+ if (node && node.rbRed) {
+ node.rbRed = false;
+ return;
+ }
+ // the other cases
+ var sibling;
+ do {
+ if (node === this.root) {
+ break;
+ }
+ if (node === parent.rbLeft) {
+ sibling = parent.rbRight;
+ if (sibling.rbRed) {
+ sibling.rbRed = false;
+ parent.rbRed = true;
+ this.rbRotateLeft(parent);
+ sibling = parent.rbRight;
+ }
+ if ((sibling.rbLeft && sibling.rbLeft.rbRed) || (sibling.rbRight && sibling.rbRight.rbRed)) {
+ if (!sibling.rbRight || !sibling.rbRight.rbRed) {
+ sibling.rbLeft.rbRed = false;
+ sibling.rbRed = true;
+ this.rbRotateRight(sibling);
+ sibling = parent.rbRight;
+ }
+ sibling.rbRed = parent.rbRed;
+ parent.rbRed = sibling.rbRight.rbRed = false;
+ this.rbRotateLeft(parent);
+ node = this.root;
+ break;
+ }
+ }
+ else {
+ sibling = parent.rbLeft;
+ if (sibling.rbRed) {
+ sibling.rbRed = false;
+ parent.rbRed = true;
+ this.rbRotateRight(parent);
+ sibling = parent.rbLeft;
+ }
+ if ((sibling.rbLeft && sibling.rbLeft.rbRed) || (sibling.rbRight && sibling.rbRight.rbRed)) {
+ if (!sibling.rbLeft || !sibling.rbLeft.rbRed) {
+ sibling.rbRight.rbRed = false;
+ sibling.rbRed = true;
+ this.rbRotateLeft(sibling);
+ sibling = parent.rbLeft;
+ }
+ sibling.rbRed = parent.rbRed;
+ parent.rbRed = sibling.rbLeft.rbRed = false;
+ this.rbRotateRight(parent);
+ node = this.root;
+ break;
+ }
+ }
+ sibling.rbRed = true;
+ node = parent;
+ parent = parent.rbParent;
+ } while (!node.rbRed);
+ if (node) {node.rbRed = false;}
+ };
+
+Voronoi.prototype.RBTree.prototype.rbRotateLeft = function(node) {
+ var p = node,
+ q = node.rbRight, // can't be null
+ parent = p.rbParent;
+ if (parent) {
+ if (parent.rbLeft === p) {
+ parent.rbLeft = q;
+ }
+ else {
+ parent.rbRight = q;
+ }
+ }
+ else {
+ this.root = q;
+ }
+ q.rbParent = parent;
+ p.rbParent = q;
+ p.rbRight = q.rbLeft;
+ if (p.rbRight) {
+ p.rbRight.rbParent = p;
+ }
+ q.rbLeft = p;
+ };
+
+Voronoi.prototype.RBTree.prototype.rbRotateRight = function(node) {
+ var p = node,
+ q = node.rbLeft, // can't be null
+ parent = p.rbParent;
+ if (parent) {
+ if (parent.rbLeft === p) {
+ parent.rbLeft = q;
+ }
+ else {
+ parent.rbRight = q;
+ }
+ }
+ else {
+ this.root = q;
+ }
+ q.rbParent = parent;
+ p.rbParent = q;
+ p.rbLeft = q.rbRight;
+ if (p.rbLeft) {
+ p.rbLeft.rbParent = p;
+ }
+ q.rbRight = p;
+ };
+
+Voronoi.prototype.RBTree.prototype.getFirst = function(node) {
+ while (node.rbLeft) {
+ node = node.rbLeft;
+ }
+ return node;
+ };
+
+Voronoi.prototype.RBTree.prototype.getLast = function(node) {
+ while (node.rbRight) {
+ node = node.rbRight;
+ }
+ return node;
+ };
+
+// ---------------------------------------------------------------------------
+// Diagram methods
+
+Voronoi.prototype.Diagram = function(site) {
+ this.site = site;
+ };
+
+// ---------------------------------------------------------------------------
+// Cell methods
+
+Voronoi.prototype.Cell = function(site) {
+ this.site = site;
+ this.halfedges = [];
+ this.closeMe = false;
+ };
+
+Voronoi.prototype.Cell.prototype.init = function(site) {
+ this.site = site;
+ this.halfedges = [];
+ this.closeMe = false;
+ return this;
+ };
+
+Voronoi.prototype.createCell = function(site) {
+ var cell = this.cellJunkyard.pop();
+ if ( cell ) {
+ return cell.init(site);
+ }
+ return new this.Cell(site);
+ };
+
+Voronoi.prototype.Cell.prototype.prepareHalfedges = function() {
+ var halfedges = this.halfedges,
+ iHalfedge = halfedges.length,
+ edge;
+ // get rid of unused halfedges
+ // rhill 2011-05-27: Keep it simple, no point here in trying
+ // to be fancy: dangling edges are a typically a minority.
+ while (iHalfedge--) {
+ edge = halfedges[iHalfedge].edge;
+ if (!edge.vb || !edge.va) {
+ halfedges.splice(iHalfedge,1);
+ }
+ }
+
+ // rhill 2011-05-26: I tried to use a binary search at insertion
+ // time to keep the array sorted on-the-fly (in Cell.addHalfedge()).
+ // There was no real benefits in doing so, performance on
+ // Firefox 3.6 was improved marginally, while performance on
+ // Opera 11 was penalized marginally.
+ halfedges.sort(function(a,b){return b.angle-a.angle;});
+ return halfedges.length;
+ };
+
+// Return a list of the neighbor Ids
+Voronoi.prototype.Cell.prototype.getNeighborIds = function() {
+ var neighbors = [],
+ iHalfedge = this.halfedges.length,
+ edge;
+ while (iHalfedge--){
+ edge = this.halfedges[iHalfedge].edge;
+ if (edge.lSite !== null && edge.lSite.voronoiId != this.site.voronoiId) {
+ neighbors.push(edge.lSite.voronoiId);
+ }
+ else if (edge.rSite !== null && edge.rSite.voronoiId != this.site.voronoiId){
+ neighbors.push(edge.rSite.voronoiId);
+ }
+ }
+ return neighbors;
+ };
+
+// Compute bounding box
+//
+Voronoi.prototype.Cell.prototype.getBbox = function() {
+ var halfedges = this.halfedges,
+ iHalfedge = halfedges.length,
+ xmin = Infinity,
+ ymin = Infinity,
+ xmax = -Infinity,
+ ymax = -Infinity,
+ v, vx, vy;
+ while (iHalfedge--) {
+ v = halfedges[iHalfedge].getStartpoint();
+ vx = v.x;
+ vy = v.y;
+ if (vx < xmin) {xmin = vx;}
+ if (vy < ymin) {ymin = vy;}
+ if (vx > xmax) {xmax = vx;}
+ if (vy > ymax) {ymax = vy;}
+ // we dont need to take into account end point,
+ // since each end point matches a start point
+ }
+ return {
+ x: xmin,
+ y: ymin,
+ width: xmax-xmin,
+ height: ymax-ymin
+ };
+ };
+
+// Return whether a point is inside, on, or outside the cell:
+// -1: point is outside the perimeter of the cell
+// 0: point is on the perimeter of the cell
+// 1: point is inside the perimeter of the cell
+//
+Voronoi.prototype.Cell.prototype.pointIntersection = function(x, y) {
+ // Check if point in polygon. Since all polygons of a Voronoi
+ // diagram are convex, then:
+ // http://paulbourke.net/geometry/polygonmesh/
+ // Solution 3 (2D):
+ // "If the polygon is convex then one can consider the polygon
+ // "as a 'path' from the first vertex. A point is on the interior
+ // "of this polygons if it is always on the same side of all the
+ // "line segments making up the path. ...
+ // "(y - y0) (x1 - x0) - (x - x0) (y1 - y0)
+ // "if it is less than 0 then P is to the right of the line segment,
+ // "if greater than 0 it is to the left, if equal to 0 then it lies
+ // "on the line segment"
+ var halfedges = this.halfedges,
+ iHalfedge = halfedges.length,
+ halfedge,
+ p0, p1, r;
+ while (iHalfedge--) {
+ halfedge = halfedges[iHalfedge];
+ p0 = halfedge.getStartpoint();
+ p1 = halfedge.getEndpoint();
+ r = (y-p0.y)*(p1.x-p0.x)-(x-p0.x)*(p1.y-p0.y);
+ if (!r) {
+ return 0;
+ }
+ if (r > 0) {
+ return -1;
+ }
+ }
+ return 1;
+ };
+
+// ---------------------------------------------------------------------------
+// Edge methods
+//
+
+Voronoi.prototype.Vertex = function(x, y) {
+ this.x = x;
+ this.y = y;
+ };
+
+Voronoi.prototype.Edge = function(lSite, rSite) {
+ this.lSite = lSite;
+ this.rSite = rSite;
+ this.va = this.vb = null;
+ };
+
+Voronoi.prototype.Halfedge = function(edge, lSite, rSite) {
+ this.site = lSite;
+ this.edge = edge;
+ // 'angle' is a value to be used for properly sorting the
+ // halfsegments counterclockwise. By convention, we will
+ // use the angle of the line defined by the 'site to the left'
+ // to the 'site to the right'.
+ // However, border edges have no 'site to the right': thus we
+ // use the angle of line perpendicular to the halfsegment (the
+ // edge should have both end points defined in such case.)
+ if (rSite) {
+ this.angle = Math.atan2(rSite.y-lSite.y, rSite.x-lSite.x);
+ }
+ else {
+ var va = edge.va,
+ vb = edge.vb;
+ // rhill 2011-05-31: used to call getStartpoint()/getEndpoint(),
+ // but for performance purpose, these are expanded in place here.
+ this.angle = edge.lSite === lSite ?
+ Math.atan2(vb.x-va.x, va.y-vb.y) :
+ Math.atan2(va.x-vb.x, vb.y-va.y);
+ }
+ };
+
+Voronoi.prototype.createHalfedge = function(edge, lSite, rSite) {
+ return new this.Halfedge(edge, lSite, rSite);
+ };
+
+Voronoi.prototype.Halfedge.prototype.getStartpoint = function() {
+ return this.edge.lSite === this.site ? this.edge.va : this.edge.vb;
+ };
+
+Voronoi.prototype.Halfedge.prototype.getEndpoint = function() {
+ return this.edge.lSite === this.site ? this.edge.vb : this.edge.va;
+ };
+
+
+
+// this create and add a vertex to the internal collection
+
+Voronoi.prototype.createVertex = function(x, y) {
+ var v = this.vertexJunkyard.pop();
+ if ( !v ) {
+ v = new this.Vertex(x, y);
+ }
+ else {
+ v.x = x;
+ v.y = y;
+ }
+ this.vertices.push(v);
+ return v;
+ };
+
+// this create and add an edge to internal collection, and also create
+// two halfedges which are added to each site's counterclockwise array
+// of halfedges.
+
+Voronoi.prototype.createEdge = function(lSite, rSite, va, vb) {
+ var edge = this.edgeJunkyard.pop();
+ if ( !edge ) {
+ edge = new this.Edge(lSite, rSite);
+ }
+ else {
+ edge.lSite = lSite;
+ edge.rSite = rSite;
+ edge.va = edge.vb = null;
+ }
+
+ this.edges.push(edge);
+ if (va) {
+ this.setEdgeStartpoint(edge, lSite, rSite, va);
+ }
+ if (vb) {
+ this.setEdgeEndpoint(edge, lSite, rSite, vb);
+ }
+ this.cells[lSite.voronoiId].halfedges.push(this.createHalfedge(edge, lSite, rSite));
+ this.cells[rSite.voronoiId].halfedges.push(this.createHalfedge(edge, rSite, lSite));
+ return edge;
+ };
+
+Voronoi.prototype.createBorderEdge = function(lSite, va, vb) {
+ var edge = this.edgeJunkyard.pop();
+ if ( !edge ) {
+ edge = new this.Edge(lSite, null);
+ }
+ else {
+ edge.lSite = lSite;
+ edge.rSite = null;
+ }
+ edge.va = va;
+ edge.vb = vb;
+ this.edges.push(edge);
+ return edge;
+ };
+
+Voronoi.prototype.setEdgeStartpoint = function(edge, lSite, rSite, vertex) {
+ if (!edge.va && !edge.vb) {
+ edge.va = vertex;
+ edge.lSite = lSite;
+ edge.rSite = rSite;
+ }
+ else if (edge.lSite === rSite) {
+ edge.vb = vertex;
+ }
+ else {
+ edge.va = vertex;
+ }
+ };
+
+Voronoi.prototype.setEdgeEndpoint = function(edge, lSite, rSite, vertex) {
+ this.setEdgeStartpoint(edge, rSite, lSite, vertex);
+ };
+
+// ---------------------------------------------------------------------------
+// Beachline methods
+
+// rhill 2011-06-07: For some reasons, performance suffers significantly
+// when instanciating a literal object instead of an empty ctor
+Voronoi.prototype.Beachsection = function() {
+ };
+
+// rhill 2011-06-02: A lot of Beachsection instanciations
+// occur during the computation of the Voronoi diagram,
+// somewhere between the number of sites and twice the
+// number of sites, while the number of Beachsections on the
+// beachline at any given time is comparatively low. For this
+// reason, we reuse already created Beachsections, in order
+// to avoid new memory allocation. This resulted in a measurable
+// performance gain.
+
+Voronoi.prototype.createBeachsection = function(site) {
+ var beachsection = this.beachsectionJunkyard.pop();
+ if (!beachsection) {
+ beachsection = new this.Beachsection();
+ }
+ beachsection.site = site;
+ return beachsection;
+ };
+
+// calculate the left break point of a particular beach section,
+// given a particular sweep line
+Voronoi.prototype.leftBreakPoint = function(arc, directrix) {
+ // http://en.wikipedia.org/wiki/Parabola
+ // http://en.wikipedia.org/wiki/Quadratic_equation
+ // h1 = x1,
+ // k1 = (y1+directrix)/2,
+ // h2 = x2,
+ // k2 = (y2+directrix)/2,
+ // p1 = k1-directrix,
+ // a1 = 1/(4*p1),
+ // b1 = -h1/(2*p1),
+ // c1 = h1*h1/(4*p1)+k1,
+ // p2 = k2-directrix,
+ // a2 = 1/(4*p2),
+ // b2 = -h2/(2*p2),
+ // c2 = h2*h2/(4*p2)+k2,
+ // x = (-(b2-b1) + Math.sqrt((b2-b1)*(b2-b1) - 4*(a2-a1)*(c2-c1))) / (2*(a2-a1))
+ // When x1 become the x-origin:
+ // h1 = 0,
+ // k1 = (y1+directrix)/2,
+ // h2 = x2-x1,
+ // k2 = (y2+directrix)/2,
+ // p1 = k1-directrix,
+ // a1 = 1/(4*p1),
+ // b1 = 0,
+ // c1 = k1,
+ // p2 = k2-directrix,
+ // a2 = 1/(4*p2),
+ // b2 = -h2/(2*p2),
+ // c2 = h2*h2/(4*p2)+k2,
+ // x = (-b2 + Math.sqrt(b2*b2 - 4*(a2-a1)*(c2-k1))) / (2*(a2-a1)) + x1
+
+ // change code below at your own risk: care has been taken to
+ // reduce errors due to computers' finite arithmetic precision.
+ // Maybe can still be improved, will see if any more of this
+ // kind of errors pop up again.
+ var site = arc.site,
+ rfocx = site.x,
+ rfocy = site.y,
+ pby2 = rfocy-directrix;
+ // parabola in degenerate case where focus is on directrix
+ if (!pby2) {
+ return rfocx;
+ }
+ var lArc = arc.rbPrevious;
+ if (!lArc) {
+ return -Infinity;
+ }
+ site = lArc.site;
+ var lfocx = site.x,
+ lfocy = site.y,
+ plby2 = lfocy-directrix;
+ // parabola in degenerate case where focus is on directrix
+ if (!plby2) {
+ return lfocx;
+ }
+ var hl = lfocx-rfocx,
+ aby2 = 1/pby2-1/plby2,
+ b = hl/plby2;
+ if (aby2) {
+ return (-b+this.sqrt(b*b-2*aby2*(hl*hl/(-2*plby2)-lfocy+plby2/2+rfocy-pby2/2)))/aby2+rfocx;
+ }
+ // both parabolas have same distance to directrix, thus break point is midway
+ return (rfocx+lfocx)/2;
+ };
+
+// calculate the right break point of a particular beach section,
+// given a particular directrix
+Voronoi.prototype.rightBreakPoint = function(arc, directrix) {
+ var rArc = arc.rbNext;
+ if (rArc) {
+ return this.leftBreakPoint(rArc, directrix);
+ }
+ var site = arc.site;
+ return site.y === directrix ? site.x : Infinity;
+ };
+
+Voronoi.prototype.detachBeachsection = function(beachsection) {
+ this.detachCircleEvent(beachsection); // detach potentially attached circle event
+ this.beachline.rbRemoveNode(beachsection); // remove from RB-tree
+ this.beachsectionJunkyard.push(beachsection); // mark for reuse
+ };
+
+Voronoi.prototype.removeBeachsection = function(beachsection) {
+ var circle = beachsection.circleEvent,
+ x = circle.x,
+ y = circle.ycenter,
+ vertex = this.createVertex(x, y),
+ previous = beachsection.rbPrevious,
+ next = beachsection.rbNext,
+ disappearingTransitions = [beachsection],
+ abs_fn = Math.abs;
+
+ // remove collapsed beachsection from beachline
+ this.detachBeachsection(beachsection);
+
+ // there could be more than one empty arc at the deletion point, this
+ // happens when more than two edges are linked by the same vertex,
+ // so we will collect all those edges by looking up both sides of
+ // the deletion point.
+ // by the way, there is *always* a predecessor/successor to any collapsed
+ // beach section, it's just impossible to have a collapsing first/last
+ // beach sections on the beachline, since they obviously are unconstrained
+ // on their left/right side.
+
+ // look left
+ var lArc = previous;
+ while (lArc.circleEvent && abs_fn(x-lArc.circleEvent.x)<1e-9 && abs_fn(y-lArc.circleEvent.ycenter)<1e-9) {
+ previous = lArc.rbPrevious;
+ disappearingTransitions.unshift(lArc);
+ this.detachBeachsection(lArc); // mark for reuse
+ lArc = previous;
+ }
+ // even though it is not disappearing, I will also add the beach section
+ // immediately to the left of the left-most collapsed beach section, for
+ // convenience, since we need to refer to it later as this beach section
+ // is the 'left' site of an edge for which a start point is set.
+ disappearingTransitions.unshift(lArc);
+ this.detachCircleEvent(lArc);
+
+ // look right
+ var rArc = next;
+ while (rArc.circleEvent && abs_fn(x-rArc.circleEvent.x)<1e-9 && abs_fn(y-rArc.circleEvent.ycenter)<1e-9) {
+ next = rArc.rbNext;
+ disappearingTransitions.push(rArc);
+ this.detachBeachsection(rArc); // mark for reuse
+ rArc = next;
+ }
+ // we also have to add the beach section immediately to the right of the
+ // right-most collapsed beach section, since there is also a disappearing
+ // transition representing an edge's start point on its left.
+ disappearingTransitions.push(rArc);
+ this.detachCircleEvent(rArc);
+
+ // walk through all the disappearing transitions between beach sections and
+ // set the start point of their (implied) edge.
+ var nArcs = disappearingTransitions.length,
+ iArc;
+ for (iArc=1; iArc<nArcs; iArc++) {
+ rArc = disappearingTransitions[iArc];
+ lArc = disappearingTransitions[iArc-1];
+ this.setEdgeStartpoint(rArc.edge, lArc.site, rArc.site, vertex);
+ }
+
+ // create a new edge as we have now a new transition between
+ // two beach sections which were previously not adjacent.
+ // since this edge appears as a new vertex is defined, the vertex
+ // actually define an end point of the edge (relative to the site
+ // on the left)
+ lArc = disappearingTransitions[0];
+ rArc = disappearingTransitions[nArcs-1];
+ rArc.edge = this.createEdge(lArc.site, rArc.site, undefined, vertex);
+
+ // create circle events if any for beach sections left in the beachline
+ // adjacent to collapsed sections
+ this.attachCircleEvent(lArc);
+ this.attachCircleEvent(rArc);
+ };
+
+Voronoi.prototype.addBeachsection = function(site) {
+ var x = site.x,
+ directrix = site.y;
+
+ // find the left and right beach sections which will surround the newly
+ // created beach section.
+ // rhill 2011-06-01: This loop is one of the most often executed,
+ // hence we expand in-place the comparison-against-epsilon calls.
+ var lArc, rArc,
+ dxl, dxr,
+ node = this.beachline.root;
+
+ while (node) {
+ dxl = this.leftBreakPoint(node,directrix)-x;
+ // x lessThanWithEpsilon xl => falls somewhere before the left edge of the beachsection
+ if (dxl > 1e-9) {
+ // this case should never happen
+ // if (!node.rbLeft) {
+ // rArc = node.rbLeft;
+ // break;
+ // }
+ node = node.rbLeft;
+ }
+ else {
+ dxr = x-this.rightBreakPoint(node,directrix);
+ // x greaterThanWithEpsilon xr => falls somewhere after the right edge of the beachsection
+ if (dxr > 1e-9) {
+ if (!node.rbRight) {
+ lArc = node;
+ break;
+ }
+ node = node.rbRight;
+ }
+ else {
+ // x equalWithEpsilon xl => falls exactly on the left edge of the beachsection
+ if (dxl > -1e-9) {
+ lArc = node.rbPrevious;
+ rArc = node;
+ }
+ // x equalWithEpsilon xr => falls exactly on the right edge of the beachsection
+ else if (dxr > -1e-9) {
+ lArc = node;
+ rArc = node.rbNext;
+ }
+ // falls exactly somewhere in the middle of the beachsection
+ else {
+ lArc = rArc = node;
+ }
+ break;
+ }
+ }
+ }
+ // at this point, keep in mind that lArc and/or rArc could be
+ // undefined or null.
+
+ // create a new beach section object for the site and add it to RB-tree
+ var newArc = this.createBeachsection(site);
+ this.beachline.rbInsertSuccessor(lArc, newArc);
+
+ // cases:
+ //
+
+ // [null,null]
+ // least likely case: new beach section is the first beach section on the
+ // beachline.
+ // This case means:
+ // no new transition appears
+ // no collapsing beach section
+ // new beachsection become root of the RB-tree
+ if (!lArc && !rArc) {
+ return;
+ }
+
+ // [lArc,rArc] where lArc == rArc
+ // most likely case: new beach section split an existing beach
+ // section.
+ // This case means:
+ // one new transition appears
+ // the left and right beach section might be collapsing as a result
+ // two new nodes added to the RB-tree
+ if (lArc === rArc) {
+ // invalidate circle event of split beach section
+ this.detachCircleEvent(lArc);
+
+ // split the beach section into two separate beach sections
+ rArc = this.createBeachsection(lArc.site);
+ this.beachline.rbInsertSuccessor(newArc, rArc);
+
+ // since we have a new transition between two beach sections,
+ // a new edge is born
+ newArc.edge = rArc.edge = this.createEdge(lArc.site, newArc.site);
+
+ // check whether the left and right beach sections are collapsing
+ // and if so create circle events, to be notified when the point of
+ // collapse is reached.
+ this.attachCircleEvent(lArc);
+ this.attachCircleEvent(rArc);
+ return;
+ }
+
+ // [lArc,null]
+ // even less likely case: new beach section is the *last* beach section
+ // on the beachline -- this can happen *only* if *all* the previous beach
+ // sections currently on the beachline share the same y value as
+ // the new beach section.
+ // This case means:
+ // one new transition appears
+ // no collapsing beach section as a result
+ // new beach section become right-most node of the RB-tree
+ if (lArc && !rArc) {
+ newArc.edge = this.createEdge(lArc.site,newArc.site);
+ return;
+ }
+
+ // [null,rArc]
+ // impossible case: because sites are strictly processed from top to bottom,
+ // and left to right, which guarantees that there will always be a beach section
+ // on the left -- except of course when there are no beach section at all on
+ // the beach line, which case was handled above.
+ // rhill 2011-06-02: No point testing in non-debug version
+ //if (!lArc && rArc) {
+ // throw "Voronoi.addBeachsection(): What is this I don't even";
+ // }
+
+ // [lArc,rArc] where lArc != rArc
+ // somewhat less likely case: new beach section falls *exactly* in between two
+ // existing beach sections
+ // This case means:
+ // one transition disappears
+ // two new transitions appear
+ // the left and right beach section might be collapsing as a result
+ // only one new node added to the RB-tree
+ if (lArc !== rArc) {
+ // invalidate circle events of left and right sites
+ this.detachCircleEvent(lArc);
+ this.detachCircleEvent(rArc);
+
+ // an existing transition disappears, meaning a vertex is defined at
+ // the disappearance point.
+ // since the disappearance is caused by the new beachsection, the
+ // vertex is at the center of the circumscribed circle of the left,
+ // new and right beachsections.
+ // http://mathforum.org/library/drmath/view/55002.html
+ // Except that I bring the origin at A to simplify
+ // calculation
+ var lSite = lArc.site,
+ ax = lSite.x,
+ ay = lSite.y,
+ bx=site.x-ax,
+ by=site.y-ay,
+ rSite = rArc.site,
+ cx=rSite.x-ax,
+ cy=rSite.y-ay,
+ d=2*(bx*cy-by*cx),
+ hb=bx*bx+by*by,
+ hc=cx*cx+cy*cy,
+ vertex = this.createVertex((cy*hb-by*hc)/d+ax, (bx*hc-cx*hb)/d+ay);
+
+ // one transition disappear
+ this.setEdgeStartpoint(rArc.edge, lSite, rSite, vertex);
+
+ // two new transitions appear at the new vertex location
+ newArc.edge = this.createEdge(lSite, site, undefined, vertex);
+ rArc.edge = this.createEdge(site, rSite, undefined, vertex);
+
+ // check whether the left and right beach sections are collapsing
+ // and if so create circle events, to handle the point of collapse.
+ this.attachCircleEvent(lArc);
+ this.attachCircleEvent(rArc);
+ return;
+ }
+ };
+
+// ---------------------------------------------------------------------------
+// Circle event methods
+
+// rhill 2011-06-07: For some reasons, performance suffers significantly
+// when instanciating a literal object instead of an empty ctor
+Voronoi.prototype.CircleEvent = function() {
+ // rhill 2013-10-12: it helps to state exactly what we are at ctor time.
+ this.arc = null;
+ this.rbLeft = null;
+ this.rbNext = null;
+ this.rbParent = null;
+ this.rbPrevious = null;
+ this.rbRed = false;
+ this.rbRight = null;
+ this.site = null;
+ this.x = this.y = this.ycenter = 0;
+ };
+
+Voronoi.prototype.attachCircleEvent = function(arc) {
+ var lArc = arc.rbPrevious,
+ rArc = arc.rbNext;
+ if (!lArc || !rArc) {return;} // does that ever happen?
+ var lSite = lArc.site,
+ cSite = arc.site,
+ rSite = rArc.site;
+
+ // If site of left beachsection is same as site of
+ // right beachsection, there can't be convergence
+ if (lSite===rSite) {return;}
+
+ // Find the circumscribed circle for the three sites associated
+ // with the beachsection triplet.
+ // rhill 2011-05-26: It is more efficient to calculate in-place
+ // rather than getting the resulting circumscribed circle from an
+ // object returned by calling Voronoi.circumcircle()
+ // http://mathforum.org/library/drmath/view/55002.html
+ // Except that I bring the origin at cSite to simplify calculations.
+ // The bottom-most part of the circumcircle is our Fortune 'circle
+ // event', and its center is a vertex potentially part of the final
+ // Voronoi diagram.
+ var bx = cSite.x,
+ by = cSite.y,
+ ax = lSite.x-bx,
+ ay = lSite.y-by,
+ cx = rSite.x-bx,
+ cy = rSite.y-by;
+
+ // If points l->c->r are clockwise, then center beach section does not
+ // collapse, hence it can't end up as a vertex (we reuse 'd' here, which
+ // sign is reverse of the orientation, hence we reverse the test.
+ // http://en.wikipedia.org/wiki/Curve_orientation#Orientation_of_a_simple_polygon
+ // rhill 2011-05-21: Nasty finite precision error which caused circumcircle() to
+ // return infinites: 1e-12 seems to fix the problem.
+ var d = 2*(ax*cy-ay*cx);
+ if (d >= -2e-12){return;}
+
+ var ha = ax*ax+ay*ay,
+ hc = cx*cx+cy*cy,
+ x = (cy*ha-ay*hc)/d,
+ y = (ax*hc-cx*ha)/d,
+ ycenter = y+by;
+
+ // Important: ybottom should always be under or at sweep, so no need
+ // to waste CPU cycles by checking
+
+ // recycle circle event object if possible
+ var circleEvent = this.circleEventJunkyard.pop();
+ if (!circleEvent) {
+ circleEvent = new this.CircleEvent();
+ }
+ circleEvent.arc = arc;
+ circleEvent.site = cSite;
+ circleEvent.x = x+bx;
+ circleEvent.y = ycenter+this.sqrt(x*x+y*y); // y bottom
+ circleEvent.ycenter = ycenter;
+ arc.circleEvent = circleEvent;
+
+ // find insertion point in RB-tree: circle events are ordered from
+ // smallest to largest
+ var predecessor = null,
+ node = this.circleEvents.root;
+ while (node) {
+ if (circleEvent.y < node.y || (circleEvent.y === node.y && circleEvent.x <= node.x)) {
+ if (node.rbLeft) {
+ node = node.rbLeft;
+ }
+ else {
+ predecessor = node.rbPrevious;
+ break;
+ }
+ }
+ else {
+ if (node.rbRight) {
+ node = node.rbRight;
+ }
+ else {
+ predecessor = node;
+ break;
+ }
+ }
+ }
+ this.circleEvents.rbInsertSuccessor(predecessor, circleEvent);
+ if (!predecessor) {
+ this.firstCircleEvent = circleEvent;
+ }
+ };
+
+Voronoi.prototype.detachCircleEvent = function(arc) {
+ var circleEvent = arc.circleEvent;
+ if (circleEvent) {
+ if (!circleEvent.rbPrevious) {
+ this.firstCircleEvent = circleEvent.rbNext;
+ }
+ this.circleEvents.rbRemoveNode(circleEvent); // remove from RB-tree
+ this.circleEventJunkyard.push(circleEvent);
+ arc.circleEvent = null;
+ }
+ };
+
+// ---------------------------------------------------------------------------
+// Diagram completion methods
+
+// connect dangling edges (not if a cursory test tells us
+// it is not going to be visible.
+// return value:
+// false: the dangling endpoint couldn't be connected
+// true: the dangling endpoint could be connected
+Voronoi.prototype.connectEdge = function(edge, bbox) {
+ // skip if end point already connected
+ var vb = edge.vb;
+ if (!!vb) {return true;}
+
+ // make local copy for performance purpose
+ var va = edge.va,
+ xl = bbox.xl,
+ xr = bbox.xr,
+ yt = bbox.yt,
+ yb = bbox.yb,
+ lSite = edge.lSite,
+ rSite = edge.rSite,
+ lx = lSite.x,
+ ly = lSite.y,
+ rx = rSite.x,
+ ry = rSite.y,
+ fx = (lx+rx)/2,
+ fy = (ly+ry)/2,
+ fm, fb;
+
+ // if we reach here, this means cells which use this edge will need
+ // to be closed, whether because the edge was removed, or because it
+ // was connected to the bounding box.
+ this.cells[lSite.voronoiId].closeMe = true;
+ this.cells[rSite.voronoiId].closeMe = true;
+
+ // get the line equation of the bisector if line is not vertical
+ if (ry !== ly) {
+ fm = (lx-rx)/(ry-ly);
+ fb = fy-fm*fx;
+ }
+
+ // remember, direction of line (relative to left site):
+ // upward: left.x < right.x
+ // downward: left.x > right.x
+ // horizontal: left.x == right.x
+ // upward: left.x < right.x
+ // rightward: left.y < right.y
+ // leftward: left.y > right.y
+ // vertical: left.y == right.y
+
+ // depending on the direction, find the best side of the
+ // bounding box to use to determine a reasonable start point
+
+ // rhill 2013-12-02:
+ // While at it, since we have the values which define the line,
+ // clip the end of va if it is outside the bbox.
+ // https://github.com/gorhill/Javascript-Voronoi/issues/15
+ // TODO: Do all the clipping here rather than rely on Liang-Barsky
+ // which does not do well sometimes due to loss of arithmetic
+ // precision. The code here doesn't degrade if one of the vertex is
+ // at a huge distance.
+
+ // special case: vertical line
+ if (fm === undefined) {
+ // doesn't intersect with viewport
+ if (fx < xl || fx >= xr) {return false;}
+ // downward
+ if (lx > rx) {
+ if (!va || va.y < yt) {
+ va = this.createVertex(fx, yt);
+ }
+ else if (va.y >= yb) {
+ return false;
+ }
+ vb = this.createVertex(fx, yb);
+ }
+ // upward
+ else {
+ if (!va || va.y > yb) {
+ va = this.createVertex(fx, yb);
+ }
+ else if (va.y < yt) {
+ return false;
+ }
+ vb = this.createVertex(fx, yt);
+ }
+ }
+ // closer to vertical than horizontal, connect start point to the
+ // top or bottom side of the bounding box
+ else if (fm < -1 || fm > 1) {
+ // downward
+ if (lx > rx) {
+ if (!va || va.y < yt) {
+ va = this.createVertex((yt-fb)/fm, yt);
+ }
+ else if (va.y >= yb) {
+ return false;
+ }
+ vb = this.createVertex((yb-fb)/fm, yb);
+ }
+ // upward
+ else {
+ if (!va || va.y > yb) {
+ va = this.createVertex((yb-fb)/fm, yb);
+ }
+ else if (va.y < yt) {
+ return false;
+ }
+ vb = this.createVertex((yt-fb)/fm, yt);
+ }
+ }
+ // closer to horizontal than vertical, connect start point to the
+ // left or right side of the bounding box
+ else {
+ // rightward
+ if (ly < ry) {
+ if (!va || va.x < xl) {
+ va = this.createVertex(xl, fm*xl+fb);
+ }
+ else if (va.x >= xr) {
+ return false;
+ }
+ vb = this.createVertex(xr, fm*xr+fb);
+ }
+ // leftward
+ else {
+ if (!va || va.x > xr) {
+ va = this.createVertex(xr, fm*xr+fb);
+ }
+ else if (va.x < xl) {
+ return false;
+ }
+ vb = this.createVertex(xl, fm*xl+fb);
+ }
+ }
+ edge.va = va;
+ edge.vb = vb;
+
+ return true;
+ };
+
+// line-clipping code taken from:
+// Liang-Barsky function by Daniel White
+// http://www.skytopia.com/project/articles/compsci/clipping.html
+// Thanks!
+// A bit modified to minimize code paths
+Voronoi.prototype.clipEdge = function(edge, bbox) {
+ var ax = edge.va.x,
+ ay = edge.va.y,
+ bx = edge.vb.x,
+ by = edge.vb.y,
+ t0 = 0,
+ t1 = 1,
+ dx = bx-ax,
+ dy = by-ay;
+ // left
+ var q = ax-bbox.xl;
+ if (dx===0 && q<0) {return false;}
+ var r = -q/dx;
+ if (dx<0) {
+ if (r<t0) {return false;}
+ if (r<t1) {t1=r;}
+ }
+ else if (dx>0) {
+ if (r>t1) {return false;}
+ if (r>t0) {t0=r;}
+ }
+ // right
+ q = bbox.xr-ax;
+ if (dx===0 && q<0) {return false;}
+ r = q/dx;
+ if (dx<0) {
+ if (r>t1) {return false;}
+ if (r>t0) {t0=r;}
+ }
+ else if (dx>0) {
+ if (r<t0) {return false;}
+ if (r<t1) {t1=r;}
+ }
+ // top
+ q = ay-bbox.yt;
+ if (dy===0 && q<0) {return false;}
+ r = -q/dy;
+ if (dy<0) {
+ if (r<t0) {return false;}
+ if (r<t1) {t1=r;}
+ }
+ else if (dy>0) {
+ if (r>t1) {return false;}
+ if (r>t0) {t0=r;}
+ }
+ // bottom
+ q = bbox.yb-ay;
+ if (dy===0 && q<0) {return false;}
+ r = q/dy;
+ if (dy<0) {
+ if (r>t1) {return false;}
+ if (r>t0) {t0=r;}
+ }
+ else if (dy>0) {
+ if (r<t0) {return false;}
+ if (r<t1) {t1=r;}
+ }
+
+ // if we reach this point, Voronoi edge is within bbox
+
+ // if t0 > 0, va needs to change
+ // rhill 2011-06-03: we need to create a new vertex rather
+ // than modifying the existing one, since the existing
+ // one is likely shared with at least another edge
+ if (t0 > 0) {
+ edge.va = this.createVertex(ax+t0*dx, ay+t0*dy);
+ }
+
+ // if t1 < 1, vb needs to change
+ // rhill 2011-06-03: we need to create a new vertex rather
+ // than modifying the existing one, since the existing
+ // one is likely shared with at least another edge
+ if (t1 < 1) {
+ edge.vb = this.createVertex(ax+t1*dx, ay+t1*dy);
+ }
+
+ // va and/or vb were clipped, thus we will need to close
+ // cells which use this edge.
+ if ( t0 > 0 || t1 < 1 ) {
+ this.cells[edge.lSite.voronoiId].closeMe = true;
+ this.cells[edge.rSite.voronoiId].closeMe = true;
+ }
+
+ return true;
+ };
+
+// Connect/cut edges at bounding box
+Voronoi.prototype.clipEdges = function(bbox) {
+ // connect all dangling edges to bounding box
+ // or get rid of them if it can't be done
+ var edges = this.edges,
+ iEdge = edges.length,
+ edge,
+ abs_fn = Math.abs;
+
+ // iterate backward so we can splice safely
+ while (iEdge--) {
+ edge = edges[iEdge];
+ // edge is removed if:
+ // it is wholly outside the bounding box
+ // it is looking more like a point than a line
+ if (!this.connectEdge(edge, bbox) ||
+ !this.clipEdge(edge, bbox) ||
+ (abs_fn(edge.va.x-edge.vb.x)<1e-9 && abs_fn(edge.va.y-edge.vb.y)<1e-9)) {
+ edge.va = edge.vb = null;
+ edges.splice(iEdge,1);
+ }
+ }
+ };
+
+// Close the cells.
+// The cells are bound by the supplied bounding box.
+// Each cell refers to its associated site, and a list
+// of halfedges ordered counterclockwise.
+Voronoi.prototype.closeCells = function(bbox) {
+ var xl = bbox.xl,
+ xr = bbox.xr,
+ yt = bbox.yt,
+ yb = bbox.yb,
+ cells = this.cells,
+ iCell = cells.length,
+ cell,
+ iLeft,
+ halfedges, nHalfedges,
+ edge,
+ va, vb, vz,
+ lastBorderSegment,
+ abs_fn = Math.abs;
+
+ while (iCell--) {
+ cell = cells[iCell];
+ // prune, order halfedges counterclockwise, then add missing ones
+ // required to close cells
+ if (!cell.prepareHalfedges()) {
+ continue;
+ }
+ if (!cell.closeMe) {
+ continue;
+ }
+ // find first 'unclosed' point.
+ // an 'unclosed' point will be the end point of a halfedge which
+ // does not match the start point of the following halfedge
+ halfedges = cell.halfedges;
+ nHalfedges = halfedges.length;
+ // special case: only one site, in which case, the viewport is the cell
+ // ...
+
+ // all other cases
+ iLeft = 0;
+ while (iLeft < nHalfedges) {
+ va = halfedges[iLeft].getEndpoint();
+ vz = halfedges[(iLeft+1) % nHalfedges].getStartpoint();
+ // if end point is not equal to start point, we need to add the missing
+ // halfedge(s) up to vz
+ if (abs_fn(va.x-vz.x)>=1e-9 || abs_fn(va.y-vz.y)>=1e-9) {
+
+ // rhill 2013-12-02:
+ // "Holes" in the halfedges are not necessarily always adjacent.
+ // https://github.com/gorhill/Javascript-Voronoi/issues/16
+
+ // find entry point:
+ switch (true) {
+
+ // walk downward along left side
+ case this.equalWithEpsilon(va.x,xl) && this.lessThanWithEpsilon(va.y,yb):
+ lastBorderSegment = this.equalWithEpsilon(vz.x,xl);
+ vb = this.createVertex(xl, lastBorderSegment ? vz.y : yb);
+ edge = this.createBorderEdge(cell.site, va, vb);
+ iLeft++;
+ halfedges.splice(iLeft, 0, this.createHalfedge(edge, cell.site, null));
+ nHalfedges++;
+ if ( lastBorderSegment ) { break; }
+ va = vb;
+ // fall through
+
+ // walk rightward along bottom side
+ case this.equalWithEpsilon(va.y,yb) && this.lessThanWithEpsilon(va.x,xr):
+ lastBorderSegment = this.equalWithEpsilon(vz.y,yb);
+ vb = this.createVertex(lastBorderSegment ? vz.x : xr, yb);
+ edge = this.createBorderEdge(cell.site, va, vb);
+ iLeft++;
+ halfedges.splice(iLeft, 0, this.createHalfedge(edge, cell.site, null));
+ nHalfedges++;
+ if ( lastBorderSegment ) { break; }
+ va = vb;
+ // fall through
+
+ // walk upward along right side
+ case this.equalWithEpsilon(va.x,xr) && this.greaterThanWithEpsilon(va.y,yt):
+ lastBorderSegment = this.equalWithEpsilon(vz.x,xr);
+ vb = this.createVertex(xr, lastBorderSegment ? vz.y : yt);
+ edge = this.createBorderEdge(cell.site, va, vb);
+ iLeft++;
+ halfedges.splice(iLeft, 0, this.createHalfedge(edge, cell.site, null));
+ nHalfedges++;
+ if ( lastBorderSegment ) { break; }
+ va = vb;
+ // fall through
+
+ // walk leftward along top side
+ case this.equalWithEpsilon(va.y,yt) && this.greaterThanWithEpsilon(va.x,xl):
+ lastBorderSegment = this.equalWithEpsilon(vz.y,yt);
+ vb = this.createVertex(lastBorderSegment ? vz.x : xl, yt);
+ edge = this.createBorderEdge(cell.site, va, vb);
+ iLeft++;
+ halfedges.splice(iLeft, 0, this.createHalfedge(edge, cell.site, null));
+ nHalfedges++;
+ if ( lastBorderSegment ) { break; }
+ va = vb;
+ // fall through
+
+ // walk downward along left side
+ lastBorderSegment = this.equalWithEpsilon(vz.x,xl);
+ vb = this.createVertex(xl, lastBorderSegment ? vz.y : yb);
+ edge = this.createBorderEdge(cell.site, va, vb);
+ iLeft++;
+ halfedges.splice(iLeft, 0, this.createHalfedge(edge, cell.site, null));
+ nHalfedges++;
+ if ( lastBorderSegment ) { break; }
+ va = vb;
+ // fall through
+
+ // walk rightward along bottom side
+ lastBorderSegment = this.equalWithEpsilon(vz.y,yb);
+ vb = this.createVertex(lastBorderSegment ? vz.x : xr, yb);
+ edge = this.createBorderEdge(cell.site, va, vb);
+ iLeft++;
+ halfedges.splice(iLeft, 0, this.createHalfedge(edge, cell.site, null));
+ nHalfedges++;
+ if ( lastBorderSegment ) { break; }
+ va = vb;
+ // fall through
+
+ // walk upward along right side
+ lastBorderSegment = this.equalWithEpsilon(vz.x,xr);
+ vb = this.createVertex(xr, lastBorderSegment ? vz.y : yt);
+ edge = this.createBorderEdge(cell.site, va, vb);
+ iLeft++;
+ halfedges.splice(iLeft, 0, this.createHalfedge(edge, cell.site, null));
+ nHalfedges++;
+ if ( lastBorderSegment ) { break; }
+ // fall through
+
+ default:
+ throw "Voronoi.closeCells() > this makes no sense!";
+ }
+ }
+ iLeft++;
+ }
+ cell.closeMe = false;
+ }
+ };
+
+// ---------------------------------------------------------------------------
+// Debugging helper
+/*
+Voronoi.prototype.dumpBeachline = function(y) {
+ console.log('Voronoi.dumpBeachline(%f) > Beachsections, from left to right:', y);
+ if ( !this.beachline ) {
+ console.log(' None');
+ }
+ else {
+ var bs = this.beachline.getFirst(this.beachline.root);
+ while ( bs ) {
+ console.log(' site %d: xl: %f, xr: %f', bs.site.voronoiId, this.leftBreakPoint(bs, y), this.rightBreakPoint(bs, y));
+ bs = bs.rbNext;
+ }
+ }
+ };
+*/
+
+// ---------------------------------------------------------------------------
+// Helper: Quantize sites
+
+// rhill 2013-10-12:
+// This is to solve https://github.com/gorhill/Javascript-Voronoi/issues/15
+// Since not all users will end up using the kind of coord values which would
+// cause the issue to arise, I chose to let the user decide whether or not
+// he should sanitize his coord values through this helper. This way, for
+// those users who uses coord values which are known to be fine, no overhead is
+// added.
+
+Voronoi.prototype.quantizeSites = function(sites) {
+ var ε = this.ε,
+ n = sites.length,
+ site;
+ while ( n-- ) {
+ site = sites[n];
+ site.x = Math.floor(site.x / ε) * ε;
+ site.y = Math.floor(site.y / ε) * ε;
+ }
+ };
+
+// ---------------------------------------------------------------------------
+// Helper: Recycle diagram: all vertex, edge and cell objects are
+// "surrendered" to the Voronoi object for reuse.
+// TODO: rhill-voronoi-core v2: more performance to be gained
+// when I change the semantic of what is returned.
+
+Voronoi.prototype.recycle = function(diagram) {
+ if ( diagram ) {
+ if ( diagram instanceof this.Diagram ) {
+ this.toRecycle = diagram;
+ }
+ else {
+ throw 'Voronoi.recycleDiagram() > Need a Diagram object.';
+ }
+ }
+ };
+
+// ---------------------------------------------------------------------------
+// Top-level Fortune loop
+
+// rhill 2011-05-19:
+// Voronoi sites are kept client-side now, to allow
+// user to freely modify content. At compute time,
+// *references* to sites are copied locally.
+
+Voronoi.prototype.compute = function(sites, bbox) {
+ // to measure execution time
+ var startTime = new Date();
+
+ // init internal state
+ this.reset();
+
+ // any diagram data available for recycling?
+ // I do that here so that this is included in execution time
+ if ( this.toRecycle ) {
+ this.vertexJunkyard = this.vertexJunkyard.concat(this.toRecycle.vertices);
+ this.edgeJunkyard = this.edgeJunkyard.concat(this.toRecycle.edges);
+ this.cellJunkyard = this.cellJunkyard.concat(this.toRecycle.cells);
+ this.toRecycle = null;
+ }
+
+ // Initialize site event queue
+ var siteEvents = sites.slice(0);
+ siteEvents.sort(function(a,b){
+ var r = b.y - a.y;
+ if (r) {return r;}
+ return b.x - a.x;
+ });
+
+ // process queue
+ var site = siteEvents.pop(),
+ siteid = 0,
+ xsitex, // to avoid duplicate sites
+ xsitey,
+ cells = this.cells,
+ circle;
+
+ // main loop
+ for (;;) {
+ // we need to figure whether we handle a site or circle event
+ // for this we find out if there is a site event and it is
+ // 'earlier' than the circle event
+ circle = this.firstCircleEvent;
+
+ // add beach section
+ if (site && (!circle || site.y < circle.y || (site.y === circle.y && site.x < circle.x))) {
+ // only if site is not a duplicate
+ if (site.x !== xsitex || site.y !== xsitey) {
+ // first create cell for new site
+ cells[siteid] = this.createCell(site);
+ site.voronoiId = siteid++;
+ // then create a beachsection for that site
+ this.addBeachsection(site);
+ // remember last site coords to detect duplicate
+ xsitey = site.y;
+ xsitex = site.x;
+ }
+ site = siteEvents.pop();
+ }
+
+ // remove beach section
+ else if (circle) {
+ this.removeBeachsection(circle.arc);
+ }
+
+ // all done, quit
+ else {
+ break;
+ }
+ }
+
+ // wrapping-up:
+ // connect dangling edges to bounding box
+ // cut edges as per bounding box
+ // discard edges completely outside bounding box
+ // discard edges which are point-like
+ this.clipEdges(bbox);
+
+ // add missing edges in order to close opened cells
+ this.closeCells(bbox);
+
+ // to measure execution time
+ var stopTime = new Date();
+
+ // prepare return values
+ var diagram = new this.Diagram();
+ diagram.cells = this.cells;
+ diagram.edges = this.edges;
+ diagram.vertices = this.vertices;
+ diagram.execTime = stopTime.getTime()-startTime.getTime();
+
+ // clean up
+ this.reset();
+
+ return diagram;
+ };
+
+/******************************************************************************/
+
+if ( typeof module !== 'undefined' ) {
+ module.exports = Voronoi;
+}
+
+export default Voronoi;
diff --git a/web/pw-frontend/src/lib/visualizer/voronoi/voronoi.ts b/web/pw-frontend/src/lib/visualizer/voronoi/voronoi.ts
new file mode 100644
index 0000000..a63bc9a
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/voronoi/voronoi.ts
@@ -0,0 +1,165 @@
+import type { Shader } from "../webgl/shader";
+import type { BBox, Point } from "./voronoi-core";
+import Voronoi from "./voronoi-core";
+import { DefaultRenderable } from "../webgl/renderer";
+import { IndexBuffer, VertexBuffer } from "../webgl/buffer";
+import { VertexBufferLayout, VertexArray } from "../webgl/vertexBufferLayout";
+
+function arcctg(x: number): number { return Math.PI / 2 - Math.atan(x); }
+
+function to_key(p: Point): string {
+ return [p.x, p.y] + "";
+}
+
+function round_point(center: Point, point: Point, amount_fn = (b: number) => 0.7): Point {
+ const d = dist(center, point, true);
+ const x = center.x + amount_fn(d) * (point.x - center.x);
+ const y = center.y + amount_fn(d) * (point.y - center.y);
+ return { 'x': x, 'y': y };
+}
+
+function median_point(c: Point, p: Point, n: Point, d = 0.1): number[] {
+ const dd = 1.0 - 2 * d;
+ return [
+ dd * c.x + d * p.x + d * n.x,
+ dd * c.y + d * p.y + d * n.y,
+ ]
+}
+
+function build_point_map(es: Voronoi.HalfEdge[]): (point: Point) => Point {
+ const mean = es.map(e => dist(e.getStartpoint(), e.getEndpoint())).reduce((a, b) => a + b, 0) / es.length;
+ const map = {};
+
+ for (let edge of es) {
+ const start = edge.getStartpoint();
+ const end = edge.getEndpoint();
+
+ if (dist(start, end) < 0.03 * mean) { // These points have to be merged
+ const middle = { 'x': (start.x + end.x) / 2, 'y': (start.y + end.y) / 2 };
+ map[to_key(start)] = middle;
+ map[to_key(end)] = middle;
+ }
+ }
+
+ return (p) => map[to_key(p)] || p;
+}
+
+function get_round_fn(dist_mean: number, amount = 0.7): (d: number) => number {
+ return (d) => arcctg((d - dist_mean) / dist_mean) / Math.PI + 0.6;
+}
+
+function dist(a: Point, b: Point, norm = false): number {
+ const dx = a.x - b.x;
+ const dy = a.y - b.y;
+ if (norm) return Math.sqrt(dx * dx + dy * dy);
+ return dx * dx + dy * dy;
+}
+
+export class VoronoiBuilder {
+ inner: DefaultRenderable;
+
+ vor: Voronoi;
+ planets: Point[];
+
+
+ constructor(gl: WebGLRenderingContext, shader: Shader, planets: Point[], bbox: BBox) {
+ this.vor = new Voronoi();
+ this.planets = planets;
+
+ const ib = new IndexBuffer(gl, []);
+ const vb = new VertexBuffer(gl, []);
+
+ const layout = new VertexBufferLayout();
+ layout.push(gl.FLOAT, 2, 4, "a_pos");
+ layout.push(gl.FLOAT, 2, 4, "a_center");
+ layout.push(gl.FLOAT, 1, 4, "a_own");
+ layout.push(gl.FLOAT, 1, 4, "a_intensity");
+
+ const vao = new VertexArray();
+ vao.addBuffer(vb, layout);
+
+ this.inner = new DefaultRenderable(ib, vao, shader, [], {});
+
+ this.resize(gl, bbox);
+ }
+
+ getRenderable(): DefaultRenderable {
+ return this.inner;
+ }
+
+ resize(gl: WebGLRenderingContext, bbox: BBox) {
+ const start = new Date().getTime();
+
+ // This voronoi sorts the planets, then owners don't align anymore
+ const own_map = {};
+ this.planets.forEach((p, i) => own_map[to_key(p)] = i);
+
+ const vor = this.vor.compute(this.planets, bbox);
+
+ const attrs = [];
+ const ids = [];
+
+ let vertCount = 0;
+
+ for (let i = 0; i < vor.cells.length; i++) {
+ const cell = vor.cells[i];
+ const planetId = own_map[to_key(cell.site)];
+ const point_map = build_point_map(cell.halfedges);
+
+ const centerId = vertCount++;
+
+ attrs.push(cell.site.x, cell.site.y);
+ attrs.push(cell.site.x, cell.site.y);
+ attrs.push(planetId);
+ attrs.push(1);
+
+ const dist_mean = cell.halfedges.map(e => {
+ const start = e.getStartpoint();
+ const end = e.getEndpoint();
+ return dist(cell.site, start, true) + dist(cell.site, { 'x': (start.x + end.x) / 2, 'y': (start.y + end.y) / 2 }, true)
+ }).reduce((a, b) => a + b, 0) / cell.halfedges.length / 2;
+ const round_fn = get_round_fn(dist_mean);
+
+ for (let edge of cell.halfedges) {
+ let start = point_map(edge.getStartpoint());
+ let end = point_map(edge.getEndpoint());
+ let center = { 'x': (start.x + end.x) / 2, 'y': (start.y + end.y) / 2 };
+
+ if (to_key(start) == to_key(end)) continue;
+
+ start = round_point(cell.site, start, round_fn);
+ center = round_point(cell.site, center, round_fn);
+ end = round_point(cell.site, end, round_fn);
+
+ ids.push(centerId);
+ ids.push(vertCount++);
+ attrs.push(start.x, start.y);
+ attrs.push(cell.site.x, cell.site.y);
+ attrs.push(planetId);
+ attrs.push(0);
+
+ ids.push(vertCount++);
+ attrs.push(center.x, center.y);
+ attrs.push(cell.site.x, cell.site.y);
+ attrs.push(planetId);
+ attrs.push(0);
+
+ ids.push(centerId);
+ ids.push(vertCount - 1);
+
+ ids.push(vertCount++);
+ attrs.push(end.x, end.y);
+ attrs.push(cell.site.x, cell.site.y);
+ attrs.push(planetId);
+ attrs.push(0);
+ }
+ }
+
+ this.inner.updateIndexBuffer(gl, ids);
+ this.inner.updateVAOBuffer(gl, 0, attrs);
+
+ console.log(`Vor things took ${new Date().getTime() - start} ms!`)
+ }
+}
+
+export default VoronoiBuilder; \ No newline at end of file
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/buffer.ts b/web/pw-frontend/src/lib/visualizer/webgl/buffer.ts
new file mode 100644
index 0000000..2739fbe
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/buffer.ts
@@ -0,0 +1,55 @@
+
+export class Buffer {
+ buffer: WebGLBuffer;
+ data: any;
+ count: number;
+ type: number;
+
+ constructor(gl: WebGLRenderingContext, data: number[], type: number) {
+ this.buffer = gl.createBuffer();
+ this.type = type;
+
+ if (data)
+ this.updateData(gl, data);
+ }
+
+ _toArray(data: number[]): any {
+ return new Float32Array(data);
+ }
+
+ updateData(gl: WebGLRenderingContext, data: number[]) {
+ this.data = data;
+ this.count = data.length;
+ gl.bindBuffer(this.type, this.buffer);
+ gl.bufferData(this.type, this._toArray(data), gl.STATIC_DRAW);
+ }
+
+ bind(gl: WebGLRenderingContext) {
+ gl.bindBuffer(this.type, this.buffer);
+ }
+
+ getCount(): number {
+ return this.count;
+ }
+}
+
+export class VertexBuffer extends Buffer {
+ constructor(gl: WebGLRenderingContext, data: any) {
+ super(gl, data, gl.ARRAY_BUFFER);
+ }
+
+ _toArray(data: number[]): any {
+ return new Float32Array(data);
+ }
+}
+
+
+export class IndexBuffer extends Buffer {
+ constructor(gl: WebGLRenderingContext, data: any) {
+ super(gl, data, gl.ELEMENT_ARRAY_BUFFER);
+ }
+
+ _toArray(data: number[]): any {
+ return new Uint16Array(data);
+ }
+}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/index.ts b/web/pw-frontend/src/lib/visualizer/webgl/index.ts
new file mode 100644
index 0000000..fdb7886
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/index.ts
@@ -0,0 +1,122 @@
+import { Uniform4f, Uniform1f, Uniform2f, ShaderFactory, UniformMatrix3fv, Uniform3f } from './shader';
+import { resizeCanvasToDisplaySize, FPSCounter, onload2promise, Resizer, url_to_mesh } from "./util";
+import { VertexBuffer, IndexBuffer } from './buffer';
+import { VertexArray, VertexBufferLayout } from './vertexBufferLayout';
+import { Renderer } from './renderer';
+import { Texture } from './texture';
+
+const URL = window.location.origin+window.location.pathname;
+const LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
+
+async function create_texture_from_svg(gl: WebGLRenderingContext, name: string, path: string, width: number, height: number): Promise<Texture> {
+
+ const [mesh, factory] = await Promise.all([
+ url_to_mesh(path),
+ ShaderFactory.create_factory(LOCATION + "static/shaders/frag/static_color.glsl", LOCATION + "static/shaders/vert/svg.glsl")
+ ]);
+
+ const program = factory.create_shader(gl);
+ const renderer = new Renderer();
+
+ var positionBuffer = new VertexBuffer(gl, mesh.positions);
+ var layout = new VertexBufferLayout();
+ layout.push(gl.FLOAT, 3, 4, "a_position");
+
+ const vao = new VertexArray();
+ vao.addBuffer(positionBuffer, layout);
+
+ program.bind(gl);
+ vao.bind(gl, program);
+
+ var indexBuffer = new IndexBuffer(gl, mesh.cells);
+ indexBuffer.bind(gl);
+
+ renderer.addToDraw(indexBuffer, vao, program, {});
+
+ return Texture.fromRenderer(gl, name, width, height, renderer);
+}
+
+
+async function main() {
+
+ // Get A WebGL context
+ var canvas = <HTMLCanvasElement>document.getElementById("c");
+ const resolution = [canvas.width, canvas.height];
+
+ const resizer = new Resizer(canvas, [-10, -10, 20, 20], true);
+
+ var gl = canvas.getContext("webgl");
+ if (!gl) {
+ return;
+ }
+
+ const mesh = await url_to_mesh("static/res/images/earth.svg");
+ console.log(Math.max(...mesh.positions), Math.min(...mesh.positions));
+ const renderer = new Renderer();
+
+ const factory = await ShaderFactory.create_factory(LOCATION + "static/shaders/frag/static_color.glsl", LOCATION + "static/shaders/vert/simple.glsl");
+ const program = factory.create_shader(gl);
+
+ var positionBuffer = new VertexBuffer(gl, mesh.positions);
+ var layout = new VertexBufferLayout();
+ layout.push(gl.FLOAT, 3, 4, "a_position");
+ // layout.push(gl.FLOAT, 2, 4, "a_tex");
+
+ const vao = new VertexArray();
+ vao.addBuffer(positionBuffer, layout);
+
+ resizeCanvasToDisplaySize(<HTMLCanvasElement>gl.canvas);
+
+ // Tell WebGL how to convert from clip space to pixels
+ gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+ // Clear the canvas
+ 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);
+
+ program.bind(gl);
+ vao.bind(gl, program);
+
+ var indexBuffer = new IndexBuffer(gl, mesh.cells);
+ indexBuffer.bind(gl);
+
+ renderer.addToDraw(indexBuffer, vao, program, {});
+
+ const counter = new FPSCounter();
+
+ const step = function (time: number) {
+
+ // console.log(resizer.get_viewbox());
+
+ program.uniform(gl, "u_time", new Uniform1f(time * 0.001));
+ program.uniform(gl, "u_mouse", new Uniform2f(resizer.get_mouse_pos()));
+ program.uniform(gl, "u_viewbox", new Uniform4f(resizer.get_viewbox()));
+ program.uniform(gl, "u_resolution", new Uniform2f(resolution));
+ program.uniform(gl, "u_trans", new UniformMatrix3fv([1, 0, 0, 0, 1, 0, 0, 0, 1]));
+ program.uniform(gl, "u_color", new Uniform3f(1.0, 0.5, 0.0));
+
+ renderer.render(gl);
+
+ counter.frame(time);
+ requestAnimationFrame(step);
+ }
+
+ requestAnimationFrame(step);
+}
+
+
+main();
+
+document.getElementById("loader").classList.remove("loading");
+
+// const loader = document.getElementById("loader");
+// setInterval(() => {
+// if (loader.classList.contains("loading")) {
+// loader.classList.remove("loading")
+// } else {
+// loader.classList.add("loading");
+// }
+// }, 2000);
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/renderer.ts b/web/pw-frontend/src/lib/visualizer/webgl/renderer.ts
new file mode 100644
index 0000000..c3b219f
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/renderer.ts
@@ -0,0 +1,157 @@
+import type { IndexBuffer } from './buffer';
+import type { VertexArray } from './vertexBufferLayout';
+import type { Texture } from './texture';
+import type { Dictionary } from './util';
+import type { Shader, Uniform } from './shader';
+import { Uniform1i } from './shader';
+
+function sortedIndex(array, value) {
+ var low = 0,
+ high = array.length;
+
+ while (low < high) {
+ var mid = (low + high) >>> 1;
+ if (array[mid] < value) low = mid + 1;
+ else high = mid;
+ }
+ return low;
+}
+
+export interface Renderable {
+ getUniforms() : Dictionary<Uniform>;
+ render(gl: WebGLRenderingContext): void;
+ updateVAOBuffer(gl: WebGLRenderingContext, index: number, data: number[]);
+ updateIndexBuffer(gl: WebGLRenderingContext, data: number[]);
+}
+
+export class DefaultRenderable implements Renderable {
+ ibo: IndexBuffer;
+ va: VertexArray;
+ shader: Shader;
+ textures: Texture[];
+ uniforms: Dictionary<Uniform>;
+
+ constructor(
+ ibo: IndexBuffer,
+ va: VertexArray,
+ shader: Shader,
+ textures: Texture[],
+ uniforms: Dictionary<Uniform>,
+ ) {
+ this.ibo = ibo;
+ this.va = va;
+ this.shader = shader;
+ this.textures = textures;
+ this.uniforms = uniforms;
+ }
+
+ getUniforms(): Dictionary<Uniform> {
+ return this.uniforms;
+ }
+
+ updateVAOBuffer(gl: WebGLRenderingContext, index: number, data: number[]) {
+ this.va.updateBuffer(gl, index, data);
+ }
+
+ updateIndexBuffer(gl: WebGLRenderingContext, data: number[]) {
+ this.ibo.updateData(gl, data);
+ }
+
+ render(gl: WebGLRenderingContext): void {
+
+ const indexBuffer = this.ibo;
+ const vertexArray = this.va;
+ const uniforms = this.uniforms;
+
+ const shader = this.shader;
+ const textures = this.textures;
+ let texLocation = 0;
+
+ for (let texture of textures) {
+
+ shader.uniform(gl, texture.name, new Uniform1i(texLocation));
+ texture.bind(gl, texLocation);
+
+ texLocation ++;
+ // if (texLocation > maxTextures) {
+ // console.error("Using too many textures, this is not supported yet\nUndefined behaviour!");
+ // }
+ }
+
+ if (vertexArray && shader && uniforms) {
+ for(let key in uniforms) {
+ shader.uniform(gl, key, uniforms[key]);
+ }
+
+ vertexArray.bind(gl, shader);
+
+ if (indexBuffer) {
+ indexBuffer.bind(gl);
+ gl.drawElements(gl.TRIANGLES, indexBuffer.getCount(), gl.UNSIGNED_SHORT, 0);
+ } else {
+ console.error("IndexBuffer is required to render, for now");
+ }
+ }
+
+ }
+}
+
+export class Renderer {
+ renderables: { [id: number] : [Renderable, boolean][]; };
+ renderable_layers: number[];
+
+ constructor() {
+ this.renderables = {};
+ this.renderable_layers = [];
+ }
+
+ updateUniform(i: number, f: (uniforms: Dictionary<Uniform>) => void, layer=0, ) {
+ f(this.renderables[layer][i][0].getUniforms());
+ }
+
+ disableRenderable(i: number, layer=0) {
+ this.renderables[layer][i][1] = false;
+ }
+
+ enableRenderable(i: number, layer=0) {
+ this.renderables[layer][i][1] = true;
+ }
+
+ addRenderable(item: Renderable, layer=0): number {
+ if(!this.renderables[layer]) {
+ const idx = sortedIndex(this.renderable_layers, layer);
+ this.renderable_layers.splice(idx, 0, layer);
+ this.renderables[layer] = [];
+ }
+
+ this.renderables[layer].push([item, true]);
+ return this.renderables[layer].length - 1;
+ }
+
+ addToDraw(indexBuffer: IndexBuffer, vertexArray: VertexArray, shader: Shader, uniforms?: Dictionary<Uniform>, texture?: Texture[], layer=0): number {
+ return this.addRenderable(
+ new DefaultRenderable(
+ indexBuffer,
+ vertexArray,
+ shader,
+ texture || [],
+ uniforms || {},
+ ), layer
+ );
+ }
+
+ render(gl: WebGLRenderingContext, frameBuffer?: WebGLFramebuffer, width?: number, height?: number) {
+ gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
+ gl.viewport(0, 0, width || gl.canvas.width, height || gl.canvas.height);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ const maxTextures = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
+
+ for (let layer of this.renderable_layers) {
+ for (let [r, e] of this.renderables[layer]) {
+ if (!e) continue;
+ r.render(gl);
+ }
+ }
+ }
+}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/shader.ts b/web/pw-frontend/src/lib/visualizer/webgl/shader.ts
new file mode 100644
index 0000000..942c4c2
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/shader.ts
@@ -0,0 +1,327 @@
+import type { Dictionary } from './util';
+
+function error(msg: string) {
+ console.error(msg);
+}
+
+const defaultShaderType = [
+ "VERTEX_SHADER",
+ "FRAGMENT_SHADER"
+];
+
+/// Create Shader from Source string
+function loadShader(
+ gl: WebGLRenderingContext,
+ shaderSource: string,
+ shaderType: number,
+ opt_errorCallback: any,
+): WebGLShader {
+ var errFn = opt_errorCallback || error;
+ // Create the shader object
+ var shader = gl.createShader(shaderType);
+
+ // Load the shader source
+ gl.shaderSource(shader, shaderSource);
+
+ // Compile the shader
+ gl.compileShader(shader);
+
+ // Check the compile status
+ var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+ if (!compiled) {
+ // Something went wrong during compilation; get the error
+ var lastError = gl.getShaderInfoLog(shader);
+ errFn("*** Error compiling shader '" + shader + "':" + lastError);
+ gl.deleteShader(shader);
+ return null;
+ }
+
+ return shader;
+}
+
+/// Actually Create Program with Shader's
+function createProgram(
+ gl: WebGLRenderingContext,
+ shaders: WebGLShader[],
+ opt_attribs: string[],
+ opt_locations: number[],
+ opt_errorCallback: any,
+): WebGLProgram {
+ var errFn = opt_errorCallback || error;
+ var program = gl.createProgram();
+ shaders.forEach(function (shader) {
+ gl.attachShader(program, shader);
+ });
+ if (opt_attribs) {
+ opt_attribs.forEach(function (attrib, ndx) {
+ gl.bindAttribLocation(
+ program,
+ opt_locations ? opt_locations[ndx] : ndx,
+ attrib);
+ });
+ }
+ gl.linkProgram(program);
+
+ // Check the link status
+ var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+ if (!linked) {
+ // something went wrong with the link
+ var lastError = gl.getProgramInfoLog(program);
+ errFn("Error in program linking:" + lastError);
+
+ gl.deleteProgram(program);
+ return null;
+ }
+ return program;
+}
+
+export class ShaderFactory {
+ frag_source: string;
+ vert_source: string;
+
+ static async create_factory(frag_url: string, vert_url: string): Promise<ShaderFactory> {
+ const sources = await Promise.all([
+ fetch(frag_url).then((r) => r.text()),
+ fetch(vert_url).then((r) => r.text()),
+ ]);
+
+ return new ShaderFactory(sources[0], sources[1]);
+ }
+
+ constructor(frag_source: string, vert_source: string ) {
+ this.frag_source = frag_source;
+ this.vert_source = vert_source;
+ }
+
+ create_shader(
+ gl: WebGLRenderingContext,
+ context?: Dictionary<string>,
+ opt_attribs?: string[],
+ opt_locations?: number[],
+ opt_errorCallback?: any,
+ ): Shader {
+ let vert = this.vert_source.slice();
+ let frag = this.frag_source.slice();
+ for (let key in context) {
+ vert = vert.replace(new RegExp("\\$" + key, 'g'), context[key]);
+ frag = frag.replace(new RegExp("\\$" + key, 'g'), context[key]);
+ }
+
+ const shaders = [
+ loadShader(gl, vert, gl.VERTEX_SHADER, opt_errorCallback),
+ loadShader(gl, frag, gl.FRAGMENT_SHADER, opt_errorCallback),
+ ];
+
+ return new Shader(createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback));
+ }
+}
+
+export class Shader {
+ shader: WebGLProgram;
+ uniformCache: Dictionary<WebGLUniformLocation>;
+ attribCache: Dictionary<number>;
+
+ static async createProgramFromUrls(
+ gl: WebGLRenderingContext,
+ vert_url: string,
+ frag_url: string,
+ context?: Dictionary<string>,
+ opt_attribs?: string[],
+ opt_locations?: number[],
+ opt_errorCallback?: any,
+ ): Promise<Shader> {
+ const sources = (await Promise.all([
+ fetch(vert_url).then((r) => r.text()),
+ fetch(frag_url).then((r) => r.text()),
+ ])).map(x => {
+ for (let key in context) {
+ x = x.replace(new RegExp("\\$" + key, 'g'), context[key]);
+ }
+ return x;
+ });
+
+ const shaders = [
+ loadShader(gl, sources[0], 35633, opt_errorCallback),
+ loadShader(gl, sources[1], 35632, opt_errorCallback),
+ ];
+ return new Shader(createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback));
+ }
+
+ constructor(shader: WebGLProgram) {
+ this.shader = shader;
+ this.uniformCache = {};
+ this.attribCache = {};
+ }
+
+ bind(gl: WebGLRenderingContext) {
+ gl.useProgram(this.shader);
+ }
+
+ // Different locations have different types :/
+ getUniformLocation(gl: WebGLRenderingContext, name: string): WebGLUniformLocation {
+ if (this.uniformCache[name] === undefined) {
+ this.uniformCache[name] = gl.getUniformLocation(this.shader, name);
+ }
+
+ return this.uniformCache[name];
+ }
+
+ getAttribLocation(gl: WebGLRenderingContext, name: string): number {
+ if (this.attribCache[name] === undefined) {
+ this.attribCache[name] = gl.getAttribLocation(this.shader, name);
+ }
+
+ return this.attribCache[name];
+ }
+
+ uniform<T extends Uniform>(
+ gl: WebGLRenderingContext,
+ name: string,
+ uniform: T,
+ ) {
+ this.bind(gl);
+ const location = this.getUniformLocation(gl, name);
+ if (location < 0) {
+ console.error("No location found with name " + name);
+ }
+
+ uniform.setUniform(gl, location);
+ }
+
+ clear(gl: WebGLRenderingContext) {
+ gl.deleteProgram(this.shader);
+ }
+}
+
+export interface Uniform {
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation): void;
+}
+
+export class Uniform2fv implements Uniform {
+ data: number[] | Float32Array;
+ constructor(data: number[] | Float32Array) {
+ this.data = data;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform2fv(location, this.data);
+ }
+}
+
+export class Uniform3fv implements Uniform {
+ data: number[] | Float32Array;
+ constructor(data: number[] | Float32Array) {
+ this.data = data;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform3fv(location, this.data);
+ }
+}
+
+export class Uniform3f implements Uniform {
+ x: number;
+ y: number;
+ z: number;
+
+ constructor(x: number, y: number, z: number) {
+ this.x = x;
+ this.y = y;
+ this.z = z;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform3f(location, this.x ,this.y, this.z);
+ }
+}
+
+export class Uniform1iv implements Uniform {
+ data: number[] | Int32List;
+ constructor(data: number[] | Int32List) {
+ this.data = data;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform1iv(location, this.data);
+ }
+}
+
+export class Uniform1i implements Uniform {
+ texture: number;
+
+ constructor(texture: number) {
+ this.texture = texture;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform1i(location, this.texture);
+ }
+}
+
+export class Uniform1f implements Uniform {
+ texture: number;
+
+ constructor(texture: number) {
+ this.texture = texture;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform1f(location, this.texture);
+ }
+}
+
+export class Uniform2f implements Uniform {
+ x: number;
+ y: number;
+
+ constructor(xy: number[]) {
+ this.x = xy[0];
+ this.y = xy[1];
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform2f(location, this.x, this.y);
+ }
+}
+
+export class Uniform4f implements Uniform {
+ v0: number;
+ v1: number;
+ v2: number;
+ v3: number;
+
+ constructor(xyzw: number[]) {
+ this.v0 = xyzw[0];
+ this.v1 = xyzw[1];
+ this.v2 = xyzw[2];
+ this.v3 = xyzw[3];
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform4f(location, this.v0, this.v1, this.v2, this.v3);
+ }
+}
+
+export class UniformMatrix3fv implements Uniform {
+ data: number[] | Float32Array;
+ constructor(data: number[] | Float32Array) {
+ this.data = data;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniformMatrix3fv(location, false, this.data);
+ }
+}
+
+export class UniformBool implements Uniform {
+ data: boolean;
+ constructor(data: boolean) {
+ this.data = data;
+ }
+
+ setUniform(gl: WebGLRenderingContext, location: WebGLUniformLocation) {
+ gl.uniform1i(location, this.data ? 1 : 0);
+ }
+}
+
+export default Shader; \ No newline at end of file
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/text.ts b/web/pw-frontend/src/lib/visualizer/webgl/text.ts
new file mode 100644
index 0000000..3f1cec6
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/text.ts
@@ -0,0 +1,192 @@
+import type { Dictionary } from "./util";
+import type { Shader, UniformMatrix3fv } from "./shader";
+import { Texture } from "./texture";
+import { DefaultRenderable } from "./renderer";
+import { IndexBuffer, VertexBuffer } from "./buffer";
+import { VertexBufferLayout, VertexArray } from "./vertexBufferLayout";
+
+
+export enum Align {
+ Begin,
+ End,
+ Middle,
+}
+
+export class GlypInfo {
+ x: number;
+ y: number;
+ width: number;
+}
+
+export class FontInfo {
+ letterHeight: number;
+ spaceWidth: number;
+ spacing: number;
+ textureWidth: number;
+ textureHeight: number;
+ glyphInfos: Dictionary<GlypInfo>;
+}
+
+export class LabelFactory {
+ texture: Texture;
+ font: FontInfo;
+ shader: Shader;
+
+ constructor(gl: WebGLRenderingContext, loc: string, font: FontInfo, shader: Shader) {
+ this.texture = Texture.fromImage(gl, loc, 'font');
+ this.font = font;
+ this.shader = shader;
+ }
+
+ build(gl: WebGLRenderingContext, transform?: UniformMatrix3fv): Label {
+ return new Label(gl, this.shader, this.texture, this.font, transform);
+ }
+}
+
+export class Label {
+ inner: DefaultRenderable;
+
+ font: FontInfo;
+
+ constructor(gl: WebGLRenderingContext, shader: Shader, tex: Texture, font: FontInfo, transform?: UniformMatrix3fv) {
+ this.font = font;
+
+ const uniforms = transform ? { "u_trans": transform, "u_trans_next": transform, } : {};
+ const ib = new IndexBuffer(gl, []);
+ const vb_pos = new VertexBuffer(gl, []);
+ const vb_tex = new VertexBuffer(gl, []);
+
+ const layout_pos = new VertexBufferLayout();
+ layout_pos.push(gl.FLOAT, 2, 4, "a_position");
+
+ const layout_tex = new VertexBufferLayout();
+ layout_tex.push(gl.FLOAT, 2, 4, "a_texCoord");
+
+ const vao = new VertexArray();
+ vao.addBuffer(vb_pos, layout_pos);
+ vao.addBuffer(vb_tex, layout_tex);
+
+ this.inner = new DefaultRenderable(ib, vao, shader, [tex], uniforms);
+ }
+
+ getRenderable(): DefaultRenderable {
+ return this.inner;
+ }
+
+ setText(gl: WebGLRenderingContext, text: string, h_align = Align.Begin, v_align = Align.Begin) {
+ const idxs = [];
+ const verts_pos = [];
+ const verts_tex = [];
+
+ const letterHeight = this.font.letterHeight / this.font.textureHeight;
+ let xPos = 0;
+
+ switch (h_align) {
+ case Align.Begin:
+ break;
+ case Align.End:
+ xPos = -1 * [...text].map(n => this.font.glyphInfos[n] ? this.font.glyphInfos[n].width : this.font.spaceWidth).reduce((a, b) => a + b, 0) / this.font.letterHeight;
+ break;
+ case Align.Middle:
+ xPos = -1 * [...text].map(n => this.font.glyphInfos[n] ? this.font.glyphInfos[n].width : this.font.spaceWidth).reduce((a, b) => a + b, 0) / this.font.letterHeight / 2;
+ break;
+ }
+ let yStart = 0;
+ switch (v_align) {
+ case Align.Begin:
+ break;
+ case Align.End:
+ yStart = 1;
+ break;
+ case Align.Middle:
+ yStart = 0.5;
+ break;
+ }
+
+ let j = 0;
+ for (let i = 0; i < text.length; i++) {
+ const info = this.font.glyphInfos[text[i]];
+ if (info) {
+ const dx = info.width / this.font.letterHeight;
+ const letterWidth = info.width / this.font.textureWidth;
+ const x0 = info.x / this.font.textureWidth;
+ const y0 = info.y / this.font.textureHeight;
+ verts_pos.push(xPos, yStart);
+ verts_pos.push(xPos + dx, yStart);
+ verts_pos.push(xPos, yStart-1);
+ verts_pos.push(xPos + dx, yStart-1);
+
+ verts_tex.push(x0, y0);
+ verts_tex.push(x0 + letterWidth, y0);
+ verts_tex.push(x0, y0 + letterHeight);
+ verts_tex.push(x0 + letterWidth, y0 + letterHeight);
+
+ xPos += dx;
+
+ idxs.push(j+0, j+1, j+2, j+1, j+2, j+3);
+ j += 4;
+ } else {
+ // Just move xPos
+ xPos += this.font.spaceWidth / this.font.letterHeight;
+ }
+ }
+
+ this.inner.updateIndexBuffer(gl, idxs);
+ this.inner.updateVAOBuffer(gl, 0, verts_pos);
+ this.inner.updateVAOBuffer(gl, 1, verts_tex);
+ }
+}
+
+export function defaultLabelFactory(gl: WebGLRenderingContext, shader: Shader): LabelFactory {
+ const fontInfo = {
+ letterHeight: 8,
+ spaceWidth: 8,
+ spacing: -1,
+ textureWidth: 64,
+ textureHeight: 40,
+ glyphInfos: {
+ 'a': { x: 0, y: 0, width: 8, },
+ 'b': { x: 8, y: 0, width: 8, },
+ 'c': { x: 16, y: 0, width: 8, },
+ 'd': { x: 24, y: 0, width: 8, },
+ 'e': { x: 32, y: 0, width: 8, },
+ 'f': { x: 40, y: 0, width: 8, },
+ 'g': { x: 48, y: 0, width: 8, },
+ 'h': { x: 56, y: 0, width: 8, },
+ 'i': { x: 0, y: 8, width: 8, },
+ 'j': { x: 8, y: 8, width: 8, },
+ 'k': { x: 16, y: 8, width: 8, },
+ 'l': { x: 24, y: 8, width: 8, },
+ 'm': { x: 32, y: 8, width: 8, },
+ 'n': { x: 40, y: 8, width: 8, },
+ 'o': { x: 48, y: 8, width: 8, },
+ 'p': { x: 56, y: 8, width: 8, },
+ 'q': { x: 0, y: 16, width: 8, },
+ 'r': { x: 8, y: 16, width: 8, },
+ 's': { x: 16, y: 16, width: 8, },
+ 't': { x: 24, y: 16, width: 8, },
+ 'u': { x: 32, y: 16, width: 8, },
+ 'v': { x: 40, y: 16, width: 8, },
+ 'w': { x: 48, y: 16, width: 8, },
+ 'x': { x: 56, y: 16, width: 8, },
+ 'y': { x: 0, y: 24, width: 8, },
+ 'z': { x: 8, y: 24, width: 8, },
+ '0': { x: 16, y: 24, width: 8, },
+ '1': { x: 24, y: 24, width: 8, },
+ '2': { x: 32, y: 24, width: 8, },
+ '3': { x: 40, y: 24, width: 8, },
+ '4': { x: 48, y: 24, width: 8, },
+ '5': { x: 56, y: 24, width: 8, },
+ '6': { x: 0, y: 32, width: 8, },
+ '7': { x: 8, y: 32, width: 8, },
+ '8': { x: 16, y: 32, width: 8, },
+ '9': { x: 24, y: 32, width: 8, },
+ '-': { x: 32, y: 32, width: 8, },
+ '*': { x: 40, y: 32, width: 8, },
+ '!': { x: 48, y: 32, width: 8, },
+ '?': { x: 56, y: 32, width: 8, },
+ },
+ };
+
+ return new LabelFactory(gl, '/static/res/assets/font.png', fontInfo, shader);
+}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/texture.ts b/web/pw-frontend/src/lib/visualizer/webgl/texture.ts
new file mode 100644
index 0000000..9d6adcf
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/texture.ts
@@ -0,0 +1,106 @@
+import type { Renderer } from "./renderer";
+
+export class Texture {
+ texture: WebGLTexture;
+ width: number;
+ height: number;
+ loaded: boolean;
+ name: string;
+
+ static fromImage(
+ gl: WebGLRenderingContext,
+ path: string,
+ name: string,
+ ): Texture {
+ const out = new Texture(gl, name);
+
+ const image = new Image();
+ image.onload = out.setImage.bind(out, gl, image);
+ image.onerror = error;
+ image.src = path;
+
+ return out;
+ }
+
+ static fromRenderer(
+ gl: WebGLRenderingContext,
+ name: string,
+ width: number,
+ height: number,
+ renderer: Renderer
+ ): Texture {
+ const out = new Texture(gl, name);
+ out.width = width;
+ out.height = height;
+
+ gl.texImage2D(
+ gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
+ gl.RGBA, gl.UNSIGNED_BYTE, null);
+
+ const fb = gl.createFramebuffer();
+ gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+ const attachmentPoint = gl.COLOR_ATTACHMENT0;
+ gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, out.texture, 0);
+
+ renderer.render(gl, fb, width, height);
+
+ out.loaded = true;
+
+ return out;
+ }
+
+ constructor(
+ gl: WebGLRenderingContext,
+ name: string,
+ ) {
+ this.loaded = false;
+ this.name = name;
+
+ this.texture = gl.createTexture();
+ this.bind(gl);
+
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA,
+ gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));
+ }
+
+ setImage(gl: WebGLRenderingContext, image: HTMLImageElement) {
+ this.bind(gl);
+ this.width = image.width;
+ this.height = image.height;
+
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+ this.unbind(gl);
+
+ this.loaded = true;
+ }
+
+ bind(gl: WebGLRenderingContext, location=0) {
+ gl.activeTexture(gl.TEXTURE0 + location);
+ gl.bindTexture(gl.TEXTURE_2D, this.texture);
+ }
+
+ unbind(gl: WebGLRenderingContext) {
+ gl.bindTexture(gl.TEXTURE_2D, null);
+ }
+
+
+ getWidth(): number {
+ return this.width;
+ }
+
+ getHeight(): number {
+ return this.height;
+ }
+}
+
+function error(e: any) {
+ console.error("IMAGE LOAD ERROR");
+ console.error(e);
+}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/util.ts b/web/pw-frontend/src/lib/visualizer/webgl/util.ts
new file mode 100644
index 0000000..3ed2b4d
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/util.ts
@@ -0,0 +1,229 @@
+import { parse as parsePath } from 'extract-svg-path';
+import svgMesh3d from 'svg-mesh-3d';
+
+export interface Dictionary<T> {
+ [Key: string]: T;
+}
+
+
+interface OnLoadable {
+ onload: any;
+}
+
+export function onload2promise<T extends OnLoadable>(obj: T): Promise<T> {
+ return new Promise(resolve => {
+ obj.onload = () => resolve(obj);
+ });
+}
+
+export function resizeCanvasToDisplaySize(
+ canvas: HTMLCanvasElement,
+ multiplier?: number,
+): boolean {
+ multiplier = multiplier || 1;
+ var width = canvas.clientWidth * multiplier | 0;
+ var height = canvas.clientHeight * multiplier | 0;
+ if (canvas.width !== width || canvas.height !== height) {
+ canvas.width = width;
+ canvas.height = height;
+ return true;
+ }
+ return false;
+}
+
+export class FPSCounter {
+ last: number;
+ count: number;
+ _delta: number;
+ _prev: number;
+
+ _frame_start: number;
+ _total_frametime: number;
+
+ constructor() {
+ this.last = 0;
+ this.count = 0;
+ this._delta = 0;
+ this._prev = 0;
+ }
+
+ frame(now: number) {
+ this._frame_start = performance.now();
+ this.count += 1;
+ this._delta = now - this._prev;
+ this._prev = now;
+
+ if (now - this.last > 1000) {
+ this.last = now;
+ console.log(`${this.count} fps, ${(this._total_frametime / this.count).toFixed(2)}ms avg per frame`);
+ this.count = 0;
+ this._total_frametime = 0;
+ }
+ }
+
+ frame_end() {
+ this._total_frametime += (performance.now() - this._frame_start);
+ }
+
+ delta(now: number): number {
+ return this._delta;
+ }
+}
+
+export class Resizer {
+ hoovering = false;
+ dragging = false;
+
+ mouse_pos = [0, 0];
+ last_drag = [0, 0];
+
+ viewbox: number[];
+ orig_viewbox: number[];
+
+ el_box: number[];
+
+ scaleX = 1;
+ scaleY = 1;
+
+ constructor(el: HTMLCanvasElement, viewbox: number[], keep_aspect_ratio=false) {
+ viewbox = [-viewbox[0] - viewbox[2], - viewbox[1] - viewbox[3], viewbox[2], viewbox[3]];
+ this.viewbox = [...viewbox];
+ this.el_box = [el.width, el.height];
+
+ if (keep_aspect_ratio) {
+ const or_width = this.viewbox[2];
+ const or_height = this.viewbox[3];
+
+ const width_percentage = this.viewbox[2] / el.width;
+ const height_percentage = this.viewbox[3] / el.height;
+
+ if (width_percentage < height_percentage) {
+ // width should be larger
+ this.viewbox[2] = height_percentage * el.width;
+ } else {
+ // height should be larger
+ this.viewbox[3] = width_percentage * el.height;
+ }
+
+ this.viewbox[0] -= (this.viewbox[2] - or_width) / 2;
+ this.viewbox[1] -= (this.viewbox[3] - or_height) / 2;
+
+ this.scaleX = this.viewbox[2] / this.viewbox[3];
+ }
+
+ this.orig_viewbox = [...this.viewbox];
+
+ el.addEventListener("mouseenter", this.mouseenter.bind(this), { capture: false, passive: true});
+ el.addEventListener("mouseleave", this.mouseleave.bind(this), { capture: false, passive: true});
+ el.addEventListener("mousemove", this.mousemove.bind(this), { capture: false, passive: true});
+ el.addEventListener("mousedown", this.mousedown.bind(this), { capture: false, passive: true});
+ el.addEventListener("mouseup", this.mouseup.bind(this), { capture: false, passive: true});
+
+ window.addEventListener('wheel', this.wheel.bind(this), { capture: false, passive: true});
+ }
+
+ _clip_viewbox() {
+ this.viewbox[0] = Math.max(this.viewbox[0], this.orig_viewbox[0]);
+ this.viewbox[1] = Math.max(this.viewbox[1], this.orig_viewbox[1]);
+
+ this.viewbox[0] = Math.min(this.viewbox[0] + this.viewbox[2], this.orig_viewbox[0] + this.orig_viewbox[2]) - this.viewbox[2];
+ this.viewbox[1] = Math.min(this.viewbox[1] + this.viewbox[3], this.orig_viewbox[1] + this.orig_viewbox[3]) - this.viewbox[3];
+ }
+
+ mouseenter() {
+ this.hoovering = true;
+ }
+
+ mouseleave() {
+ this.hoovering = false;
+ }
+
+ mousemove(e: MouseEvent) {
+ this.mouse_pos = [e.offsetX, this.el_box[1] - e.offsetY];
+
+ if (this.dragging) {
+ const scaleX = this.viewbox[2] / this.el_box[0];
+ const scaleY = this.viewbox[3] / this.el_box[1];
+
+ this.viewbox[0] += (this.last_drag[0] - this.mouse_pos[0]) * scaleX;
+ this.viewbox[1] += (this.last_drag[1] - this.mouse_pos[1]) * scaleY;
+
+ this.last_drag = [...this.mouse_pos];
+
+ this._clip_viewbox();
+ }
+ }
+
+ mousedown() {
+ this.dragging = true;
+ this.last_drag = [...this.mouse_pos];
+ }
+
+ mouseup() {
+ this.dragging = false;
+ }
+
+ wheel(e: WheelEvent) {
+ if (this.hoovering) {
+ const delta = e.deltaY > 0 ? 0.1 * this.viewbox[2] : -0.1 * this.viewbox[2];
+ const dx = delta * this.scaleX;
+ const dy = delta * this.scaleY;
+
+ const mouse_dx = this.mouse_pos[0] / this.el_box[0];
+ const mouse_dy = this.mouse_pos[1] / this.el_box[1];
+
+ this._zoom([dx, dy], [mouse_dx, mouse_dy]);
+ }
+ }
+
+ _zoom(deltas: number[], center: number[]) {
+ this.viewbox[2] += deltas[0];
+ this.viewbox[0] -= deltas[0] * center[0];
+ this.viewbox[2] = Math.min(this.viewbox[2], this.orig_viewbox[2]);
+
+ this.viewbox[3] += deltas[1];
+ this.viewbox[1] -= deltas[1] * center[1];
+ this.viewbox[3] = Math.min(this.viewbox[3], this.orig_viewbox[3]);
+
+ this._clip_viewbox();
+ }
+
+ get_viewbox(): number[] {
+ return this.viewbox;
+ }
+
+ get_mouse_pos(): number[] {
+ return this.mouse_pos;
+ }
+}
+
+export class Mesh {
+ cells: number[];
+ positions: number[];
+
+ constructor(mesh: any) {
+ this.cells = mesh.cells.flat();
+ this.positions = mesh.positions.flat();
+ }
+}
+
+export async function url_to_mesh(url: string): Promise<Mesh> {
+
+ return new Promise(function(resolve) {
+ fetch(url)
+ .then(resp => resp.text())
+ .then(data => {
+ // var div = document.createElement('div');
+ // div.innerHTML = data;
+ // var svg = div.querySelector('svg');
+
+ var svgPath = parsePath(data);
+ var mesh = svgMesh3d(svgPath, {
+ delaunay: false,
+ scale: 10,
+ });
+
+ resolve(new Mesh(mesh));
+ })
+ });
+}
diff --git a/web/pw-frontend/src/lib/visualizer/webgl/vertexBufferLayout.ts b/web/pw-frontend/src/lib/visualizer/webgl/vertexBufferLayout.ts
new file mode 100644
index 0000000..f44ed47
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/webgl/vertexBufferLayout.ts
@@ -0,0 +1,115 @@
+import type { VertexBuffer } from './buffer';
+import type { Shader } from './shader';
+
+export class VertexBufferElement {
+ type: number;
+ amount: number;
+ type_size: number;
+ normalized: boolean;
+ index: string;
+
+ constructor(
+ type: number,
+ amount: number,
+ type_size: number,
+ index: string,
+ normalized: boolean,
+ ) {
+ this.type = type;
+ this.amount = amount;
+ this.type_size = type_size;
+ this.normalized = normalized;
+ this.index = index;
+ }
+}
+
+export class VertexBufferLayout {
+ elements: VertexBufferElement[];
+ stride: number;
+ offset: number;
+
+ constructor(offset = 0) {
+ this.elements = [];
+ this.stride = 0;
+ this.offset = offset;
+ }
+
+ // Maybe wrong normalized type
+ push(
+ type: number,
+ amount: number,
+ type_size: number,
+ index: string,
+ normalized = false,
+ ) {
+ this.elements.push(new VertexBufferElement(type, amount, type_size, index, normalized));
+ this.stride += amount * type_size;
+ }
+
+ getElements(): VertexBufferElement[] {
+ return this.elements;
+ }
+
+ getStride(): number {
+ return this.stride;
+ }
+}
+
+// glEnableVertexAttribArray is to specify what location of the current program the follow data is needed
+// glVertexAttribPointer tells gl that that data is at which location in the supplied data
+export class VertexArray {
+ // There is no renderer ID, always at bind buffers and use glVertexAttribPointer
+ buffers: VertexBuffer[];
+ layouts: VertexBufferLayout[];
+
+ constructor() {
+ this.buffers = [];
+ this.layouts = [];
+ }
+
+ addBuffer(vb: VertexBuffer, layout: VertexBufferLayout) {
+ this.buffers.push(vb);
+ this.layouts.push(layout);
+ }
+
+ updateBuffer(gl: WebGLRenderingContext, index: number, data: number[]) {
+ this.buffers[index].updateData(gl, data);
+ }
+
+ /// Bind buffers providing program data
+ bind(gl: WebGLRenderingContext, shader: Shader) {
+ shader.bind(gl);
+ for(let i = 0; i < this.buffers.length; i ++) {
+ const buffer = this.buffers[i];
+ const layout = this.layouts[i];
+
+ buffer.bind(gl);
+ const elements = layout.getElements();
+ let offset = layout.offset;
+
+ for (let j = 0; j < elements.length; j ++) {
+ const element = elements[j];
+ const location = shader.getAttribLocation(gl, element.index);
+
+ if (location >= 0) {
+ gl.enableVertexAttribArray(location);
+ gl.vertexAttribPointer(
+ location, element.amount, element.type,
+ element.normalized, layout.stride, offset
+ );
+ }
+
+ offset += element.amount * element.type_size;
+ }
+ }
+ }
+
+ /// Undo bind operation
+ unbind(gl: WebGLRenderingContext) {
+ this.layouts.forEach((layout) => {
+ layout.getElements().forEach((_, index) => {
+ gl.disableVertexAttribArray(index);
+ });
+ })
+ }
+}
diff --git a/web/pw-frontend/src/main.ts b/web/pw-frontend/src/main.ts
new file mode 100644
index 0000000..bbe6382
--- /dev/null
+++ b/web/pw-frontend/src/main.ts
@@ -0,0 +1,8 @@
+import App from './App.svelte'
+import init_wasm_module from "planetwars-rs";
+
+init_wasm_module().then(() => {
+ const app = new App({
+ target: document.getElementById('app')
+ })
+}) \ No newline at end of file
diff --git a/web/pw-frontend/src/vite-env.d.ts b/web/pw-frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..4078e74
--- /dev/null
+++ b/web/pw-frontend/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/web/pw-frontend/svelte.config.js b/web/pw-frontend/svelte.config.js
new file mode 100644
index 0000000..3630bb3
--- /dev/null
+++ b/web/pw-frontend/svelte.config.js
@@ -0,0 +1,7 @@
+import sveltePreprocess from 'svelte-preprocess'
+
+export default {
+ // Consult https://github.com/sveltejs/svelte-preprocess
+ // for more information about preprocessors
+ preprocess: sveltePreprocess()
+}
diff --git a/web/pw-frontend/tsconfig.json b/web/pw-frontend/tsconfig.json
new file mode 100644
index 0000000..e242fcf
--- /dev/null
+++ b/web/pw-frontend/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "extends": "@tsconfig/svelte/tsconfig.json",
+ "compilerOptions": {
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ // "module": "esnext",
+ "module": "esnext",
+ "esModuleInterop": true,
+
+ "resolveJsonModule": true,
+ "baseUrl": ".",
+ /**
+ * Typecheck JS in `.svelte` and `.js` files by default.
+ * Disable checkJs if you'd like to use dynamic types in JS.
+ * Note that setting allowJs false does not prevent the use
+ * of JS in `.svelte` files.
+ */
+ "allowJs": false,
+ "checkJs": false
+ },
+ "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/web/pw-frontend/vite.config.js b/web/pw-frontend/vite.config.js
new file mode 100644
index 0000000..a7fcc74
--- /dev/null
+++ b/web/pw-frontend/vite.config.js
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
+import wasmPack from 'vite-plugin-wasm-pack';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ svelte(),
+ wasmPack(["./planetwars-rs"]),
+ viteCommonjs({
+ transformMixedEsModules: true,
+ }),
+ ],
+ build: {
+ commonjsOptions: {
+ transformMixedEsModules: true,
+ },
+ },
+ server: {
+ proxy: {
+ "/api/": "http://localhost:5000",
+ "/ws": "ws://localhost:5000/ws",
+ },
+ },
+})