fix webpack strange behaviour, with filthy fixes
This commit is contained in:
ajuvercr
parent
f5fd91008c
commit
3fe8c01c26
7 changed files with 193 additions and 189 deletions
1
frontend/www/.gitignore
vendored
1
frontend/www/.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
|||
node_modules
|
||||
dist
|
||||
frontend
|
||||
|
|
|
|||
17
frontend/www/bootstrap.js
vendored
17
frontend/www/bootstrap.js
vendored
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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'])
|
||||
],
|
||||
};
|
||||
Loading…
Reference in a new issue