🍡✨ Checkpoint

./en.js:1954897/38714
./helpers.js:1954897/3145
./index.html:1954897/5348
./game.css:1954897/1476

en.js

@@ -1,3 +1,11 @@
+/*
+ * ========================================
+ * Hi, I know this code is ugly but please just bear with me
+ * This will eventually get fixed, I promise.
+ * Signed, Benji
+ * 2020-05-24 22:29:25-5
+ * ========================================
+ */
 /*
  * decaffeinate suggestions:
  * DS102: Remove unnecessary code created because of implicit returns

game.css

@@ -8,10 +8,51 @@ html, body {
 .container {
   max-width: 720px;
   width: 100%;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
   margin: 0 auto;
   padding: 1em;
 }
+.header {
+    z-index: 4;
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    min-height: 64px;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.72), transparent);
+}
 
 .terminal {
-  color: #0F0;
+    width: 100%;
+    padding: 2rem 1rem;
+}
+.terminal .terminal--line {
+    display: block;
+    text-indent: -2ch;
+    padding: .125rem 2ch;
+}
+.terminal--line.terminal--vertical-spacer {
+    padding-top: 150vh;
+}
+.terminal .terminal--line::after {
+    content: "\00a0";
+}
+/*****************************************
+ * Buttons
+ */
+.terminal .terminal--btn {
+    border: 0; background: 0;
+    border: 1px solid #0F0;
+    font: inherit; color: inherit;
+    line-height: 1;
+    padding: .5rem .75rem;
+    margin-right: .5rem;
+}
+.terminal .terminal--btn:hover:not([disabled]),
+.terminal .terminal--btn:focus:not([disabled]),
+.terminal .terminal--btn.terminal--btn__chosen {
+    background: #0F0; color: #000;
+}
+.terminal .terminal--btn[disabled] {
+    opacity: .52;
+    filter: grayscale(100%);
 }

helpers.js

@@ -1,5 +1,89 @@
-/* If you're feeling fancy you can add interactivity 
-    to your site with Javascript */
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+//! Helpers
 
-// prints "hi" in the browser's dev tools console
-console.log("hi");
+// coffeelint: disable=indentation
+
+const H = (window.H = {});
+const Terminal = document.getElementById('terminal');
+
+H.parseHTML = function(html) {
+    const tmp = document.implementation.createHTMLDocument();
+    tmp.body.innerHTML = html;
+    return Array.from(tmp.body.children);
+};
+H.out = (text, timeout) => new Promise(function(resolve, reject) {
+    const line = H.parseHTML(`\
+<span class='terminal--line'> \
+${text} \
+</span>\
+`)[0];
+    return H.wait(timeout).then(function() {
+        Terminal.appendChild(line);
+        H.scroll(line);
+        return resolve(line);
+    });
+});
+
+H.outRaw = function() { return H.out(...arguments); }; // Allow for raw HTML
+H.newLine = timeout => H.out('', timeout); // Newline helper
+H.thenChain = fn => new Promise(function(resolve, reject) { if (typeof fn === 'function') {
+    fn();
+} return resolve(); });
+H.choice = options => new Promise(function(resolve, reject) {
+    let b;
+    const btns = [];
+    const _createButton = function(data) {
+        const btn = H.parseHTML(`\
+<button class=\"terminal--btn\">${data.content}</button>\
+`)[0];
+        btn.addEventListener('click', function() {
+            for (let b of Array.from(btns)) { b.setAttribute('disabled', true); }
+            this.classList.add('terminal--btn__chosen');
+            return resolve(data.callback());
+        });
+        return btns.push(btn);
+    };
+
+    for (b of Array.from(options.choices)) { _createButton(b); }
+    const choiceWrapper = H.parseHTML(`\
+<div class=\"terminal--choice terminal--line\"> \
+${options.content != null ? options.content : ''} \
+</div>\
+`)[0];
+    for (b of Array.from(btns)) { choiceWrapper.appendChild(b); }
+    return Terminal.appendChild(choiceWrapper);
+});
+H.wait = timeout => new Promise((resolve, reject) => setTimeout(() => resolve()
+, Number(timeout != null ? timeout : 0) * /*100*/0));
+H.random = function(min, max) {
+    if ((max == null)) {
+        [min, max] = [0, min];
+    }
+    return Math.floor(
+        Math.random() * ((max - min) + 1)
+    ) + min;
+};
+H.spacer = timeout => new Promise(function(resolve, reject) {
+    const line = H.parseHTML(`<span class='terminal--line \
+terminal--vertical-spacer'></span>`)[0];
+    return H.wait(timeout).then(function() {
+        Terminal.appendChild(line);
+        H.scroll(line);
+        return resolve(line);
+    });
+});
+H.scroll = function(el) {
+    const h = document.documentElement;
+    return requestAnimationFrame(() => requestAnimationFrame(() => h.scrollTop += 16 * 3));
+};
+H.stop = function() {
+    //! Prevent the game from accidentally being progressed further.
+    H.out = () => new Promise(function() {});
+    return Terminal.innerHTML = '';
+};

index.html

@@ -3,7 +3,7 @@
     Made with :3c by MindfulMinun
     https://benjic.xyz
 -->
-<html class="no-js" lang="en-US">
+<html lang="en-US">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -15,12 +15,8 @@
 </head>
 <body>
     <div class="container">
-        <!-- <div id="terminal" class="terminal"><noscript class="terminal--line" style="text-indent: 0; padding-left: 0;"> Quit being paranoid and enable JavaScript. </noscript></div> -->
-        <div id="terminal" class="terminal">
-            <div class="terminal-line">
-                <button class="terminal-btn">Start</button>
-            </div>
-        </div>
+        <div class="header"></div>
+        <div id="terminal" class="terminal"><noscript class="terminal--line">Quit being paranoid and enable JavaScript.</noscript></div>
     </div>
 </body>
 <script src="/helpers.js"></script>