levels and history

1 files changed, 26 insertions, 20 deletions

diff --git a/index.html b/index.html
index fd12a43..c33d599 100644
--- a/index.html
+++ b/index.html
@@ -17,23 +17,36 @@
             </div>
             <div class="crumbs">
                 <a href="/git/prosodyle">source code</a>
+                <span class="sep"> · </span>
+                <a href="/prosodyle/level-select">level select</a>
             </div>
         </div>
-        <p>
+		<p>
             The dithyrambic sorcerer Roseacrucis has encrypted the
-            Library&rsquo;s treasured poetry collections. As our newest
-            acolyte, your task is to decode one secret line of poetry each day.
-        </p>
-        <p>
-			Given the ransom price of one new line in the same meter as today&rsquo;s secret
-			line, for each word, Roseacrucis will reveal which letters are in the right place 🟩, in the word but in the wrong
-			place 🟨, or not in the word at all ⬜.
-        </p>
+            Library&rsquo;s treasured poetry collections.
+			Your task is to decode one line of poetry each day,
+            though you may <a href="/prosodyle/level-select">attempt previous challenges as well</a>.
+		</p>
+		<br>
+		<details>
+			<summary>
+				How to play
+			</summary>
+			Given the ransom price of one new line of poetry in the same meter
+			as today&rsquo;s secret line, for each word, Roseacrucis will
+			reveal which letters are in the right place 🟩, in the word but in
+			the wrong place 🟨, or not in the word at all ⬜.
+			Accents and punctuation are ignored.
         <p>
             Each word is annotated with the number of required syllables and their stress marks. For example,
             <span class="scansion">&times;&sol;</span> indicates that the word has two syllables, the first unstressed and the second
             stressed (such as in <em>por-TRAY</em>).
         </p>
+		<p>
+			Each guess must be a reasonable and sensible line of poetry, but
+			creativity and poetic license are encouraged.
+		</p>
+		</details>
         <noscript>Sorry, JavaScript is required to play Prosodyle.</noscript>
         <br>
 		<form id="game" action="javascript:void(0);" method="none">
@@ -55,27 +68,20 @@
 				<button id="check" type="submit">Check guess</button>
 				<button id="clear">Clear all</button>
 				<button id="fill-green">Clear word and fill greens</button>
+				<button class="reset-level">Reset level</button>
 			</div>
 			<div id="win" style="display: none;">
 				<p>
-					Huzzah! Today&rsquo;s secret line was in
+					<div id="win-idx-box"></div>
+					Victory! Today&rsquo;s secret line was in
 					<strong id="meter"></strong>:
 				</p>
 				<pre id="ctx" class="poetry"></pre>
-				<p>
-					But our troubles are not over. Most of the Library&rsquo;s poetry
-					remains encrypted, and we need your help to decode a new line
-					tomorrow.
-				</p>
-				<p>
-					In the meantime, you may share your results with your fellow acolytes,
-					adding punctuation as desired.
-				</p>
-                <br>
 				<div>
 					<textarea rows="4" id="share"></textarea>
 				</div>
 				<button id="copy">Copy</button>
+				<button class="reset-level">Reset level</button>
 			</div>
 			<p id="guesses"></p>
 		</form>