mirror of https://github.com/dirtbags/moth.git
Merge branch 'libmoth' into 'main'
New theme Closes #190 See merge request devs/moth!181
This commit is contained in:
Neale Pickett
commit
077dc261e4
|
|
@ -4,7 +4,7 @@ stages:
|
|||
|
||||
Run unit tests:
|
||||
stage: test
|
||||
image: &goimage golang:1.18
|
||||
image: &goimage golang:1.21
|
||||
only:
|
||||
refs:
|
||||
- main
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
Dirtbags Monarch Of The Hill Server
|
||||
=====================
|
||||
|
||||
|
||||
|
||||
[](https://goreportcard.com/report/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
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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 PuzzleDebug
|
||||
Authors []string
|
||||
Attachments []string
|
||||
Scripts []string
|
||||
Body string
|
||||
// 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 []string
|
||||
Objective string
|
||||
KSAs []string
|
||||
Success struct {
|
||||
|
||||
// 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 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]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
240
theme/basic.css
240
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;
|
||||
color: #f6efdc;
|
||||
margin: 1em auto;
|
||||
padding: 1px 3px;
|
||||
border-radius: 5px;
|
||||
background: #000d;
|
||||
}
|
||||
body.wide {
|
||||
max-width: 100%;
|
||||
}
|
||||
a:any-link {
|
||||
color: #8b969a;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #cb2408cc;
|
||||
}
|
||||
h1 {
|
||||
background: #5e576b;
|
||||
color: #9e98a8;
|
||||
}
|
||||
.Fail, .Error, #messages {
|
||||
background: #3a3119;
|
||||
color: #ffcc98;
|
||||
}
|
||||
.Fail:before {
|
||||
content: "Fail: ";
|
||||
}
|
||||
.Error:before {
|
||||
content: "Error: ";
|
||||
background: #cb240844;
|
||||
padding: 3px;
|
||||
}
|
||||
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 {
|
||||
border: solid black 2px;
|
||||
input {
|
||||
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 {
|
||||
border: inherit;
|
||||
width: 100%;
|
||||
.mothball {
|
||||
float: right;
|
||||
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;
|
||||
color: white;
|
||||
}
|
||||
#messages {
|
||||
min-height: 3em;
|
||||
border: solid black 2px;
|
||||
}
|
||||
#rankings {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.answer_ok {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
#rankings span {
|
||||
font-size: 75%;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 1.7em;
|
||||
}
|
||||
#rankings span.teamname {
|
||||
font-size: inherit;
|
||||
color: white;
|
||||
text-shadow: 0 0 3px black;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
right: 0.2em;
|
||||
}
|
||||
#rankings div * {white-space: nowrap;}
|
||||
.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
|
||||
.cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}
|
||||
.cat2, .cat10, .cat18 {background-color: #b2df8a; color: black;}
|
||||
.cat3, .cat11, .cat19 {background-color: #33a02c; color: white;}
|
||||
.cat4, .cat12, .cat20 {background-color: #fb9a99; color: black;}
|
||||
.cat5, .cat13, .cat21 {background-color: #e31a1c; color: white;}
|
||||
.cat6, .cat14, .cat22 {background-color: #fdbf6f; color: black;}
|
||||
.cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;}
|
||||
|
||||
|
||||
#devel {
|
||||
background-color: #eee;
|
||||
/** Development mode information */
|
||||
.debug {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<script src="index.mjs" type="module" async></script>
|
||||
<script src="background.mjs" type="module" async></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">MOTH</h1>
|
||||
<section>
|
||||
<div id="messages">
|
||||
<div id="notices"></div>
|
||||
<h1 class="title" title="Monarch Of The Hill">MOTH</h1>
|
||||
<main>
|
||||
<div class="messages notification">
|
||||
</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="logout.html">Sign Out</a></li>
|
||||
<li><a href="scoreboard.html" target="_blank">Scoreboard</a></li>
|
||||
<li><button class="logout">Sign Out</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
196
theme/moth.js
196
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()
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<link rel="icon" href="luna-moth.svg">
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
<script src="background.mjs" type="module" async></script>
|
||||
<script src="puzzle.mjs" type="module" async></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Puzzle</h1>
|
||||
<section>
|
||||
<div id="puzzle"><span class="spinner"></span></div>
|
||||
<ul id="files"></ul>
|
||||
<p>Puzzle by <span id="authors"></span></p>
|
||||
</section>
|
||||
<div id="messages"></div>
|
||||
<form>
|
||||
<input type="hidden" name="cat">
|
||||
<input type="hidden" name="points">
|
||||
<input type="hidden" name="xAnswer">
|
||||
Team ID: <input type="text" name="id"> <br>
|
||||
Answer: <input type="text" name="answer" id="answer"> <span id="answer_ok"></span><br>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
<div id="devel"></div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Puzzles</a></li>
|
||||
<li><a href="scoreboard.html">Scoreboard</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1 id="title">[loading]</h1>
|
||||
<main>
|
||||
<section id="puzzle">
|
||||
<p class="notification">
|
||||
Starting script...
|
||||
</p>
|
||||
</section>
|
||||
<section class="meta"></section>
|
||||
<ul id="files"></ul>
|
||||
<p>Puzzle by <span id="authors">[loading]</span></p>
|
||||
</section>
|
||||
<form class="answer">
|
||||
<label for="answer">Answer:</label>
|
||||
<input type="text" name="answer" id="answer"> <span class="answer_ok"></span>
|
||||
<br>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</main>
|
||||
<div class="debug" class="notification"></div>
|
||||
<div class="toasts"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
225
theme/puzzle.js
225
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()
|
||||
}
|
||||
|
|
@ -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)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
|
|
@ -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)
|
||||
|
|
@ -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;}
|
||||
|
|
@ -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/chart.js@2.9.4/dist/Chart.min.js" async></script>
|
||||
<script src="scoreboard.js" async></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.2"></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">
|
||||
<h4 id="location"></h4>
|
||||
<section class="rotate">
|
||||
<div id="chart"></div>
|
||||
<div id="rankings"></div>
|
||||
</section>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Puzzles</a></li>
|
||||
<li><a href="scoreboard.html">Scoreboard</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<body>
|
||||
<div id="rankings"></div>
|
||||
<div class="location"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
@ -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>
|
||||
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>
|
||||
<script src="token.mjs" type="module" async></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Redeem Token</h1>
|
||||
<div id="messages"></div>
|
||||
<form id="tokenForm">
|
||||
<input type="hidden" name="cat">
|
||||
<input type="hidden" name="points">
|
||||
<input type="hidden" name="answer">
|
||||
Team ID: <input type="text" name="id"> <br>
|
||||
Token: <input type="text" name="token"> <br>
|
||||
<main>
|
||||
<p>
|
||||
Have you found a token?
|
||||
</p>
|
||||
<p></p>
|
||||
Tokens look like
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="puzzle-list.html">Puzzles</a></li>
|
||||
<li><a href="scoreboard.html">Scoreboard</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="toasts"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
Loading…
Reference in New Issue