Header/footer creation, css updates, buffer clear on mode change

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 />
+        </>
     );
 
 })

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>
+    )
+})

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>
+    )
+})

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>
     )
 })

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;

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
     }, [])
 

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
     }, [])

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);