Merge branch 'libmoth' into 'main'

New theme

Closes #190

See merge request devs/moth!181

.gitlab-ci.yml

@@ -4,7 +4,7 @@ stages:
 
 Run unit tests:
   stage: test
-  image: &goimage golang:1.18
+  image: &goimage golang:1.21
   only:
     refs:
       - main

CHANGELOG.md

@@ -4,6 +4,13 @@ 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
+- Answer hashes are now the first 4 characters of the hex-encoded SHA1 digest
+- Reworked the built-in theme
+- [moth.mjs](theme/moth.mjs) is now the standard MOTH library for ECMAScript
+- Devel mode no longer accepts an empty team ID
+
 ## [v4.4.9] - 2022-05-12
 ### Changed
 - Added a performance optimization for events with a large number of teams

README.md

@@ -1,8 +1,7 @@
 Dirtbags Monarch Of The Hill Server
 =====================
 
-![Build badge](https://github.com/dirtbags/moth/workflows/Build/Test/Push/badge.svg)
+[![Go report card](https://goreportcard.com/badge/github.com/dirtbags/moth)](https://goreportcard.com/report/github.com/dirtbags/moth)
-![Go report card](https://goreportcard.com/badge/github.com/dirtbags/moth)
 
 Monarch Of The Hill (MOTH) is a puzzle server.
 We (the authors) have used it for instructional and contest events called

cmd/mothd/httpd_test.go

@@ -128,7 +128,7 @@ func TestHttpd(t *testing.T) {
 
 	if r := hs.TestRequest("/answer", map[string]string{"cat": "pategory", "points": "1", "answer": "answer123"}); r.Result().StatusCode != 200 {
 		t.Error(r.Result())
-	} else if r.Body.String() != `{"status":"fail","data":{"short":"not accepted","description":"error awarding points: points already awarded to this team in this category"}}` {
+	} else if r.Body.String() != `{"status":"fail","data":{"short":"not accepted","description":"points already awarded to this team in this category"}}` {
 		t.Error("Unexpected body", r.Body.String())
 	}
 }

cmd/mothd/server.go

@@ -156,7 +156,7 @@ func (mh *MothRequestHandler) CheckAnswer(cat string, points int, answer string)
 		return fmt.Errorf("invalid team ID")
 	}
 	if err := mh.State.AwardPoints(mh.teamID, cat, points); err != nil {
-		return fmt.Errorf("error awarding points: %s", err)
+		return err
 	}
 
 	return nil
@@ -169,7 +169,6 @@ 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")
 	}

cmd/mothd/state.go

@@ -522,6 +522,9 @@ func (ds *DevelState) TeamName(teamID string) (string, error) {
 	if name, err := ds.StateProvider.TeamName(teamID); err == nil {
 		return name, nil
 	}
+	if teamID == "" {
+		return "", fmt.Errorf("Empty team ID")
+	}
 	return fmt.Sprintf("«devel:%s»", teamID), nil
 }
 

docs/scoring.md

@@ -0,0 +1,73 @@
+Scoring
+=======
+
+MOTH does not carry any notion of who is winning: we consider this a user
+interface issue. The server merely provides a timestamped log of point awards.
+
+The bundled scoreboard provides one way to interpret the scores: this is the
+main algorithm we use at Cyber Fire events. We use other views of the scoreboard
+in other contexts, though! Here are some ideas:
+
+
+Percentage of Each Category
+---------------------
+
+This is implemented in the scoreboard distributed with MOTH, and is how our
+primary score calculation at Cyber Fire.
+
+For each category:
+
+* Divide the team's score in this category by the highest score in this category
+* Add that to the team's overall score
+
+This means the highest theoretical score in any event is the number of open
+categories.
+
+This algorithm means that point values only matter relative to other point
+values within that category. A category with 5 total points is worth the same as
+a category with 5000 total points, and a 2 point puzzle in the first category is
+worth as much as a 2000 point puzzle in the second.
+
+One interesting effect here is that a team solving a previously-unsolved puzzle
+will reduce everybody else's ranking in that category, because it increases the
+divisor for calculating that category's score.
+
+Cyber Fire used to not display overall score: we would only show each team's
+relative ranking per category. We may go back to this at some point!
+
+
+Category Completion
+----------------
+
+Cyber Fire also has a scoreboard called the "class" scoreboard, which lists each
+team, and which puzzles they have completed. This provides instructors with a
+graphical overview of how people are progressing through content. We can provide
+assistance to the general group when we see that a large number of teams are
+stuck on a particular puzzle, and we can provide individual assistance if we see
+that someone isn't keeping up with the class.
+
+
+Monarch Of The Hill
+----------------
+
+You could also implement a "winner takes all" approach: any team with the
+maximum number of points in a category gets 1 point, and all other teams get 0.
+
+
+Time Bonuses
+-----------
+
+If you wanted to provide extra points to whichever team solves a puzzle first,
+this is possible with the log. You could either boost a puzzle's point value or
+decay it; either by timestamp, or by how many teams had solved it prior.
+
+
+Bonkers Scoring
+-------------
+
+Other zany options exist:
+
+* The first team to solve a puzzle with point value divisible by 7 gets double
+  points. 
+* [Tokens](tokens.md) with negative point values could be introduced, allowing
+  teams to manipulate other teams' scores, if they know the team ID.

pkg/transpile/puzzle.go

@@ -4,7 +4,7 @@ import (
 	"bufio"
 	"bytes"
 	"context"
-	"crypto/sha256"
+	"crypto/sha1"
 	"encoding/json"
 	"errors"
 	"fmt"
@@ -37,23 +37,45 @@ type PuzzleDebug struct {
 	Summary string
 }
 
-// Puzzle contains everything about a puzzle that a client would see.
+// Puzzle contains everything about a puzzle that a client will see.
 type Puzzle struct {
+	// Debug contains debugging information, omitted in mothballs
 	Debug PuzzleDebug
+
+	// Authors names all authors of this puzzle
 	Authors []string
+
+	// Attachments is a list of filenames used by this puzzle
 	Attachments []string
+
+	// Scripts is a list of EMCAScript files needed by the client for this puzzle
 	Scripts []string
+
+	// Body is the HTML rendering of this puzzle
 	Body string
+
+	// AnswerPattern contains the pattern (regular expression?) used to match valid answers
 	AnswerPattern string
+
+	// AnswerHashes contains hashes of all answers for this puzzle
 	AnswerHashes []string
+
+	// Objective is the learning objective for this puzzle
 	Objective string
+
+	// KSAs lists all KSAs achieved upon successfull completion of this puzzle
 	KSAs []string
+
+	// Success lists the criteria for successfully understanding this puzzle
 	Success struct {
+		// Acceptable describes the minimum work required to be considered successfully understanding this puzzle's concepts
 		Acceptable string
+
+		// Mastery describes the work required to be considered mastering this puzzle's conceptss
 		Mastery string
 	}
 
-	// Answers will be empty in a mothball
+	// Answers lists all acceptable answers, omitted in mothballs
 	Answers []string
 }
 
@@ -63,9 +85,9 @@ func (puzzle *Puzzle) computeAnswerHashes() {
 	}
 	puzzle.AnswerHashes = make([]string, len(puzzle.Answers))
 	for i, answer := range puzzle.Answers {
-		sum := sha256.Sum256([]byte(answer))
+		sum := sha1.Sum([]byte(answer))
 		hexsum := fmt.Sprintf("%x", sum)
-		puzzle.AnswerHashes[i] = hexsum
+		puzzle.AnswerHashes[i] = hexsum[:4]
 	}
 }
 

pkg/transpile/puzzle_test.go

@@ -23,6 +23,12 @@ func TestPuzzle(t *testing.T) {
 		if (len(p.Answers) == 0) || (p.Answers[0] != "YAML answer") {
 			t.Error("Answers are wrong", p.Answers)
 		}
+		if len(p.Answers) != len(p.AnswerHashes) {
+			t.Error("Answer hashes length does not match answers length")
+		}
+		if len(p.AnswerHashes[0]) != 4 {
+			t.Error("Answer hash is wrong length")
+		}
 		if (len(p.Authors) != 3) || (p.Authors[1] != "Buster") {
 			t.Error("Authors are wrong", p.Authors)
 		}

theme/background.mjs

@@ -0,0 +1,175 @@
+function randint(max) {
+    return Math.floor(Math.random() * max)
+}
+
+const Millisecond = 1
+const Second = Millisecond * 1000
+const FrameRate = 24 / Second  // Fast enough for this tomfoolery
+
+class Point {
+    constructor(x, y) {
+        this.x = x
+        this.y = y
+    }
+
+    /**
+     * Add n to this.
+     * 
+     * @param {Point} n What to add to this
+     * @returns {Point}
+     */
+    Add(n) {
+        return new Point(this.x + n.x, this.y + n.y)
+    }
+
+    /**
+     * Subtract n from this.
+     * 
+     * @param {Point} n 
+     * @returns {Point}
+     */
+    Subtract(n) {
+        return new Point(this.x - n.x, this.y - n.y)
+    }
+
+    /**
+     * Add velocity, then bounce point off box defined by points at min and max
+     * @param {Point} velocity
+     * @param {Point} min 
+     * @param {Point} max 
+     * @returns {Point}
+     */
+    Bounce(velocity, min, max) {
+        let p = this.Add(velocity)
+        if (p.x < min.x) {
+            p.x += (min.x - p.x) * 2
+            velocity.x *= -1
+        }
+        if (p.x > max.x) {
+            p.x += (max.x - p.x) * 2
+            velocity.x *= -1
+        }
+        if (p.y < min.y) {
+            p.y += (min.y - p.y) * 2
+            velocity.y *= -1
+        }
+        if (p.y > max.y) {
+            p.y += (max.y - p.y) * 2
+            velocity.y *= -1
+        }
+        return p
+    }
+
+    /**
+     * 
+     * @param {Point} p 
+     * @returns {Boolean}
+     */
+    Equal(p) {
+        return (this.x == p.x) && (this.y == p.y)
+    }
+}
+
+class QixLine {
+    /**
+     * @param {Number} hue 
+     * @param {Point} a 
+     * @param {Point} b 
+     */
+    constructor(hue, a, b) {
+        this.hue = hue
+        this.a = a
+        this.b = b
+    }
+}
+
+/**
+ * Draw a line dancing around the screen,
+ * like the video game "qix"
+ */
+class QixBackground {
+    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)
+        this.box = this.max.Subtract(this.min)
+
+        this.lines = [
+            new QixLine(
+                Math.random(),
+                new Point(randint(this.box.x), randint(this.box.y)),
+                new Point(randint(this.box.x), randint(this.box.y)),
+            )
+        ]
+        while (this.lines.length < 18) {
+            this.lines.push(this.lines[0])
+        }
+        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)),
+        )
+
+        this.frameInterval = Millisecond / frameRate
+        this.nextFrame = 0
+    }
+
+    /**
+     * Maybe draw a frame
+     */
+    Animate() {
+        let now = performance.now()
+        if (now < this.nextFrame) {
+            // Not today, satan
+            return
+        }
+        this.nextFrame = now + this.frameInterval
+
+        this.lines.shift()
+        let lastLine = this.lines[this.lines.length - 1]
+        let nextLine = new QixLine(
+            (lastLine.hue + this.velocity.hue) % 1.0,
+            lastLine.a.Bounce(this.velocity.a, this.min, this.max),
+            lastLine.b.Bounce(this.velocity.b, this.min, this.max),
+        )
+
+        this.lines.push(nextLine)
+
+        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.beginPath()
+            this.ctx.moveTo(line.a.x, line.a.y)
+            this.ctx.lineTo(line.b.x, line.b.y)
+            this.ctx.stroke()
+            this.ctx.restore()
+        }
+    }
+}
+
+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
+    canvas.classList.add("wallpaper")
+    document.body.insertBefore(canvas, document.body.firstChild)
+
+    let ctx = canvas.getContext("2d")
+
+    let qix = new QixBackground(ctx)
+    // window.requestAnimationFrame is overkill for something this silly
+    setInterval(() => qix.Animate(), Millisecond/FrameRate)
+}
+
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init)
+} else {
+    init()
+}

