Finish unopened page.

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/closed.scss

@@ -1,34 +0,0 @@
-@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,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);
+}
+
+