diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index 2f115a3..0000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const {src, dest, parallel} = require('gulp');
-const sass = require('gulp-sass');
-const minifyCSS = require('gulp-csso');
-const concat = require('gulp-concat');
-const browserify = require('gulp-browserify');
-
-function css() {
- return src('styles/*.scss')
- .pipe(sass())
- .pipe(minifyCSS())
- .pipe(concat('bundle.css'))
- .pipe(dest('public'))
-}
-
-function js() {
- return src('src/index.js')
- .pipe(browserify({
- insertGlobals: true,
- }))
- .pipe(dest('public'))
-}
-
-exports.js = js;
-exports.css = css;
-exports.default = parallel(css, js);
diff --git a/package.json b/package.json
index bfcce95..c9b4d99 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
"dependencies": {},
"devDependencies": {
"autoprefixer": "^9.4.9",
- "gulp": "^4.0.0",
- "gulp-concat": "^2.6.1",
- "gulp-csso": "^3.0.1",
- "gulp-sass": "^4.0.2",
+ "css-loader": "^2.1.0",
"node-sass": "^4.11.0",
- "postcss": "^7.0.14"
+ "postcss": "^7.0.14",
+ "postcss-loader": "^3.0.0",
+ "sass-loader": "^7.1.0",
+ "style-loader": "^0.23.1",
+ "webpack": "^4.29.6",
+ "webpack-cli": "^3.2.3"
}
}
diff --git a/public/foobar.css b/public/foobar.css
index e23a883..b51f0aa 100644
--- a/public/foobar.css
+++ b/public/foobar.css
@@ -67,6 +67,10 @@ height:100%;
text-align: center;
}
+* {
+ font-family: verdana, sans-serif;
+}
+
#wrapper {
margin: auto;
width: 999px;
diff --git a/src/closed.js b/src/closed.js
index 1b7eb82..f820f94 100644
--- a/src/closed.js
+++ b/src/closed.js
@@ -3,9 +3,79 @@
*
* In it, we fill the screen evenly with "closed" messages. The locations are
*/
+require('./closed.scss');
/**
* Contains the state for this demo.
*
* @type {{popups: Array, popup_index: number}}
*/
+const state = {
+ popups: [],
+ popup_index: 0,
+};
+const MAX_POPUPS = 200;
+
+function startClosedAnimation() {
+ window.setInterval(animationTick, 100);
+}
+
+function minDist(x, y) {
+ let min = 0;
+ let element;
+ for (element of state.popups) {
+ if (element == null) {
+ continue;
+ }
+
+ const dx = x - element.x;
+ const dy = y - element.y;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+ min = Math.min(dist, min);
+ }
+
+ return min;
+}
+
+function animationTick() {
+ const index = state.popup_index;
+ if (state.popups.length >= MAX_POPUPS) {
+ document.body.removeChild(state.popups[index].element);
+ state.popups[index] = null;
+ }
+
+ const width = window.innerWidth;
+ const height = window.innerHeight;
+
+ // Generate new candidates
+ const candidates = [];
+ for (let i = 0; i < MAX_POPUPS; ++i) {
+ candidates.push({x: Math.random() * width, y: Math.random() * height});
+ }
+
+ let best = candidates[0];
+ let max = minDist(candidates[0].x, candidates[0].y);
+ let candidate;
+ for (candidate of candidates) {
+ const dist = minDist(candidate.x, candidate.y);
+ if (dist > max) {
+ best = candidate;
+ max = dist;
+ }
+ }
+
+ let element = document.createElement('div');
+ element.innerText = 'Nee';
+ element.classList.add('closed_notice');
+ element.style.left = best.x + 'px';
+ element.style.top = best.y + 'px';
+ element.style.transform = 'rotate(' + (Math.random() * 360) + 'deg)';
+
+ document.body.appendChild(element);
+ best.element = element;
+
+ state.popups[index] = best;
+ state.popup_index = (index + 1) % MAX_POPUPS;
+}
+
+export {startClosedAnimation}
diff --git a/styles/closed.scss b/src/closed.scss
similarity index 81%
rename from styles/closed.scss
rename to src/closed.scss
index 0cdbd07..11d26bd 100644
--- a/styles/closed.scss
+++ b/src/closed.scss
@@ -1,5 +1,3 @@
-@import "base";
-
@keyframes fadeOut {
0% {
opacity: 1;
@@ -32,8 +30,5 @@ body.closed {
width: 100%;
height: 100%;
background-size: contain;
- background-image: url(stop.svg);
- background-repeat: no-repeat;
- background-position: 50% 50%;
}
}
diff --git a/src/index.js b/src/index.js
index 2a09bd4..e87c5b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,5 @@
+import {startClosedAnimation} from "./closed";
+
window.addEventListener('load', function () {
if (document.body.classList.contains('open')) {
// TODO: leave it in HTML/CSS for now.
@@ -5,75 +7,3 @@ window.addEventListener('load', function () {
startClosedAnimation();
}
});
-
-
-function startClosedAnimation() {
- const state = {
- popups: [],
- popup_index: 0,
- };
-
- const MAX_POPUPS = 200;
-
- function minDist(x, y) {
- let min = 0;
- let element;
- for (element of state.popups) {
- if (element == null) {
- continue;
- }
-
- const dx = x - element.x;
- const dy = y - element.y;
- const dist = Math.sqrt(dx * dx + dy * dy);
- min = Math.min(dist, min);
- }
-
- return min;
- }
-
- function animationTick() {
- const index = state.popup_index;
- if (state.popups.length >= MAX_POPUPS) {
- document.body.removeChild(state.popups[index].element);
- state.popups[index] = null;
- }
-
- const width = window.innerWidth;
- const height = window.innerHeight;
-
- // Generate new candidates
- const candidates = [];
- for (let i = 0; i < MAX_POPUPS; ++i) {
- candidates.push({x: Math.random() * width, y: Math.random() * height});
- }
-
- let best = candidates[0];
- let max = minDist(candidates[0].x, candidates[0].y);
- let candidate;
- for (candidate of candidates) {
- const dist = minDist(candidate.x, candidate.y);
- if (dist > max) {
- best = candidate;
- max = dist;
- }
- }
-
- let element = document.createElement('div');
- element.innerText = 'Nee';
- element.classList.add('closed_notice');
- element.style.left = best.x + 'px';
- element.style.top = best.y + 'px';
- element.style.transform = 'rotate(' + (Math.random() * 360) + 'deg)';
-
- document.body.appendChild(element);
- best.element = element;
-
- state.popups[index] = best;
- state.popup_index = (index + 1) % MAX_POPUPS;
- }
-
- window.setInterval(animationTick, 100);
-}
-
-
diff --git a/styles/base.scss b/styles/base.scss
deleted file mode 100644
index 0df4640..0000000
--- a/styles/base.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-* {
- font-family: verdana, sans-serif;
-}
diff --git a/templates/closed.html b/templates/closed.html
index 0482a72..4e5c88f 100644
--- a/templates/closed.html
+++ b/templates/closed.html
@@ -4,8 +4,8 @@
Nee... • IsDeFooBarOpen.nl
-
-
+
+