moth/theme/puzzle.js

225 lines
6.5 KiB
JavaScript
Raw Normal View History

2019-02-26 16:52:23 -07:00
// jshint asi:true
2020-09-11 13:03:19 -06:00
// prettify adds classes to various types, returning an HTML string.
function prettify(key, val) {
console.log(key, val)
switch (key) {
case "Body":
return '[HTML]'
}
return val
}
2019-02-22 20:46:52 -07:00
// devel_addin drops a bunch of development extensions into element e.
// It will only modify stuff inside e.
2020-09-11 13:03:19 -06:00
function devel_addin(e) {
2019-02-22 20:46:52 -07:00
let h = document.createElement("h2")
e.appendChild(h)
h.textContent = "Development Options"
let g = document.createElement("p")
e.appendChild(g)
g.innerText = "This section will not appear for participants."
2020-09-11 13:03:19 -06:00
let hobj = JSON.stringify(window.puzzle, prettify, 2)
let d = e.appendChild(document.createElement("pre"))
d.classList.add("object")
d.innerHTML = hobj
2019-02-22 20:46:52 -07:00
}
// 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
2020-03-10 13:31:38 -06:00
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?
2020-09-11 17:33:43 -06:00
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.Pre.AnswerHashes) {
if (hash == correctHash) {
return true
2020-03-10 13:31:38 -06:00
}
}
}
2020-03-10 13:31:38 -06:00
return false
}
2019-02-22 20:46:52 -07:00
// Pop up a message
2019-02-22 20:46:52 -07:00
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
2019-02-22 20:46:52 -07:00
function submit(e) {
e.preventDefault()
2020-03-10 13:31:38 -06:00
let data = new FormData(e.target)
// Kludge for patterned answers
let xAnswer = data.get("xAnswer")
if (xAnswer) {
data.set("answer", xAnswer)
}
window.data = data
2019-02-23 12:04:42 -07:00
fetch("answer", {
method: "POST",
2020-03-10 14:28:50 -06:00
body: data,
2019-02-22 20:46:52 -07:00
})
.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)
})
}
2020-09-11 13:03:19 -06:00
async function loadPuzzle(categoryName, points, puzzleId) {
2019-02-22 20:46:52 -07:00
let puzzle = document.getElementById("puzzle")
let base = "content/" + categoryName + "/" + puzzleId + "/"
2020-09-11 13:03:19 -06:00
let resp = await fetch(base + "puzzle.json")
if (! resp.ok) {
console.log(resp)
let err = await resp.text()
2019-02-22 20:46:52 -07:00
Array.from(puzzle.childNodes).map(e => e.remove())
2020-09-11 13:03:19 -06:00
p = puzzle.appendChild(document.createElement("p"))
2019-02-22 20:46:52 -07:00
p.classList.add("Error")
p.textContent = err
2020-09-11 13:03:19 -06:00
return
}
// Make the whole puzzle available
window.puzzle = await resp.json()
// Populate authors
document.getElementById("authors").textContent = window.puzzle.Pre.Authors.join(", ")
// If answers are provided, this is the devel server
if (window.puzzle.Answers) {
devel_addin(document.getElementById("devel"))
}
// Load scripts
for (let script of (window.puzzle.Pre.Scripts || [])) {
let st = document.createElement("script")
document.head.appendChild(st)
st.src = base + script
}
// List associated files
for (let fn of (window.puzzle.Pre.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.Pre.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.Pre.AnswerPattern) {
document.querySelector("#answer").pattern = window.puzzle.Pre.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))
2019-02-22 20:46:52 -07:00
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
}
2020-09-11 17:33:43 -06:00
checkAnswer(answer)
2020-03-10 13:31:38 -06:00
.then (correct => {
2020-03-10 15:03:32 -06:00
document.querySelector("[name=xAnswer").value = correct || answer
2020-03-10 13:31:38 -06:00
if (correct) {
ok.textContent = "⭕"
ok.title = "Possibly correct"
} else {
ok.textContent = "❌"
ok.title = "Definitely not correct"
}
2020-03-10 13:31:38 -06:00
})
}
2019-02-22 20:46:52 -07:00
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 && puzzleId) {
loadPuzzle(categoryName, points, puzzleId)
}
let teamId = sessionStorage.getItem("id")
if (teamId) {
document.querySelector("input[name=id]").value = teamId
}
if (document.querySelector("#answer")) {
document.querySelector("#answer").addEventListener("input", answerCheck)
}
2019-02-22 20:46:52 -07:00
document.querySelector("form").addEventListener("submit", submit)
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init)
} else {
init()
}