client: Make it backwards compatible and fix master styling

app/client.js

@@ -1,19 +1,19 @@
-const socket = require('./socket')
+var socket = require('./socket')
 
-socket.on('client.display', (data) => {
+socket.on('client.display', function(data) {
-  let exists = document.getElementById(data.key)
+  var exists = document.getElementById(data.key)
 
   if (exists) {
     exists.tag.remove()
     exists.remove()
   }
 
-  let element = document.createElement('div')
+  var element = document.createElement('div')
   element.innerHTML = data.html
   element.id = data.key
   element.classList.add('root-element')
 
-  let styleElement = document.createElement('style')
+  var styleElement = document.createElement('style')
   styleElement.setAttribute('type', 'text/css')
   styleElement.innerHTML = data.css
 
@@ -22,18 +22,18 @@ socket.on('client.display', (data) => {
   document.body.appendChild(element)
   document.head.appendChild(styleElement)
 
-  window.setTimeout(() => {
+  window.setTimeout(function (){
     element.classList.add('root-element-display')
   }, 50)
 })
 
-socket.on('client.hide', (data) => {
+socket.on('client.hide', function (data) {
-  let exists = document.getElementById(data.key)
+  var exists = document.getElementById(data.key)
 
   if (exists) {
     exists.classList.remove('root-element-display')
 
-    window.setTimeout(() => {
+    window.setTimeout(function () {
       exists.tag.remove()
       exists.remove()
     }, 1500)

app/socket.js

@@ -1,5 +1,5 @@
-const io = require('socket.io-client')
+var io = require('socket.io-client')
 
-const socket = io()
+var socket = io()
 
 module.exports = socket

public/client.css

@@ -1,3 +1,27 @@
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing:border-box;                      /* This sets all elements to be the actual set dimensions, disregarding padding and borders */
+ /* -webkit-backface-visibility: hidden;        /* Hide the backface of elements - useful for 3d effects */
+  -webkit-transition: translate3d(0,0,0);     /* Turns on hardware acceleration - not known to be of benefit in CCG, but won't hurt */
+}
+html, body {
+  width:1920px;                                            /* Set to your channel's resolution */
+  height:1080px;                                           /* Set to your channel's resolution */
+  margin:0;                                                /* Use all available space */
+  padding:0;                                               /* Use all available space */
+  background:transparent;                                  /* The HTML consumer actually makes your background transparent by default, unless a color or image is specified - but this might be usefull when debugging in browsers */
+  overflow:hidden;                                         /* Hide any overflowing elements - to disable scollbars */
+  -webkit-font-smoothing:antialiased !important;           /* Set aliasing of fonts - possible options: none, antialiased,  subpixel-antialiased */
+}
+body {
+  font-family: Calibri,Arial;
+  font-size: 40px;
+  color: #FFFFFF;
+  -webkit-text-stroke-width: 0.5px;
+  -webkit-text-stroke-color: #888888;
+  text-shadow: 2px 2px 1px #000000;
+}
+
 .root-element {
   opacity: 0;
   transition: opacity 1s;