theme/basic.css

@@ -1,132 +1,138 @@
-/* http://paletton.com/#uid=63T0u0k7O9o3ouT6LjHih7ltq4c */
+/* Color palette: http://paletton.com/#uid=33x0u0klrl-4ON9dhtKtAdqMQ4T */
+
 body {
   font-family: sans-serif;
+  background: #010e19 url("bg.png") center fixed;
+  background-size: cover;
+  background-blend-mode: soft-light;
+  background-color: #010e19;
+  color: #edd488;
+}
+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;
-	background: #282a33;
+  margin: 1em auto;
-	color: #f6efdc;
+  padding: 1px 3px;
+  border-radius: 5px;
+  background: #000d;
 }
-body.wide {
+h1, h2, h3, h4, h5, h6 {
-  max-width: 100%;
+  color: #cb2408cc;
-}
-a:any-link {
-	color: #8b969a;
 }
 h1 {
-	background: #5e576b;
+  background: #cb240844;
-	color: #9e98a8;
+  padding: 3px;
-}
-.Fail, .Error, #messages {
-	background: #3a3119;
-	color: #ffcc98;
-}
-.Fail:before {
-	content: "Fail: ";
-}
-.Error:before {
-	content: "Error: ";
 }
 p {
 	margin: 1em 0em;
 }
+a:any-link {
+	color: #b9cbd8;
+}
 form, pre {
 	margin: 1em;
+  overflow-x: auto;
 }
 input, select {
 	padding: 0.6em;
 	margin: 0.2em;
 	max-width: 30em;
 }
-nav {
+input {
-  border: solid black 2px;
+  background-color: #ccc4;
+  color: inherit;
+}
+input:hover {
+  background-color: #8884;
+}
+input:active {
+  background-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;
+}
+.category .solved {
+  text-decoration: line-through;
 }
 nav ul, .category ul {
-  padding: 1em;
+  margin: 0;
+  padding: 0.2em 1em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
 }
 nav li, .category li {
 	display: inline;
-	margin: 1em;
 }
-iframe#body {
+.mothball {
-  border: inherit;
+  float: right;
-  width: 100%;
+  text-decoration: none;
+  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 {
-  border-color: red;
+  background-color: #800;
-}
-#messages {
-  min-height: 3em;
-  border: solid black 2px;
-}
-#rankings {
-	width: 100%;
-	position: relative;
-}
-
-#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;}
+.answer_ok {
-.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
+  cursor: help;
-.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;}
 
-
+/** Development mode information */
-#devel {
+.debug {
-  background-color: #eee;
+  overflow: auto;
+  padding: 1em;
+  border-radius: 10px;
+  margin: 2em auto;
+  background: #cccc;
   color: black;
-  overflow: scroll;
-}
-#devel .string {
-  color: #9c27b0;
-}
-#devel .body {
-  background-color: #ffc107;
-}
-.kvpair {
-  border: solid black 2px;
-}
-
-.spinner {
-  display: inline-block;
-  width: 64px;
-  height: 64px;
-  display: block;
-  width: 46px;
-  height: 46px;
-  margin: 1px;
-  border-radius: 50%;
-  border: 5px solid #fff;
-  border-color: #fff transparent #fff transparent;
-  animation: rotate 1.2s linear infinite;
-}
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
 }
