From b3a3c918dc691749035eac4cfd14dd50481f8af4 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Wed, 8 May 2019 17:13:23 -0600
Subject: [PATCH] Add floating messaging system

---
 index.html               | 12 +++++++-----
 src/index.js             |  5 +++--
 src/js/utilities.js      | 18 +++++++++++++++++-
 src/scss/_structure.scss | 30 ++++++++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index f765bb3..7b47525 100644
--- a/index.html
+++ b/index.html
@@ -152,11 +152,11 @@
           <label>Theme
             <select disabled>
               <option selected value="default">Default</option>
-              <option selected value="dark">Dark</option>
-              <option selected value="light">Light</option>
-              <option selected value="blue">Blue</option>
-              <option selected value="green">Green</option>
-              <option selected value="royal">Royal</option>
+              <option value="dark">Dark</option>
+              <option value="light">Light</option>
+              <option value="blue">Blue</option>
+              <option value="green">Green</option>
+              <option value="royal">Royal</option>
             </select>
           </label>
         </form>
@@ -303,5 +303,7 @@
       </footer>
     </div>
   </section>
+
+  <div id="messagingSection"></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 10ab518..836e5eb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,15 +2,16 @@ import './main.scss';
 
 import setupListeners from './js/setupListeners';
 import { renderAll } from './js/render';
-import { generateRandomWords } from './js/utilities';
+import { generateRandomWords, addMessage } from './js/utilities';
 import { loadDictionary } from './js/dictionaryManagement';
 
 function initialize() {
-  console.log('initializing');
+  addMessage('Loading!');
   loadDictionary();
   // generateRandomWords(100);
   setupListeners();
   renderAll();
+  addMessage('Done Loading!');
   // console.log('Rendered!');
 }
 
diff --git a/src/js/utilities.js b/src/js/utilities.js
index 7f4eb91..80102ac 100644
--- a/src/js/utilities.js
+++ b/src/js/utilities.js
@@ -1,4 +1,3 @@
-import { cloneObject } from '../helpers';
 import { addWord } from './wordManagement';
 
 export function getNextId() {
@@ -131,3 +130,20 @@ export function generateRandomWords(numberOfWords) {
   });
   console.log('done');
 }
+
+export function addMessage(messageText, time = 5000) {
+  const messagingSection = document.getElementById('messagingSection');
+  const element = document.createElement('div');
+  element.classList.add('message');
+  element.innerHTML = '<a class="close-button">&times;&#xFE0E;</a>' + messageText;
+  messagingSection.appendChild(element);
+
+  const closeButton = element.querySelector('.close-button');
+  const closeMessage = () => {
+    closeButton.removeEventListener('click', closeMessage);
+    messagingSection.removeChild(element);
+  };
+  closeButton.addEventListener('click', closeMessage);
+
+  setTimeout(closeMessage, time);
+}
diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss
index b752755..f3c500c 100644
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@@ -266,6 +266,36 @@
   }
 }
 
+#messagingSection {
+  position: fixed;
+  bottom: $general-padding;
+  right: $general-padding;
+  max-width: 250px;
+
+  .message {
+    position: relative;
+    display: block;
+    padding: $general-padding ($general-padding * 2) $general-padding $general-padding;
+    background-color: $light;
+    border: $border;
+    border-radius: 5px;
+    margin-bottom: 5px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .close-button {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      font-size: 25px;
+      line-height: 10px;
+      cursor: pointer;
+    }
+  }
+}
+
 #bottom {
   text-align: center;