Finish unopened page.

gulpfile.js

@@ -0,0 +1,25 @@
+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,13 +10,11 @@
   "dependencies": {},
   "devDependencies": {
     "autoprefixer": "^9.4.9",
-    "css-loader": "^2.1.0",
+    "gulp": "^4.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-csso": "^3.0.1",
+    "gulp-sass": "^4.0.2",
     "node-sass": "^4.11.0",
-    "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"
+    "postcss": "^7.0.14"
   }
 }

public/foobar.css

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

src/closed.js

@@ -3,79 +3,9 @@
  *
  * 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/index.js

@@ -1,5 +1,3 @@
-import {startClosedAnimation} from "./closed";
-
 window.addEventListener('load', function () {
     if (document.body.classList.contains('open')) {
         // TODO: leave it in HTML/CSS for now.
@@ -7,3 +5,75 @@ 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

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

styles/closed.scss

@@ -1,3 +1,5 @@
+@import "base";
+
 @keyframes fadeOut {
   0% {
     opacity: 1;
@@ -30,5 +32,8 @@ body.closed {
     width: 100%;
     height: 100%;
     background-size: contain;
+    background-image: url(stop.svg);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
   }
 }

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="foobar.css" type="text/css">
-    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="bundle.css" type="text/css">
+    <script src="index.js"></script>
 </head>
 <body class="closed">
 <div id="stop-overlay">