levels and history

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">&mdash;<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 += ' &middot; '
+                    s += challenge.author
+                    s += ' &middot; '
+					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;
 }