From 90c9318bb4a03a908531a0eef892286a97f12b37 Mon Sep 17 00:00:00 2001
From: Gene Mecija <genemecija@outlook.com>
Date: Wed, 22 Jan 2020 00:39:05 -0800
Subject: [PATCH] Header/footer creation, css updates, buffer clear on mode
 change

---
 src/App.js                     | 74 +++++++++++++++--------------
 src/components/Footer.js       | 13 +++++
 src/components/Header.js       | 13 +++++
 src/components/MorseButtons.js |  4 +-
 src/css/App.css                | 87 ++++++++++++++++++++--------------
 src/css/App.css.map            |  2 +-
 src/hooks/useElectronicKey.js  |  5 ++
 src/hooks/useStraightKey.js    |  2 +-
 src/scss/App.scss              | 87 ++++++++++++++++++++--------------
 9 files changed, 176 insertions(+), 111 deletions(-)
 create mode 100644 src/components/Footer.js
 create mode 100644 src/components/Header.js

diff --git a/src/App.js b/src/App.js
index 2cfba9f..d830a02 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,19 +11,20 @@ import ModePicker from './components/ModePicker'
 import KeyTypePicker from './components/KeyTypePicker'
 import WordListPicker from './components/WordListPicker';
 
-import Legend from './components/Legend';
-// import GameClock from "./components/GameClock"
-import MorseButtons from './components/MorseButtons'
-
 import PracticeMode from './app-modes/PracticeMode';
 import TimedMode from './app-modes/TimedMode'
 import ChallengeMode from './app-modes/ChallengeMode'
 
+import Header from './components/Header';
+import Legend from './components/Legend';
+// import GameClock from "./components/GameClock"
+import MorseButtons from './components/MorseButtons'
 import MorseBufferDisplay from './components/MorseBufferDisplay'
 import MorseHistory from './components/MorseHistory'
 
 import StraightKey from './components/StraightKey';
 import ElectronicKey from './components/ElectronicKey';
