Dummy mode picker

No actual game modes yet.

3 files changed, 56 insertions, 5 deletions

diff --git a/index.html b/index.html
index 7d5322a..9ab3afc 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,11 @@
                 <h1>GUESS THE CHARACTER</h1>
                 <div id="intro">
                     <p>is a game in which you GUESS THE CHARACTER based on the sound of their speech.</p>
+                    <p id="mode-picker">PICK MODE: <a href="#" data-mode="encyclopedia">Encyclopedia</a> - <a href="#" data-mode="time-trial">Time Trial</a></p>
+                    <div id="mode-descriptions">
+                        <p data-mode="encyclopedia">Encyclopedia: Try to guess EVERY SINGLE character correctly! Unlimited time.</p>
+                        <p data-mode="time-trial">Time Trial: Guess as many characters as possible in 30 seconds!</p>
+                    </div>
                     <p>Loading (<span id="load-progress">0</span>%)...</p>
                     <p id="play-paragraph"><a href="#" id="play-link">Play</a></p>
                 </div>
diff --git a/main.js b/main.js
index dc5d398..62eb5b0 100644
--- a/main.js
+++ b/main.js
@@ -9,6 +9,9 @@
  *
  * - pick __ HARD __ selections of choices, not just totally random ones
  *
+ * - time trial - guess as many as you can in 30 seconds; options show up
+ *   instantly
+ *
  */
 
 // initializy stuff --------------------------------------------------------ooo
@@ -285,10 +288,6 @@ function markScorekeeper(cls, character) {
 async function mainLol() {
     const testChar = 'Noellef';
 
-    await loadResources();
-
-    document.body.classList.add('resources-loaded');
-
     document.body.addEventListener('keydown', evt => {
         const choiceContainer = document.getElementById('choice-container');
         if (!choiceContainer.classList.contains('hide')) {
@@ -301,6 +300,8 @@ async function mainLol() {
                 }
             } else if (event.key === 'ArrowRight') {
                 const el = document.activeElement;
+                // TODO: don't be specific to choiceContainer, just find the
+                // next sibling that is an <a> element
                 if (el.parentElement === choiceContainer && el.nextSibling) {
                     el.nextSibling.focus();
                 }
@@ -319,10 +320,39 @@ async function mainLol() {
         }
     });
 
+    // pre-game ------------------------------------------------------------...
+
+    let mode;
+
+    const modeLinks = document.querySelectorAll('#mode-picker a[data-mode]');
+    const modeParas = document.querySelectorAll('#mode-descriptions p[data-mode]');
+
+    const pickMode = function(a) {
+        mode = a.dataset.mode;
+        for (const el of [...modeLinks, ...modeParas]) {
+            if (el.dataset.mode === mode) {
+                el.classList.add('selected');
+            } else {
+                el.classList.remove('selected');
+            }
+        }
+    };
+
+    for (const el of modeLinks) {
+        el.addEventListener('click', evt => pickMode(evt.target));
+    }
+
+    pickMode(modeLinks[0]);
+    modeLinks[0].focus();
+
+    // you can pick game options before resources are loaded
+    await loadResources();
+
+    document.body.classList.add('resources-loaded');
+
     const gameEl = document.getElementById('game');
 
     const playLink = document.getElementById('play-link');
-    playLink.focus();
     await waitForEvent(playLink, 'click');
 
     document.body.classList.add('game');
@@ -332,6 +362,8 @@ async function mainLol() {
 
     const characterDeck = gameData.characters.filter(chr => chr.games.some(g => deckGames.includes(g)));
 
+    // game loop -----------------------------------------------------------nym
+
     setupScorekeeper(characterDeck.length);
 
     while (characterDeck.length) {
diff --git a/style.css b/style.css
index c515db3..cc09a9a 100644
--- a/style.css
+++ b/style.css
@@ -52,6 +52,20 @@ body:not(.resources-loaded) #play-paragraph {
     padding: 4pt;
 }
 
+#mode-picker a.selected:before {
+    content: '[';
+    color: white;
+}
+
+#mode-picker a.selected:after {
+    content: ']';
+    color: white;
+}
+
+#mode-descriptions p:not(.selected) {
+    display: none;
+}
+
 #choice-container {
     display: flex;
     flex-direction: row;