add style dropdowns and reset() function

4 files changed, 137 insertions, 16 deletions

diff --git a/App.js b/App.js
index 295acd9..b622ea1 100644
--- a/App.js
+++ b/App.js
@@ -1,5 +1,31 @@
+const levels = [];
+const LEVEL_SIZE = 20;
+
+for (let i=0; (LEVEL_SIZE*i) < characters.length; i++) {
+   let start = (20*i) + 1;
+   let end = 20 * (i+1);
+   end = end > characters.length ? characters.length-1 : end;
+   
+   levels.push(`Level ${i+1} (${start} - ${end})`);
+}
+
+
+const gameModes = [
+   'Only Level Characters',
+   'Level + Previous Four Levels',
+   'All Characters up to Level',
+];
+
+const GAMEMODE_LEVEL_ONLY = 0;
+const GAMEMODE_PREV_LEVELS = 1;
+const GAMEMODE_ALL_TO_LEVEL = 2;
+
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 let state = {
-   level: 1,
+   level: 0,
+   gameMode: GAMEMODE_LEVEL_ONLY,
    
    levelCharacters: [],
    index: 0,
@@ -20,21 +46,17 @@ function setState(update)
 {
    for (const key in update)
       state[key] = update[key];
+
    render();
 }
 
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-const opts = [
-   'Hello, world!',
-   'Goodbye, world!',
-   'What\'s up, doc?',
-];
-
 const App = function()
 {
    const {
+      level, gameMode,
       character, pinyin,
       hintLevel,
       inputValue, inputShaking
@@ -52,7 +74,6 @@ const App = function()
            }),
 
          h('br'),
-         h('br'),
 
          h(HintButton,
            {
@@ -61,10 +82,26 @@ const App = function()
               handleClick: () => setState({ hintLevel: hintLevel+1 }),
            }),
 
+         h('br'),
+
+         h(StyleDropdown,
+           { options: levels,
+             index: level,
+             defaultText: 'Select a Level',
+             onChoose: (index) => {
+                setState({ level: index });
+                reset();
+             },
+           }),
+
          h(StyleDropdown,
-           { options: opts,
-             index: -1,
-             defaultText: 'Dropdown',
+           { options: gameModes,
+             index: gameMode,
+             defaultText: 'Select a Game Mode',
+             onChoose: (index) => {
+                setState({ gameMode: index });
+                reset();
+             },
            }),
       ]
    );
@@ -117,3 +154,74 @@ function shakeInputBox()
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+
+// fisher-yates shuffle
+function shuffledArray(arr)
+{
+   const shuffled = [...arr];
+   for (let i=arr.length-1; i>0; i--) {
+      const j = Math.floor(Math.random() * i);
+      let tmp = shuffled[j];
+      shuffled[j] = shuffled[i];
+      shuffled[i] = tmp;
+   }
+
+   return shuffled;
+}
+
+
+function buildLevel(level, levelSize, gameMode, characters)
+{
+   let start;
+   
+   switch (gameMode) {
+   case GAMEMODE_LEVEL_ONLY:
+      start = levelSize * level;
+      break;
+
+   case GAMEMODE_PREV_LEVELS:
+      start = levelSize * (level - 4);
+      break;
+
+   case GAMEMODE_ALL_TO_LEVEL:
+      start = 0;
+      break;
+
+   default:
+      start = 0;
+      break;
+   }
+
+   start = start < 0 ? 0 : start;
+   
+   let end = levelSize * (level + 1);
+
+   const levelCharacters = [];
+   for (let i=start; i<end; i++)
+      levelCharacters.push(characters[i]);
+
+   return shuffledArray(levelCharacters);
+}
+
+function reset() {
+   const { level, gameMode } = state;
+
+   const levelCharacters = buildLevel(level, LEVEL_SIZE, gameMode, characters);
+
+   const [character, pinyin] = levelCharacters[0];
+   
+   setState({
+      levelCharacters,
+      index: 0,
+      
+      character,
+      pinyin,
+      
+      guessHistory: [],
+      
+      hintLevel: 0,
+      
+      inputValue: undefined,
+      inputShaking: false,
+   });
+}
diff --git a/StyleDropdown.js b/StyleDropdown.js
index f2f0f65..cbc6e4f 100644
--- a/StyleDropdown.js
+++ b/StyleDropdown.js
@@ -15,7 +15,7 @@ function StyleDropdown({ options, index, onChoose, defaultText })
       );
 
    return h(
-      'div.StyleDropdownContainer', {}
+      'div.StyleDropdownContainer', {},
       [
          h('button.StyleDropdownButton', {}, text),
 
diff --git a/main.js b/main.js
index 72c97a4..f0c0694 100644
--- a/main.js
+++ b/main.js
@@ -21,4 +21,7 @@ function render()
 }
 
 
-window.onload = render;
+window.onload = () => {
+   reset();
+   render();
+}
diff --git a/style.css b/style.css
index d233b02..564d6df 100644
--- a/style.css
+++ b/style.css
@@ -58,6 +58,7 @@ body {
     border-style: solid;
     border-width: 2px;
     display: inline-block;
+    margin: 2px;
 }
 
 
@@ -84,12 +85,21 @@ body {
 
 .StyleDropdownButton
 {
+    color: black;
+    background-color: white;
     padding: 10px;
     border-radius: 8px;
     border-style: solid;
     border-width: 2px;
+    border-color: #2af;
     display: inline-block;
-    min-width: 100px;
+    min-width: 180px;
+    margin: 2px;
+}
+
+.StyleDropdownButton:hover
+{
+    background-color: #eee;
 }
 
 .StyleDropdownContainer
@@ -102,10 +112,10 @@ body {
 {
     display: none;
     position: absolute;
-    min-width: 160px;
+    min-width: 220px;
     max-height: 500%;
     z-index: -1;
-    overflow: scroll;
+    overflow-y: scroll;
 }
 
 .StyleDropdownContent a