+.debug dt {
+  font-weight: bold;
 }
 
+/** Draggable items, from the draggable plugin */
 li[draggable]::before {
   content: "↕";
   padding: 0.5em;
@@ -144,6 +150,48 @@ 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) {
+  /* We 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

@@ -0,0 +1,84 @@
+/**
+ * Common functionality
+ */
+const Millisecond = 1
+const Second = Millisecond * 1000
+const Minute = Second * 60
+
+/** URL to the top of this MOTH server */
+const BaseURL = new URL(".", location)
+
+/**
+ * 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()
+    }    
+}
+
+/**
+ * Interprets a String as a Boolean.
+ * 
+ * Values like "no" or "disabled" to mean false here.
+ * 
+ * @param {String} s 
+ * @returns {Boolean}
+ */
+function Truthy(s) {
+    switch (s.toLowerCase()) {
+        case "disabled":
+        case "no":
+        case "off":
+        case "false":
+            return false
+    }
+    return true
+}
+
+
+/**
+ * Fetch the configuration object for this theme.
+ * 
+ * @returns {Promise.<Object>}
+ */
+async function Config() {
+    let resp = await fetch(
+        new URL("config.json", BaseURL), 
+        {
+            cache: "no-cache"
+        },
+    )
+    return resp.json()
+}
+
+export {
+    Millisecond,
+    Second,
+    Minute,
+    BaseURL,
+    Toast,
+    WhenDOMLoaded,
+    Truthy,
+    Config,
+}

theme/config.json

@@ -0,0 +1,13 @@
+{
+    "TrackSolved": true,
+    "Scoreboard": {
+        "DisplayServerURL": true,
+        "ShowCategoryLeaders": true,
+        "ReplayHistory": true,
+        "ReplayFPS": 30,
+        "ReplayDurationMS": 2000,
+        "": ""
+    },
+    "Messages": "<!-- Messages can go here (HTML) -->",
+    "": "this is here so you don't have to remember to take the comma off the last item"
+}

theme/index.html

@@ -1,33 +1,44 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <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="moth.js"></script>
+    <script src="index.mjs" type="module" async></script>
-    <link rel="manifest" href="manifest.json">
+    <script src="background.mjs" type="module" async></script>
   </head>
   <body>
-    <h1 id="title">MOTH</h1>
+    <h1 class="title" title="Monarch Of The Hill">MOTH</h1>
-    <section>
+    <main>
-      <div id="messages">
+      <div class="messages notification">
-        <div id="notices"></div>
       </div>
 
-      <form id="login">
+      <form class="login">
         Team ID: <input name="id"> <br>
         Team name: <input name="name"> <br>
         <input type="submit" value="Sign In">
       </form>
 
-      <div id="puzzles"></div>
+      <div class="puzzles"></div>
+    </main>
+      
+    <div class="notification" data-track-solved="no">
+      <p>
+        Solved puzzle tracking: <b>disabled</b>.
+      </p>
+      <p>
+        Your team's Incident Coordinator can help coordinate team activity.
+      </p>
+    </div>
+
+    <div class="toasts"></div>
 
-    </section>
     <nav>
       <ul>
-        <li><a href="scoreboard.html">Scoreboard</a></li>
+        <li><a href="scoreboard.html" target="_blank">Scoreboard</a></li>
-        <li><a href="logout.html">Sign Out</a></li>
+        <li><button class="logout">Sign Out</button></li>
       </ul>
     </nav>
   </body>

theme/index.mjs

@@ -0,0 +1,175 @@
+/**
+ * Functionality for index.html (Login / Puzzles list)
+ */
+import * as moth from "./moth.mjs"
+import * as common from "./common.mjs"
+
+class App {
+    constructor(basePath=".") {        
+        this.config = {}
+        
+        this.server = new moth.Server(basePath)
+
+        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.UpdateState(), common.Minute/3)
+        setInterval(() => this.UpdateConfig(), common.Minute* 5)
+
+        this.UpdateConfig()
+        .finally(() => this.UpdateState())
+    }
+
+    handleLoginSubmit(event) {
+        event.preventDefault()
+        let f = new FormData(event.target)
+        this.Login(f.get("id"), f.get("name"))
+    }
+    
+    /**
+     * 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.UpdateState()
+        }
+        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.UpdateState()
+        }
+        catch (error) {
+            common.Toast(error)
+        }
+    }
+
+    /**
+     * Update app configuration.
+     *
+     * Configuration can be updated less frequently than state, to reduce server
+     * load, since configuration should (hopefully) change less frequently.
+     */
+    async UpdateConfig() {
+        this.config = await common.Config()
+
+        for (let e of document.querySelectorAll(".messages")) {
+            e.innerHTML = this.config.Messages || ""
+        }
+    }
+
+    /**
+     * 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 UpdateState() {
+        this.state = await this.server.GetState()
+
+        // Update elements with data-track-solved
+        for (let e of document.querySelectorAll("[data-track-solved]")) {
+            // Only display if data-track-solved is the same as config.trackSolved
+            e.classList.toggle("hidden", common.Truthy(e.dataset.trackSolved) != this.config.TrackSolved)
+        }
+
+        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()) {
+            let teamID = Math.floor(Math.random() * 1000000).toString(16)
+            common.Toast("Automatically logging in to devel server")
+            console.info(`Logging in with generated Team ID: ${teamID}`)
+            return this.Login(teamID, `Team ${teamID}`)
+        }
+    }
+
+    /**
+     * Render a login box.
+     * 
+     * Just toggles visibility, there's nothing dynamic in a login box.
+     */
+    renderLogin(element, visible) {
+        element.classList.toggle("hidden", !visible)
+    }
+
+    /**
+     * Render a puzzles box.
+     *
+     * Displays 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", common.BaseURL)
+                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.config.TrackSolved) {
+                    a.classList.toggle("solved", this.state.IsSolved(puzzle))
+                }
+            }
+
+            if (!this.state.ContainsUnsolved(cat)) {
+                l.appendChild(document.createElement("li")).textContent = "✿"
+            }
+            
+            element.appendChild(pdiv)        
+        }
+    }
+}
+
+function init() {
+    window.app = {
+        server: new App()
+    }
+}
+
+common.WhenDOMLoaded(init)

theme/logout.html

@@ -1,23 +0,0 @@
-<!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/manifest.json

@@ -1,9 +0,0 @@
-{
-  "name": "Monarch of the Hill",
-  "short_name": "MOTH",
-  "start_url": ".",
-  "display": "standalone",
-  "background_color": "#282a33",
-  "theme_color": "#ECB",
-  "description": "The MOTH CTF engine"
-}

theme/moth.js

@@ -1,196 +0,0 @@
-// 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

@@ -0,0 +1,681 @@
+/**
+ * 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) >>> 0
+        }
+        return h
+    }
+
+    /**
+     * Dan Bernstein hash with xor
+     * 
+     * @param {string} buf Input
+     * @returns {number}
+     */
+    static djb2xor(buf) {
+        let h = 5381
+        for (let c of (new TextEncoder()).encode(buf)) {
+            h = ((h * 33) ^ c) >>> 0
+        }
+        return h
+    }
+  
+    /**
+     * SHA 256
+     * 
+     * Used until MOTH v4.5
+     * 
+     * @param {string} buf Input
+     * @returns {Promise.<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);
+    }
+
+    /**
+     * SHA 1, but only the first 4 hexits (2 octets).
+     * 
+     * Git uses this technique with 7 hexits (default) as a "short identifier".
+     * 
+     * @param {string} buf Input
+     */
+    static async sha1_slice(buf, end=4) {
+        const msgUint8 = new TextEncoder().encode(buf)
+        const hashBuffer = await crypto.subtle.digest("SHA-1", msgUint8)
+        const hashArray = Array.from(new Uint8Array(hashBuffer))
+        const hexits = this.hexlify(hashArray)
+        return hexits.slice(0, end)
+    }
+
+    /**
+     * Hex-encode a byte array
+     * 
+     * @param {number[]} buf Byte array
+     * @returns {string}
+     */
+    static hexlify(buf) {
+        return buf.map(b => b.toString(16).padStart(2, "0")).join("")   
+    }
+
+  /**
+   * Apply every hash to the input buffer.
+   * 
+   * @param {string} buf Input
+   * @returns {Promise.<string[]>}
+   */
+  static async All(buf) {
+    return [
+        String(this.djb2(buf)),
+        await this.sha256(buf),
+        await this.sha1_slice(buf),
+    ]
+  }
+}
+
+/**
+ * A point award.
+ */
+class Award {
+    constructor(when, teamid, category, points) {
+        /** Unix epoch timestamp for this award 
+         * @type {number}
+        */
+        this.When = when
+        /** Team ID this award belongs to 
+         * @type {string}
+        */
+        this.TeamID = teamid
+        /** Puzzle category for this award
+         * @type {string}
+         */
+        this.Category = category
+        /** Points value of this award
+         * @type {number}
+         */
+        this.Points = points
+    }
+}
+
+/**
+ * A puzzle.
+ * 
+ * A new Puzzle only knows its category and point value.
+ * If you want to populate it with meta-information, you must call Populate().
+ * 
+ * Parameters created by Populate are described in the server source code:
+ * {@link https://pkg.go.dev/github.com/dirtbags/moth/v4/pkg/transpile#Puzzle}
+ * 
+ */
+class Puzzle {
+    /**
+     * @param {Server} server 
+     * @param {string} category 
+     * @param {number} points 
+     */
+    constructor (server, category, points) {
+        if (points < 1) {
+            throw(`Invalid points value: ${points}`)
+        }
+        
+        /** Server where this puzzle lives
+         * @type {Server}
+         */
+        this.server = server
+        
+        /** Category this puzzle belongs to */
+        this.Category = String(category)
+        
+        /** Point value of this puzzle */
+        this.Points = Number(points)
+
+        /** Error returned trying to retrieve this puzzle */
+        this.Error = {
+            /** Status code provided by server */
+            Status: 0,
+            /** Status text provided by server */
+            StatusText: "",
+            /** Full text of server error */
+            Body: "",
+        }
+    }
+
+    /**
+     * Populate this Puzzle object with meta-information from the server.
+     */
+    async Populate() {
+        let resp = await this.Get("puzzle.json")
+        if (!resp.ok) {
+            let body = await resp.text()
+            this.Error = {
+                Status: resp.status,
+                StatusText: resp.statusText,
+                Body: body,
+            }
+            throw(this.Error)
+        }
+        let obj = await resp.json()
+        Object.assign(this, obj)
+
+        // Make sure lists are lists
+        this.AnswerHashes ||= []
+        this.Answers ||= []
+        this.Attachments ||= []
+        this.Authors ||= []
+        this.Debug.Errors ||= []
+        this.Debug.Hints ||= []
+        this.Debug.Log ||= []
+        this.KSAs ||= []
+        this.Scripts ||= []
+    }
+
+    /**
+     * Get a resource associated with this puzzle.
+     * 
+     * @param {string} filename Attachment/Script to retrieve
+     * @returns {Promise.<Response>}
+     */
+    Get(filename) {
+        return this.server.GetContent(this.Category, this.Points, filename)
+    }
+
+    /**
+     * Check if a string is possibly correct.
+     *
+     * The server sends a list of answer hashes with each puzzle: this method
+     * checks to see if any of those hashes match a hash of the string.
+     *
+     * The MOTH development team likes obscure hash functions with a lot of
+     * collisions, which means that a given input may match another possible
+     * string's hash. We do this so that if you run a brute force attack against
+     * the list of hashes, you have to write your own brute force program, and
+     * you still have to pick through a lot of potentially correct answers when
+     * it's done.
+     *
+     * @param {string} str User-submitted possible answer
+     * @returns {Promise.<boolean>}
+     */
+    async IsPossiblyCorrect(str) {
+        let userAnswerHashes = await Hash.All(str)
+
+        for (let pah of this.AnswerHashes) {
+            for (let uah of userAnswerHashes) {
+                if (pah == uah) {
+                    return true
+                }
+            }
+        }
+        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)
+    }
+}
+
+/**
+ * A snapshot of scores.
+ */
+class Scores {
+    constructor() {
+        /** 
+         * Timestamp of this score snapshot
+         * @type number 
+         */
+        this.Timestamp = 0
+
+        /**
+         * All categories present in this snapshot.
+         *
+         * ECMAScript sets preserve order, so iterating over this will yield
+         * categories as they were added to the points log.
+         *
+         * @type {Set.<string>}
+         */
+        this.Categories = new Set()
+
+        /**
+         * All team IDs present in this snapshot
+         * @type {Set.<string>}
+         */
+        this.TeamIDs = new Set()
+
+        /**
+         * Highest score in each category
+         * @type {Object.<string,number>}
+         */
+        this.MaxPoints = {}
+        
+        this.categoryTeamPoints = {}
+    }
+
+    /**
+     * Return a sorted list of category names
+     * 
+     * @returns {string[]}
+     */
+    SortedCategories() {
+        let categories = [...this.Categories]
+        categories.sort((a,b) => a.localeCompare(b, "en", {sensitivity: "base"}))
+        return categories
+    }
+
+    /**
+     * Add an award to a team's score.
+     * 
+     * Updates this.Timestamp to the award's timestamp.
+     * 
+     * @param {Award} award 
+     */
+    Add(award) {
+        this.Timestamp = award.Timestamp
+        this.Categories.add(award.Category)
+        this.TeamIDs.add(award.TeamID)
+
+        let teamPoints = (this.categoryTeamPoints[award.Category] ??= {})
+        let points = (teamPoints[award.TeamID] || 0) + award.Points
+        teamPoints[award.TeamID] = points
+
+        let max = this.MaxPoints[award.Category] || 0
+        this.MaxPoints[award.Category] = Math.max(max, points)
+    }
+
+    /**
+     * Get a team's score within a category.
+     * 
+     * @param {string} category 
+     * @param {string} teamID 
+     * @returns {number}
+     */
+    GetPoints(category, teamID) {
+        let teamPoints = this.categoryTeamPoints[category] || {}
+        return teamPoints[teamID] || 0
+    }
+
+    /**
+     * Calculate a team's score in a category, using the Cyber Fire algorithm.
+     * 
+     *@param {string} category 
+     * @param {string} teamID 
+     */
+    CyFiCategoryScore(category, teamID) {
+        return this.GetPoints(category, teamID) / this.MaxPoints[category]
+    }
+
+    /**
+     * Calculate a team's overall score, using the Cyber Fire algorithm.
+     * 
+     *@param {string} category 
+     * @param {string} teamID 
+     * @returns {number}
+     */
+    CyFiScore(teamID) {
+        let score = 0
+        for (let category of this.Categories) {
+            score += this.CyFiCategoryScore(category, teamID)
+        }
+        return score
+    }
+}
+
+/**
+ * MOTH instance state.
+ */
+class State {
+    /**
+     * @param {Server} server Server where we got this
+     * @param {Object} obj Raw state data
+     */
+    constructor(server, obj) {
+        for (let key of ["Config", "TeamNames", "PointsLog"]) {
+            if (!obj[key]) {
+                throw(`Missing state property: ${key}`)
+            }
+        }
+        this.server = server
+
+        /** Configuration */
+        this.Config = {
+            /** Is the server in development mode?
+             * @type {boolean}
+             */
+            Devel: obj.Config.Devel,
+        }
+
+        /** 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[]}
+         */
+        this.PointsLog = obj.PointsLog.map(entry => new Award(entry[0], entry[1], entry[2], entry[3]))
+    }
+
+    /**
+     * Returns a sorted list of open category names
+     * 
+     * @returns {string[]} List of categories
+     */
+    Categories() {
+        let ret = []
+        for (let category in this.PointsByCategory) {
+            ret.push(category)
+        }
+        ret.sort()
+        return ret
+    }
+
+    /**
+     * Check whether a category contains unsolved puzzles.
+     * 
+     * The server adds a puzzle with 0 points in every "solved" category,
+     * so this just checks whether there is a 0-point puzzle in the category's point list.
+     * 
+     * @param {string} category 
+     * @returns {boolean}
+     */
+    ContainsUnsolved(category) {
+        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.
+     * 
+     * The returned list will be sorted by (category, points).
+     * If not categories are given, all puzzles will be returned.
+     * 
+     * @param {string} categories Limit results to these categories
+     * @returns {Puzzle[]}
+     */
+    Puzzles(...categories) {
+        if (categories.length == 0) {
+            categories = this.Categories()
+        }
+        let ret = []
+        for (let category of categories) {
+            for (let points of this.PointsByCategory[category]) {
+                if (0 == points) {
+                    // This means all potential puzzles in the category are open
+                    continue
+                }
+                let p = new Puzzle(this.server, category, points)
+                ret.push(p)
+            }
+        }
+        return ret
+    }
+
+    /**
+     * Has this puzzle been solved by this team?
+     * 
+     * @param {Puzzle} puzzle 
+     * @param {string} teamID Team to check, default the logged-in team
+     * @returns {boolean}
+     */
+    IsSolved(puzzle, teamID="self") {
+        for (let award of this.PointsLog) {
+            if (
+                (award.Category == puzzle.Category)
+                && (award.Points == puzzle.Points)
+                && (award.TeamID == teamID)
+            ) {
+                return true
+            }
+        }
+        return false
+    }
+
+    /**
+     * Replay scores.
+     *
+     * MOTH has no notion of who is "winning", we consider this a user interface
+     * decision. There are lots of interesting options: see
+     * [scoring]{@link ../docs/scoring.md} for more.
+     *
+     * @yields {Scores} Snapshot at a point in time
+     */
+    * ScoresHistory() {
+        let scores = new Scores()
+        for (let award of this.PointsLog) {
+            scores.Add(award)
+            yield scores
+        }
+    }
+
+    /**
+     * Calculate the current scores.
+     * 
+     * @returns {Scores}
+     */
+    CurrentScores() {
+        let scores
+        for (scores of this.ScoreHistory());
+        return scores
+    }
+}
+
+/**
+ * A MOTH Server interface.
+ * 
+ * This uses localStorage to remember Team ID,
+ * 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.TeamID = localStorage[this.teamIDKey]
+    }
+
+    /**
+     * Fetch a MOTH resource.
+     * 
+     * If anything other than a 2xx code is returned,
+     * this function throws an error.
+     * 
+     * This always sends teamID.
+     * If args 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
+     * @returns {Promise.<Response>} Response
+     */
+    fetch(path, args={}) {
+        let body = new URLSearchParams(args)
+        if (this.TeamID && !body.has("id")) {
+            body.set("id", this.TeamID)
+        }
+
+        let url = new URL(path, this.baseUrl)
+        return fetch(url, {
+            method: "POST",
+            body,
+            cache: "no-cache",
+        })
+    }
+
+    /**
+     * Send a request to a JSend API endpoint.
+     * 
+     * @param {string} path Path to API endpoint
+     * @param {Object.<string,string>} args Key/Values to send in POST
+     * @returns {Promise.<Object>} JSend Data
+     */
+    async call(path, args={}) {
+        let resp = await this.fetch(path, args)
+        let obj = await resp.json()
+        switch (obj.status) {
+            case "success":
+                return obj.data
+            case "fail":
+                throw new Error(obj.data.description || obj.data.short || obj.data)
+            case "error":
+                throw new Error(obj.message)
+            default:
+                throw new Error(`Unknown JSend status: ${obj.status}`)
+        }
+    }
+
+    /**
+     * Make a new URL for the given resource.
+     *
+     * The returned URL instance will be absolute, and immune to changes to the
+     * page that would affect relative URLs.
+     *
+     * @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)
+        this.TeamID = null
+    }
+
+    /**
+     * Fetch current contest state.
+     * 
+     * @returns {Promise.<State>}
+     */
+    async GetState() {
+        let resp = await this.fetch("/state")
+        let obj = await resp.json()
+        return new State(this, obj)
+    }
+
+    /**
+     * Log in to a team.
+     *
+     * This calls the server's registration endpoint; if the call succeds, or
+     * fails with "team already exists", the login is returned as successful. 
+     *
+     * @param {string} teamID
+     * @param {string} teamName 
+     * @returns {Promise.<string>} Success message from server
+     */
+    async Login(teamID, teamName) {
+        let data = await this.call("/register", {id: teamID, name: teamName})
+        this.TeamID = teamID
+        this.TeamName = teamName
+        localStorage[this.teamIDKey] = teamID
+        return data.description || data.short
+    }
+
+    /**
+     * Submit a proposed answer for points.
+     *
+     * The returned promise will fail if anything goes wrong, including the
+     * proposed answer being rejected.
+     *
+     * @param {string} category Category of puzzle
+     * @param {number} points Point value of puzzle
+     * @param {string} proposed Answer to submit
+     * @returns {Promise.<string>} Success message
+     */
+    async SubmitAnswer(category, points, proposed) {
+        let data = await this.call("/answer", {
+            cat: category, 
+            points, 
+            answer: proposed,
+        })
+        return data.description || data.short
+    }
+
+    /**
+     * Fetch a file associated with a puzzle.
+     * 
+     * @param {string} category Category of puzzle
+     * @param {number} points Point value of puzzle
+     * @param {string} filename
+     * @returns {Promise.<Response>}
+     */
+    GetContent(category, points, filename) {
+        return this.fetch(`/content/${category}/${points}/${filename}`)
+    }
+
+    /**
+     * Return a Puzzle object.
+     * 
+     * New Puzzle objects only know their category and point value.
+     * See docstrings on the Puzzle object for more information.
+     * 
+     * @param {string} category 
+     * @param {number} points 
+     * @returns {Puzzle}
+     */
+    GetPuzzle(category, points) {
+        return new Puzzle(this, category, points)
+    }
+}
+
+export {
+    Hash,
+    Server,
+}

