7 files changed, 472 insertions, 0 deletions
diff --git a/static/EBGaramond-Italic-VariableFont_wght.ttf b/static/EBGaramond-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..fa31b71
--- /dev/null
+++ b/static/EBGaramond-Italic-VariableFont_wght.ttf
diff --git a/static/EBGaramond-VariableFont_wght.ttf b/static/EBGaramond-VariableFont_wght.ttf
new file mode 100644
index 0000000..123d5dd
--- /dev/null
+++ b/static/EBGaramond-VariableFont_wght.ttf
diff --git a/static/OFL.txt b/static/OFL.txt
new file mode 100644
index 0000000..1ba1596
--- /dev/null
+++ b/static/OFL.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..bb88dc0
--- /dev/null
+++ b/static/favicon.ico
diff --git a/static/poems.js b/static/poems.js
new file mode 100644
index 0000000..fd5d0bd
--- /dev/null
+++ b/static/poems.js
@@ -0,0 +1,46 @@
+var challenges = [
+    {
+        "line": [["In", "/fin", "ite"], ["/wrath"], ["and"], ["/in", "fin", "/ite"], ["des", "/pair"]],
+        "title": "Book IV",
+        "collection": "Paradise Lost",
+        "author": "John Milton",
+		"meter": "iambic pentameter",
+        "ctx": `Me miserable! which way shall I flie
+Infinite wrauth, and infinite despaire?
+Which way I flie is Hell; my self am Hell;
+And in the lowest deep a lower deep
+Still threatning to devour me opens wide,
+To which the Hell I suffer seems a Heav'n.`,
+        "link": "https://milton.host.dartmouth.edu/reading_room/pl/book_4/text.shtml",
+    },
+    {
+        "line": [["For"], ["the"], ["/An", "gel"], ["of"], ["/Death"], ["spread"], ["his"], ["/wings"], ["on"], ["the"], ["/blast"]],
+        "title": "The Destruction of Sennacherib",
+        "collection": "Hebrew Melodies",
+        "author": "Lord Byron",
+		"meter": "anapestic tetrameter",
+        "ctx": `For the Angel of Death spread his wings on the blast,
+And breathed in the face of the foe as he passed;
+And the eyes of the sleepers waxed deadly and chill,
+And their hearts but once heaved, and for ever grew still!`,
+        "link": "https://www.poetryfoundation.org/poems/43827/the-destruction-of-sennacherib",
+    },
+    {
+        "line": [["A"], ["/pre", "sence"], ["/that"], ["dis", "/turbs"], ["me"], ["/with"], ["the"], ["/joy"]],
+        "title": "Lines written a few miles above Tintern Abbey",
+        "collection": "Lyrical Ballads",
+        "author": "William Wordsworth",
+		"meter": "iambic pentameter",
+        "ctx": `And I have felt
+A presence that disturbs me with the joy
+Of elevated thoughts; a sense sublime
+Of something far more deeply interfused,
+Whose dwelling is the light of setting suns,
+And the round ocean, and the living air,
+And the blue sky, and in the mind of man,
+A motion and a spirit, that impels
+All thinking things, all objects of all thought,
+And rolls through all things.`,
+        "link": "https://www.gutenberg.org/files/9622/9622-h/9622-h.htm#poem23",
+    },
+]
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..552da72
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,192 @@
+"use strict";
+
+var entryEl = document.getElementById("entry")
+var guessesEl = document.getElementById("guesses")
+var winEl = document.getElementById("win")
+
+function renderWord(word, wordIdx, guess, score, offset) {
+    var els = []
+    var c = 0;
+    for (var syllable of word) {
+        var sylEls = []
+
+        var shouldStress = syllable[0] == "/";
+        if (shouldStress) {
+            syllable = syllable.slice(1)
+        }
+        var stress = shouldStress ? "stress" : ""
+        for (var _ in syllable) {
+            var charclass = ''
+            var able = ''
+            if (score) {
+                if (score.greens[c]) {
+                    charclass += 'green'
+                } else if (score.yellows[c]) {
+                    charclass += 'yellow'
+                } else if (score.greys[c]) {
+                    charclass += 'grey'
+                }
+                able = 'disabled'
+            }
+            var val = guess ? guess[wordIdx][c] : ''
+            var typ = guess ? 'solbox' : 'entrybox'
+            sylEls.push(`<input data-word="${wordIdx}" data-character="${c}" data-offset="${c+offset}" class="box ${typ} ${charclass}" type="text" maxlength="1" required title="A-Z only" value="${val}" pattern="[A-Za-z]" ${able}></input>`)
+            c++;
+        }
+
+        els.push(`<div class="syllable ` + stress + `">` + sylEls.join('') + `</div>`)
+    }
+
+    return `<div class="word">` + els.join(`<div class="syllable-sep">&middot;</div>`) + `</div>`
+}
+
+function renderLine(line, guess, scores) {
+    var els = []
+    var offset = 0;
+    for (var wordIdx in line) {
+        var word = line[wordIdx]
+        els.push(renderWord(word, wordIdx, guess, scores && scores[wordIdx], offset))
+        offset += word.join('').replaceAll('/', '').length
+        console.log(word, word.join('').replaceAll('/', '').length)
+    }
+    return `<div class="line">` + els.join('') + `</div>`
+}
+
+function consumeInput() {
+    var els = Array.from(document.getElementsByClassName("entrybox"));
+    els.sort((x, y) => {
+        var xword = x.getAttribute('data-word')
+        var xchar = x.getAttribute('data-character')
+        var yword = y.getAttribute('data-word')
+        var ychar = y.getAttribute('data-character')
+
+        if (xword != yword) {
+            return xword - yword;
+        }
+        return xchar - ychar;
+    })
+    var words = {}
+    for (var el of els) {
+        words[el.getAttribute('data-word')] = (words[el.getAttribute('data-word')] || '') +
+                el.value.toUpperCase()
+    }
+    return words
+}
+
+function scoreLine(guess, answer) {
+    var scores = []
+    for (var idx in guess) {
+        var guessword = guess[idx]
+        var answerword = answer[idx].join('').replaceAll('/', '').toUpperCase()
+        scores.push(scoreWord(guessword, answerword))
+    }
+    return scores
+}
+
+function scoreWord(guess, answer) {
+    var greens = {}
+    var yellows = {}
+    var greys = {}
+    var counts = {}
+    var placed = {}
+    for (var idx in guess) {
+        if (guess[idx] == answer[idx]) {
+            greens[idx] = 1
+            placed[answer[idx]] = (placed[answer[idx]] || 0) + 1
+        }
+        counts[answer[idx]] = (counts[answer[idx]] || 0) + 1
+    }
+    for (var idx in guess) {
+        if (greens[idx]) {
+            continue
+        }
+        if ((placed[guess[idx]] || 0) < counts[guess[idx]]) {
+            yellows[idx] = 1
+            placed[guess[idx]] = (placed[guess[idx]] || 0) + 1;
+        } else {
+            greys[idx] = 1
+        }
+    }
+    return {greens: greens, yellows: yellows, greys: greys}
+}
+
+document.getElementById('clear').onclick = function(e) {
+    e.preventDefault();
+    for (var el of document.getElementsByClassName('entrybox')) {
+        el.value = ''
+    }
+    document.querySelector(`[data-offset="0"]`).focus();
+}
+
+document.getElementById('game').addEventListener('submit', function(e) {
+    var guess = consumeInput()
+    guesses.push(guess)
+    var scores = scoreLine(guess, challenge.line)
+    var linehtml = renderLine(challenge.line, guess, scores)
+    guessesEl.innerHTML = linehtml + guessesEl.innerHTML
+    var win = true;
+    for (var score of scores) {
+        if (Object.keys(score.yellows).length || Object.keys(score.greys).length) {
+            win = false;
+        }
+    }
+    if (win) {
+        entryEl.innerHTML = linehtml
+        winGame(challenge)
+    }
+})
+
+function winGame(challenge) {
+    winEl.style = 'display: block;'
+    document.getElementById('btns').style = 'display: none;'
+    document.getElementById('meter').innerText = challenge.meter
+    document.getElementById('ctx').innerHTML = challenge.ctx.replaceAll(/^(.*)/gm, '\t$1') + `\n\t<span class="byline">&mdash;<a href="${challenge.link}">${challenge.title}</a>, ${challenge.collection}, ${challenge.author}</span>`
+    var date = new Date().toISOString().slice(0, 10)
+    var firstguess = Object.values(guesses[0]).join(' ')
+    document.getElementById('share').value = `I solved the ${date} Prosodyle at cyfraeviolae.org/prosodyle. My first guess was: "${firstguess}".`
+}
+
+document.getElementById('entry').addEventListener('keydown', function(e) {
+    if (!Array.from(e.target.classList).includes('entrybox')) {
+        return;
+    }
+    if (e.ctrlKey || e.altKey || (e.key.length != 1 && e.key != 'Backspace')) {
+        return;
+    }
+    e.preventDefault();
+    var offset = parseInt(e.target.getAttribute('data-offset'))
+    var el;
+    if (e.key == 'Backspace') {
+        e.target.value = '';
+        el = document.querySelector(`[data-offset="${offset-1}"]`);
+    } else {
+        e.target.value = e.key;
+        el = document.querySelector(`[data-offset="${offset+1}"]`);
+    }
+    if (el) {
+        el.focus();
+    }
+})
+
+function getDailyChallenge() {
+    // https://stackoverflow.com/a/8619946
+    var now = new Date();
+    var start = new Date(now.getFullYear(), 0, 0);
+    var diff = now - start;
+    var oneDay = 1000 * 60 * 60 * 24;
+    var day = Math.floor(diff / oneDay);
+    // end snippet
+    return challenges[day-56]
+}
+
+document.getElementById('copy').addEventListener('click', function(e) {
+    e.preventDefault();
+    document.getElementById('share').select()
+    document.execCommand('copy');
+})
+
+
+var guesses = []
+var challenge = getDailyChallenge()
+entryEl.innerHTML = renderLine(challenge.line)
+document.querySelector(`[data-offset="0"]`).focus();
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..96b9109
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,141 @@
+@font-face {
+    font-family: EBGaramond;
+    src: url(/static/EBGaramond-VariableFont_wght.ttf) format('woff2-variations');
+    font-style: normal;
+}
+
+@font-face {
+    font-family: EBGaramond;
+    src: url(/static/EBGaramond-Italic-VariableFont_wght.ttf) format('woff2-variations');
+    font-style: italic;
+}
+
+body {
+	background: #fdf3f3;
+	color: DarkSlateGrey;
+	font-family: EBGaramond, serif;
+    font-size: large;
+}
+
+a {
+	color: #1a97bf;
+}
+
+a:hover {
+	color: #075d77;
+}
+
+.container {
+    margin: 1em;
+    max-width: 40em;
+}
+
+.title {
+	letter-spacing: -0.5px;
+	font-weight: bold;
+}
+
+div {
+    margin-bottom: 10px;
+}
+
+form {
+	border: 1px DarkSlateGrey solid;
+    padding: 10px;
+    padding-left: 25px;
+}
+
+.sep {
+    margin-left: 6px;
+    margin-right: 6px;
+}
+
+.ingredient {
+    display: inline-block;
+    margin-right: 5px;
+    margin-bottom: 5px;
+}
+
+button {
+    margin-right: 10px;
+}
+
+.box {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 22px;
+    border: 2px lightgrey solid;
+    margin-right: 0px;
+    margin-left: 0px;
+    text-transform: uppercase;
+	color: black;
+	box-sizing: border-box;
+	caret-color: transparent;
+	outline:0px none transparent;
+	/* appearance: none; */
+	/* -moz-appearance: none; */
+}
+.box:focus {
+	background-color: #fff079;
+}
+.box::selection {
+	color: none;
+	background: none;
+}
+.syllable .box:not(:first-child) {
+	margin-left: -1px;
+}
+.syllable .box:not(:last-child) {
+	margin-right: -1px;
+}
+
+.syllable {
+    display: inline;
+}
+.syllable-sep {
+    display: inline;
+    font-size: 30px;
+    margin: 1px;
+}
+.word {
+    display: inline-block;
+    margin-right: 40px;
+	margin-bottom: 7px;
+}
+
+.stress>.box {
+    border-color: darkslategrey;
+	/* background-color: lightcyan; */
+}
+
+.green {
+	background-color: rgb(106, 170, 100);
+	color: white;
+	border: 0;
+}
+.yellow {
+	background-color: rgb(201, 180, 88);
+	color: white;
+	border: 0;
+}
+.grey {
+	background-color: rgb(120, 124, 126);
+	color: white;
+	border: 0;
+}
+
+hr {
+    border: .1px DarkSlateGrey dashed;
+	margin-top: 20px;
+}
+
+.poetry {
+	font-family: EBGaramond;
+}
+
+.byline {
+	font-style: italic;
+	font-size: 75%;
+}