+import Footer from './components/Footer';
 
 export default React.memo(function App() {
 
@@ -33,37 +34,40 @@ export default React.memo(function App() {
     const {keyType} = useContext(KeyTypeContext)
 
     return (
-        <div id='main-content'>
-            <Legend />
-            <MorseBufferContextProvider>
-                <ModePicker />
-                <KeyTypePicker />
-                {gameMode === 'practice' &&
-                    <>
-                        {keyType === "straight" ?
-                            <StraightKey gameMode='practice' /> : <ElectronicKey gameMode='practice' />}
-                        <PracticeMode /><br/>
-                        <MorseBufferDisplay /><br/>
-                        <MorseHistory /><br/>
-                    </>
-                }
-                {/* {gameMode === 'timed' && <TimedMode />} */}
-                {gameMode === 'challenge' &&
-                    <>
-                        <WordListPickerContextProvider>
-                            <WordFeederContextProvider>
-                                <WordListPicker />
-                                {keyType === "straight" ?
-                                    <StraightKey gameMode='challenge' /> : <ElectronicKey gameMode='challenge' />}
-                                <ChallengeMode />
-                            </WordFeederContextProvider>
-                        </WordListPickerContextProvider>
-                    </>
-                }
-                <MorseButtons />
-            </MorseBufferContextProvider>
-            
-        </div>
+        <>
+            <Header />
+            <div id='main-content'>
+                <Legend />
+                <MorseBufferContextProvider>
+                    <ModePicker />
+                    <KeyTypePicker />
+                    {gameMode === 'practice' &&
+                        <>
+                            {keyType === "straight" ?
+                                <StraightKey gameMode='practice' /> : <ElectronicKey gameMode='practice' />}
+                            <PracticeMode /><br/>
+                            <MorseBufferDisplay /><br/>
+                            <MorseHistory /><br/>
+                        </>
+                    }
+                    {/* {gameMode === 'timed' && <TimedMode />} */}
+                    {gameMode === 'challenge' &&
+                        <>
+                            <WordListPickerContextProvider>
+                                <WordFeederContextProvider>
+                                    <WordListPicker />
+                                    {keyType === "straight" ?
+                                        <StraightKey gameMode='challenge' /> : <ElectronicKey gameMode='challenge' />}
+                                    <ChallengeMode />
+                                </WordFeederContextProvider>
+                            </WordListPickerContextProvider>
+                        </>
+                    }
+                    <MorseButtons />
+                </MorseBufferContextProvider>    
+            </div>
+        <Footer />
+        </>
     );
 
 })
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..b1b420b
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from "react"
+
+export default (function Footer() {
+
+    function handleClick(e) {
+        e.preventDefault()
+  
+    }
+
+    return (
+            <footer>Created by Gene Mecija • GitHub • Twitter</footer>
+    )
+})
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..75ef0b3
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,13 @@
+import React from "react"
+
+export default (function Header () {
+
+    function handleClick(e) {
+        e.preventDefault()
+  
+    }
+
+    return (
+            <header>Learn Morse Code</header>
+    )
+})
\ No newline at end of file
diff --git a/src/components/MorseButtons.js b/src/components/MorseButtons.js
index 109a929..c0468eb 100644
--- a/src/components/MorseButtons.js
+++ b/src/components/MorseButtons.js
@@ -3,8 +3,8 @@ import React from "react"
 export default React.memo(function MorseButtons() {
     return (
         <div id="morseButton">
-            <button className="paddle" id="left"></button>
-            <button className="paddle" id="right"></button>
+            <button className="paddle" id="left">DIT</button>
+            <button className="paddle" id="right">DAH</button>
         </div>
     )
 })
\ No newline at end of file
diff --git a/src/css/App.css b/src/css/App.css
index 8336dd9..cb697aa 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -1,10 +1,13 @@
-html, body {
-  margin: 0px;
-  padding: 0px;
-  height: 100%;
-  width: 100%;
+* {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
   background: #444;
 }
 
@@ -13,13 +16,31 @@ html, body {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   width: 100%;
+  border: 3px solid green;
+}
+
+header {
+  margin-top: 100px;
+}
+
+#main-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 95vw;
+  border: 1px solid red;
 }
 
 .mode-picker {
@@ -74,18 +95,6 @@ html, body {
   margin: 4px;
 }
 
-#main-content {
-  width: 95vw;
-  border: 1px solid red;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-}
-
 #morseButton {
   width: 100px;
   height: 100px;
@@ -114,7 +123,8 @@ html, body {
 }
 
 .paddle {
-  font-size: 60px;
+  font-size: 1rem;
+  color: transparent;
   width: 100px;
   height: 100px;
   background: goldenrod;
@@ -125,24 +135,29 @@ html, body {
 }
 
 .paddle#left {
-  border-radius: 20% 0 0 20%;
-}
-
-.paddle#right {
-  border-radius: 0 20% 20% 0;
-}
-
-.paddle.showPaddles {
-  width: 250px;
-  height: 100px;
+  border-radius: 50px 0 0 50px;
 }
 
 .paddle#left.showPaddles {
   margin-right: 7px;
+  border-radius: 20px 0 0 20px;
+}
+
+.paddle#right {
+  border-radius: 0 50px 50px 0;
 }
 
 .paddle#right.showPaddles {
   margin-left: 7px;
+  border-radius: 0 20px 20px 0;
+}
+
+.paddle.showPaddles {
+  color: #000;
+  font-size: 2.5rem;
+  font-weight: bold;
+  width: 250px;
+  height: 100px;
 }
 
 #challengeWord {
@@ -186,11 +201,6 @@ html, body {
   background: rgba(0, 200, 0, 0.7);
 }
 
-.strike {
-  text-decoration: line-through;
-  opacity: 30%;
-}
-
 #morseBufferDisplay, #challengeBufferDisplay {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -287,6 +297,11 @@ html, body {
   font-size: 20px;
 }
 
+.strike {
+  text-decoration: line-through;
+  opacity: 30%;
+}
+
 .morseError {
   background: rgba(255, 0, 0, 0.4);
   color: #780000;
diff --git a/src/css/App.css.map b/src/css/App.css.map
index d855eb6..9b59618 100644
--- a/src/css/App.css.map
+++ b/src/css/App.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "../scss/App.scss"
     ],
diff --git a/src/hooks/useElectronicKey.js b/src/hooks/useElectronicKey.js
index 6a956dc..b62e1dd 100644
--- a/src/hooks/useElectronicKey.js
+++ b/src/hooks/useElectronicKey.js
@@ -105,6 +105,10 @@ function useElectronicKey(gameMode) {
         })
     }
 
