create hint button

1 files changed, 62 insertions, 26 deletions

diff --git a/App.js b/App.js
index cc436b4..fa97b75 100644
--- a/App.js
+++ b/App.js
@@ -1,13 +1,24 @@
-let state = {};
+let state = {
+   character: '你',
+   pinyin: 'ni3',
+
+   guessHistory = [],
+   
+   hintLevel: 0,
+   
+   inputValue: undefined,
+   inputShaking: false,
+};
+
 let internalState = {};
 
 const KEY_ENTER = 13;
 
-state.currentChar = '你';
 
-function setState(key, value)
+function setState(update)
 {
-   state[key] = value;
+   for (const key in update)
+      state[key] = update[key];
    render();
 }
 
@@ -16,51 +27,76 @@ const CurrentCharacter = function({character})
 {
    return h(
       'h1',
-      { onClick: () => setState('currentChar', '我') },
+      { onClick: () => setState({currentCharacter: '我'}) },
       character
    );
 }
 
+
 function shakeInputBox()
 {
-   setState('inputShaking', true);
-   setTimeout(() => setState('inputShaking', false), 300);
+   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();
+   }
+   else {
+      setTimeout(() => setState({
+         inputValue: event.target.value
+      }), 300);
+   }
+}
+
+
+function correctAnswer()
+{
+   setState({
+      inputValue: undefined,
+      hintLevel: 0,
+   });
 }
 
 
 const App = function()
 {
-   const { currentChar, inputValue, inputShaking } = state;
+   const {
+      character, pinyin,
+      hintLevel,
+      inputValue, inputShaking
+   } = state;
+
+   console.log(inputValue);
    
    return h(
       'div', {},
       [
          h(CurrentCharacter,
-           { character: currentChar
-           }),
+           { character, }),
          
          h(InputBox,
            { value: inputValue,
-             shouldGrabFocus: true,
              shaking: inputShaking,
-             handleKeyDown: (e) =>
-             {
-                if (e.keyCode == KEY_ENTER) {
-                   console.log(inputValue);
-                }
-                else {
-                   setTimeout(() => setState('inputValue', e.target.value), 0);
-                }
-             }
+             handleKeyDown: handleInputKeyDown,
            }),
 
-         h(StyleButton,
+         h('br'),
+         h('br'),
+
+         h(HintButton,
            {
-              text: 'hello, world',
-              enabled: true,
-              handleClick: () => {
-                 console.log('hi there');
-              },
+              answer: pinyin,
+              hintLevel,
+              handleClick: () => setState({ hintLevel: hintLevel+1 }),
            }),
          ]
       );