theme/puzzle.html

@@ -1,37 +1,34 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Puzzle</title>
-    <link rel="stylesheet" href="basic.css">
     <meta name="viewport" content="width=device-width">
     <meta charset="utf-8">
-    <script src="puzzle.js"></script>
+    <link rel="icon" href="luna-moth.svg">
-    <script>
+    <link rel="stylesheet" href="basic.css">
-    
+    <script src="background.mjs" type="module" async></script>
-    </script>
+    <script src="puzzle.mjs" type="module" async></script>
   </head>
   <body>
-    <h1>Puzzle</h1>
+    <h1 id="title">[loading]</h1>
-    <section>
+    <main>
-      <div id="puzzle"><span class="spinner"></span></div>
+      <section id="puzzle">
-      <ul id="files"></ul>
+        <p class="notification">
-      <p>Puzzle by <span id="authors"></span></p>
+          Starting script...
+        </p>
       </section>
-    <div id="messages"></div>
+      <section class="meta"></section>
-    <form>
+        <ul id="files"></ul>
-      <input type="hidden" name="cat">
+        <p>Puzzle by <span id="authors">[loading]</span></p>
-      <input type="hidden" name="points">
+      </section>
-      <input type="hidden" name="xAnswer">
+      <form class="answer">
-      Team ID: <input type="text" name="id"> <br>
+        <label for="answer">Answer:</label>
-      Answer: <input type="text" name="answer" id="answer"> <span id="answer_ok"></span><br>
+        <input type="text" name="answer" id="answer"> <span class="answer_ok"></span>
+        <br>
         <input type="submit" value="Submit">
       </form>