+    function clearHistory() {
+        setMorseWords([])
+    }
+
     function stopToneTimer() {
         clearInterval(toneTimer)
         end = toneTime
@@ -339,6 +343,7 @@ function useElectronicKey(gameMode) {
                 paddle.removeEventListener('touchend', handleInputEnd)
             })
         }
+        clearHistory()
         // eslint-disable-next-line
     }, [])
 
diff --git a/src/hooks/useStraightKey.js b/src/hooks/useStraightKey.js
index 88e748f..1f145ba 100644
--- a/src/hooks/useStraightKey.js
+++ b/src/hooks/useStraightKey.js
@@ -178,7 +178,7 @@ function useStraightKey(gameMode) {
                 paddle.removeEventListener('mouseup', handleInputEnd)
                 paddle.removeEventListener('touchend', handleInputEnd)
             })
-            // clearHistory()
+            clearHistory()
         }
         // eslint-disable-next-line
     }, [])
diff --git a/src/scss/App.scss b/src/scss/App.scss
index 97e6df8..e9750a6 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -3,23 +3,39 @@ $main-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
 $main-border-radius: 0px;
 $border-radius-neumorphic: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
 $border-radius-neumorphic-active: 0 15px 20px rgba(0, 0, 0, 0.015), inset 0px -2px 5px rgb(255, 255, 255), inset 0px 2px 5px rgba(0, 0, 0, 0.15);
-
-html, body {
+* {
+    box-sizing: border-box;
     margin: 0px;
-    padding: 0px;
+    padding: 0px
+}
+html, body {
     height: 100%;
     width: 100%;
-    box-sizing: border-box;
     // background: $main-bg-color;
     background: #444;
 }
 #root {
     height: 100%;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    // justify-content: center;
     align-items: center;
     width: 100%;
+    border: 3px solid green;
 }
+header {
+    margin-top: 100px;
+}
+#main-content {
+    display: flex;
+    flex-direction: column;
+    width: 95vw;
+    border: 1px solid red;
+}
+footer {
+
+}
+
 .mode-picker {
     display: flex;
     align-self: center;
@@ -57,13 +73,6 @@ html, body {
 
 }
 
-#main-content {
-    width: 95vw;
-    border: 1px solid red;
-    display: flex;
-    flex-direction: column;
-}
-
 #morseButton {
     width: 100px;
     height: 100px;
@@ -83,29 +92,38 @@ html, body {
 }
 
 .paddle {
-    font-size: 60px;
+    font-size: 1rem;
+    color: transparent;
     width: 100px;
     height: 100px;
     background: goldenrod;
     margin: 0px;
     border: 0px;
     transition: all 500ms ease-in-out;
-}
-.paddle#left {
-    border-radius: 20% 0 0 20%;
-}
-.paddle#right {
-    border-radius: 0 20% 20% 0;
-}
-.paddle.showPaddles {
-    width: 250px;
-    height: 100px;
-}
-.paddle#left.showPaddles{
-    margin-right: 7px;
-}
-.paddle#right.showPaddles{
-    margin-left: 7px;
+
+    &#left {
+        border-radius: 50px 0 0 50px;
+        
+        &.showPaddles{
+            margin-right: 7px;
+            border-radius: 20px 0 0 20px;
+        }
+    }
+    &#right {
+        border-radius: 0 50px 50px 0;
+
+        &.showPaddles{
+            margin-left: 7px;
+            border-radius: 0 20px 20px 0;
+        }
+    }
+    &.showPaddles {
+        color: #000;
+        font-size: 2.5rem;
+        font-weight: bold;
+        width: 250px;
+        height: 100px;
+    }
 }
     
 #challengeWord {
@@ -138,14 +156,7 @@ html, body {
     }
 }
 
-// #challengeWord.green {
-//     background: green;
-// }
 
-.strike {
-    text-decoration: line-through;
-    opacity: 30%;
-}
 
 #morseBufferDisplay, #challengeBufferDisplay {
     display: flex;
@@ -219,6 +230,10 @@ html, body {
 .space {
     font-size: 20px;
 }
+.strike {
+    text-decoration: line-through;
+    opacity: 30%;
+}
 .morseError {
     background: rgba(255,0,0,0.4);
     color: rgb(120, 0, 0);