diff --git a/app/client.js b/app/client.js index f64accf..09af0b4 100644 --- a/app/client.js +++ b/app/client.js @@ -1,19 +1,19 @@ -const socket = require('./socket') +var socket = require('./socket') -socket.on('client.display', (data) => { - let exists = document.getElementById(data.key) +socket.on('client.display', function(data) { + 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) => { - let exists = document.getElementById(data.key) +socket.on('client.hide', function (data) { + 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) diff --git a/app/socket.js b/app/socket.js index 62fd4e6..0ddd2c5 100644 --- a/app/socket.js +++ b/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 diff --git a/public/client.css b/public/client.css index 67db647..b878957 100644 --- a/public/client.css +++ b/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;