add StyleDropdown.js

1 files changed, 65 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 }),
-           }),
-         ]
-      );
-   }