-    <div id="devel"></div>
+    </main>
-    <nav>
+    <div class="debug" class="notification"></div>
-      <ul>
+    <div class="toasts"></div>
-        <li><a href="index.html">Puzzles</a></li>
-        <li><a href="scoreboard.html">Scoreboard</a></li>
-      </ul>
-    </nav>
   </body>
 </html>

theme/puzzle.js

@@ -1,225 +0,0 @@
-// 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 (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

@@ -0,0 +1,239 @@
+/**
+ * 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.
+ * 
+ * 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 
+ */
+async function formSubmitHandler(event) {
+    event.preventDefault()
+    let data = new FormData(event.target)
+    let proposed = data.get("answer")
+    let message
+    
+    console.groupCollapsed("Submit answer")
+    console.info(`Proposed answer: ${proposed}`)
+    try {
+        message = await window.app.puzzle.SubmitAnswer(proposed)
+        common.Toast(message)
+    }
+    catch (err) {
+        common.Toast(err)
+    }
+    console.groupEnd("Submit answer")
+}
+
+/**
+ * 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) {
+        while (e.firstChild) e.firstChild.remove()
+    }
+    return e
+}
+
+/**
+ * Display an error in the puzzle area, and also send it to the console.
+ *
+ * Errors are rendered in the puzzle area, 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"))
+    e.classList.add("error")
+    e.textContent = error.Body || error
+}
+
+/**
+ * Set the answer and invoke input handlers.
+ * 
+ *  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"))
+}
+
+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.
+ * 
+ * @param {string} category 
+ * @param {number} points 
+ */
+async function loadPuzzle(category, points) {
+    console.groupCollapsed("Loading puzzle:", category, points)
+    let contentBase = new URL(`content/${category}/${points}/`, common.BaseURL)
+    
+    // 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 puzzle = server.GetPuzzle(category, points)
+
+    console.time("Populate")
+    try {
+        await puzzle.Populate()
+    }
+    catch {
+        let error = puzzleElement().appendChild(document.createElement("pre"))
+        error.classList.add("notification", "error")
+        error.textContent = puzzle.Error.Body
+        return
+    }
+    finally {
+        console.timeEnd("Populate")
+    }
+
+    console.info(`Setting base tag to ${contentBase}`)
+    let baseElement = document.head.appendChild(document.createElement("base"))
+    baseElement.href = contentBase
+
+    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...")
+    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)
+    }
+
+
+    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")
+        }
+    }
+
+    window.app.puzzle = puzzle
+    console.info("window.app.puzzle =", window.app.puzzle)
+
+    console.groupEnd()
+
+    return puzzle
+}
+
+async function init() {
+    window.app = {}
+    window.setanswer = (str => SetAnswer(str))
+
+    for (let form of document.querySelectorAll("form.answer")) {
+        form.addEventListener("submit", formSubmitHandler)
+        for (let e of form.querySelectorAll("[name=answer]")) {
+            e.addEventListener("input", answerInputHandler)
+        }
+    }
+    // There isn't a more graceful way to "unload" scripts attached to the current puzzle
+    window.addEventListener("hashchange", () => location.reload())
+
+    // Make all links absolute, because we're going to be changing the base URL
+    for (let e of document.querySelectorAll("[href]")) {
+        e.href = new URL(e.href, common.BaseURL)
+    }
+
+    let hashpart = location.hash.split("#")[1] || ""
+    let catpoints = hashpart.split(":")
+    let category = catpoints[0]
+    let points = Number(catpoints[1])
+    if (!category && !points) {
+        error(`Doesn't look like a puzzle reference: ${hashpart}`)
+        return
+    }
+
+    window.app.puzzle = await loadPuzzle(category, points)
+}
+
+common.WhenDOMLoaded(init)

