Add Custom Overlay Color Editor

package.json

@@ -15,6 +15,7 @@
   "author": "Brian Clark",
   "license": "MIT",
   "dependencies": {
+    "body-parser": "^1.18.3",
     "discord.js": "^11.3.2",
     "dotenv": "^5.0.1",
     "es6-promise": "^4.2.5",

src/files.ts

@@ -0,0 +1,21 @@
+import { appendFile, existsSync, writeFile } from 'fs';
+import { resolve as resolvePath } from 'path';
+
+const FILE_NAME = resolvePath(__dirname, '../src/assets/custom-styles.css');
+
+export function write(data: any) {
+  if (existsSync(FILE_NAME)) {
+    return new Promise((resolve, reject) => {
+      appendFile(FILE_NAME, data, (err: any) => {
+        if (err) reject(err);
+        resolve(data);
+      });
+    });
+  }
+  return new Promise((resolve, reject) => {
+    writeFile(FILE_NAME, data, (err: any) => {
+      if (err) reject(err);
+      resolve(data);
+    });
+  });
+}

src/routes/save-css.ts

@@ -0,0 +1,21 @@
+import express from 'express';
+import * as files from '../files';
+
+export const saveCssRoute = (req: express.Request, res: express.Response) => {
+  const captains = console;
+  captains.log(req.body);
+  const { colorName, hueRotateDeg } = req.body;
+  const data = formatForCSS(colorName, hueRotateDeg);
+  files
+    .write(data)
+    .then((result: any) => {
+      res.send({ message: 'Saved' });
+    })
+    .catch((error: any) => {
+      res.status(500).send(error);
+    });
+};
+
+function formatForCSS(colorName: string, hueRotateDeg: string) {
+  return `.${colorName} {\n  filter: hue-rotate(${hueRotateDeg}deg);\n}\n`;
+}

src/scripts/overlay-colors.js

@@ -1,17 +1,50 @@
 $(document).ready(() => {
-  let hueValue = 0;
+  const captains = console;
   $('#get-overlay').click(() => {
     const url = $('#overlay-url').val();
     $('#overlay-frame').attr('src', url);
   });
 
   $('#increase-hue').click(() => {
-    hueValue = hueValue < 361 ? (hueValue += 1) : 360;
-    $('#container').css('filter', `hue-rotate(${hueValue}deg)`);
+    let currentHueValue = $('#rotation').val();
+    const hueValue = currentHueValue < 361 ? (currentHueValue += 1) : 360;
+    applyHue(hueValue);
   });
 
   $('#decrease-hue').click(() => {
-    hueValue = hueValue > 0 ? (hueValue -= 1) : 0;
-    $('#container').css('filter', `hue-rotate(${hueValue}deg)`);
+    let currentHueValue = $('#rotation').val();
+    const hueValue = currentHueValue > 0 ? (currentHueValue -= 1) : 0;
+    applyHue(hueValue);
   });
+
+  $('#save-color').click(() => {
+    const hueRotateDeg = $('#rotation').val();
+    const colorName = $('#color-name').val();
+    const data = JSON.stringify({ colorName, hueRotateDeg });
+    const requestOptions = {
+      url: '/save',
+      method: 'POST',
+      data,
+      contentType: 'application/json'
+    };
+    request(requestOptions).done(result => captains.log(result));
+  });
+
+  $('#update-hue').click(() => {
+    const hueRotateDeg = $('#rotation').val();
+    applyHue(hueRotateDeg);
+  });
+
+  function applyHue(hueRotateDeg) {
+    $('#container').css('filter', `hue-rotate(${hueRotateDeg}deg)`);
+  }
+
+  function request(requestOptions) {
+    return $.ajax(requestOptions)
+      .done(result => result)
+      .fail(error => {
+        captains.error(error);
+        return error;
+      });
+  }
 });

src/server.ts

@@ -1,3 +1,4 @@
+import bodyParser from 'body-parser';
 import { WebhookClient } from 'discord.js';
 import express = require('express');
 import { Server } from 'http';
@@ -9,6 +10,7 @@ import { DiscordBot } from './discord-bot';
 import { log } from './log';
 import { Overlay } from './overlay';
 import { changeLightColor, sendLightEffect } from './routes/lights';
+import { saveCssRoute } from './routes/save-css';
 import { scenesRoute } from './routes/scenes';
 
 /**
@@ -70,6 +72,7 @@ export class AppServer {
    * Config Express
    */
   private configApp(): void {
+    this.app.use(bodyParser.json());
     this.app.set('view engine', 'pug');
     this.app.set('views', `${__dirname}/views`);
     this.app.use(express.static(__dirname));
@@ -82,6 +85,8 @@ export class AppServer {
     const router: express.Router = express.Router();
     router.get('/scenes', scenesRoute);
 
+    router.post('/save', saveCssRoute);
+
     router.get('/overlay-colors', (req, res) => {
       res.render('overlay-colors');
     });

src/views/index.pug

@@ -2,6 +2,7 @@ doctype html
 html(lang='en')
     head
         link(rel='stylesheet', href='../assets/styles.css', type='text/css')
+        link(rel='stylesheet', href='../assets/custom-styles.css', type='text/css')
         script(src='https://code.jquery.com/jquery-3.3.1.min.js', integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=', crossorigin='anonymous')
         script(src='/socket.io/socket.io.js')
         script(src='../scripts/stream.js')

src/views/overlay-colors.pug

@@ -11,6 +11,10 @@ html(lang='en')
         br
         button#increase-hue(style={height:'40px;', width:'70px;'}) Up ⬆
         button#decrease-hue(style={height:'40px;', width:'70px;'}) Down ⬇
+        input#rotation(style={height:'40px;', width:'100px;'})
+        button#update-hue(style={height:'40px;', width:'70px;'}) Update Hue
+        input#color-name(style={height:'40px;', width:'100px;'})
+        button#save-color(style={height:'40px;', width:'70px;'}) Save Color
         br        
         div#container
-            iframe#overlay-frame(style={height:'720px;', width:'1280px;'})
+            iframe#overlay-frame(style={height:'720px;', width:'1280px;'})