Revert "Finish unopened page."

This reverts commit 8990a3d4ac.

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

@@ -0,0 +1,34 @@
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+body.closed {
+  background: #f66;
+  text-align: center;
+
+  .closed_notice {
+    position: absolute;
+    font-weight: bold;
+    font-size: 16pt;
+    text-transform: uppercase;
+    animation: fadeOut 3s forwards;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+  }
+
+  #stop-overlay {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+  }
+}

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