Revert "Finish unopened page."

This reverts commit 8990a3d4ac.

gulpfile.js

@@ -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);

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"
   }
 }

public/foobar.css

@@ -67,6 +67,10 @@ height:100%;
 		  text-align: center;
 }
 
+* {
+	font-family: verdana, sans-serif;
+}
+
 #wrapper {
 margin: auto;
 width: 999px;

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}

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%;
   }
 }

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);
-}
-
-

styles/base.scss

@@ -1,3 +0,0 @@
-* {
-  font-family: verdana, sans-serif;
-}

templates/closed.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="creator" value="Genetic Lifeform and Beer Operating System - GLaBOS">
     <title>Nee... &bull; IsDeFooBarOpen.nl</title>
-    <link rel="stylesheet" href="bundle.css" type="text/css">
-    <script src="index.js"></script>
+    <link rel="stylesheet" href="foobar.css" type="text/css">
+    <script src="bundle.js"></script>
 </head>
 <body class="closed">
 <div id="stop-overlay">