implement basic user input and button styling

1 files changed, 40 insertions, 9 deletions

diff --git a/App.js b/App.js
index ebfcae3..cc436b4 100644
--- a/App.js
+++ b/App.js
@@ -1,6 +1,8 @@
 let state = {};
 let internalState = {};
 
+const KEY_ENTER = 13;
+
 state.currentChar = '你';
 
 function setState(key, value)
@@ -18,19 +20,48 @@ const CurrentCharacter = function({character})
       character
    );
 }
-   
+
+function shakeInputBox()
+{
+   setState('inputShaking', true);
+   setTimeout(() => setState('inputShaking', false), 300);
+}
+
 
 const App = function()
 {
-   const { currentChar } = state;
+   const { currentChar, inputValue, inputShaking } = state;
    
    return h(
       'div', {},
       [
-         h(
-            CurrentCharacter,
-            {character: currentChar}
-         ),
-      ]
-   );
-}
+         h(CurrentCharacter,
+           { character: currentChar
+           }),
+         
+         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);
+                }
+             }
+           }),
+
+         h(StyleButton,
+           {
+              text: 'hello, world',
+              enabled: true,
+              handleClick: () => {
+                 console.log('hi there');
+              },
+           }),
+         ]
+      );
+   }