Kelder/planet-wars
32
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix webpack strange behaviour, with filthy fixes

Browse source
This commit is contained in:
ajuvercr 2020-03-27 15:26:04 +01:00
parent f5fd91008c
commit 3fe8c01c26
7 changed files with 193 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/www/.gitignore vendored
View file

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

17
frontend/www/bootstrap.js vendored
View file

@ -2,5 +2,18 @@
// asynchronously. This `bootstrap.js` file does the single async import, so // asynchronously. This `bootstrap.js` file does the single async import, so
// that no one else needs to worry about it again. // that no one else needs to worry about it again.
// Import index.js that executes index.ts // Import index.js that executes index.ts
import("./index.js") var h = (a, b) => {}
.catch(e => console.error("Error importing `index.js`:", e));
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);

8
frontend/www/index.js
View file

@ -1,8 +1,8 @@
import { set_game_name, set_instance } from './index.ts' 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 LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
const game_location = LOCATION + "static/games/Chandra Garrett.json"; const game_location = LOCATION + "static/games/Chandra Garrett.json";
@ -12,4 +12,4 @@ fetch(game_location)
.then((response) => { .then((response) => {
set_instance(response); set_instance(response);
set_game_name("Chandra Garrett"); set_game_name("Chandra Garrett");
}).catch(console.error); }).catch(console.error);

30
frontend/www/index.ts
View file

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

280
frontend/www/static/res/style.css
View file

@ -1,70 +1,65 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
background-color: #333; background-color: #333;
}
body, html {
height: 99%;
} }
p { p {
padding: 3px 0; padding: 3px 0;
} }
#wrapper { #wrapper {
max-height: 100vh; max-height: 100%;
min-height: 100vh; min-height: 100%;
width: 100%;
width: 100%; height: 100%;
height: 100vh;
} }
#main { #main {
height: calc(100% - 200px); height: calc(100% - 200px);
width: 100%; width: 100%;
position: relative; position: relative;
} }
#name { #name {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
color: white; color: white;
} }
#meta{ #meta {
padding: 10px 2%; padding: 10px 2%;
color: white; color: white;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 96%; width: 96%;
} }
#options { #options {
background-color: #444; background-color: #444;
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap; white-space: nowrap;
height: 200px; height: 200px;
min-height: 200px !important; min-height: 200px !important;
max-height: 200px !important; max-height: 200px !important;
} }
.option { .option {
display: inline-block; display: inline-block;
color: white; color: white;
text-align: center; text-align: center;
width: 200px; width: 200px;
height: 100%; height: 100%;
vertical-align:top vertical-align: top
} }
.option:hover { .option:hover {
background-color: #777; background-color: #777;
} }
.loading { .loading {
@ -72,7 +67,7 @@ p {
display: inline-block; display: inline-block;
} }
.loading::before{ .loading::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 100px; width: 100px;
@ -83,54 +78,57 @@ p {
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-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 ; animation: slide-top 0.5s ease-out infinite alternate;
} }
#speed { #speed {
width: 100px; width: 100px;
} }
#c { #c {
position: relative; position: relative;
background-color: black; background-color: black;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.button { .button {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.button:before, .button:after { .button:before,
content: ""; .button:after {
position: absolute; content: "";
background-color: grey; position: absolute;
} background-color: grey;
}
.button:hover:before, .button:hover:after { .button:hover:before,
background-color: white; .button:hover:after {
} background-color: white;
}
.button:before { .button:before {
top: 0; top: 0;
left: 50%; left: 50%;
width: 6px; width: 6px;
height: 100%; height: 100%;
margin-left: -3px; 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 * Generated by Animista on 2019-9-17 14:35:13
@ -139,31 +137,34 @@ p {
* w: http://animista.net, t: @cssanimista * w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */ * ---------------------------------------------- */
/** /**
* ---------------------------------------- * ----------------------------------------
* animation slide-top * animation slide-top
* ---------------------------------------- * ----------------------------------------
*/ */
@-webkit-keyframes slide-top {
@-webkit-keyframes slide-top {
0% { 0% {
-webkit-transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
} }
100% { 100% {
-webkit-transform: translate(-50%, -150%); -webkit-transform: translate(-50%, -150%);
transform: translate(-50%, -150%); transform: translate(-50%, -150%);
} }
} }
@keyframes slide-top {
@keyframes slide-top {
0% { 0% {
-webkit-transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
} }
100% { 100% {
-webkit-transform: translate(-50%, -150%); -webkit-transform: translate(-50%, -150%);
transform: translate(-50%, -150%); transform: translate(-50%, -150%);
} }
} }
/** /**
@ -171,69 +172,58 @@ p {
* Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
* ---------------------------------------- * ----------------------------------------
*/ */
.slidecontainer {
margin-top: 10px; .slidecontainer {
width: 100%; /* Width of the outside container */ margin-top: 10px;
width: 100%;
/* Width of the outside container */
} }
.slider { .slider {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
height: 15px; height: 15px;
border-radius: 5px; border-radius: 5px;
background: #d3d3d3; background: #d3d3d3;
outline: none; outline: none;
opacity: 0.7; opacity: 0.7;
-webkit-transition: .2s; -webkit-transition: .2s;
transition: opacity .2s; transition: opacity .2s;
} }
.slider::-webkit-slider-thumb { .slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
background: #ff7000; background: #ff7000;
cursor: pointer; cursor: pointer;
} }
.slider::-moz-range-thumb { .slider::-moz-range-thumb {
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
background: #ff7000; background: #ff7000;
cursor: pointer; cursor: pointer;
} }
::-webkit-scrollbar-track {
::-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-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #444;
border-radius: 10px; border-radius: 10px;
background-color: #444;
border-radius: 10px;
} }
::-webkit-scrollbar ::-webkit-scrollbar {
{ width: 10px;
width: 10px; background-color: #444;
background-color: #444;
} }
::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb {
{ border-radius: 10px;
border-radius: 10px; background-color: #F90;
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)
}

2
frontend/www/voronoi.ts
View file

@ -331,7 +331,7 @@ class Breakpoint {
set_edge(edge: HalfEdge) { set_edge(edge: HalfEdge) {
this.left[1].half_edge = edge; 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) { set_me(old_me: Node, new_me: Node) {

44
frontend/www/webpack.config.js
View file

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