CHANGELOG.md

@@ -4,12 +4,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [v4.6.0] - unreleased
-### Changed
-- We are now using djb2xor instead of sha256 to hash puzzle answers
-- Lots of work on the built-in theme
-- [moth.mjs](theme/moth.mjs) is now the standard MOTH library for ECMAScript
-
 ## [v4.4.9] - 2022-05-12
 ### Changed
 - Added a performance optimization for events with a large number of teams

theme/background.mjs

@@ -87,7 +87,7 @@ class QixLine {
  * like the video game "qix"
  */
 class QixBackground {
-    constructor(ctx, frameInterval = SECOND/6) {
+    constructor(ctx) {
         this.ctx = ctx
         this.min = new Point(0, 0)
         this.max = new Point(this.ctx.canvas.width, this.ctx.canvas.height)
@@ -105,25 +105,17 @@ class QixBackground {
         }
         this.velocity = new QixLine(
             0.001,
-            new Point(1 + randint(this.box.x / 100), 1 + randint(this.box.y / 100)),
-            new Point(1 + randint(this.box.x / 100), 1 + randint(this.box.y / 100)),
+            new Point(1 + randint(this.box.x / 200), 1 + randint(this.box.y / 200)),
+            new Point(1 + randint(this.box.x / 200), 1 + randint(this.box.y / 200)),
         )
 
-        this.frameInterval = frameInterval
-        this.nextFrame = 0
+        setInterval(() => this.animate(), SECOND/6)
     }
 
     /**
-     * Maybe draw a frame
+     * Animate one frame
      */
-    Animate() {
-        let now = performance.now()
-        if (now < this.nextFrame) {
-            // Not today, satan
-            return
-        }
-        this.nextFrame = now + this.frameInterval
-
+    animate() {
         this.lines.shift()
         let lastLine = this.lines[this.lines.length - 1]
         let nextLine = new QixLine(
@@ -137,7 +129,7 @@ class QixBackground {
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
         for (let line of this.lines) {
             this.ctx.save()
-            this.ctx.strokeStyle = `hwb(${line.hue}turn 0% 0%)`
+            this.ctx.strokeStyle = `hwb(${line.hue}turn 0% 50%)`
             this.ctx.beginPath()
             this.ctx.moveTo(line.a.x, line.a.y)
             this.ctx.lineTo(line.b.x, line.b.y)
@@ -156,9 +148,7 @@ function init() {
 
     let ctx = canvas.getContext("2d")
 
-    let qix = new QixBackground(ctx)
-    setInterval(() => qix.Animate(), SECOND/6)
-
+    new QixBackground(ctx)
 }
 
 if (document.readyState === "loading") {

theme/basic.css

@@ -22,6 +22,17 @@ h1 {
 a:any-link {
 	color: #b9cbd8;
 }
+canvas.wallpaper {
+  position: fixed;
+  display: block;
+  z-index: -1000;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  opacity: 0.3;
+  image-rendering: pixelated;
+}
 .notification {
 	background: #ac8f3944;
 }
@@ -44,21 +55,6 @@ a:any-link {
 
 body {
   font-family: sans-serif;
-  background-image: url("bg.png");
-  background-size: contain;
-  background-blend-mode: soft-light;
-  background-attachment: fixed;
-}
-canvas.wallpaper {
-  position: fixed;
-  display: block;
-  z-index: -1000;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  opacity: 0.2;
-  image-rendering: pixelated;
 }
 main {
   max-width: 40em;
@@ -102,9 +98,6 @@ img {
 input:invalid {
   border-color: red;
 }
-.answer_ok {
-  cursor: help;
-}
 #messages {
   min-height: 3em;
 }

theme/hash.mjs

@@ -1,20 +0,0 @@
-// Dan Bernstein hash v1
-// Used until MOTH v3.5
-function djb2(buf) {
-    let h = 5381
-    for (let c of (new TextEncoder()).encode(buf)) { // Encode as UTF-8 and read in each byte
-      // JavaScript converts everything to a signed 32-bit integer when you do bitwise operations.
-      // So we have to do "unsigned right shift" by zero to get it back to unsigned.
-      h = (((h * 33) + c) & 0xffffffff) >>> 0
-    }
-    return h
-  }
-  
-  // Used until MOTH v4.5
-  async function sha256(message) {
-    const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
-    const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
-    const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
-    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
-    return hashHex;
-  }

theme/moth.mjs

@@ -1,65 +1,3 @@
-/**
- * Hash/digest functions
- */
-class Hash {
-    /**
-     * Dan Bernstein hash
-     * 
-     * Used until MOTH v3.5
-     * 
-     * @param {String} buf Input
-     * @returns {Number}
-     */
-    static djb2(buf) {
-        let h = 5381
-        for (let c of (new TextEncoder()).encode(buf)) { // Encode as UTF-8 and read in each byte
-            // JavaScript converts everything to a signed 32-bit integer when you do bitwise operations.
-            // So we have to do "unsigned right shift" by zero to get it back to unsigned.
-            h = (((h * 33) + c) & 0xffffffff) >>> 0
-        }
-        return h
-    }
-
-    /**
-     * Dan Bernstein hash with xor improvement
-     * 
-     * @param {String} buf Input
-     * @returns {Number}
-     */
-    static djb2xor(buf) {
-        let h = 5381
-        for (let c of (new TextEncoder()).encode(buf)) {
-            h = h * 33 ^ c
-        }
-        return h
-    }
-  
-    /**
-     * SHA 256
-     * 
-     * Used until MOTH v4.5
-     * 
-     * @param {String} buf Input
-     * @returns {String} hex-encoded digest
-     */
-   static async sha256(buf) {
-    const msgUint8 = new TextEncoder().encode(buf)
-    const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8)
-    const hashArray = Array.from(new Uint8Array(hashBuffer))
-    return this.hexlify(hashArray);
-  }
-
-  /**
-   * Hex-encode a byte array
-   * 
-   * @param {Number[]} buf Byte array
-   * @returns {String}
-   */
-  static async hexlify(buf) {
-    return buf.map(b => b.toString(16).padStart(2, "0")).join("")   
-  }
-}
-
 /**
  * A point award.
  */
@@ -165,23 +103,6 @@ class Puzzle {
     Get(filename) {
         return this.server.GetContent(this.Category, this.Points, filename)
     }
-
-    async IsPossiblyCorrect(str) {
-        let userAnswerHashes = [
-            Hash.djb2(str),
-            Hash.djb2xor(str),
-            await Hash.sha256(str),
-        ]
-
-        for (let pah of this.AnswerHashes) {
-            for (let uah of userAnswerHashes) {
-                if (pah == uah) {
-                    return true
-                }
-            }
-        }
-        return false
-    }
 }
 
 /**
@@ -422,6 +343,5 @@ class Server {
 }
 
 export {
-    Hash,
-    Server,
+    Server
 }

theme/puzzle.html

@@ -6,8 +6,8 @@
     <meta charset="utf-8">
     <link rel="icon" href="luna-moth.svg">
     <link rel="stylesheet" href="basic.css">
-    <script src="background.mjs" type="module" async></script>
-    <script src="puzzle.mjs" type="module" async></script>
+    <script src="puzzle.mjs" type="module"></script>
+    <script src="background.mjs" type="module"></script>
   </head>
   <body>
     <main>
@@ -23,7 +23,7 @@
       </section>
       <form class="answer">
         Team ID: <input type="text" name="id"> <br>
-        Answer: <input type="text" name="answer" id="answer"> <span class="answer_ok"></span><br>
+        Answer: <input type="text" name="answer"> <span id="answer_ok"></span><br>
         <input type="submit" value="Submit">
       </form>
     </main>

theme/puzzle.js

@@ -19,7 +19,7 @@ function devel_addin(e) {
   if (log.length > 0) {
     e.appendChild(document.createElement("h3")).textContent = "Log"
     let le = e.appendChild(document.createElement("ul"))
-    for (let entry of log) {
+    for (entry of log) {
       le.appendChild(document.createElement("li")).textContent = entry
     }
   }

theme/puzzle.mjs

@@ -1,45 +1,13 @@
 import * as moth from "./moth.mjs"
 
-/**
- * Handle a submit event on a form.
- * 
- * This event will be called when the user submits the form,
- * either by clicking a "submit" button,
- * or by some other means provided by the browser,
- * like hitting the Enter key.
- * 
- * @param {Event} event 
- */
-function formSubmitHandler(event) {
+/** Stores the current puzzle, globally */
+let puzzle = null
+
+function submit(event) {
     event.preventDefault()
     console.log(event)
 }
 
-/**
- * Handle an input event on the answer field.
- * 
- * @param {Event} event 
- */
-async function answerInputHandler(event) {
-    let answer = event.target.value
-    let correct = await window.app.puzzle.IsPossiblyCorrect(answer)
-    for (let ok of event.target.parentElement.querySelectorAll(".answer_ok")) {
-        if (correct) {
-            ok.textContent = "⭕"
-            ok.title = "Possibly correct"
-        } else {
-            ok.textContent = "❌"
-            ok.title = "Definitely not correct"
-        }
-    }
-}
-
-/**
- * Return the puzzle content element, possibly with everything cleared out of it.
- * 
- * @param {Boolean} clear Should the element be cleared of children? Default true.
- * @returns {Element}
- */
 function puzzleElement(clear=true) {
     let e = document.querySelector("#puzzle")
     if (clear) {
@@ -48,99 +16,32 @@ function puzzleElement(clear=true) {
     return e
 }
 
-/**
- * Display an error in the puzzle area, and also send it to the console.
- * 
- * This makes it so the user can see a bit more about what the problem is.
- * 
- * @param {String} error 
- */
-function error(error) {
-    console.error(error)
-    let e = puzzleElement().appendChild(document.createElement("pre"))
+function error(message) {
+    let e = puzzleElement().appendChild(document.createElement("p"))
     e.classList.add("error")
-    e.textContent = error.Body || error
+    e.textContent = message
 }
 
-/**
- * Set the answer and invoke input handlers.
- * 
- * This makes sure the Circle Of Success gets updated.
- * 
- * @param {String} s 
- */
-function setanswer(s) {
-    let e = document.querySelector("#answer")
-    e.value = s
-    e.dispatchEvent(new Event("input"))
-}
-
-/**
- * Load the given puzzle.
- * 
- * @param {String} category 
- * @param {Number} points 
- */
 async function loadPuzzle(category, points) {
-    console.group("Loading puzzle:", category, points)
-    let contentBase = new URL(`content/${category}/${points}/`, location)
-    
-    // Tell user we're loading
-    puzzleElement().appendChild(document.createElement("progress"))
-    for (let qs of ["#authors", "#title", "title"]) {
-        for (let e of document.querySelectorAll(qs)) {
-            e.textContent = "[loading]"
-        }
-    }    
-
     let server = new moth.Server()
-    let puzzle = server.GetPuzzle(category, points)
-    console.time("Puzzle load")
+    puzzle = server.GetPuzzle(category, points)
     await puzzle.Populate()
-    console.timeEnd("Puzzle load")
 
     let title = `${category} ${points}`
     document.querySelector("title").textContent = title
     document.querySelector("#title").textContent = title
     document.querySelector("#authors").textContent = puzzle.Authors.join(", ")
     puzzleElement().innerHTML = puzzle.Body
-
-    console.info("Adding attached scripts...")
-    for (let script of (puzzle.Scripts || [])) {
-        let st = document.createElement("script")
-        document.head.appendChild(st)
-        st.src = new URL(script, contentBase)
-      }
-
-    console.info("Listing attached files...")
-    for (let fn of (puzzle.Attachments || [])) {
-        let li = document.createElement("li")
-        let a = document.createElement("a")
-        a.href = new URL(fn, contentBase)
-        a.innerText = fn
-        li.appendChild(a)
-        document.getElementById("files").appendChild(li)
-    }
-
-
-    window.app.puzzle = puzzle
-    console.info("window.app.puzzle =", window.app.puzzle)
-
-    console.groupEnd()
 }
 
-function init() {
-    window.app = {}
-    window.setanswer = setanswer
-
-    for (let form of document.querySelectorAll("form.answer")) {
-        form.addEventListener("submit", formSubmitHandler)
-        for (let e of form.querySelectorAll("[name=answer]")) {
-            e.addEventListener("input", answerInputHandler)
+function hashchange() {
+    // Tell user we're loading
+    puzzleElement().appendChild(document.createElement("progress"))
+    for (let qs of ["#authors", "#title", "title"]) {
+        for (let e of document.querySelectorAll(qs)) {
+            e.textContent = "[loading]"
         }
     }
-    // There isn't a more graceful way to "unload" scripts attached to the current puzzle
-    window.addEventListener("hashchange", () => location.reload())
 
     let hashpart = location.hash.split("#")[1] || ""
     let catpoints = hashpart.split(":")
@@ -155,6 +56,14 @@ function init() {
     .catch(err => error(err))
 }
 
+function init() {
+    for (let e of document.querySelectorAll("form.answer")) {
+        e.addEventListener("submit", submit)
+    }
+    window.addEventListener("hashchange", hashchange)
+    hashchange()
+}
+
 if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", init)
 } else {