cmd/mothd/server.go

@@ -169,6 +169,7 @@ func (mh *MothRequestHandler) ThemeOpen(path string) (ReadSeekCloser, time.Time,
 
 // Register associates a team name with a team ID.
 func (mh *MothRequestHandler) Register(teamName string) error {
+	// BUG(neale): Register returns an error if a team is already registered; it may make more sense to return success
 	if teamName == "" {
 		return fmt.Errorf("empty team name")
 	}

theme/background.mjs

@@ -2,9 +2,9 @@ function randint(max) {
     return Math.floor(Math.random() * max)
 }
 
-const Millisecond = 1
+const MILLISECOND = 1
-const Second = Millisecond * 1000
+const SECOND = MILLISECOND * 1000
-const FrameRate = 24 / Second  // Fast enough for this tomfoolery
+const FRAMERATE = 24 / SECOND  // Fast enough for this tomfoolery
 
 class Point {
     constructor(x, y) {
@@ -88,7 +88,7 @@ class QixLine {
  * like the video game "qix"
  */
 class QixBackground {
-    constructor(ctx, frameRate = 6/Second) {
+    constructor(ctx, frameRate = 6/SECOND) {
         this.ctx = ctx
         this.min = new Point(0, 0)
         this.max = new Point(this.ctx.canvas.width, this.ctx.canvas.height)
@@ -110,7 +110,7 @@ class QixBackground {
             new Point(1 + randint(this.box.x / 100), 1 + randint(this.box.y / 100)),
         )
 
-        this.frameInterval = Millisecond / frameRate
+        this.frameInterval = MILLISECOND / frameRate
         this.nextFrame = 0
     }
 
@@ -149,12 +149,6 @@ class QixBackground {
 }
 
 function init() {
-    // Don't like the background animation? You can disable it by setting a
-    // property in localStorage and reloading.
-    if (localStorage.disableBackgroundAnimation) {
-        return
-    }
-
     let canvas = document.createElement("canvas")
     canvas.width = 640
     canvas.height = 640
@@ -165,7 +159,7 @@ function init() {
 
     let qix = new QixBackground(ctx)
     // window.requestAnimationFrame is overkill for something this silly
-    setInterval(() => qix.Animate(), Millisecond/FrameRate)
+    setInterval(() => qix.Animate(), MILLISECOND/FRAMERATE)
 }
 
 if (document.readyState === "loading") {

theme/basic.css

@@ -1,12 +1,53 @@
-/* Color palette: http://paletton.com/#uid=33x0u0klrl-4ON9dhtKtAdqMQ4T */
+/*
+ * Colors
+ *
+ * This uses the alpha channel to apply hue tinting to elements, to get a
+ * similar effect in light or dark mode.
+ *
+ * http://paletton.com/#uid=33x0u0klrl-4ON9dhtKtAdqMQ4T
+ */
+body {
+	background: #010e19;
+  color: #edd488;
+}
+main {
+  background: #000d;
+}
+h1, h2, h3, h4, h5, h6 {
+  color: #cb2408cc;
+}
+h1 {
+  background: #cb240844;
+}
+a:any-link {
+	color: #b9cbd8;
+}
+.notification {
+	background: #ac8f3944;
+}
+.error {
+  background: red;
+  color: white;
+}
+@media (prefers-color-scheme: light) {
+  body {
+    background: #b9cbd8;
+    color: black;
+  }
+  main {
+    background: #fffd;
+  }
+  a:any-link {
+    color: #092b45;
+  }
+}
 
 body {
   font-family: sans-serif;
-  background: #010e19 url("bg.png") center fixed;
+  background-image: url("bg.png");
-  background-size: cover;
+  background-size: contain;
   background-blend-mode: soft-light;
-  background-color: #010e19;
+  background-attachment: fixed;
-  color: #edd488;
 }
 canvas.wallpaper {
   position: fixed;
@@ -21,24 +62,16 @@ canvas.wallpaper {
 }
 main {
   max-width: 40em;
-  margin: 1em auto;
+  margin: auto;
   padding: 1px 3px;
   border-radius: 5px;
-  background: #000d;
-}
-h1, h2, h3, h4, h5, h6 {
-  color: #cb2408cc;
 }
 h1 {
-  background: #cb240844;
   padding: 3px;
 }
 p {
 	margin: 1em 0em;
 }
-a:any-link {
-	color: #b9cbd8;
-}
 form, pre {
 	margin: 1em;
   overflow-x: auto;
@@ -48,69 +81,34 @@ input, select {
 	margin: 0.2em;
 	max-width: 30em;
 }
-input {
-  background-color: #ccc4;
-  color: inherit;
-}
 .notification, .error {
   padding: 0 1em;
   border-radius: 8px;
 }
-.notification {
-	background: #ac8f3944;
-}
-.error {
-  background: red;
-  color: white;
-}
-.hidden {
-  display: none;
-}
 
-/** Puzzles list */
-.category {
-  margin: 5px 0;
-  background: #ccc4;
-}
-.category h2 {
-  margin: 0 0.2em;
-}
 nav ul, .category ul {
-  margin: 0;
+  padding: 1em;
-  padding: 0.2em 1em;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
 }
 nav li, .category li {
 	display: inline;
+	margin: 1em;
 }
-.mothball {
+iframe#body {
-  float: right;
+  border: inherit;
-  text-decoration: none;
+  width: 100%;
-  border-radius: 5px;
-  background: #ccc;
-  padding: 4px 8px;
-  margin: 5px;
 }
-
+img {
-/** Puzzle content */
-#puzzle {
-  border-bottom: solid;
-  padding: 0 0.5em;
-}
-#puzzle img {
   max-width: 100%;
 }
 input:invalid {
-  background-color: #800;
+  border-color: red;
-  color: white;
 }
 .answer_ok {
   cursor: help;
 }
-
+#messages {
-/** Scoreboard */
+  min-height: 3em;
+}
 #rankings {
 	width: 100%;
 	position: relative;
@@ -140,19 +138,11 @@ input:invalid {
 .cat6, .cat14, .cat22 {background-color: #fdbf6f; color: black;}
 .cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;}
 
-.debug {
+
+#devel {
   overflow: auto;
-  padding: 1em;
-  border-radius: 10px;
-  margin: 2em auto;
-  background: #cccc;
-  color: black;
-}
-.debug dt {
-  font-weight: bold;
 }
 
-/** Draggable items, from the draggable plugin */
 li[draggable]::before {
   content: "↕";
   padding: 0.5em;
@@ -170,50 +160,6 @@ li[draggable] {
   border: 1px white dashed;
 }
 
-
+#cacheButton.disabled {
-
+  display: none;
-
-
-/** Toasts are little pop-up informational messages. */
- .toasts {
-  position: fixed;
-  z-index: 100;
-  bottom: 10px;
-  left: 10px;
-  text-align: center;
-  width: calc(100% - 20px);
-  display: flex;
-  flex-direction: column;
-}
-.toast {
-  border-radius: 0.5em;
-  padding:  0.2em 2em;
-  animation: fadeIn ease 1s;
-  margin: 2px auto;
-  background: #333;
-  color: #eee;
-  box-shadow: 0px 0px 8px 0px #0b0;
-}
-@keyframes fadeIn {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@media (prefers-color-scheme: light) {
-  /*
-   * This uses the alpha channel to apply hue tinting to elements, to get a
-   * similar effect in light or dark mode. That means there aren't a whole lot of
-   * things to change between light and dark mode.
-   *
-   */
- body {
-    background-color: #b9cbd8;
-    color: black;
-  }
-  main {
-    background-color: #fffd;
-  }
-  a:any-link {
-    color: #092b45;
-  }
 }

theme/common.mjs

@@ -1,43 +0,0 @@
-/**
- * Common functionality
- */
-const Millisecond = 1
-const Second = Millisecond * 1000
-const Minute = Second * 60
-
-/**
- * Display a transient message to the user.
- * 
- * @param {String} message Message to display
- * @param {Number} timeout How long before removing this message
- */
-function Toast(message, timeout=5*Second) {
-    console.info(message)
-    for (let toasts of document.querySelectorAll(".toasts")) {
-        let p = toasts.appendChild(document.createElement("p"))
-        p.classList.add("toast")
-        p.textContent = message
-        setTimeout(() => p.remove(), timeout)
-    }
-}
-
-/**
- * Run a function when the DOM has been loaded.
- * 
- * @param {function():void} cb Callback function
- */
-function WhenDOMLoaded(cb) {
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", cb)
-    } else {
-        cb()
-    }    
-}
-
-export {
-    Millisecond,
-    Second,
-    Minute,
-    Toast,
-    WhenDOMLoaded,
-}

theme/index.html

@@ -1,34 +1,32 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <title>MOTH</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <link rel="icon" href="luna-moth.svg">
     <link rel="stylesheet" href="basic.css">
-    <script src="index.mjs" type="module" async></script>
+    <script src="moth.mjs" type="module"></script>
-    <script src="background.mjs" type="module" async></script>
+    <script src="background.mjs" type="module"></script>
   </head>
   <body>
-    <h1 class="title">MOTH</h1>
+    <h1 id="title">MOTH</h1>
     <main>
-      <div class="messages notification">
+      <div id="messages notification">
       </div>
 
-      <form class="login">
+      <form id="login">
         Team ID: <input name="id"> <br>
         Team name: <input name="name"> <br>
         <input type="submit" value="Sign In">
       </form>
 
-      <div class="puzzles"></div>
+      <div id="puzzles"></div>
-
-      <div class="toasts"></div>
     </main>
     <nav>
       <ul>
-        <li><a href="scoreboard.html" target="_blank">Scoreboard</a></li>
+        <li><a href="scoreboard.html">Scoreboard</a></li>
-        <li><button class="logout">Sign Out</button></li>
+        <li><a href="logout.html">Sign Out</a></li>
       </ul>
     </nav>
   </body>

theme/index.mjs

@@ -1,158 +0,0 @@
-/**
- * Functionality for index.html (Login / Puzzles list)
- */
-import * as moth from "./moth.mjs"
-import * as common from "./common.mjs"
-
-class App {
-    constructor(basePath=".") {
-        this.server = new moth.Server(basePath)
-
-        let uuid = Math.floor(Math.random() * 1000000).toString(16)
-        this.fakeRegistration = {
-            TeamId: uuid,
-            TeamName: `Team ${uuid}`,
-        }
-
-        for (let form of document.querySelectorAll("form.login")) {
-            form.addEventListener("submit", event => this.handleLoginSubmit(event))
-        }
-        for (let e of document.querySelectorAll(".logout")) {
-            e.addEventListener("click", () => this.Logout())
-        }
-
-        setInterval(() => this.Update(), common.Minute/3)
-        this.Update()
-    }
-
-    handleLoginSubmit(event) {
-        event.preventDefault()
-        console.log(event)
-    }
-    
-    /**
-     * Attempt to log in to the server.
-     * 
-     * @param {String} teamId 
-     * @param {String} teamName 
-     */
-    async Login(teamId, teamName) {
-        try {
-            await this.server.Login(teamId, teamName)
-            common.Toast(`Logged in (team id = ${teamId})`)
-            this.Update()
-        }
-        catch (error) {
-            common.Toast(error)
-        }
-    }
-
-    /**
-     * Log out of the server by clearing the saved Team ID.
-     */
-    async Logout() {
-        try {
-            this.server.Reset()
-            common.Toast("Logged out")
-            this.Update()
-        }
-        catch (error) {
-            common.Toast(error)
-        }
-    }
-
-    /**
-     * Update the entire page.
-     *
-     * Fetch a new state, and rebuild all dynamic elements on this bage based on
-     * what's returned. If we're in development mode and not logged in, auto
-     * login too.
-     */
-    async Update() {
-        this.state = await this.server.GetState()
-        for (let e of document.querySelectorAll(".messages")) {
-            e.innerHTML = this.state.Messages
-        }
-
-        for (let e of document.querySelectorAll(".login")) {
-            this.renderLogin(e, !this.server.LoggedIn())
-        }
-        for (let e of document.querySelectorAll(".puzzles")) {
-            this.renderPuzzles(e, this.server.LoggedIn())
-        }
-
-        if (this.state.DevelopmentMode() && !this.server.LoggedIn()) {
-            common.Toast("Automatically logging in to devel server")
-            console.info("Logging in with generated Team ID and Team Name", this.fakeRegistration)
-            return this.Login(this.fakeRegistration.TeamId, this.fakeRegistration.TeamName)
-        }
-    }
-
-    /**
-     * Render a login box.
-     * 
-     * This just toggles visibility, there's nothing dynamic in a login box.
-     */
-    renderLogin(element, visible) {
-        element.classList.toggle("hidden", !visible)
-    }
-
-    /**
-     * Render a puzzles box.
-     *
-     * This updates the list of open puzzles, and adds mothball download links
-     * if the server is in development mode.
-     */
-    renderPuzzles(element, visible) {
-        element.classList.toggle("hidden", !visible)
-        while (element.firstChild) element.firstChild.remove()
-        for (let cat of this.state.Categories()) {
-            let pdiv = element.appendChild(document.createElement("div"))
-            pdiv.classList.add("category")
-            
-            let h = pdiv.appendChild(document.createElement("h2"))
-            h.textContent = cat
-            
-            // Extras if we're running a devel server
-            if (this.state.DevelopmentMode()) {
-                let a = h.appendChild(document.createElement('a'))
-                a.classList.add("mothball")
-                a.textContent = "📦"
-                a.href = this.server.URL(`mothballer/${cat}.mb`)
-                a.title = "Download a compiled puzzle for this category"
-            }
-            
-            // List out puzzles in this category
-            let l = pdiv.appendChild(document.createElement("ul"))
-            for (let puzzle of this.state.Puzzles(cat)) {
-                let i = l.appendChild(document.createElement("li"))
-
-                let url = new URL("puzzle.html", window.location)
-                url.hash = `${puzzle.Category}:${puzzle.Points}`
-                let a = i.appendChild(document.createElement("a"))
-                a.textContent = puzzle.Points
-                a.href = url
-                a.target = "_blank"
-            }
-
-            if (!this.state.HasUnsolved(cat)) {
-                l.appendChild(document.createElement("li")).textContent = "✿"
-            }
-            
-            element.appendChild(pdiv)        
-        }
-    }
-}
-
-function init() {
-    window.app = {
-        server: new App()
-    }
-}
-
-if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", init)
-} else {
-    init()
-}
-  

theme/logout.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>MOTH</title>
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="basic.css">
+    <script>
+sessionStorage.removeItem("id")
+    </script>
+  </head>
+  <body>
+    <h1 id="title">MOTH</h1>
+    <section>
+      <p>Okay, you've been logged out.</p>
+		</section>
+    <nav>
+      <ul>
+        <li><a href="index.html">Sign In</a></li>
+        <li><a href="scoreboard.html">Scoreboard</a></li>
+      </ul>
+    </nav>
+  </body>
+</html>

theme/moth.js

@@ -0,0 +1,196 @@
+// jshint asi:true
+
+var devel = false
+var teamId
+var heartbeatInterval = 40000
+
+function toast(message, timeout=5000) {
+  let p = document.createElement("p")
+  
+  p.innerText = message
+  document.getElementById("messages").appendChild(p)
+  setTimeout(
+    e => { p.remove() },
+    timeout
+  )
+}
+
+function renderNotices(obj) {
+  let ne = document.getElementById("notices")
+  if (ne) {
+    ne.innerHTML = obj
+  }
+}
+
+function renderPuzzles(obj) {
+  let puzzlesElement = document.createElement('div')
+  
+  document.getElementById("login").style.display = "none"
+  
+  // Create a sorted list of category names
+  let cats = Object.keys(obj)
+  cats.sort()
+  if (cats.length == 0) {
+    toast("No categories to serve!")
+  }
+  for (let cat of cats) {
+    if (cat.startsWith("__")) {
+      // Skip metadata
+      continue
+    }
+    let puzzles = obj[cat]
+    
+    let pdiv = document.createElement('div')
+    pdiv.className = 'category'
+    
+    let h = document.createElement('h2')
+    pdiv.appendChild(h)
+    h.textContent = cat
+    
+    // Extras if we're running a devel server
+    if (devel) {
+      let a = document.createElement('a')
+      h.insertBefore(a, h.firstChild)
+      a.textContent = "⬇️"
+      a.href = "mothballer/" + cat + ".mb"
+      a.classList.add("mothball")
+      a.title = "Download a compiled puzzle for this category"
+    }
+    
+    // List out puzzles in this category
+    let l = document.createElement('ul')
+    pdiv.appendChild(l)
+    for (let puzzle of puzzles) {
+      let points = puzzle
+      let id = null
+      
+      if (Array.isArray(puzzle)) {
+        points = puzzle[0]
+        id = puzzle[1]
+      }
+  
+      let i = document.createElement('li')
+      l.appendChild(i)
+      i.textContent = " "
+  
+      if (points === 0) {
+        // Sentry: there are no more puzzles in this category
+        i.textContent = "✿"
+      } else {
+        let a = document.createElement('a')
+        i.appendChild(a)
+        a.textContent = points
+        let url = new URL("puzzle.html", window.location)
+        url.searchParams.set("cat", cat)
+        url.searchParams.set("points", points)
+        if (id) { url.searchParams.set("pid", id) }
+        a.href = url.toString()
+      }
+    }
+    
+    puzzlesElement.appendChild(pdiv)
+  }
+    
+  // Drop that thing in
+  let container = document.getElementById("puzzles")
+  while (container.firstChild) {
+    container.firstChild.remove()
+  }
+  container.appendChild(puzzlesElement)
+}
+
+function renderState(obj) {
+  window.state = obj
+  devel = obj.Config.Devel
+  if (devel) {
+    let params = new URLSearchParams(window.location.search)
+    sessionStorage.id = "1"
+    renderPuzzles(obj.Puzzles)
+  } else if (Object.keys(obj.Puzzles).length > 0) {
+    renderPuzzles(obj.Puzzles)
+  }
+  renderNotices(obj.Messages)
+}
+
+function heartbeat() {
+  let teamId = sessionStorage.id || ""
+  let url = new URL("state", window.location)
+  url.searchParams.set("id", teamId)
+
+  let fd = new FormData()
+  fd.append("id", teamId)
+  fetch(url)
+  .then(resp => {
+    if (resp.ok) {
+      resp.json()
+      .then(renderState)
+      .catch(err => {
+        toast("Error fetching recent state. I'll try again in a moment.")
+        console.log(err)
+      })
+    }
+  })
+  .catch(err => {
+    toast("Error fetching recent state. I'll try again in a moment.")
+    console.log(err)
+  })
+}
+
+function showPuzzles() {
+  let spinner = document.createElement("span")
+  spinner.classList.add("spinner")
+
+  document.getElementById("login").style.display = "none"
+  document.getElementById("puzzles").appendChild(spinner)
+}
+
+function login(e) {
+  e.preventDefault()
+  let name = document.querySelector("[name=name]").value
+  let teamId = document.querySelector("[name=id]").value
+  
+  fetch("register", {
+    method: "POST",
+    body: new FormData(e.target),
+  })
+  .then(resp => {
+    if (resp.ok) {
+      resp.json()
+      .then(obj => {
+        if ((obj.status == "success") || (obj.data.short == "Already registered")) {
+          toast("Logged in")
+          sessionStorage.id = teamId
+          showPuzzles()
+          heartbeat()
+        } else {
+          toast(obj.data.description)
+        }
+      })
+      .catch(err => {
+        toast("Oops, the server has lost its mind. You probably need to tell someone so they can fix it.")
+        console.log(err, resp)
+      })
+    } else {
+      toast("Oops, something's wrong with the server. Try again in a few seconds.")
+      console.log(resp)
+    }
+  })
+  .catch(err => {
+    toast("Oops, something went wrong. Try again in a few seconds.")
+    console.log(err)
+  })
+}
+
+function init() {
+  heartbeat()
+  setInterval(e => heartbeat(), 40000)
+
+  document.getElementById("login").addEventListener("submit", login)
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init)
+} else {
+  init()
+}
+

theme/moth.mjs

@@ -208,19 +208,6 @@ class Puzzle {
         }
         return false
     }
-
-    /**
-     * Submit a proposed answer for points.
-     *
-     * The returned promise will fail if anything goes wrong, including the
-     * proposed answer being rejected.
-     *
-     * @param {String} proposed Answer to submit
-     * @returns {Promise.<String>} Success message
-     */
-    SubmitAnswer(proposed) {
-        return this.server.SubmitAnswer(this.Category, this.Points, proposed)
-    }
 }
 
 /**
@@ -241,27 +228,23 @@ class State {
 
         /** Configuration */
         this.Config = {
-            /** Is the server in development mode?
+            /** Is the server in debug mode?
              * @type {Boolean}
              */
-            Devel: obj.Config.Devel,
+            Debug: obj.Config.Debug,
         }
-
         /** Global messages, in HTML
          * @type {String}
          */
         this.Messages = obj.Messages
-
         /** Map from Team ID to Team Name
          * @type {Object.<String,String>}
          */
         this.TeamNames = obj.TeamNames
-
         /** Map from category name to puzzle point values
          * @type {Object.<String,Number>}
          */
         this.PointsByCategory = obj.Puzzles
-
         /** Log of points awarded
          * @type {Award[]}
          */
@@ -295,15 +278,6 @@ class State {
         return !this.PointsByCategory[category].includes(0)
     }
 
-    /**
-     * Is the server in development mode?
-     * 
-     * @returns {Boolean}
-     */
-    DevelopmentMode() {
-        return this.Config && this.Config.Devel
-    }
-
     /**
      * Return all open puzzles.
      * 
@@ -339,16 +313,10 @@ class State {
  * and will send a Team ID with every request, if it can find one.
  */
 class Server {
-    /**
-     * @param {String | URL} baseUrl Base URL to server, for constructing API URLs
-     */
     constructor(baseUrl) {
-        if (!baseUrl) {
-            throw("Must provide baseURL")
-        }
         this.baseUrl = new URL(baseUrl, location)
-        this.teamIdKey = this.baseUrl.toString() + " teamID"
+        this.teameIdKey = this.baseUrl.toString() + " teamID"
-        this.TeamId = localStorage[this.teamIdKey]
+        this.teamId = localStorage[this.teameIdKey]
     }
 
     /**
@@ -358,30 +326,22 @@ class Server {
      * this function throws an error.
      * 
      * This always sends teamId.
-     * If args is set, POST will be used instead of GET
+     * If body is set, POST will be used instead of GET
      * 
      * @param {String} path Path to API endpoint
-     * @param {Object.<String,String>} args Key/Values to send in POST data
+     * @param {Object.<String,String>} body Key/Values to send in POST data
      * @returns {Promise.<Response>} Response
      */
-    fetch(path, args) {
+    fetch(path, body) {
         let url = new URL(path, this.baseUrl)
-        if (this.TeamId & (!(args && args.id))) {
+        if (this.teamId & (!(body && body.id))) {
-            url.searchParams.set("id", this.TeamId)
+            url.searchParams.set("id", this.teamId)
-        }
-
-        if (args) {
-            let formData = new FormData()
-            for (let k in args) {
-                formData.set(k, args[k])
         }
         return fetch(url, {
-                method: "POST",
+            method: body?"POST":"GET",
-                body: formData,
+            body,
         })
     }
-        return fetch(url)
-    }
 
     /**
      * Send a request to a JSend API endpoint.
@@ -396,7 +356,7 @@ class Server {
         switch (obj.status) {
             case "success":
                 return obj.data
-            case "fail":
+            case "failure":
                 throw new Error(obj.data.description || obj.data.short || obj.data)
             case "error":
                 throw new Error(obj.message)
@@ -405,38 +365,20 @@ class Server {
         }
     }
 
-    /**
-     * Make a new URL for the given resource.
-     * 
-     * @returns {URL}
-     */
-    URL(url) {
-        return new URL(url, this.baseUrl)
-    }
-
-    /**
-     * Are we logged in to the server?
-     * 
-     * @returns {Boolean}
-     */
-    LoggedIn() {
-        return this.TeamId ? true : false
-    }
-
     /**
      * Forget about any previous Team ID.
      * 
      * This is equivalent to logging out.
      */
     Reset() {
-        localStorage.removeItem(this.teamIdKey)
+        localStorage.removeItem(this.teameIdKey)
-        this.TeamId = null
+        this.teamId = null
     }
 
     /**
      * Fetch current contest state.
      * 
-     * @returns {Promise.<State>}
+     * @returns {State}
      */
     async GetState() {
         let resp = await this.fetch("/state")
@@ -445,41 +387,37 @@ class Server {
     }
 
     /**
-     * Log in to a team.
+     * Register a team name with a team ID.
      * 
-     * This calls the server's registration endpoint; if the call succeds, or
+     * This is similar to, but not exactly the same as, logging in.
-     * fails with "team already exists", the login is returned as successful. 
+     * See MOTH documentation for details.
      * 
      * @param {String} teamId 
      * @param {String} teamName 
      * @returns {Promise.<String>} Success message from server
      */
-    async Login(teamId, teamName) {
+    async Register(teamId, teamName) {
-        let data = await this.call("/register", {id: teamId, name: teamName})
+        let data = await this.call("/login", {id: teamId, name: teamName})
-        this.TeamId = teamId
+        this.teamId = teamId
-        this.TeamName = teamName
+        this.teamName = teamName
-        localStorage[this.teamIdKey] = teamId
+        localStorage[this.teameIdKey] = teamId
         return data.description || data.short
     }
 
     /**
-     * Submit a proposed answer for points.
+     * Submit a puzzle answer for points.
      *
      * The returned promise will fail if anything goes wrong, including the
-     * proposed answer being rejected.
+     * answer being rejected.
      *
      * @param {String} category Category of puzzle
      * @param {Number} points Point value of puzzle
-     * @param {String} proposed Answer to submit
+     * @param {String} answer Answer to submit
-     * @returns {Promise.<String>} Success message
+     * @returns {Promise.<Boolean>} Was the answer accepted?
      */
-    async SubmitAnswer(category, points, proposed) {
+    async SubmitAnswer(category, points, answer) {
-        let data = await this.call("/answer", {
+        await this.call("/answer", {category, points, answer})
-            cat: category, 
+        return true
-            points, 
-            answer: proposed,
-        })
-        return data.description || data.short
     }
 
     /**

theme/puzzle.html

@@ -10,25 +10,29 @@
     <script src="puzzle.mjs" type="module" async></script>
   </head>
   <body>
-    <h1 id="title">[loading]</h1>
     <main>
-      <section id="puzzle">
+      <h1 id="title">[loading]</h1>
+      <section>
+        <div id="puzzle">
           <p class="notification">
             Starting script...
           </p>
-      </section>
+        </div>
-      <section class="meta"></section>
         <ul id="files"></ul>
         <p>Puzzle by <span id="authors">[loading]</span></p>
       </section>
       <form class="answer">
-        <label for="answer">Answer:</label>
+        Team ID: <input type="text" name="id"> <br>
-        <input type="text" name="answer" id="answer"> <span class="answer_ok"></span>
+        Answer: <input type="text" name="answer" id="answer"> <span class="answer_ok"></span><br>
-        <br>
         <input type="submit" value="Submit">
       </form>
     </main>
-    <div class="debug" class="notification"></div>
+    <div id="devel" class="notification"></div>
-    <div class="toasts"></div>
+    <nav>
+      <ul>
+        <li><a href="index.html">Puzzles</a></li>
+        <li><a href="scoreboard.html">Scoreboard</a></li>
+      </ul>
+    </nav>
   </body>
 </html>

theme/puzzle.js

@@ -0,0 +1,225 @@
+// jshint asi:true
+
+// prettify adds classes to various types, returning an HTML string.
+function prettify(key, val) {
+  switch (key) {
+    case "Body":
+      return '[HTML]'
+  }
+  return val
+}
+
+// devel_addin drops a bunch of development extensions into element e.
+// It will only modify stuff inside e.
+function devel_addin(e) {
+  let h = e.appendChild(document.createElement("h2"))
+  h.textContent = "Developer Output"
+
+  let log = window.puzzle.Debug.Log || []
+  if (log.length > 0) {
+    e.appendChild(document.createElement("h3")).textContent = "Log"
+    let le = e.appendChild(document.createElement("ul"))
+    for (let entry of log) {
+      le.appendChild(document.createElement("li")).textContent = entry
+    }
+  }
+
+  e.appendChild(document.createElement("h3")).textContent = "Puzzle object"
+  
+  let hobj = JSON.stringify(window.puzzle, prettify, 2)
+  let d = e.appendChild(document.createElement("pre"))
+  d.classList.add("object")
+  d.innerHTML = hobj
+
+  e.appendChild(document.createElement("p")).textContent = "This debugging information will not be available to participants."
+}
+
+// Hash routine used in v3.4 and earlier
+function djb2hash(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
+}
+
+// The routine used to hash answers in compiled puzzle packages
+async function sha256Hash(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;
+}
+
+// Is the provided answer possibly correct?
+async function checkAnswer(answer) {
+  let answerHashes = []
+  answerHashes.push(djb2hash(answer))
+  answerHashes.push(await sha256Hash(answer))
+
+  for (let hash of answerHashes) {
+    for (let correctHash of window.puzzle.AnswerHashes) {    
+      if (hash == correctHash) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+// Pop up a message
+function toast(message, timeout=5000) {
+  let p = document.createElement("p")
+  
+  p.innerText = message
+  document.getElementById("messages").appendChild(p)
+  setTimeout(
+    e => { p.remove() },
+    timeout
+  )
+}
+
+// When the user submits an answer
+function submit(e) {
+  e.preventDefault()
+  let data = new FormData(e.target)
+  
+  window.data = data
+  fetch("answer", {
+    method: "POST",
+    body: data,
+  })
+  .then(resp => {
+    if (resp.ok) {
+      resp.json()
+      .then(obj => {
+        toast(obj.data.description)
+      })
+    } else {
+      toast("Error submitting your answer. Try again in a few seconds.")
+      console.log(resp)
+    }
+  })
+  .catch(err => {
+    toast("Error submitting your answer. Try again in a few seconds.")
+    console.log(err)
+  })
+}
+
+async function loadPuzzle(categoryName, points, puzzleId) {
+  let puzzle = document.getElementById("puzzle")
+  let base = "content/" + categoryName + "/" + puzzleId + "/"
+
+  let resp = await fetch(base + "puzzle.json")
+  if (! resp.ok) {
+    console.log(resp)
+    let err = await resp.text()
+    Array.from(puzzle.childNodes).map(e => e.remove())
+    p = puzzle.appendChild(document.createElement("p"))
+    p.classList.add("Error")
+    p.textContent = err
+    return
+  }
+
+  // Make the whole puzzle available
+  window.puzzle = await resp.json()
+  
+  // Populate authors
+  document.getElementById("authors").textContent = window.puzzle.Authors.join(", ")
+
+  // If answers are provided, this is the devel server
+  if (window.puzzle.Answers.length > 0) {
+    devel_addin(document.getElementById("devel"))
+  }
+  
+  // Load scripts
+  for (let script of (window.puzzle.Scripts || [])) {
+    let st = document.createElement("script")
+    document.head.appendChild(st)
+    st.src = base + script
+  }
+  
+  // List associated files
+  for (let fn of (window.puzzle.Attachments || [])) {
+    let li = document.createElement("li")
+    let a = document.createElement("a")
+    a.href = base + fn
+    a.innerText = fn
+    li.appendChild(a)
+    document.getElementById("files").appendChild(li)
+  }
+
+  // Prefix `base` to relative URLs in the puzzle body
+  let doc = new DOMParser().parseFromString(window.puzzle.Body, "text/html")
+  for (let se of doc.querySelectorAll("[src],[href]")) {
+    se.outerHTML = se.outerHTML.replace(/(src|href)="([^/]+)"/i, "$1=\"" + base + "$2\"")
+  }
+  
+  // If a validation pattern was provided, set that
+  if (window.puzzle.AnswerPattern) {
+    document.querySelector("#answer").pattern = window.puzzle.AnswerPattern
+  }
+
+  // Replace puzzle children with what's in `doc`
+  Array.from(puzzle.childNodes).map(e => e.remove())
+  Array.from(doc.body.childNodes).map(e => puzzle.appendChild(e))
+  
+  document.title = categoryName + " " + points
+  document.querySelector("body > h1").innerText = document.title
+  document.querySelector("input[name=cat]").value = categoryName
+  document.querySelector("input[name=points]").value = points
+}
+
+// Check to see if the answer might be correct
+// This might be better done with the "constraint validation API"
+// https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript
+function answerCheck(e) {
+  let answer = e.target.value
+  let ok = document.querySelector("#answer_ok")
+  
+  // You have to provide someplace to put the check
+  if (! ok) {
+    return
+  }
+  
+  checkAnswer(answer)
+  .then (correct => {
+    if (correct) {
+      ok.textContent = "⭕"
+      ok.title = "Possibly correct"
+    } else {
+      ok.textContent = "❌"
+      ok.title = "Definitely not correct"
+    }
+  })
+}
+
+function init() {
+  let params = new URLSearchParams(window.location.search)
+  let categoryName = params.get("cat")
+  let points = params.get("points")
+  let puzzleId = params.get("pid")
+  
+  if (categoryName && points) {
+    loadPuzzle(categoryName, points, puzzleId || points)
+  }
+
+  let teamId = sessionStorage.getItem("id")
+  if (teamId) {
+    document.querySelector("input[name=id]").value = teamId
+  }
+  
+  if (document.querySelector("#answer")) {
+    document.querySelector("#answer").addEventListener("input", answerCheck)
+  }
+  document.querySelector("form").addEventListener("submit", submit)
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init)
+} else {
+  init()
+}

theme/puzzle.mjs

@@ -1,10 +1,4 @@
-/**
- * Functionality for puzzle.html (Puzzle display / answer form)
- */
 import * as moth from "./moth.mjs"
-import * as common from "./common.mjs"
-
-const server = new moth.Server(".")
 
 /**
  * Handle a submit event on a form.
@@ -16,22 +10,9 @@ const server = new moth.Server(".")
  * 
  * @param {Event} event 
  */
-async function formSubmitHandler(event) {
+function formSubmitHandler(event) {
     event.preventDefault()
-    let data = new FormData(event.target)
+    console.log(event)
-    let proposed = data.get("answer")
-    let message
-    
-    console.group("Submit answer")
-    console.info(`Proposed answer: ${proposed}`)
-    try {
-        message = await window.app.puzzle.SubmitAnswer(proposed)
-    }
-    catch (err) {
-        common.Toast(err)
-    }
-    common.Toast(message)
-    console.groupEnd("Submit answer")
 }
 
 /**
@@ -88,40 +69,12 @@ function error(error) {
  * 
  * @param {String} s 
  */
-function SetAnswer(s) {
+function setanswer(s) {
     let e = document.querySelector("#answer")
     e.value = s
     e.dispatchEvent(new Event("input"))
 }
 
-function writeObject(e, obj) {
-    let keys = Object.keys(obj)
-    keys.sort()
-    for (let key of keys) {
-        let val = obj[key]
-        if ((key === "Body") || (!val) || (val.length === 0)) {
-            continue
-        }
-
-        let d = e.appendChild(document.createElement("dt"))
-        d.textContent = key
-
-        let t = e.appendChild(document.createElement("dd"))
-        if (Array.isArray(val)) {
-            let vi = t.appendChild(document.createElement("ul"))
-            vi.multiple = true
-            for (let a of val) {
-                let opt = vi.appendChild(document.createElement("li"))
-                opt.textContent = a
-            }
-        } else if (typeof(val) === "object") {
-            writeObject(t, val)
-        } else {
-            t.textContent = val
-        }
-    }
-}
-
 /**
  * Load the given puzzle.
  * 
@@ -140,19 +93,16 @@ async function loadPuzzle(category, points) {
         }
     }    
 
+    let server = new moth.Server()
     let puzzle = server.GetPuzzle(category, points)
     console.time("Populate")
     await puzzle.Populate()
     console.timeEnd("Populate")
 
-    console.info("Tweaking HTML...")
     let title = `${category} ${points}`
     document.querySelector("title").textContent = title
     document.querySelector("#title").textContent = title
     document.querySelector("#authors").textContent = puzzle.Authors.join(", ")
-    if (puzzle.AnswerPattern) {
-        document.querySelector("#answer").pattern = puzzle.AnswerPattern
-    }
     puzzleElement().innerHTML = puzzle.Body
 
     console.info("Adding attached scripts...")
@@ -172,16 +122,6 @@ async function loadPuzzle(category, points) {
         document.getElementById("files").appendChild(li)
     }
 
-
-    console.info("Filling debug information...")
-    for (let e of document.querySelectorAll(".debug")) {
-        if (puzzle.Answers.length > 0) {
-            writeObject(e, puzzle)
-        } else {
-            e.classList.add("hidden")
-        }
-    }
-
     let baseElement = document.head.appendChild(document.createElement("base"))
     baseElement.href = contentBase
 
@@ -189,13 +129,11 @@ async function loadPuzzle(category, points) {
     console.info("window.app.puzzle =", window.app.puzzle)
 
     console.groupEnd()
-
-    return puzzle
 }
 
-async function init() {
+function init() {
     window.app = {}
-    window.setanswer = (str => SetAnswer(str))
+    window.setanswer = setanswer
 
     for (let form of document.querySelectorAll("form.answer")) {
         form.addEventListener("submit", formSubmitHandler)
@@ -220,7 +158,12 @@ async function init() {
         return
     }
 
-    window.app.puzzle = await loadPuzzle(category, points)
+    loadPuzzle(category, points)
+    .catch(err => error(err))
 }
 
-common.WhenDOMLoaded(init)
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init)
+} else {
+    init()
+}

theme/scoreboard.css

@@ -1,91 +0,0 @@
-/* GHC displays: 1024x1820 */
-@media screen and (max-aspect-ratio: 4/5) and (min-height: 1600px) {
-  html {
-    font-size: 20pt;
-  }
-}
-
-#chart {
-    background-color: rgba(0, 0, 0, 0.8);
-}
-.logo {
-  text-align: center;
-  background-color: rgba(255, 255, 255, 0.2);
-  font-family: Montserrat, sans-serif;
-  font-weight: 500;
-  border-radius: 10px;
-  font-size: 1.2em;
-}
-.cyber {
-  color: black;
-}
-.fire {
-  color: #d94a1f;
-}
-.announcement.floating {
-  position: fixed;
-  bottom: 0;
-  width: 100hw;
-  max-width: inherit;
-}
-.announcement {
-  background-color: rgba(255,255,255,0.5);
-  color: black;
-  padding: 0.25em;
-  border-radius: 5px;
-  max-width: 20em;
-  text-align: center;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-around;
-  font-size: 1.3em;
-  flex-wrap: wrap;
-}
-.announcement div {
-  margin: 1em;  
-  max-width: 45vw;
-  text-align: center;
-  
-}
-.qrcode {
-  width: 30vw;
-}
-.examples {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.examples > div {
-  margin: 0.5em;
-  max-width: 40%;
-}
-
-#rankings {
-	width: 100%;
-    position: relative;
-    background-color: rgba(0, 0, 0, 0.8);
-}
-
-#rankings span {
-	font-size: 75%;
-	display: inline-block;
-	overflow: hidden;
-	height: 1.7em;
-}
-#rankings span.teamname {
-	font-size: inherit;
-	color: white;
-	text-shadow: 0 0 3px black;
-	opacity: 0.8;
-	position: absolute;
-	right: 0.2em;
-}
-#rankings div * {white-space: nowrap;}
-.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
-.cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}
-.cat2, .cat10, .cat18 {background-color: #b2df8a; color: black;}
-.cat3, .cat11, .cat19 {background-color: #33a02c; color: white;}
-.cat4, .cat12, .cat20 {background-color: #fb9a99; color: black;}
-.cat5, .cat13, .cat21 {background-color: #e31a1c; color: white;}
-.cat6, .cat14, .cat22 {background-color: #fdbf6f; color: black;}
-.cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;}

theme/scoreboard.html

@@ -3,17 +3,22 @@
   <head>
     <title>Scoreboard</title>
     <link rel="stylesheet" href="basic.css">
-    <link rel="stylesheet" href="scoreboard.css">
     <meta name="viewport" content="width=device-width">
-    <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
+    <script src="moment.min.js" async></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" async></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
+    <script src="scoreboard.js" async></script>
-    <script type="module" src="scoreboard.mjs"></script>
   </head>
   <body class="wide">
+    <h4 id="location"></h4>
     <section class="rotate">
-      <div id="chart"><canvas></canvas></div>
+      <div id="chart"></div>
       <div id="rankings"></div>
     </section>
+    <nav>
+      <ul>
+        <li><a href="index.html">Puzzles</a></li>
+        <li><a href="scoreboard.html">Scoreboard</a></li>
+      </ul>
+    </nav>
   </body>
 </html>

theme/scoreboard.js

@@ -1,19 +1,8 @@
 // jshint asi:true
 
-// import { Chart, registerables } from "https://cdn.jsdelivr.net/npm/chart.js@3.0.2"
-// import {DateTime} from "https://cdn.jsdelivr.net/npm/luxon@1.26.0"
-// import "https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.1.1"
-// Chart.register(...registerables)
-
-const MILLISECOND = 1
-const SECOND = 1000 * MILLISECOND
-const MINUTE = 60 * SECOND
-
-// If all else fails...
-setInterval(() => location.reload(), 30 * SECOND)
-
 function scoreboardInit() {
-  let chartColors = [
+  
+  chartColors = [
     "rgb(255, 99, 132)",
     "rgb(255, 159, 64)",
     "rgb(255, 205, 86)",
@@ -23,70 +12,12 @@ function scoreboardInit() {
     "rgb(201, 203, 207)"
   ]
   
-  for (let q of document.querySelectorAll("[data-url]")) {
+  function update(state) {
-    let url = new URL(q.dataset.url, document.location)
+    window.state = state
-    q.textContent = url.hostname
-    if (url.port) {
-      q.textContent += `:${url.port}`
-    }
-    if (url.pathname != "/") {
-      q.textContent += url.pathname
-    }
-  }
-  for (let q of document.querySelectorAll(".qrcode")) {
-    let url = new URL(q.dataset.url, document.location)
-    let qr = new QRious({
-      element: q,
-      value: url.toString(),
-    })
-  }
-
-  let chart
-  let canvas = document.querySelector("#chart canvas")
-  if (canvas) {
-    chart = new Chart(canvas.getContext("2d"), {
-      type: "line",
-      options: {
-        responsive: true,
-        scales: {
-          x: {
-            type: "time",
-            time: {
-              // XXX: the manual says this should do something, it does something in the samples, IDK
-              tooltipFormat: "HH:mm"
-            },
-            title: {
-              display: true,
-              text: "Time"
-            }
-          },
-          y: {
-            title: {
-              display: true,
-              text: "Points"
-            }
-          }
-        },
-        tooltips: {
-          mode: "index",
-          intersect: false
-        },
-        hover: {
-          mode: "nearest",
-          intersect: true
-        }
-      }
-    })
-  }
-
-  async function refresh() {
-    let resp = await fetch("../state")
-    let state = await resp.json()
     
     for (let rotate of document.querySelectorAll(".rotate")) {
       rotate.appendChild(rotate.firstElementChild)
     }
-    window.scrollTo(0,0)
     
     let element = document.getElementById("rankings")
     let teamNames = state.TeamNames
@@ -97,12 +28,12 @@ function scoreboardInit() {
     //
     // We have been doing some variation on this "everybody backs up the server state" trick since 2009.
     // We have needed it 0 times.
-    let pointsHistory = JSON.parse(localStorage.getItem("pointsHistory")) || []
+    let stateHistory = JSON.parse(localStorage.getItem("stateHistory")) || []
-    if (pointsHistory.length >= 20) {
+    if (stateHistory.length >= 20) {
-      pointsHistory.shift()
+      stateHistory.shift()
     }
-    pointsHistory.push(pointsLog)
+    stateHistory.push(state)
-    localStorage.setItem("pointsHistory", JSON.stringify(pointsHistory))
+    localStorage.setItem("stateHistory", JSON.stringify(stateHistory))
   
     let teams = {}
     let highestCategoryScore = {} // map[string]int
@@ -158,7 +89,7 @@ function scoreboardInit() {
         overall += team.categoryScore[cat] / highestCategoryScore[cat]
       }
   
-      team.historyLine.push({x: timestamp * 1000, y: overall})
+      team.historyLine.push({t: new Date(timestamp  * 1000), y: overall})
     }
   
     // Compute overall scores based on current highest
@@ -219,21 +150,14 @@ function scoreboardInit() {
       element.appendChild(row)
     }
     
-    if (!chart) {
+    let datasets = []
-      return
-    }
-
-    /*
-     * Update chart
-     */
-    chart.data.datasets = []
     for (let i in winners) {
       if (i > 5) {
         break
       }
       let team = winners[i]
       let color = chartColors[i % chartColors.length]
-      chart.data.datasets.push({
+      datasets.push({
         label: team.name,
         backgroundColor: color,
         borderColor: color,
@@ -242,8 +166,68 @@ function scoreboardInit() {
         fill: false
       })
     }
-    chart.update()
+    let config = {
-    window.chart = chart
+      type: "line",
+      data: {
+        datasets: datasets
+      },
+      options: {
+        responsive: true,
+        scales: {
+          xAxes: [{
+            display: true,
+            type: "time",
+            time: {
+              tooltipFormat: "ll HH:mm"
+            },
+            scaleLabel: {
+              display: true,
+              labelString: "Time"
+            }
+          }],
+          yAxes: [{
+            display: true,
+            scaleLabel: {
+              display: true,
+              labelString: "Points"
+            }
+          }]
+        },
+        tooltips: {
+          mode: "index",
+          intersect: false
+        },
+        hover: {
+          mode: "nearest",
+          intersect: true
+        }
+      }
+    }
+    
+    let chart = document.querySelector("#chart")
+    if (chart) {
+      let canvas = chart.querySelector("canvas")
+      if (! canvas) {
+        canvas = document.createElement("canvas")
+        chart.appendChild(canvas)
+      }
+      
+      let myline = new Chart(canvas.getContext("2d"), config)
+      myline.update()
+    }
+  }
+  
+  function refresh() {
+    fetch("state")
+    .then(resp => {
+      return resp.json()
+    })
+    .then(obj => {
+      update(obj)
+    })
+    .catch(err => {
+      console.log(err)
+    })
   }
 
   function init() {
@@ -253,7 +237,7 @@ function scoreboardInit() {
       location.textContent = base
     }
   
-    setInterval(refresh, 20 * SECOND)
+    setInterval(refresh, 60000)
     refresh()
   }
   

theme/token.html

@@ -1,29 +1,45 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <title>Redeem Token</title>
     <link rel="stylesheet" href="basic.css">
     <meta name="viewport" content="width=device-width">
-    <script src="token.mjs" type="module" async></script>
+    <script src="puzzle.js"></script>
+    <script>
+function tokenInput(e) {
+  let vals = e.target.value.split(":")
+  document.querySelector("input[name=cat]").value = vals[0]
+  document.querySelector("input[name=points]").value = vals[1]
+  document.querySelector("input[name=answer]").value = vals[2]
+}
+
+function tokenInit() {
+  document.querySelector("input[name=token]").addEventListener("input", tokenInput)
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", tokenInit)
+} else {
+  tokenInit()
+}
+    </script>
   </head>
   <body>
     <h1>Redeem Token</h1>
-    <main>
+    <div id="messages"></div>
-      <p>
+    <form id="tokenForm">
-        Have you found a token?
+      <input type="hidden" name="cat">
-      </p>
+      <input type="hidden" name="points">
-      <p></p>
+      <input type="hidden" name="answer">
-        Tokens look like
+      Team ID: <input type="text" name="id"> <br>
-        <code>category:5:xylep-radar-nanox</code>
+      Token: <input type="text" name="token"> <br>
-      <p>
-        Tokens may be redeemed here for points in their category.
-        Tokens can appear anywhere: online, on slips of paper, projected onto screens…
-      </p>
-    </main>
-    <form class="token"</form>
-      <label for="token">Token:</label> <input type="text" name="token" id="token"> <br>
       <input type="submit" value="Submit">
     </form>
-    <div class="toasts"></div>
+    <nav>
+      <ul>
+        <li><a href="puzzle-list.html">Puzzles</a></li>
+        <li><a href="scoreboard.html">Scoreboard</a></li>
+      </ul>
+    </nav>
   </body>
 </html>

theme/token.mjs

@@ -1,48 +0,0 @@
-/**
- * Functionality for token.html
- */
-import * as moth from "./moth.mjs"
-import * as common from "./common.mjs"
-
-const server = new moth.Server(".")
-
-/**
- * Handle a submit event on a form.
- * 
- * @param {SubmitEvent} event 
- */
-async function formSubmitHandler(event) {
-    event.preventDefault()
-
-    let formData = new FormData(event.target)
-    let token = formData.get("token")
-    let vals = token.split(":")
-    let category = vals[0]
-    let points = Number(vals[1])
-    let proposed = vals[2]
-    if (!category || !points || !proposed) {
-        console.info("Not a token:", vals)
-        common.Toast("This is not a properly-formed token")
-        return
-    }
-    try {
-        let message = await server.SubmitAnswer(category, points, proposed)
-        common.Toast(message)
-    }
-    catch (error) {
-        if (error.message == "incorrect answer") {
-            common.Toast("Unknown token")
-        } else {
-            console.error(error)
-            common.Toast(error)
-        }
-    }
-}
-
-function init() {
-    for (let form of document.querySelectorAll("form.token")) {
-        form.addEventListener("submit", formSubmitHandler)
-    }
-}
-
-common.WhenDOMLoaded(init)