From c9c1b78ed805371615d3ca8b54c86da9a35db8ce Mon Sep 17 00:00:00 2001
From: sanine-a <sanine.not@pm.me>
Date: Tue, 13 Apr 2021 11:37:51 -0500
Subject: implement basic user input and button styling

---
 App.js | 49 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 9 deletions(-)

(limited to 'App.js')

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');
+              },
+           }),
+         ]
+      );
+   }
-- 
cgit v1.2.1