diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/poems.js | 30 | ||||
| -rw-r--r-- | static/script.js | 231 | ||||
| -rw-r--r-- | static/styles.css | 3 |
3 files changed, 184 insertions, 80 deletions
diff --git a/static/poems.js b/static/poems.js index 8599215..b60f31b 100644 --- a/static/poems.js +++ b/static/poems.js @@ -37,11 +37,11 @@ And their hearts but once heaved, and for ever grew still! }, { "line": "Infinite wrath and infinite despair".split(' '), - "scansion": ['x/x', '/', 'x', '/x/', 'x/'], + "scansion": '/xx / x //x x/', "title": "Book IV", "collection": "Paradise Lost", "author": "John Milton", - "meter": "iambic pentameter", + "meter": "iambic pentameter with trochaic substitution", "ctx": ` Me miserable! which way shall I flie Infinite wrauth, and infinite despaire? @@ -237,12 +237,6 @@ Faint as shed flowers, the attenuated dream. `, "link": "http://www.rossettiarchive.org/docs/sonnets.lcms.rad.html#21-1871", }, - {}, - {}, - {}, - {}, - {}, - {}, { "line": "The art of losing isnt hard to master".split(' '), "scansion": 'x / x /x /x / x /x', @@ -376,12 +370,6 @@ Rage, rage against the dying of the light. `, "link": "https://poets.org/poem/do-not-go-gentle-good-night", }, - {}, - {}, - {}, - {}, - {}, - {}, { "line": "Now is the winter of our discontent".split(' '), "scansion": '/ x x /x / x /x/', @@ -518,6 +506,20 @@ As Housewives do, a Fly. `, "link": "https://allpoetry.com/If-you-were-coming-in-the-fall,", }, + { + "line": "Grace was in all her steps Heaven in her eye".split(' '), + "renderLine": "Grace was in all her steps, Heaven in her eye", + "scansion": '/ x x / x / / x x /', + "title": "Book VIII", + "collection": "Paradise Lost", + "author": "John Milton", + "meter": "iambic pentameter with trochaic substitution", + "ctx": ` +Grace was in all her steps, Heaven in her eye, +In every gesture dignity and love. +`, + "link": "https://www.bartleby.com/360/2/277.html", + }, ] /* { diff --git a/static/script.js b/static/script.js index 70c17d1..9d8acdc 100644 --- a/static/script.js +++ b/static/script.js @@ -1,9 +1,5 @@ "use strict"; -var entryEl = document.getElementById("entry") -var guessesEl = document.getElementById("guesses") -var winEl = document.getElementById("win") - function renderScansion(scansion) { var s = '' for (var c of scansion) { @@ -46,13 +42,21 @@ function renderWord(word, wordIdx, guess, score, offset) { return `<div class="word">${scansionBox}${els.join('')}</div>` } +function renderGuessIdxBox(guessIdx) { + return `<div class="word"><div class="box idxbox numbering" data-guess="${guessIdx}">📋 ${guessIdx+1}</div></div>` +} + +function renderChallengeIdxBox() { + return `<div class="word"><div class="box numbering">#${challengeIdx + 1}</div></div>` +} + function renderLine(line, guess, guessIdx, scores) { var els = [] var offset = 0; if (guessIdx || guessIdx === 0) { - els.push(`<div class="word"><div class="box idxbox numbering" data-guess="${guessIdx}">📋 ${guessIdx+1}</div></div>`) + els.push(renderGuessIdxBox(guessIdx)) } else { - els.push(`<div class="word"><div class="box numbering">#${getChallengeIdx() + 1}</div></div>`) + els.push(renderChallengeIdxBox()) } for (var wordIdx in line) { var word = line[wordIdx] @@ -172,67 +176,26 @@ function renderKeyboardLights() { var focused = null; -document.getElementById('clear').onclick = function(e) { - e.preventDefault(); - for (var el of document.getElementsByClassName('entrybox')) { - el.innerText = '' - } - unfocus(document.querySelector(`[data-offset="${focused}"]`)); - focus(document.querySelector(`[data-offset="0"]`)) -} - -document.getElementById('fill-green').addEventListener('click', function(e) { - e.preventDefault(); - var el = document.querySelector(`[data-offset="${focused}"]`) - if (!el) { - return - } - var w = el.getAttribute('data-word') - for (var el of document.getElementsByClassName('entrybox')) { - if (el.getAttribute('data-word') != w) { - continue - } - var c = information[el.getAttribute('data-word')].greensrev[el.getAttribute('data-word-offset')] - if (c) { - el.innerText = c - } else { - el.innerText = '' - } - } -}) -document.getElementById('check').addEventListener('click', function(e) { - var guess = consumeInput() - if (guess == null) { - return; - } - var guessIdx = guesses.length; - guesses.push(guess) - var scores = scoreLine(guess, challenge.line) - var linehtml = renderLine(challenge.line, guess, guessIdx, scores) - guessesEl.innerHTML = linehtml + guessesEl.innerHTML - var win = true; - renderKeyboardLights() +function hasWon(scores) { for (var score of scores) { if (Object.keys(score.yellows).length || Object.keys(score.greys).length) { - win = false; + return false; } } - if (win) { - entryEl.style = 'display: none;' - winGame(challenge) - } -}) + return true; +} function winGame(challenge) { winEl.style = 'display: block;' + document.getElementById('win-idx-box').innerHTML = renderChallengeIdxBox() document.getElementById('btns').style = 'display: none;' document.getElementById('meter').innerText = challenge.meter var collection = challenge.collection ? `${challenge.collection}, ` : "" var ctx = challenge.ctx.replace(/^\n/, '').replace(/\n$/, '').replaceAll(/^(.*)/gm, ' $1') document.getElementById('ctx').innerHTML = ctx + `\n\t<span class="byline">—<a href="${challenge.link}">${challenge.title}</a>\n\t\t${collection}${challenge.author}</span>` var firstguess = Object.values(guesses[0]).join(' ') - document.getElementById('share').value = `I solved Prosodyle #${getChallengeIdx()+1} at cyfraeviolae.org/prosodyle. My first guess was: "${firstguess}."` + document.getElementById('share').value = `I solved Prosodyle #${challengeIdx+1} at cyfraeviolae.org/prosodyle. My first guess was: "${firstguess}."` } function keyHandler(key) { @@ -314,16 +277,6 @@ function getChallengeIdx() { return Math.min(idx, challenges.length-1) } -function getDailyChallenge() { - return challenges[getChallengeIdx()] -} - -document.getElementById('copy').addEventListener('click', function(e) { - e.preventDefault(); - document.getElementById('share').select() - document.execCommand('copy'); -}) - function focus(el) { focused = parseInt(el.getAttribute('data-offset')) el.classList.add('focus') @@ -335,8 +288,154 @@ function unfocus(el) { } +function renderLevels() { + var s = ''; + console.log('ok') + for (var idx in challenges) { + console.log(idx) + var challenge = challenges[idx] + s += `<li><a href="/prosodyle/?challenge=${Number(idx)+1}">${challenge.meter}</a>` + var stored = localStorage.getItem("challenge" + idx) + console.log(stored) + if (stored) { + var store = JSON.parse(stored) + guesses = store.guesses + information = store.information + if (guesses.length) { + if (hasWon(scoreLine(guesses[guesses.length - 1], challenge.line))) { + s += ' · ' + s += challenge.author + s += ' · ' + if (challenge.renderLine) { + s += '<em>' + challenge.renderLine + '</em>' + } else { + s += '<em>' + challenge.line.join(' ') + '</em>' + } + } + } + } + s += '</li>' + } + return s +} + +var levelsEl = document.getElementById('levels') +var isLevelSelect = !!levelsEl + + var guesses = [] var information = {} -var challenge = getDailyChallenge() -entryEl.innerHTML = renderLine(challenge.line) -focus(document.querySelector(`[data-offset="0"]`)); + +if (isLevelSelect) { + levelsEl.innerHTML = renderLevels() +} else { + var entryEl = document.getElementById("entry") + var guessesEl = document.getElementById("guesses") + var winEl = document.getElementById("win") + + document.getElementById('copy').addEventListener('click', function(e) { + e.preventDefault(); + document.getElementById('share').select() + document.execCommand('copy'); + }) + + + document.getElementById('clear').onclick = function(e) { + e.preventDefault(); + for (var el of document.getElementsByClassName('entrybox')) { + el.innerText = '' + } + unfocus(document.querySelector(`[data-offset="${focused}"]`)); + focus(document.querySelector(`[data-offset="0"]`)) + } + + Array.from(document.getElementsByClassName('reset-level')).forEach(function(element) { + element.addEventListener('click', function(e) { + e.preventDefault(); + if (window.confirm("Are you sure you want to reset this level? All data will be permanently lost.")) { + var stored = localStorage.removeItem("challenge" + challengeIdx) + location.reload(); + } + }); + }); + + document.getElementById('fill-green').addEventListener('click', function(e) { + e.preventDefault(); + var el = document.querySelector(`[data-offset="${focused}"]`) + if (!el) { + return + } + var w = el.getAttribute('data-word') + for (var el of document.getElementsByClassName('entrybox')) { + if (el.getAttribute('data-word') != w) { + continue + } + var c = information[el.getAttribute('data-word')].greensrev[el.getAttribute('data-word-offset')] + if (c) { + el.innerText = c + } else { + el.innerText = '' + } + } + }) + + document.getElementById('check').addEventListener('click', function(e) { + var guess = consumeInput() + if (guess == null) { + return; + } + var guessIdx = guesses.length; + guesses.push(guess) + var scores = scoreLine(guess, challenge.line) + + localStorage.setItem("challenge" + challengeIdx, JSON.stringify({guesses: guesses, information: information})) + + var linehtml = renderLine(challenge.line, guess, guessIdx, scores) + guessesEl.innerHTML = linehtml + guessesEl.innerHTML + renderKeyboardLights() + var win = hasWon(scores) + if (win) { + entryEl.style = 'display: none;' + winGame(challenge) + } + }) + + var urlParams = new URLSearchParams(window.location.search); + var challengeRequest = urlParams.get('challenge'); + var challenge; + var challengeIdx; + if (challengeRequest) { + challengeIdx = Number(challengeRequest) - 1 + } else { + challengeIdx = getChallengeIdx() + } + challenge = challenges[challengeIdx] + entryEl.innerHTML = renderLine(challenge.line) + + var stored = localStorage.getItem("challenge" + challengeIdx) + if (stored) { + var store = JSON.parse(stored) + guesses = store.guesses + information = store.information + + for (var [guessIdx, guess] of guesses.entries()) { + var scores = scoreLine(guess, challenge.line) + var linehtml = renderLine(challenge.line, guess, guessIdx, scores) + guessesEl.innerHTML = linehtml + guessesEl.innerHTML + } + + var win = true; + renderKeyboardLights() + for (var score of scores) { + if (Object.keys(score.yellows).length || Object.keys(score.greys).length) { + win = false; + } + } + if (win) { + entryEl.style = 'display: none;' + winGame(challenge) + } + } + + focus(document.querySelector(`[data-offset="0"]`)); +} diff --git a/static/styles.css b/static/styles.css index c8628cc..ca10d75 100644 --- a/static/styles.css +++ b/static/styles.css @@ -126,6 +126,9 @@ .numbering { background-color: transparent; width: 60px; +} + +.idxbox { cursor: pointer; user-select: none; } |