add StyleDropdown.js

4 files changed, 140 insertions, 49 deletions

diff --git a/App.js b/App.js
index fe063b1..295acd9 100644
--- a/App.js
+++ b/App.js
@@ -1,4 +1,9 @@
 let state = {
+   level: 1,
+   
+   levelCharacters: [],
+   index: 0,
+   
    character: '你',
    pinyin: 'ni3',
 
@@ -10,10 +15,6 @@ let state = {
    inputShaking: false,
 };
 
-let internalState = {};
-
-const KEY_ENTER = 13;
-
 
 function setState(update)
 {
@@ -23,32 +24,61 @@ function setState(update)
 }
 
 
-const CurrentCharacter = function({character})
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+const opts = [
+   'Hello, world!',
+   'Goodbye, world!',
+   'What\'s up, doc?',
+];
+
+const App = function()
 {
+   const {
+      character, pinyin,
+      hintLevel,
+      inputValue, inputShaking
+   } = state;
+
    return h(
-      'h1',
-      { onClick: () => setState({currentCharacter: '我'}) },
-      character
+      'div', {},
+      [
+         h('h1', {}, character),
+         
+         h(InputBox,
+           { value: inputValue,
+             shaking: inputShaking,
+             handleKeyDown: handleInputKeyDown,
+           }),
+
+         h('br'),
+         h('br'),
+
+         h(HintButton,
+           {
+              answer: pinyin,
+              hintLevel,
+              handleClick: () => setState({ hintLevel: hintLevel+1 }),
+           }),
+
+         h(StyleDropdown,
+           { options: opts,
+             index: -1,
+             defaultText: 'Dropdown',
+           }),
+      ]
    );
 }
 
 
-function shakeInputBox()
-{
-   setState({ inputShaking: true });
-   setTimeout(() => setState({ inputShaking: false }), 300);
-}
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 function handleInputKeyDown(event)
 {
    const KEY_ENTER = 13;
-   const { pinyin, inputValue } = state;
       
    if (event.keyCode === KEY_ENTER) {
-      if (inputValue === pinyin)
-         correctAnswer();
-      else
-         shakeInputBox();
+      makeGuess();
    }
    else {
       setTimeout(() => setState({
@@ -58,6 +88,18 @@ function handleInputKeyDown(event)
 }
 
 
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+function makeGuess()
+{
+   const { inputValue, pinyin } = state;
+   
+   if (inputValue === pinyin)
+         correctAnswer();
+      else
+         shakeInputBox();
+}
+
 function correctAnswer()
 {
    setState({
@@ -66,38 +108,12 @@ function correctAnswer()
    });
 }
 
-
-const App = function()
+function shakeInputBox()
 {
-   const {
-      character, pinyin,
-      hintLevel,
-      inputValue, inputShaking
-   } = state;
+   setState({ inputShaking: true });
+   setTimeout(() => setState({ inputShaking: false }), 300);
+}
 
-   console.log(inputValue);
-   
-   return h(
-      'div', {},
-      [
-         h(CurrentCharacter,
-           { character, }),
-         
-         h(InputBox,
-           { value: inputValue,
-             shaking: inputShaking,
-             handleKeyDown: handleInputKeyDown,
-           }),
 
-         h('br'),
-         h('br'),
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-         h(HintButton,
-           {
-              answer: pinyin,
-              hintLevel,
-              handleClick: () => setState({ hintLevel: hintLevel+1 }),
-           }),
-         ]
-      );
-   }
diff --git a/StyleDropdown.js b/StyleDropdown.js
new file mode 100644
index 0000000..f2f0f65
--- /dev/null
+++ b/StyleDropdown.js
@@ -0,0 +1,25 @@
+function StyleDropdown({ options, index, onChoose, defaultText })
+{
+   const text = index < 0 ? defaultText : options[index];
+
+   let optionLinks = [];
+   for (let i=0; i<options.length; i++)
+      optionLinks.push(
+         h('a',
+           {
+              href: '#',
+              onClick: () => onChoose(i)
+           },
+           options[i]
+          )
+      );
+
+   return h(
+      'div.StyleDropdownContainer', {}
+      [
+         h('button.StyleDropdownButton', {}, text),
+
+         h('div.StyleDropdownContent', {}, optionLinks)
+      ]
+   );
+}
diff --git a/index.html b/index.html
index fda37de..224e992 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
     <script src="./InputBox.js"></script>
     <script src="./StyleButton.js"></script>
     <script src="./HintButton.js"></script>
+    <script src="./StyleDropdown.js"></script>
     <script src="./App.js"></script>
     
     <!-- styling -->
diff --git a/style.css b/style.css
index 01a0e3b..d233b02 100644
--- a/style.css
+++ b/style.css
@@ -64,6 +64,7 @@ body {
 .StyleButtonEnabled
 {
     border-color: #2af;
+    cursor: pointer;
 }
 
 .StyleButtonEnabled:hover
@@ -77,3 +78,51 @@ body {
     color: #444;
     border-color: #444;
 }
+
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.StyleDropdownButton
+{
+    padding: 10px;
+    border-radius: 8px;
+    border-style: solid;
+    border-width: 2px;
+    display: inline-block;
+    min-width: 100px;
+}
+
+.StyleDropdownContainer
+{
+    position: relative;
+    display: inline-block;
+}
+
+.StyleDropdownContent
+{
+    display: none;
+    position: absolute;
+    min-width: 160px;
+    max-height: 500%;
+    z-index: -1;
+    overflow: scroll;
+}
+
+.StyleDropdownContent a
+{
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.StyleDropdownContent a:hover
+{
+    background-color: #f1f1f1;
+}
+
+
+.StyleDropdownContainer:hover .StyleDropdownContent
+{
+    display: block;
+}