theme/reports/ksa.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>KSA Report</title>
+        <meta name="viewport" content="width=device-width">
+        <meta charset="utf-8">    
+        <script src="ksa.mjs" type="module" async></script>
+        <script src="../background.mjs" type="module" async></script>
+        <link rel="stylesheet" href="../basic.css">
+    </head>
+    <body>
+        <h1>KSA Report</h1>
+        <main>
+            <p>
+                This report shows all KSAs covered by this server so far.
+                This is not a report on your progress, but rather
+                what you would have covered if you had worked every exercise available.
+            </p>
+    
+            <div class="notification">
+                <p class="doing"></p>
+                <progress class="doing"></progress>
+            </div>
+    
+            <h2>All KSAs across all content</h2>
+            <ul class="allKSAs"></ul>
+
+            <h2>All KSAs by Category</h2>
+            <div class="KSAsByCategory">
+            </div>
+    
+            <h2>KSAs by Puzzle</h2>
+            <table class="puzzles">
+                <thead>
+                    <tr>
+                        <th>Category</th>
+                        <th>Points</th>
+                        <th>KSAs</th>
+                        <th>Errors</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template id="puzzlerow">
+                        <tr>
+                            <td class="category"></td>
+                            <td class="points"></td>
+                            <td class="ksas"></td>
+                            <td><pre class="error"></pre></td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </main>
+    </body>
+</html>

theme/reports/ksa.mjs

