From e166f881dc9b184cf079f5881e856e6364ca0712 Mon Sep 17 00:00:00 2001 From: cyfraeviolae Date: Thu, 21 Jul 2022 01:26:47 -0400 Subject: levels and history --- static/script.js | 231 +++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 165 insertions(+), 66 deletions(-) (limited to 'static/script.js') 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 `
${scansionBox}${els.join('')}
` } +function renderGuessIdxBox(guessIdx) { + return `
📋 ${guessIdx+1}
` +} + +function renderChallengeIdxBox() { + return `
#${challengeIdx + 1}
` +} + function renderLine(line, guess, guessIdx, scores) { var els = [] var offset = 0; if (guessIdx || guessIdx === 0) { - els.push(`
📋 ${guessIdx+1}
`) + els.push(renderGuessIdxBox(guessIdx)) } else { - els.push(`
#${getChallengeIdx() + 1}
`) + 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—${challenge.title}\n\t\t${collection}${challenge.author}` 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 += `
  • ${challenge.meter}` + 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 += '' + challenge.renderLine + '' + } else { + s += '' + challenge.line.join(' ') + '' + } + } + } + } + s += '
    • ' + } + 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"]`)); +} -- cgit v1.2.3