From ad2e991545f37f3659f40d30c709133b4055bb9e Mon Sep 17 00:00:00 2001
From: sanine-a <sanine.not@pm.me>
Date: Tue, 13 Apr 2021 12:33:23 -0500
Subject: create hint button

---
 App.js         | 88 +++++++++++++++++++++++++++++++++++++++++-----------------
 HintButton.js  | 37 ++++++++++++++++++++++++
 InputBox.js    |  1 +
 StyleButton.js |  3 +-
 index.html     |  1 +
 style.css      | 11 ++++----
 6 files changed, 108 insertions(+), 33 deletions(-)
 create mode 100644 HintButton.js

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 }),
            }),
          ]
       );
diff --git a/HintButton.js b/HintButton.js
new file mode 100644
index 0000000..4e081fc
--- /dev/null
+++ b/HintButton.js
@@ -0,0 +1,37 @@
+function getHint(answer, level)
+{
+   const defaultText = 'Reveal Hint';
+   
+   if (level === 0)
+      return defaultText;
+
+   if (level > 3 || level >= answer.length)
+      return answer;
+
+   let hint = '';
+   for (let i=0; i<answer.length; i++)
+      hint += i >= level ? '*' : answer[i];
+
+   // pad so that button size doesn't change
+   while (hint.length < defaultText.length)
+      hint = ` ${hint} `;
+   
+   return hint;
+}
+   
+
+function HintButton({ answer, hintLevel, handleClick })
+{
+   const hint = getHint(answer, hintLevel);
+   
+   return h(
+      StyleButton,
+      { text: hint,
+        style: {
+           'min-width': '100px',
+        },
+        enabled: true,
+        handleClick,
+      }
+   );
+}
diff --git a/InputBox.js b/InputBox.js
index 61158e0..4f2ff97 100644
--- a/InputBox.js
+++ b/InputBox.js
@@ -10,6 +10,7 @@ function InputBox(props)
    return h(
       `input${className}`,
       {
+         id: 'pinyin-input',
          type: 'text',
          value: props.value,
          onKeyDown: handleKeyDown,
diff --git a/StyleButton.js b/StyleButton.js
index 806ece6..5fd79c8 100644
--- a/StyleButton.js
+++ b/StyleButton.js
@@ -1,6 +1,6 @@
 function StyleButton(props)
 {
-   const { enabled, handleClick } = props;
+   const { enabled, handleClick, style } = props;
    
    const className = enabled ? 'StyleButtonEnabled' : 'StyleButtonDisabled';
    
@@ -8,6 +8,7 @@ function StyleButton(props)
    return h(
       `div.unselectable.StyleButton.${className}`,
       {
+         style,
          onClick: handleClick,
       },
       props.text
diff --git a/index.html b/index.html
index bfe29d4..fda37de 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
     <script src="./characters.js"></script>
     <script src="./InputBox.js"></script>
     <script src="./StyleButton.js"></script>
+    <script src="./HintButton.js"></script>
     <script src="./App.js"></script>
     
     <!-- styling -->
diff --git a/style.css b/style.css
index d9873ad..01a0e3b 100644
--- a/style.css
+++ b/style.css
@@ -57,24 +57,23 @@ body {
     border-radius: 8px;
     border-style: solid;
     border-width: 2px;
-    display: inline;
+    display: inline-block;
 }
 
 
 .StyleButtonEnabled
 {
-    color: white;
-    background-color: #2af;
+    border-color: #2af;
 }
 
 .StyleButtonEnabled:hover
 {
-    background-color: #6af;
+    background-color: #eee;
 }
 
 
 .StyleButtonDisabled
 {
-    color: white;
-    background-color: #444;
+    color: #444;
+    border-color: #444;
 }
-- 
cgit v1.2.1