From 60fb1ce2e63b6c311f0b7cc6fd32520fb5f79dea Mon Sep 17 00:00:00 2001
From: Gene Mecija <genemecija@outlook.com>
Date: Sat, 1 Feb 2020 01:49:21 -0800
Subject: [PATCH] Alpha/Dit buffer display overflow fade out, Info section,
 Layout updates

---
 src/App.js                           |   8 +-
 src/app-modes/PracticeMode.js        |   2 +-
 src/components/DitDahDisplay.js      |  12 +-
 src/components/Info.js               |  14 +-
 src/components/KeyTypePicker.js      |   7 +-
 src/components/MorseBufferDisplay.js |   7 +-
 src/config.json                      |   2 +-
 src/css/App.css                      | 152 ++++++++++++---------
 src/css/App.css.map                  |   2 +-
 src/hooks/useStraightKey.js          |   2 +-
 src/scss/App.scss                    | 191 +++++++++++++++++----------
 11 files changed, 251 insertions(+), 148 deletions(-)

diff --git a/src/App.js b/src/App.js
index d03e063..8271e20 100644
--- a/src/App.js
+++ b/src/App.js
@@ -39,8 +39,8 @@ export default React.memo(function App() {
                 <MorseBufferContextProvider>
                 <WordListPickerContextProvider>
                 <WordFeederContextProvider>
-                    <div id="sidebar">
-                        <Info />
+                    <div className="sidebar" id="left">
+                        <Legend />
                         <div id="mainOptions">
                             <h2>Options</h2>
                             <ModePicker />
@@ -50,7 +50,6 @@ export default React.memo(function App() {
                                 <WordListPicker />
                             }
                         </div>
-                        <Legend />
                     </div>
                     <div id="main-interface">
                         {keyType === "straight" ?
@@ -77,6 +76,9 @@ export default React.memo(function App() {
 
                         <MorseButtons />
                     </div>
+                    <div className="sidebar" id="right">
+                        <Info />
+                    </div>
                 </WordFeederContextProvider>
                 </WordListPickerContextProvider>
                 </MorseBufferContextProvider>    
diff --git a/src/app-modes/PracticeMode.js b/src/app-modes/PracticeMode.js
index b312ae2..3092242 100644
--- a/src/app-modes/PracticeMode.js
+++ b/src/app-modes/PracticeMode.js
@@ -10,7 +10,7 @@ export default (function PracticeMode(props) {
     return (
         <>
             <MorseBufferDisplay /><br/>
-            <MorseHistory />
+            <MorseHistoryTextBox />
         </>
     );
 
diff --git a/src/components/DitDahDisplay.js b/src/components/DitDahDisplay.js
index 4216902..d57cf4e 100644
--- a/src/components/DitDahDisplay.js
+++ b/src/components/DitDahDisplay.js
@@ -1,9 +1,15 @@
 import React from "react"
 
 function DitDahDisplay(props) {
-    return (
-        <div className='ditDah'>{props.dd}</div>
-    )
+    if (props.dd === ' ') {
+        return (
+            <div className='ditDah'>&nbsp;</div>
+        )
+    } else {
+        return (
+            <div className='ditDah'>{props.dd}</div>
+        )
+    }
 }
 
 export default DitDahDisplay
\ No newline at end of file
diff --git a/src/components/Info.js b/src/components/Info.js
index 27d62a4..e1bf2b6 100644
--- a/src/components/Info.js
+++ b/src/components/Info.js
@@ -5,7 +5,19 @@ export default React.memo(function Info() {
     return (
         <div id="info">
             <h2>Info</h2>
-            <p>This is my info section. It will contain information morse code, e.g. how long dits, dahs, and spacing is.</p>
+            Morse code is communication through various lengths of tones and silences.
+            <ul>
+                <h3>Dits and Dahs</h3>
+                <li><b>Dit</b> - Denoted as a dot (.), the base unit of morse code.</li>
+                <li><b>Dah</b> - Denoted as a dash (-), the length of 3 dits</li>
+                <h3>Spacing</h3>
+                <li><b>Intra-character Spacing</b> - Silence the length of 1 dit</li>
+                <li><b>Inter-character Spacing</b> - Silence the length of 3 dits</li>
+                <li><b>Inter-word Spacing</b> - Silence the length of 7 dits</li>
+            </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>
         </div>
     )
 })
\ No newline at end of file
diff --git a/src/components/KeyTypePicker.js b/src/components/KeyTypePicker.js
index e8adf0e..b63774a 100644
--- a/src/components/KeyTypePicker.js
+++ b/src/components/KeyTypePicker.js
@@ -36,14 +36,15 @@ export default React.memo(function KeyTypePicker() {
     return (
             <div id="keyType" className="mode-picker">
                 <div id="title">
-                    Keyer&nbsp;<i className="ri-question-line"></i> 
+                    Key Type
+                    {/* &nbsp;<i className="ri-question-line"></i>  */}
                 </div>
                 <div id="buttons">
                     <button id="straight" className="selected" onClick={handleClick}>
-                        Straight Keyer
+                        Straight Key
                     </button>
                     <button id="electronic" onClick={handleClick}>
-                        Electronic Keyer
+                        Electronic Key
                     </button>
                 </div>
             </div>
diff --git a/src/components/MorseBufferDisplay.js b/src/components/MorseBufferDisplay.js
index 4f92cf6..7769c98 100644
--- a/src/components/MorseBufferDisplay.js
+++ b/src/components/MorseBufferDisplay.js
@@ -29,8 +29,11 @@ export default React.memo(function MorseBufferDisplay() {
 
     return (
         <div id="morseBufferDisplay">
-            <div id="ditDahs">
-                {ditDahs}
+            <div id="overlay"></div>
+            <div id="ditDahs-container">
+                <div id="ditDahs">
+                    {ditDahs}
+                </div>
             </div>
             <div id="alphanumeric-container">
                 <div id="alphanumeric">
diff --git a/src/config.json b/src/config.json
index ab09ed6..10f6f10 100644
--- a/src/config.json
+++ b/src/config.json
@@ -8,5 +8,5 @@
         "normal": 24,
         "fast": 17
     },
-    "historySize": 7
+    "historySize": 40
 }
\ No newline at end of file
diff --git a/src/css/App.css b/src/css/App.css
index daca63b..a66818a 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -43,17 +43,34 @@ header {
   display: -ms-flexbox;
   display: flex;
   height: 95vh;
-  width: 95vw;
+  width: 100%;
   border: 1px solid red;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
-#main-content #sidebar {
+#main-content .sidebar#left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  height: 100%;
+  min-width: 400px;
+  width: 400px;
+  padding: 1.5em;
+}
+
+#main-content .sidebar#right {
   border: 1px solid green;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -62,15 +79,17 @@ header {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
   height: 100%;
-  width: 500px;
+  min-width: 500px;
+  width: 600px;
   padding: 1.5em;
+  right: 0px;
 }
 
 #main-content #main-interface {
-  border: 1px solid blue;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -81,12 +100,15 @@ header {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  width: 600px;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   height: 100%;
-  min-width: 400px;
+  min-width: 500px;
+  width: 500px;
 }
 
 h2 {
@@ -137,7 +159,7 @@ i[class*="ri-"] {
 
 #mainOptions .mode-picker #title {
   font-weight: bold;
-  font-size: 1.1em;
+  font-size: 1.08em;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -252,7 +274,7 @@ i[class*="ri-"] {
 #legend #legend-items .item {
   border: 1px solid #ccc;
   margin: 1px;
-  width: 80px;
+  width: 19%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -442,7 +464,6 @@ i[class*="ri-"] {
 }
 
 #morseBufferDisplay {
-  border: 1px solid green;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -457,48 +478,54 @@ i[class*="ri-"] {
       -ms-flex-align: center;
           align-items: center;
   width: 100%;
-  height: 150px;
+  height: 180px;
   margin-bottom: 20px;
   font-family: "Courier Prime", Courier, monospace;
+  position: relative;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+#morseBufferDisplay #overlay {
+  -webkit-box-shadow: inset 20px 0px 20px -5px #f1f1f1;
+          box-shadow: inset 20px 0px 20px -5px #f1f1f1;
+  position: absolute;
+  display: inline-block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
 }
 
 #morseBufferDisplay #alphanumeric-container {
-  background: #fdfdfd;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding-left: 5px;
-  height: 5rem;
-  padding-top: 10px;
-  width: 90%;
-  margin-bottom: 10px;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  border-radius: 3px;
+  text-align: center;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 #morseBufferDisplay #alphanumeric-container #alphanumeric {
-  font-size: 4rem;
-  background-color: transparent;
-}
-
-#morseBufferDisplay #alphanumeric-container #alphanumeric:first-child {
+  background: #fdfdfd;
+  height: 5rem;
   padding-left: 5px;
   padding-right: 5px;
+  padding-top: 0.45rem;
+  font-size: 4rem;
+  min-width: 4rem;
+  margin-bottom: 10px;
+  border-radius: 3px;
+  -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;
+  float: right;
 }
 
-#morseBufferDisplay #alphanumeric-container #alphanumeric span {
-  padding: 3px;
-  -webkit-transition: background 300ms ease-in-out;
-  transition: background 300ms ease-in-out;
+#morseBufferDisplay #ditDahs-container {
+  text-align: center;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
-#morseBufferDisplay #ditDahs {
+#morseBufferDisplay #ditDahs-container #ditDahs {
   height: 50px;
   padding-right: 5px;
   display: -webkit-box;
@@ -513,15 +540,10 @@ i[class*="ri-"] {
           justify-content: center;
   font-size: 3rem;
   font-family: "Courier", monospace;
+  float: right;
 }
 
-#morseBufferDisplay #ditDahs span {
-  padding: 3px;
-  -webkit-transition: background 100ms ease-in-out;
-  transition: background 100ms ease-in-out;
-}
-
-#morseBufferDisplay #ditDahs .ditDah {
+#morseBufferDisplay #ditDahs-container #ditDahs .ditDah {
   background: #fdfdfd;
   height: 40px;
   width: 30px !important;
@@ -651,21 +673,31 @@ i[class*="ri-"] {
 }
 
 #morseHistory-textbox {
-  border: 1px solid cyan;
+  background: #ddd;
+  border-radius: 5px;
+  height: auto;
+  width: 90%;
+  font-family: Courier;
+  font-size: 1.5rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 150px;
-  width: 75%;
-  padding: 15px;
-  font-family: Courier;
-  font-size: 1.5rem;
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 
 #morseHistory-textbox span {
-  background: #CCC;
-  margin-right: 0.7rem;
+  margin: 5px;
+  background: #fdfdfd;
   height: 1.5rem;
+  padding: 4px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border-radius: 3px;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
 }
 
 #morseHistory {
diff --git a/src/css/App.css.map b/src/css/App.css.map
index 8c14d67..4555394 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/useStraightKey.js b/src/hooks/useStraightKey.js
index e2b7edb..26a6387 100644
--- a/src/hooks/useStraightKey.js
+++ b/src/hooks/useStraightKey.js
@@ -66,7 +66,7 @@ function useStraightKey() {
                 (event.repeat)) {
                 return
             }
-            if (event.keyCode === 32) {
+            else {
                 document.getElementById('morseButton').classList.add('active')
     
                 isRunning = true
diff --git a/src/scss/App.scss b/src/scss/App.scss
index b82d0a2..46f8a00 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -51,29 +51,42 @@ header {
 #main-content {
     display: flex;
     height: 95vh;
-    width: 95vw;
+    width: 100%;
     border: 1px solid red;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
 
-    #sidebar {
+    .sidebar#left {
+        // border: 1px solid green;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        height: 100%;
+        min-width: 400px;
+        width: 400px;
+        padding: 1.5em;
+    }
+    .sidebar#right {
         border: 1px solid green;
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
+        justify-content: flex-start;
         height: 100%;
-        width: 500px;
+        min-width: 500px;
+        width: 600px;
         padding: 1.5em;
+        right: 0px;
     }
     #main-interface {
-        border: 1px solid blue;
+        // border: 1px solid blue;
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: center;
-        width: 600px;
+        justify-content: flex-start;
+        flex-grow: 1;
         height: 100%;
-        min-width: 400px;
+        min-width: 500px;
+        width: 500px;
     }
 }
 footer {
@@ -112,7 +125,7 @@ i[class*="ri-"] {
 
         #title {
             font-weight: bold;
-            font-size: 1.1em;
+            font-size: 1.08em;
             // border: 1px solid red;
             height: 100%;
             display: flex;
@@ -195,7 +208,7 @@ i[class*="ri-"] {
         .item {
             border: 1px solid #ccc;
             margin: 1px;
-            width: 80px;
+            width: 19%;
             display: flex;
 
             button {
@@ -414,81 +427,106 @@ i[class*="ri-"] {
 
 
 #morseBufferDisplay {
-    border: 1px solid green;
+    // border: 1px solid green;
     display: flex;
     justify-content: center;
     flex-direction: column-reverse;
     align-items: center;
     width: 100%;
-    height: 150px;
+    height: 180px;
     margin-bottom: 20px;
     font-family: $buffer-font;
+    position: relative;
+    padding-top: 15px;
+    padding-bottom: 15px;
     // font-weight: bold;
 
+    #overlay {
+        // background: blue;
+        box-shadow: inset 20px 0px 20px -5px $main-bg-color-light;
+        position: absolute;
+        display: inline-block;
+        top:0;
+        left:0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+
     #alphanumeric-container {
         // border-left: 2px solid #000;
-        background: #fdfdfd;
-        display: flex;
-        padding-left: 5px;
-        height: 5rem;
-        padding-top: 10px;
-        width: 90%;
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: $main-border-radius;
-        // box-shadow: $main-box-shadow-light;
+        
+        // display: flex;
+        
+        
+        // display: flex;
+        // justify-content: center;
+        // align-items: center;
         // box-shadow: $morseCard-shadow-light;
+        text-align: center;
+        max-width: 100%;
+        overflow-x: hidden;
+        // border: 1px solid red;
         
         #alphanumeric {
+            // border: 1px solid blue;
+            background: #fdfdfd;
+            height: 5rem;
+            padding-left: 5px;
+            padding-right: 5px;
+            padding-top: 0.45rem;
             font-size:  4rem;
-            background-color: transparent;
-            
-            &:first-child {
-                padding-left: 5px;
-                padding-right: 5px;
-                // box-shadow: $main-box-shadow;
-            }
-            span {
-                padding: $main-border-radius;
-                transition: background 300ms ease-in-out;
-            }
+            min-width: 4rem;
+            margin-bottom: 10px;
+            border-radius: $main-border-radius;
+            box-shadow: $main-box-shadow-light;
+            float: right;
         }
     }
+    #ditDahs-container {
+        // display: flex;
+        // justify-content: flex-start;
+        text-align: center;
+        max-width: 100%;
+        // border: 1px solid red;
+        overflow-x: hidden;
 
-    #ditDahs {
-        // width: 50%;
-        height: 50px;
-        padding-right: 5px;
-        // border-right: 2px solid #000;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        font-size: 3rem;
-        font-family: $ditDah-font;
-        // font-weight: bold;
-
-        span {
-            padding: $main-border-radius;
-            transition: background 100ms ease-in-out;
-        }
-
-        .ditDah {
-            background: #fdfdfd;
-            height: 40px;
-            width: 30px !important;
-            margin-left: 3px;
-            // box-shadow: 0px 1px 0px #000;
-            border-radius: $main-border-radius;
-            box-shadow: $main-box-shadow-dark;
+        #ditDahs {
+            height: 50px;
+            padding-right: 5px;
+            // border-right: 2px solid #000;
             display: flex;
+            flex-direction: row;
             justify-content: center;
-            align-items: center;
+            // border: 1px solid purple;
+            font-size: 3rem;
+            font-family: $ditDah-font;
+            float: right;
+            // font-weight: bold;
+    
+            // span {
+            //     padding: $main-border-radius;
+            //     transition: background 100ms ease-in-out;
+            //     width: 30px;
+            //     background: blue;
+            // }
+    
+            .ditDah {
+                background: #fdfdfd;
+                height: 40px;
+                width: 30px !important;
+                margin-left: 3px;
+                // box-shadow: 0px 1px 0px #000;
+                border-radius: $main-border-radius;
+                box-shadow: $main-box-shadow-dark;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                
+                transition: all 100ms ease-in-out;
+            }
             
-            transition: all 100ms ease-in-out;
         }
-        
     }
 }
 
@@ -584,20 +622,29 @@ i[class*="ri-"] {
 // }
 
 #morseHistory-textbox {
-    border: 1px solid cyan;
-    display: flex;
-    height: 150px;
-    width: 75%;
-    padding: 15px;
-    // background: #ddd;
+    // border: 1px solid cyan;
+    background: #ddd;
+    border-radius: 5px;
+    height: auto;
+    width: 90%;
     font-family: Courier;
     font-size: 1.5rem;
+    display: flex;
+    align-content: flex-start;
+    flex-wrap: wrap;
+
     span {
-        background: #CCC;
-        margin-right: 0.7rem;
+        margin: 5px;
+        background: #fdfdfd;
         height: 1.5rem;
+        padding: 4px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        border-radius: $main-border-radius;
+        box-shadow: $main-box-shadow-dark;
     }
 }
+
 #morseHistory {
     border: 1px solid purple;
     display: flex;