setInterval cleanup, button bug fixes, history size reduction

src/App.js

@@ -40,16 +40,7 @@ export default React.memo(function App() {
                 <WordListPickerContextProvider>
                 <WordFeederContextProvider>
                     <div className="sidebar" id="left">
-                        <Legend />
-                        <div id="mainOptions">
-                            <h2>Options</h2>
-                            <ModePicker />
-                            <KeyTypePicker />
-                            <WordsPerMinute />
-                            {gameMode === 'challenge' &&
-                                <WordListPicker />
-                            }
-                        </div>
+                        <Info />
                     </div>
                     <div id="main-interface">
                         {keyType === "straight" ?
@@ -77,7 +68,16 @@ export default React.memo(function App() {
                         <MorseButtons />
                     </div>
                     <div className="sidebar" id="right">
-                        <Info />
+                        <div id="mainOptions">
+                            <h2>Options</h2>
+                            <ModePicker />
+                            <KeyTypePicker />
+                            <WordsPerMinute />
+                            {gameMode === 'challenge' &&
+                                <WordListPicker />
+                            }
+                        </div>
+                        <Legend />
                     </div>
                 </WordFeederContextProvider>
                 </WordListPickerContextProvider>

src/components/Info.js

@@ -5,7 +5,7 @@ export default React.memo(function Info() {
     return (
         <div id="info">
             <h2>Info</h2>
-            Morse code is communication through various lengths of tones and silences.
+            <p>Morse code is a method of communication via tones and silences of various lengths.</p>
             <ul>
                 <h3>Dits and Dahs</h3>
                 <li><b>Dit</b> - Denoted as a dot (.), the base unit of morse code.</li>
@@ -17,7 +17,7 @@ export default React.memo(function Info() {
             </ul>
 
             <h3>Telegraph Key Types</h3>
-            <p>The instrument used to send morse code is called the key. <b>Straight Keys</b> use a single button and generates tones whe pressed down. Straight keys require greater accuracy as you control the dits, dahs, and spacing. <b>Electronic Keys</b> can have two paddles that automatically generate either dits or dahs of appropriate length when pressed.</p>
+            <p>The instrument used to send morse code is called the key. <b>Straight Keys</b> use a single button and generates tones when pressed down. Straight keys require greater accuracy as you control the dits, dahs, and spacing manually. <b>Electronic Keys</b> automatically generate dits or dahs of appropriate length. The Electronic Keyer used here is an Iambic keyer. It uses two paddles, one for dits, one for dahs. Switch between the two at the appropriate times to build letters.</p>
         </div>
     )
 })

src/components/MorseHistory_textbox.js

@@ -12,7 +12,7 @@ export default (function MorseHistoryTextBox() {
 
     console.log('morseWords', morseWords);
 
-    morseWords.forEach((word) => {
+    morseWords.forEach((word, index) => {
         if (word.includes(' ')) {
             let newWord = ''
             word.split(' ').forEach(letter => {
@@ -25,14 +25,14 @@ export default (function MorseHistoryTextBox() {
                 }
             })
             // text = newWord + ' ' + text
-            span.splice(0, 0, <span>{newWord}</span>)
+            span.splice(0, 0, <span key={index}>{newWord}</span>)
         }
         else if (morseCode[word] === undefined) {
             // text = '[?] ' + text
-            span.splice(0, 0, <span>[?]</span>)
+            span.splice(0, 0, <span key={index}>[?]</span>)
         } else {
             // text =  morseCode[word].toUpperCase() + ' ' + text
-            span.splice(0, 0, <span>{morseCode[word].toUpperCase()}</span>)
+            span.splice(0, 0, <span key={index}>{morseCode[word].toUpperCase()}</span>)
         }
     })
 

src/config.json

@@ -8,5 +8,5 @@
         "normal": 24,
         "fast": 17
     },
-    "historySize": 40
+    "historySize": 10
 }

src/css/App.css

@@ -54,6 +54,7 @@ header {
 }
 
 #main-content .sidebar#left {
+  border: 1px solid yellowgreen;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -79,12 +80,12 @@ header {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   height: 100%;
   min-width: 500px;
-  width: 600px;
+  width: 400px;
   padding: 1.5em;
   right: 0px;
 }
@@ -307,7 +308,7 @@ i[class*="ri-"] {
 
 #morseButton {
   width: 400px;
-  height: 55px;
+  height: 60px;
   margin-top: 30px;
   margin-bottom: 10px;
   border-radius: 5px;
@@ -341,7 +342,7 @@ i[class*="ri-"] {
   font-size: 1rem;
   color: transparent;
   width: 200px;
-  height: 55px;
+  height: 60px;
   background: #f4f4f4;
   margin: 0px;
   border: 0px;
@@ -355,8 +356,8 @@ i[class*="ri-"] {
   color: #888;
   font-size: 1rem;
   font-weight: bold;
-  width: 60px;
-  height: 55px;
+  width: calc($button-height+5px);
+  height: 60px;
   -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
           box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
 }
@@ -395,7 +396,7 @@ i[class*="ri-"] {
 
 #morseButtonText {
   font-weight: bold;
-  color: #bbb;
+  color: #aaa;
   font-size: 0.7rem;
   margin-bottom: 40px;
 }

src/hooks/useElectronicKey.js

@@ -7,7 +7,7 @@ import { GameModeContext } from '../contexts/gameModeContext'
 // ELECTRONIC KEY TELEGRAPH - Iambic A
 
 function useElectronicKey() {
-
+    console.log('useElectronicKey');
     const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext)
     const {wpm} = useContext(WPMContext)
     const {gameMode} = useContext(GameModeContext)
@@ -242,7 +242,7 @@ function useElectronicKey() {
         if (event.repeat) { return }
 
         if (event.keyCode === 188 || event.target.id === "left") {
-            document.getElementById('left').classList.add('active')
+            document.querySelector('.paddle#left').classList.add('active')
             
             leftIsPressed = true
             if (!rightIsPressed) { pressedFirst = 'left'}
@@ -253,7 +253,7 @@ function useElectronicKey() {
             }
         }
         else if (event.keyCode === 190 || event.target.id === "right") {
-            document.getElementById('right').classList.add('active')
+            document.querySelector('.paddle#right').classList.add('active')
 
             rightIsPressed = true
             if (!leftIsPressed) { pressedFirst = 'right'}
@@ -271,7 +271,7 @@ function useElectronicKey() {
         // if (!insideBufferDisplay) {return}
 
         if (event.keyCode === 188 || event.target.id === "left") {
-            document.getElementById('left').classList.remove('active')
+            document.querySelector('.paddle#left').classList.remove('active')
 
             leftIsPressed = false
             
@@ -281,7 +281,7 @@ function useElectronicKey() {
             else { stopDepressSyncTimer() }
         }
         if (event.keyCode === 190 || event.target.id === "right") {
-            document.getElementById('right').classList.remove('active')
+            document.querySelector('.paddle#right').classList.remove('active')
 
             rightIsPressed = false
             if (pressedFirst === 'right') { pressedFirst = null }
@@ -355,6 +355,9 @@ function useElectronicKey() {
                 paddle.removeEventListener('mouseup', handleInputEnd)
                 paddle.removeEventListener('touchend', handleInputEnd)
             })
+
+            clearInterval(depressSyncTimer)
+            clearInterval(gapTimer)
             // clearHistory()
         }
         // eslint-disable-next-line

src/hooks/useStraightKey.js

@@ -6,7 +6,7 @@ import { GameModeContext } from '../contexts/gameModeContext'
 
 // STRAIGHT KEY TELEGRAPH
 function useStraightKey() {
-    
+    console.log('useStraightKey');
     const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext)
     const {wpm} = useContext(WPMContext)
     const {gameMode} = useContext(GameModeContext)
@@ -206,6 +206,9 @@ function useStraightKey() {
                 paddle.removeEventListener('mouseup', handleInputEnd)
                 paddle.removeEventListener('touchend', handleInputEnd)
             })
+
+            clearInterval(charTimer)
+            clearInterval(gapTimer)
             // clearHistory()
         }
         // eslint-disable-next-line

src/scss/App.scss

@@ -57,7 +57,7 @@ header {
     align-items: center;
 
     .sidebar#left {
-        // border: 1px solid green;
+        border: 1px solid yellowgreen;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
@@ -70,10 +70,10 @@ header {
         border: 1px solid green;
         display: flex;
         flex-direction: column;
-        justify-content: flex-start;
+        justify-content: space-between;
         height: 100%;
         min-width: 500px;
-        width: 600px;
+        width: 400px;
         padding: 1.5em;
         right: 0px;
     }
@@ -232,9 +232,10 @@ i[class*="ri-"] {
     }
 }
 
+$button-height: 60px;
 #morseButton {
     width: 400px;
-    height: 55px;
+    height: $button-height;
     margin-top: 30px;
     margin-bottom: 10px;
     border-radius: 5px;
@@ -258,7 +259,7 @@ i[class*="ri-"] {
         font-size: 1rem;
         color: transparent;
         width: 200px;
-        height: 55px;
+        height: $button-height;
         // background: yellow;
         background: #f4f4f4;
         margin: 0px;
@@ -270,8 +271,8 @@ i[class*="ri-"] {
             color: #888;
             font-size: 1rem;
             font-weight: bold;
-            width: 60px;
-            height: 55px;
+            width: calc($button-height+5px);
+            height: $button-height;
             box-shadow: $main-box-shadow-light;
         }
         &#left {
@@ -302,7 +303,7 @@ i[class*="ri-"] {
 }
 #morseButtonText {
     font-weight: bold;
-    color: #bbb;
+    color: #aaa;
     font-size: 0.7rem;
     margin-bottom: 40px;
 }