@@ -0,0 +1,140 @@
+import * as moth from "../moth.mjs"
+import * as common from "../common.mjs"
+
+const server = new moth.Server("../")
+
+/**
+ * Update "doing" indicators
+ * 
+ * @param {String | null} what Text to display, or null to not update text
+ * @param {Number | null} finished Percentage complete to display, or null to not update progress
+ */
+function doing(what, finished = null) {
+    for (let e of document.querySelectorAll(".doing")) {
+        e.classList.remove("hidden")
+        if (what) {
+            e.textContent = what
+        }
+        if (finished) {
+            e.value = finished
+        } else {
+            e.removeAttribute("value")
+        }
+    }
+}
+function done() {
+    for (let e of document.querySelectorAll(".doing")) {
+        e.classList.add("hidden")
+    }
+}
+
+async function GetNice() {
+    let NiceElementsByIdentifier = {}
+    let resp = await fetch("NICEFramework2017.json")
+    let obj = await resp.json()
+    for (let e of obj.elements) {
+        NiceElementsByIdentifier[e.element_identifier] = e
+    }
+    return NiceElementsByIdentifier
+}
+
+/**
+ * Fetch a puzzle, and fill its KSAs and rows.
+ *
+ * This is done once per puzzle, in an asynchronous function, allowing the
+ * application to perform multiple blocking operations simultaneously.
+ */
+async function FetchAndFill(puzzle, KSAs, rows) {
+    try {
+        await puzzle.Populate()
+    }
+    catch (error) {
+        // Keep on going with whatever Populate was able to fill
+    }
+    for (let KSA of (puzzle.KSAs || [])) {
+        KSAs.add(KSA)
+    }
+
+    for (let row of rows) {
+        row.querySelector(".category").textContent = puzzle.Category
+        row.querySelector(".points").textContent = puzzle.Points
+        row.querySelector(".ksas").textContent = (puzzle.KSAs || []).join(" ")
+        row.querySelector(".error").textContent = puzzle.Error.Body
+    }
+}
+
+async function init() {
+    doing("Fetching NICE framework data")
+    let nicePromise = GetNice()
+
+    doing("Retrieving server state")
+    let state = await server.GetState()
+
+    doing("Retrieving all puzzles")
+    let KSAsByCategory = {}
+    let puzzlerowTemplate = document.querySelector("template#puzzlerow")
+    let puzzles = state.Puzzles()
+    let promises = []
+    for (let category of state.Categories()) {
+        KSAsByCategory[category] = new Set()
+    }
+    let pending = puzzles.length
+    for (let puzzle of puzzles) {
+        // Make space in the table, so everything fills in sorted order
+        let rows = []
+        for (let tbody of document.querySelectorAll("tbody")) {
+            let row = puzzlerowTemplate.content.cloneNode(true).firstElementChild
+            tbody.appendChild(row)
+            rows.push(row)
+        }
+
+        // Queue up a fetch, and update progress bar
+        let promise = FetchAndFill(puzzle, KSAsByCategory[puzzle.Category], rows)
+        promises.push(promise)
+        promise.then(() => doing(null, 1 - (--pending / puzzles.length)))
+
+        if (promises.length > 50) {
+            // Chrome runs out of resources if you queue up too many of these at once
+            await Promise.all(promises)
+            promises = []
+        }
+    }
+    await Promise.all(promises)
+
+    doing("Retrieving NICE identifiers")
+    let NiceElementsByIdentifier = await nicePromise
+
+
+    doing("Filling KSAs By Category")
+    let allKSAs = new Set()
+    for (let div of document.querySelectorAll(".KSAsByCategory")) {
+        for (let category of state.Categories()) {
+            doing(`Filling KSAs for category: ${category}`)
+            let KSAs = [...KSAsByCategory[category]]
+            KSAs.sort()
+
+            div.appendChild(document.createElement("h3")).textContent = category
+            let ul = div.appendChild(document.createElement("ul"))
+            for (let k of KSAs) {
+                let ksa = k.split(/\s+/)[0]
+                let ne = NiceElementsByIdentifier[ksa] || { text: "???" }
+                let text = `${ksa}: ${ne.text}`
+                ul.appendChild(document.createElement("li")).textContent = text
+                allKSAs.add(text)
+            }
+        }
+    }
+
+    doing("Filling KSAs")
+    for (let e of document.querySelectorAll(".allKSAs")) {
+        let KSAs = [...allKSAs]
+        KSAs.sort()
+        for (let text of KSAs) {
+            e.appendChild(document.createElement("li")).textContent = text
+        }
+    }
+
+    done()
+}
+
+common.WhenDOMLoaded(init)

theme/scoreboard.css

@@ -0,0 +1,84 @@
+/* GHC displays: 1024x1820 */
+@media screen and (max-aspect-ratio: 4/5) and (min-height: 1600px) {
+  html {
+    font-size: 20pt;
+  }
+}
+
+.location {
+  color: #acf;
+  background-color: #0008;
+  position: fixed;
+  right: 30vw;
+  bottom: 0;
+  padding: 1em;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight:bold;
+  text-decoration: underline;
+}
+
+/** Scoreboard */
+#rankings {
+	width: 100%;
+	position: relative;
+  background-color: #000c;
+}
+#rankings div {
+  height: 1.2rem;
+  display: flex;
+  align-items: center;
+}
+#rankings div:nth-child(6n){
+  background-color: #ccc3;
+}
+#rankings div:nth-child(6n+3) {
+  background-color: #0f03;
+}
+
+#rankings span {
+  display: inline-block;
+  overflow: hidden;
+}
+#rankings span.category {
+  font-size: 80%;
+}
+#rankings span.teamname {
+  height: auto;
+	font-size: inherit;
+	color: white;
+  background-color: #000e;
+  border-radius: 3px;
+	position: absolute;
+	right: 0.2em;
+}
+#rankings span.teamname:hover,
+#rankings span.category:hover {
+  width: inherit;
+  max-width: 100%;
+}
+.topscore::before {
+  content: "✩";
+  font-size: 75%;
+  vertical-align: top;
+}
+
+@media only screen and (max-width: 450px) {
+  #rankings span.teamname {
+    max-width: 6em;
+    text-overflow: ellipsis;
+  }
+  span.teampoints {
+    max-width: 80%;
+  }
+}
+
+#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,22 +3,15 @@
   <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="moment.min.js" async></script>
+    <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></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/chart.js@3.0.2"></script>
-    <script src="scoreboard.js" async></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
+    <script type="module" src="scoreboard.mjs"></script>
   </head>
-  <body class="wide">
+  <body>
-    <h4 id="location"></h4>
-    <section class="rotate">
-      <div id="chart"></div>
     <div id="rankings"></div>
