fix webpack strange behaviour, with filthy fixes

frontend/www/.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+frontend

frontend/www/bootstrap.js

@@ -2,5 +2,18 @@
 // asynchronously. This `bootstrap.js` file does the single async import, so
 // that no one else needs to worry about it again.
 // Import index.js that executes index.ts
-import("./index.js")
+var h = (a, b) => {}
+
+export function handle(loc, e) {
+    console.log("handle");
+    h(loc, e);
+}
+
+import ("./index.js")
+.then(e => {
+        console.log(e.handle);
+        h = e.handle;
+    })
     .catch(e => console.error("Error importing `index.js`:", e));
+
+window.setTimeout(() => handle("static/games/spiral2.json", "spiral2"), 3000);

frontend/www/index.js

@@ -1,8 +1,8 @@
-
 import { set_game_name, set_instance } from './index.ts'
-import { } from './games.ts' // IMPORT GAMES PLEASE, thank you webpack <3
+export { handle }
+from './games.ts' // IMPORT GAMES PLEASE, thank you webpack <3
 
-const URL = window.location.origin+window.location.pathname;
+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";

frontend/www/index.ts

@@ -361,23 +361,23 @@ function step(time: number) {
 }
 set_loading(true);
 
-// requestAnimationFrame(step);
+requestAnimationFrame(step);
 
 
-import { voronoi, Point } from './voronoi'
-function test() {
-    const points = [
-        new Point(14, 6),
-        new Point(13, 11),
-        new Point(8, 7.5),
-        new Point(7, 4),
-        new Point(4, 11),
-    ];
+// import { voronoi, Point } from './voronoi'
+// function test() {
+//     const points = [
+//         new Point(14, 6),
+//         new Point(13, 11),
+//         new Point(8, 7.5),
+//         new Point(7, 4),
+//         new Point(4, 11),
+//     ];
 
-    console.log(voronoi(points));
-}
+//     console.log(voronoi(points));
+// }
 
-import { test as dcelt_test } from './dcel';
-// dcelt_test();
+// import { test as dcelt_test } from './dcel';
+// // dcelt_test();
 
-test();
+// test();

frontend/www/static/res/style.css

@@ -7,20 +7,15 @@ body {
     background-color: #333;
 }
 
-body, html {
-  height: 99%;
-}
-
 p {
     padding: 3px 0;
 }
 
 #wrapper {
-  max-height: 100vh;
-  min-height: 100vh;
-
+    max-height: 100%;
+    min-height: 100%;
     width: 100%;
-  height: 100vh;
+    height: 100%;
 }
 
 #main {
@@ -36,7 +31,7 @@ p {
     color: white;
 }
 
-#meta{
+#meta {
     padding: 10px 2%;
     color: white;
     position: absolute;
@@ -60,7 +55,7 @@ p {
     text-align: center;
     width: 200px;
     height: 100%;
-  vertical-align:top
+    vertical-align: top
 }
 
 .option:hover {
@@ -72,7 +67,7 @@ p {
     display: inline-block;
 }
 
-.loading::before{
+.loading::before {
     content: "";
     position: absolute;
     width: 100px;
@@ -83,54 +78,57 @@ p {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    -webkit-animation: slide-top 0.5s ease-out infinite alternate ;
-        animation: slide-top 0.5s ease-out infinite alternate ;
- }
+    -webkit-animation: slide-top 0.5s ease-out infinite alternate;
+    animation: slide-top 0.5s ease-out infinite alternate;
+}
 
- #speed {
+#speed {
     width: 100px;
- }
+}
 
- #c {
+#c {
     position: relative;
     background-color: black;
     width: 100%;
     height: 100%;
- }
+}
 
- .button {
+.button {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 40px;
     height: 40px;
- }
+}
 
- .button:before, .button:after {
+.button:before,
+.button:after {
     content: "";
     position: absolute;
     background-color: grey;
- }
+}
 
- .button:hover:before, .button:hover:after {
+.button:hover:before,
+.button:hover:after {
     background-color: white;
- }
+}
 
- .button:before {
+.button:before {
     top: 0;
     left: 50%;
     width: 6px;
     height: 100%;
     margin-left: -3px;
- }
+}
 
- .button:after {
+.button:after {
     top: 50%;
     left: 0;
     width: 100%;
     height: 6px;
     margin-top: -3px;
- }
+}
+
 
 /* ----------------------------------------------
  * Generated by Animista on 2019-9-17 14:35:13
@@ -139,12 +137,14 @@ p {
  * w: http://animista.net, t: @cssanimista
  * ---------------------------------------------- */
 
+
 /**
  * ----------------------------------------
  * animation slide-top
  * ----------------------------------------
  */
- @-webkit-keyframes slide-top {
+
+@-webkit-keyframes slide-top {
     0% {
         -webkit-transform: translate(-50%, 50%);
         transform: translate(-50%, 50%);
@@ -153,8 +153,9 @@ p {
         -webkit-transform: translate(-50%, -150%);
         transform: translate(-50%, -150%);
     }
-  }
-  @keyframes slide-top {
+}
+
+@keyframes slide-top {
     0% {
         -webkit-transform: translate(-50%, 50%);
         transform: translate(-50%, 50%);
@@ -163,7 +164,7 @@ p {
         -webkit-transform: translate(-50%, -150%);
         transform: translate(-50%, -150%);
     }
-  }
+}
 
 
 /**
@@ -171,9 +172,11 @@ p {
  * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
  * ----------------------------------------
  */
- .slidecontainer {
+
+.slidecontainer {
     margin-top: 10px;
-  width: 100%; /* Width of the outside container */
+    width: 100%;
+    /* Width of the outside container */
 }
 
 .slider {
@@ -206,34 +209,21 @@ p {
     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);
+::-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
-{
+::-webkit-scrollbar {
     width: 10px;
     background-color: #444;
 }
 
-::-webkit-scrollbar-thumb
-{
+::-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)
+    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)
 }

frontend/www/voronoi.ts

@@ -331,7 +331,7 @@ class Breakpoint {
 
     set_edge(edge: HalfEdge) {
         this.left[1].half_edge = edge;
-        this.right[1].half_edge = edge.split(edge.origin);
+        // this.right[1].half_edge = edge.split(edge.origin);
     }
 
     set_me(old_me: Node, new_me: Node) {

frontend/www/webpack.config.js

@@ -5,20 +5,20 @@ module.exports = {
     mode: 'development',
     entry: './bootstrap.js',
     module: {
-    rules: [
-      {
+        rules: [{
             test: /\.tsx?$/,
             use: 'ts-loader',
             exclude: /node_modules/
-      }
-    ]
+        }]
     },
     resolve: {
-    extensions: [ '.tsx', '.ts', '.js', '.wasm' ]
+        extensions: ['.tsx', '.ts', '.js', '.wasm']
     },
     output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'bootstrap.js'
+        publicPath: "/frontend/",
+        path: path.join(__dirname, 'frontend'),
+        filename: 'bootstrap.js',
+        library: 'visualizer'
     },
     plugins: [
         new CopyWebpackPlugin(['index.html'])