From 3fe8c01c268542d54ebd10e517a14ce9f2a2272c Mon Sep 17 00:00:00 2001
From: ajuvercr <arthur.vercruysse@outlook.com>
Date: Fri, 27 Mar 2020 15:26:04 +0100
Subject: [PATCH] fix webpack strange behaviour, with filthy fixes

---
 frontend/www/.gitignore           |   1 +
 frontend/www/bootstrap.js         |  17 +-
 frontend/www/index.js             |   8 +-
 frontend/www/index.ts             |  30 ++--
 frontend/www/static/res/style.css | 280 ++++++++++++++----------------
 frontend/www/voronoi.ts           |   2 +-
 frontend/www/webpack.config.js    |  44 ++---
 7 files changed, 193 insertions(+), 189 deletions(-)

diff --git a/frontend/www/.gitignore b/frontend/www/.gitignore
index f06235c..193c8a3 100644
--- a/frontend/www/.gitignore
+++ b/frontend/www/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+frontend
diff --git a/frontend/www/bootstrap.js b/frontend/www/bootstrap.js
index 46e0b6a..97d9f2a 100644
--- a/frontend/www/bootstrap.js
+++ b/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")
-  .catch(e => console.error("Error importing `index.js`:", e));
+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);
\ No newline at end of file
diff --git a/frontend/www/index.js b/frontend/www/index.js
index 352a10b..ec215a4 100644
--- a/frontend/www/index.js
+++ b/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";
@@ -12,4 +12,4 @@ fetch(game_location)
     .then((response) => {
         set_instance(response);
         set_game_name("Chandra Garrett");
-    }).catch(console.error);
+    }).catch(console.error);
\ No newline at end of file
diff --git a/frontend/www/index.ts b/frontend/www/index.ts
index f5daf1d..a662b06 100644
--- a/frontend/www/index.ts
+++ b/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();
diff --git a/frontend/www/static/res/style.css b/frontend/www/static/res/style.css
index c3f0255..02b1c2a 100644
--- a/frontend/www/static/res/style.css
+++ b/frontend/www/static/res/style.css
@@ -1,70 +1,65 @@
 * {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-  background-color: #333;
-}
-
-body, html {
-  height: 99%;
+    background-color: #333;
 }
 
 p {
-  padding: 3px 0;
+    padding: 3px 0;
 }
 
 #wrapper {
-  max-height: 100vh;
-  min-height: 100vh;
-
-  width: 100%;
-  height: 100vh;
+    max-height: 100%;
+    min-height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 #main {
-  height: calc(100% - 200px);
-  width: 100%;
-  position: relative;
+    height: calc(100% - 200px);
+    width: 100%;
+    position: relative;
 }
 
 #name {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  color: white;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: white;
 }
 
-#meta{
-  padding: 10px 2%;
-  color: white;
-  position: absolute;
-  bottom: 0;
-  width: 96%;
+#meta {
+    padding: 10px 2%;
+    color: white;
+    position: absolute;
+    bottom: 0;
+    width: 96%;
 }
 
 #options {
-  background-color: #444;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  white-space: nowrap;
-  height: 200px;
-  min-height: 200px !important;
-  max-height: 200px !important;
+    background-color: #444;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    white-space: nowrap;
+    height: 200px;
+    min-height: 200px !important;
+    max-height: 200px !important;
 }
 
 .option {
-  display: inline-block;
-  color: white;
-  text-align: center;
-  width: 200px;
-  height: 100%;
-  vertical-align:top
+    display: inline-block;
+    color: white;
+    text-align: center;
+    width: 200px;
+    height: 100%;
+    vertical-align: top
 }
 
 .option:hover {
-  background-color: #777;
+    background-color: #777;
 }
 
 .loading {
@@ -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 {
-   width: 100px;
- }
+#speed {
+    width: 100px;
+}
 
- #c {
-     position: relative;
-     background-color: black;
-     width: 100%;
-     height: 100%;
- }
+#c {
+    position: relative;
+    background-color: black;
+    width: 100%;
+    height: 100%;
+}
 
- .button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 40px;
-  height: 40px;
- }
+.button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+}
 
- .button:before, .button:after {
-  content: "";
-  position: absolute;
-  background-color: grey;
- }
+.button:before,
+.button:after {
+    content: "";
+    position: absolute;
+    background-color: grey;
+}
 
- .button:hover:before, .button:hover:after {
-  background-color: white;
- }
+.button:hover:before,
+.button:hover:after {
+    background-color: white;
+}
 
- .button:before {
-  top: 0;
-  left: 50%;
-  width: 6px;
-  height: 100%;
-  margin-left: -3px;
- }
+.button:before {
+    top: 0;
+    left: 50%;
+    width: 6px;
+    height: 100%;
+    margin-left: -3px;
+}
+
+.button:after {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    margin-top: -3px;
+}
 
- .button:after {
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 6px;
-  margin-top: -3px;
- }
 
 /* ----------------------------------------------
  * Generated by Animista on 2019-9-17 14:35:13
@@ -139,31 +137,34 @@ 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%);
+        -webkit-transform: translate(-50%, 50%);
+        transform: translate(-50%, 50%);
     }
     100% {
-      -webkit-transform: translate(-50%, -150%);
-              transform: translate(-50%, -150%);
+        -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%);
+        -webkit-transform: translate(-50%, 50%);
+        transform: translate(-50%, 50%);
     }
     100% {
-      -webkit-transform: translate(-50%, -150%);
-              transform: translate(-50%, -150%);
+        -webkit-transform: translate(-50%, -150%);
+        transform: translate(-50%, -150%);
     }
-  }
+}
 
 
 /**
@@ -171,69 +172,58 @@ p {
  * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
  * ----------------------------------------
  */
- .slidecontainer {
-  margin-top: 10px;
-  width: 100%; /* Width of the outside container */
+
+.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;
+    -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;
+    -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;
+    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-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 {
+    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)
-}
+::-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/frontend/www/voronoi.ts b/frontend/www/voronoi.ts
index 86e437d..a723e5d 100644
--- a/frontend/www/voronoi.ts
+++ b/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) {
diff --git a/frontend/www/webpack.config.js b/frontend/www/webpack.config.js
index f64be79..441d2a1 100644
--- a/frontend/www/webpack.config.js
+++ b/frontend/www/webpack.config.js
@@ -2,25 +2,25 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const path = require('path');
 
 module.exports = {
-  mode: 'development',
-  entry: './bootstrap.js',
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  resolve: {
-    extensions: [ '.tsx', '.ts', '.js', '.wasm' ]
-  },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'bootstrap.js'
-  },
-  plugins: [
-    new CopyWebpackPlugin(['index.html'])
-  ],
-};
+    mode: 'development',
+    entry: './bootstrap.js',
+    module: {
+        rules: [{
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/
+        }]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.wasm']
+    },
+    output: {
+        publicPath: "/frontend/",
+        path: path.join(__dirname, 'frontend'),
+        filename: 'bootstrap.js',
+        library: 'visualizer'
+    },
+    plugins: [
+        new CopyWebpackPlugin(['index.html'])
+    ],
+};
\ No newline at end of file