Added onHover show enlarged emote and code

Possible fix for create-react-app RAM and CPU Drain
see kitze/custom-react-scripts#114

.env

@@ -1,13 +1,13 @@
-REACT_APP_DECORATORS = true;
-REACT_APP_BABEL_STAGE_0 = true;
+REACT_APP_DECORATORS = true
+REACT_APP_BABEL_STAGE_0 = true
 
-REACT_APP_SASS = false;
+REACT_APP_SASS = false
 REACT_APP_LESS = false
-REACT_APP_STYLUS = false;
+REACT_APP_STYLUS = false
 
-REACT_APP_CSS_MODULES = false;
-REACT_APP_SASS_MODULES = false;
-REACT_APP_STYLUS_MODULES = false;
-REACT_APP_LESS_MODULES = false;
+REACT_APP_CSS_MODULES = false
+REACT_APP_SASS_MODULES = false
+REACT_APP_STYLUS_MODULES = false
+REACT_APP_LESS_MODULES = false
 
-REACT_APP_WEBPACK_DASHBOARD = false;
+REACT_APP_WEBPACK_DASHBOARD = false

src/Chat.css

@@ -1,11 +1,32 @@
-.emote:hover .code {
-  display: block;
-  position: relative;
+.emote:hover .code-box {
+  display: flex;
+  position: absolute;
   cursor: copy;
-  top: 30;
-  z-index: 999;
+  top: -145px;
+  left: -45px;
+  bottom: 0;
 }
 
-.code {
+.code-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 135px;
+  height: 135px;
+  opacity: .95;
+  background-color: white;
   display: none;
+  color: black;
+  border: 2px black solid;
+}
+
+.enlarge-emote {
+  height: 75%;
+  border-bottom: 3px black solid;
+}
+
+.code {
+  font-size: 20px;
+  font-weight: 'bold'
 }

src/components/Chat.js

@@ -160,34 +160,40 @@ class Chat extends Component {
 
     let parseForEmotes = (message, channel) => {
       let split_message = message.split(' ')
+
+      let html = (emote, code) => {
+        return `
+        <div class='emote' style='display: inline-block; position: relative'>
+          <div class='code-box'>
+            <div class='enlarge-emote'><img height='100%' alt='emote' src=${emote} /></div>
+            <div class='code'>${code}</div>
+          </div>
+        <img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${emote} />
+        </div>
+        `
+      }
+
       for (let i in split_message) {
         const code = split_message[i]
         if (twitch_emotes_map.has(code)) {
-          split_message[i] = `
-          <div class='emote' style='display: inline-block;'>
-          <span class='code'>${code}</span>
-          <img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${twitch_emotes_map.get(code)} />
-          </div>
-          `
+          // Check accompanying css file for more information on the classes
+          split_message[i] = html(twitch_emotes_map.get(code), code)
         }
         if (bttv_emotes_map.has(code)) {
-          split_message[i] = `<img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${bttv_emotes_map.get(code)} />`
+          split_message[i] = html(bttv_emotes_map.get(code), code)
         }
         if (ffz_emotes_map.has(channel)) {
-          // console.log(ffz_emotes_map)
           if (ffz_emotes_map.get(channel).has(code)) {
-            split_message[i] = `<img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${ffz_emotes_map.get(channel).get(code)} />`
+            split_message[i] = html(ffz_emotes_map.get(channel).get(code), code)
           }
         }
         if (bttv_user_emotes_map.has(channel)) {
           if (bttv_user_emotes_map.get(channel).has(code)) {
-            split_message[i] = `<img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${bttv_user_emotes_map.get(channel).get(code)} />`
+            split_message[i] = html(bttv_user_emotes_map.get(channel).get(code), code)
           }
         }
       }
 
-      console.log(split_message)
-
       return ReactHtmlParser(split_message.join(' '));
     }
 
@@ -259,6 +265,8 @@ class Chat extends Component {
         const newMessage = processMessage(channel, msg, key, 0.75)
         store.messages.push(newMessage)
       }
+
+      this.forceUpdate()
     }
 
   }