-    </section>
+    <div class="location"></div>
-    <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,251 +0,0 @@
-// jshint asi:true
-
-function scoreboardInit() {
-  
-  chartColors = [
-    "rgb(255, 99, 132)",
-    "rgb(255, 159, 64)",
-    "rgb(255, 205, 86)",
-    "rgb(75, 192, 192)",
-    "rgb(54, 162, 235)",
-    "rgb(153, 102, 255)",
-    "rgb(201, 203, 207)"
-  ]
-  
-  function update(state) {
-    window.state = state
-    
-    for (let rotate of document.querySelectorAll(".rotate")) {
-      rotate.appendChild(rotate.firstElementChild)
-    }
-    
-    let element = document.getElementById("rankings")
-    let teamNames = state.TeamNames
-    let pointsLog = state.PointsLog
-  
-    // Every machine that's displaying the scoreboard helpfully stores the last 20 values of
-    // points.json for us, in case of catastrophe. Thanks, y'all!
-    //
-    // We have been doing some variation on this "everybody backs up the server state" trick since 2009.
-    // We have needed it 0 times.
-    let stateHistory = JSON.parse(localStorage.getItem("stateHistory")) || []
-    if (stateHistory.length >= 20) {
-      stateHistory.shift()
-    }
-    stateHistory.push(state)
-    localStorage.setItem("stateHistory", JSON.stringify(stateHistory))
-  
-    let teams = {}
-    let highestCategoryScore = {} // map[string]int
-  
-    // Initialize data structures
-    for (let teamId in teamNames) {
-        teams[teamId] = {
-        categoryScore: {},        // map[string]int
-        overallScore: 0,          // int
-        historyLine: [],          // []{x: int, y: int}
-        name: teamNames[teamId],
-        id: teamId
-      }
-    }
-  
-    // Dole out points
-    for (let entry of pointsLog) {
-      let timestamp = entry[0]
-      let teamId = entry[1]
-      let category = entry[2]
-      let points = entry[3]
-      
-      let team = teams[teamId]
-  
-      let score = team.categoryScore[category] || 0
-      score += points
-      team.categoryScore[category] = score
-  
-      let highest = highestCategoryScore[category] || 0
-      if (score > highest) {
-        highestCategoryScore[category] = score
-      }
-    }
-
-    for (let teamId in teamNames) {
-      teams[teamId].categoryScore = {}
-    }
-    
-    for (let entry of pointsLog) {
-      let timestamp = entry[0]
-      let teamId = entry[1]
-      let category = entry[2]
-      let points = entry[3]
-      
-      let team = teams[teamId]
-  
-      let score = team.categoryScore[category] || 0
-      score += points
-      team.categoryScore[category] = score
-  
-      let overall = 0
-      for (let cat in team.categoryScore) {
-        overall += team.categoryScore[cat] / highestCategoryScore[cat]
-      }
-  
-      team.historyLine.push({t: new Date(timestamp  * 1000), y: overall})
-    }
-  
-    // Compute overall scores based on current highest
-    for (let teamId in teams) {
-      let team = teams[teamId]
-      team.overallScore = 0
-      for (let cat in team.categoryScore) {
-        team.overallScore += team.categoryScore[cat] / highestCategoryScore[cat]
-      }
-    }
-  
-    // Sort by team score
-    function teamCompare(a, b) {
-      return a.overallScore - b.overallScore
-    }
-  
-    // Figure out how to order each team on the scoreboard
-    let winners = []
-    for (let teamId in teams) {
-      winners.push(teams[teamId])
-    }
-    winners.sort(teamCompare)
-    winners.reverse()
-    
-    // Let's make some better names for things we've computed
-    let winningScore = winners[0].overallScore
-    let numCategories = Object.keys(highestCategoryScore).length
-  
-    // Clear out the element we're about to populate
-    Array.from(element.childNodes).map(e => e.remove())
-  
-    let maxWidth = 100 / winningScore
-    for (let team of winners) {
-      let row = document.createElement("div")
-      let ncat = 0
-      for (let category in highestCategoryScore) {
-        let catHigh = highestCategoryScore[category]
-        let catTeam = team.categoryScore[category] || 0
-        let catPct = catTeam / catHigh
-        let width = maxWidth * catPct
-        
-        let bar = document.createElement("span")
-        bar.classList.add("category")
-        bar.classList.add("cat" + ncat)
-        bar.style.width = width + "%"
-        bar.textContent = category + ": " + catTeam
-        bar.title = bar.textContent
-  
-        row.appendChild(bar)
-        ncat += 1
-      }
-  
-      let te = document.createElement("span")
-      te.classList.add("teamname")
-      te.textContent = team.name
-      row.appendChild(te)
-  
-      element.appendChild(row)
-    }
-    
-    let datasets = []
-    for (let i in winners) {
-      if (i > 5) {
-        break
-      }
-      let team = winners[i]
-      let color = chartColors[i % chartColors.length]
-      datasets.push({
-        label: team.name,
-        backgroundColor: color,
-        borderColor: color,
-        data: team.historyLine,
-        lineTension: 0,
-        fill: false
-      })
-    }
-    let config = {
-      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() {
-    let base = window.location.href.replace("scoreboard.html", "")
-    let location = document.querySelector("#location")
-    if (location) {
-      location.textContent = base
-    }
-  
-    setInterval(refresh, 60000)
-    refresh()
-  }
-  
-  init()
-}
-
-if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", scoreboardInit)
-} else {
-  scoreboardInit()
-}

theme/scoreboard.mjs

@@ -0,0 +1,120 @@
+import * as moth from "./moth.mjs"
+import * as common from "./common.mjs"
+
+const server = new moth.Server(".")
+/** Don't let any team's score exceed this percentage width */
+const MaxScoreWidth = 90
+
+/**
+ * Returns a promise that resolves after timeout.
+ *
+ * This uses setTimeout instead of some other fancy thing like
+ * requestAnimationFrame, because who actually cares about scoreboard update
+ * framerate?
+ *
+ * @param {Number} timeout How long to sleep (milliseconds)
+ * @returns {Promise}
+ */
+function sleep(timeout) {
+  return new Promise(resolve => setTimeout(resolve, timeout));
+}
+
+/**
+ * Pull new points log, and update the scoreboard.
+ * 
+ * The update is animated, because I think that looks cool.
+ */
+async function update() {
+  let config = {}
+  try {
+    config = await common.Config()
+  }
+  catch (err) {
+    console.warn("Parsing config.json:", err)
+  }
+
+  // Pull configuration settings
+  let ScoreboardConfig = config.Scoreboard ?? {}
+  let ReplayHistory = ScoreboardConfig.ReplayHistory ?? false
+  let ReplayDurationMS = ScoreboardConfig.ReplayDurationMS ?? 300
+  let ReplayFPS = ScoreboardConfig.ReplayFPS ?? 24
+  if (!config.Scoreboard) {
+    console.warn("config.json has empty Scoreboard section")
+  }
+
+  for (let e of document.querySelectorAll(".location")) {
+    e.textContent = common.BaseURL
+    e.classList.toggle("hidden", !ScoreboardConfig.DisplayServerURL)
+  }
+
+  let state = await server.GetState()
+  let rankingsElement = document.querySelector("#rankings")
+  let logSize = state.PointsLog.length
+
+  // Figure out the timing so that we can replay the scoreboard in about
+  // ReplayDurationMS, but no more than 24 frames per second.
+  let frameModulo = 1
+  let delay = 0
+  while (delay < (common.Second / ReplayFPS)) {
+    frameModulo += 1
+    delay = ReplayDurationMS / (logSize / frameModulo)
+  }
+
+  let frame = 0
+  for (let scores of state.ScoresHistory()) {
+    frame += 1
+    if (frame < state.PointsLog.length) { // Always render the last frame
+      if (!ReplayHistory || (frame % frameModulo)) { // Skip if we're not animating, or if we need to drop frames
+        continue
+      }
+    }
+
+    while (rankingsElement.firstChild) rankingsElement.firstChild.remove()
+
+    let sortedTeamIDs = [...scores.TeamIDs]
+    sortedTeamIDs.sort((a, b) => scores.CyFiScore(a) - scores.CyFiScore(b))
+    sortedTeamIDs.reverse()
+    
+    let topScore = scores.CyFiScore(sortedTeamIDs[0])
+    for (let teamID of sortedTeamIDs) {
+      let teamName = state.TeamNames[teamID]
+      
+      let row = rankingsElement.appendChild(document.createElement("div"))
+      
+      let teamname = row.appendChild(document.createElement("span"))
+      teamname.textContent = teamName
+      teamname.classList.add("teamname")
+      
+      let categoryNumber = 0
+      let teampoints = row.appendChild(document.createElement("span"))
+      teampoints.classList.add("teampoints")
+      for (let category of scores.Categories) {
+        let score = scores.CyFiCategoryScore(category, teamID)
+        if (!score) {
+          continue
+        }
+
+        // XXX: Figure out how to do this properly with flexbox
+        let block = row.appendChild(document.createElement("span"))
+        let points = scores.GetPoints(category, teamID)
+        let width = MaxScoreWidth * score / topScore
+
+        block.textContent = category
+        block.title = `${points} points`
+        block.style.width = `${width}%`
+        block.classList.add("category", `cat${categoryNumber}`)
+        block.classList.toggle("topscore", (score == 1) && ScoreboardConfig.ShowCategoryLeaders)
+
+        categoryNumber += 1
+      } 
+    }
+    await sleep(delay)
+  }
+}
+
+function init() {
+  setInterval(update, common.Minute)
+  update()
+}
+
+common.WhenDOMLoaded(init)

theme/token.html

@@ -1,45 +1,29 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Redeem Token</title>
     <link rel="stylesheet" href="basic.css">
     <meta name="viewport" content="width=device-width">
-    <script src="puzzle.js"></script>
+    <script src="token.mjs" type="module" async></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>
-    <div id="messages"></div>
+    <main>
-    <form id="tokenForm">
+      <p>
-      <input type="hidden" name="cat">
+        Have you found a token?
-      <input type="hidden" name="points">
+      </p>
-      <input type="hidden" name="answer">
+      <p></p>
-      Team ID: <input type="text" name="id"> <br>
+        Tokens look like
-      Token: <input type="text" name="token"> <br>
+        <code>category:5:xylep-radar-nanox</code>
+      <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>
-    <nav>
+    <div class="toasts"></div>
-      <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

@@ -0,0 +1,48 @@
+/**
+ * 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)