Skip to content

Commit

Permalink
Week 9 updates, better settings window, better user colors, and times…
Browse files Browse the repository at this point in the history 
…tamps.
  • Loading branch information
@roncli
roncli committed May 16, 2017
1 parent 032fce0 commit ccb491c
Show file tree
Hide file tree
Showing 6 changed files with 243 additions and 112 deletions.
2 changes: 2 additions & 0 deletions app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,12 @@
},
"dependencies": {
"bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1",
"express": "4.15.2",
"iconv-lite": "0.4.17",
"jquery": "3.2.1",
"node-fonts": "1.0.0",
"tinycolor2": "1.4.1",
"tmi.js": "1.1.2",
"twitch-api": "0.4.6"
},
Expand Down
30 changes: 29 additions & 1 deletion app/site/css/settings.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,26 @@
#settings {
width: 100%;
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
}

#display {
flex-grow: 1;
overflow-y: auto;
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.settings-pane {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-bottom: 0;
}

.table-row {
display: table;
table-layout: fixed;
Expand All @@ -15,4 +38,9 @@
padding: 1px 3px;
display: table-cell;
flex: 1;
}
}

label {
display: inline;
font-weight: initial;
}
23 changes: 17 additions & 6 deletions app/site/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
var electron = require("electron"),
const electron = require("electron"),
tinycolor = require("tinycolor2"),
remote = electron.remote,
app = remote.app,
win = remote.getCurrentWindow(),
path = require("path"),
Twitch = require("./modules/chat/twitch"), // TODO: Load modules
settings = require("./js/apiSettings"),
client = new Twitch(settings),
File = require("./modules/datastore/file"),
channels = {},
File = require("./modules/datastore/file");

var channels = {},

// # ### #
// # # #
Expand Down Expand Up @@ -179,10 +181,20 @@ win.data.appSettings = new File(path.join(app.getPath("userData"), "appSettings.
// ## ### ### ## # # ## ## ## # # # # # ## ### ### # # # ## #
// ###
client.on("message", (channel, username, usercolor, displayname, html, text) => {
var channelName = channel.substring(1);
var color = tinycolor(usercolor),
background = tinycolor(win.data.appSettings.data.chat.colors.chat.background),
difference = background.getBrightness() - color.getBrightness(),
channelName = channel.substring(1),
date = new Date();

if (difference >= 0 && difference < 50) {
usercolor = color.darken(50);
} else if (difference < 0 && difference > -50) {
usercolor = color.brighten(50);
}

if (text.indexOf(win.data.userSettings.data.twitch.username) === -1) {
$(`#channel-${channelName} .text`).append(`<b style="color: ${usercolor}">${displayname}</b>: ${html}<br />`);
$(`#channel-${channelName} .text`).append(`${win.data.appSettings.data.chat.timestamps ? `[${`0${date.getHours()}`.substr(-2)}:${`0${date.getMinutes()}`.substr(-2)}:${`0${date.getSeconds()}`.substr(-2)}` : ""}] <b style="color: ${usercolor}">${displayname}</b>: ${html}<br />`);
} else {
$(`#channel-${channelName} .text`).append(`<b style="color: ${usercolor}">${displayname}</b>: <span class="highlight">${html}</span><br />`);
}
Expand Down Expand Up @@ -369,7 +381,6 @@ win.on("appSettings-get", (remoteWin) => {
// #### ### # # ## # # # # ### ### ## ## ## ## ### # # # ### ### ## ##
// # # ###
win.on("appSettings-set", (newAppSettings) => {
console.log(newAppSettings);
win.data.appSettings.data.chat = newAppSettings.chat;
win.data.appSettings.save();
});
Expand Down
118 changes: 72 additions & 46 deletions app/site/js/settings.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var electron = require("electron"),
NodeFonts = require("node-fonts"),
win = electron.remote.getCurrentWindow();
win = electron.remote.getCurrentWindow(),
fonts;

// # ## # # # #
// # # # # #
Expand All @@ -13,60 +14,85 @@ win.on("appSettings-get-response", (appSettings) => {
if (!win.data) {
win.data = {};
}
win.data.appSettings = appSettings;
win.data.appSettings = JSON.parse(JSON.stringify(appSettings));

$("#colors-chat-foreground").colorpicker("setValue", win.data.appSettings.chat.colors.chat.foreground);
$("#colors-chat-background").colorpicker("setValue", win.data.appSettings.chat.colors.chat.background);
$("#colors-chat-info").colorpicker("setValue", win.data.appSettings.chat.colors.chat.info);
$("#colors-chat-join").colorpicker("setValue", win.data.appSettings.chat.colors.chat.join);
$("#colors-chat-part").colorpicker("setValue", win.data.appSettings.chat.colors.chat.part);
$("#colors-chat-highlight").colorpicker("setValue", win.data.appSettings.chat.colors.chat.highlight);
$("#font-face").val(win.data.appSettings.chat.font.face);
$("#font-size").val(win.data.appSettings.chat.font.size);
$("#colors-chat-foreground").val(win.data.appSettings.chat.colors.chat.foreground);
$("#colors-chat-background").val(win.data.appSettings.chat.colors.chat.background);
$("#colors-chat-info").val(win.data.appSettings.chat.colors.chat.info);
$("#colors-chat-join").val(win.data.appSettings.chat.colors.chat.join);
$("#colors-chat-part").val(win.data.appSettings.chat.colors.chat.part);
$("#colors-chat-highlight").val(win.data.appSettings.chat.colors.chat.highlight);
$("#colors-input-foreground").val(win.data.appSettings.chat.colors.input.foreground);
$("#colors-input-background").val(win.data.appSettings.chat.colors.input.background);
$("#colors-userlist-foreground").val(win.data.appSettings.chat.colors.userList.foreground);
$("#colors-userlist-background").val(win.data.appSettings.chat.colors.userList.background);
$("#colors-input-foreground").colorpicker("setValue", win.data.appSettings.chat.colors.input.foreground);
$("#colors-input-background").colorpicker("setValue", win.data.appSettings.chat.colors.input.background);
$("#colors-userlist-foreground").colorpicker("setValue", win.data.appSettings.chat.colors.userList.foreground);
$("#colors-userlist-background").colorpicker("setValue", win.data.appSettings.chat.colors.userList.background);
$("#chat-timestamps").prop("checked", win.data.appSettings.chat.timestamps)
});

// # # # # #
// ### # # # # #
// # # # ### ## ## # # # # ## ### ### # ### ## ### ### # #
// ### # # # # # # # # #### # ## # # # # # # # ## # # # # # #
// # # # # # # # # # # # # ## # # # # ## # ## # ## # # # #
// ### # ### ## ## ### # # ## # # ## # ## # ## # # ### #
// #
$(document).ready(() => {
new NodeFonts().getFonts().then((fonts) => {
fonts.forEach((font) => {
console.log(font);
Promise.all([
new Promise((resolve, reject) => {
new NodeFonts().getFonts().then((res) => {
fonts = res.sort((a, b) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()));

resolve();
}).catch((err) => {
reject(err);
});
});
}),

new Promise((resolve) => {
// # # # # #
// ### # # # # #
// # # # ### ## ## # # # # ## ### ### # ### ## ### ### # #
// ### # # # # # # # # #### # ## # # # # # # # ## # # # # # #
// # # # # # # # # # # # # ## # # # # ## # ## # ## # # # #
// ### # ### ## ## ### # # ## # # ## # ## # ## # # ### #
// #
$(document).ready(() => {
// Setup color pickers
$("#colors-chat-foreground").colorpicker();

win.getParentWindow().emit("appSettings-get", win);

win.getParentWindow().emit("appSettings-get", win);
// ## # #
// # # # #
// ##### ### ### # # ## ## ### ## # ## ## # #
// # # ## # # # # # ## # # # # # # # # ##
// ##### ## # ## # # ## # # # # # # # # # #
// # # ### # # # ## ## # # ## ### ### ## # #
$("#save").on("click", () => {
win.data.appSettings.chat.colors.chat.foreground = $("#colors-chat-foreground").colorpicker("getValue");
win.data.appSettings.chat.colors.chat.background = $("#colors-chat-background").colorpicker("getValue");
win.data.appSettings.chat.colors.chat.info = $("#colors-chat-info").colorpicker("getValue");
win.data.appSettings.chat.colors.chat.join = $("#colors-chat-join").colorpicker("getValue");
win.data.appSettings.chat.colors.chat.part = $("#colors-chat-part").colorpicker("getValue");
win.data.appSettings.chat.colors.chat.highlight = $("#colors-chat-highlight").colorpicker("getValue");
win.data.appSettings.chat.font.face = $("#font-face").val();
win.data.appSettings.chat.font.size = $("#font-size").val();
win.data.appSettings.chat.colors.input.foreground = $("#colors-input-foreground").colorpicker("getValue");
win.data.appSettings.chat.colors.input.background = $("#colors-input-background").colorpicker("getValue");
win.data.appSettings.chat.colors.userList.foreground = $("#colors-userlist-foreground").colorpicker("getValue");
win.data.appSettings.chat.colors.userList.background = $("#colors-userlist-background").colorpicker("getValue");
win.data.appSettings.chat.timestamps = $("#chat-timestamps").is(":checked");

// ## # #
// # # # #
// ##### ### ### # # ## ## ### ## # ## ## # #
// # # ## # # # # # ## # # # # # # # # ##
// ##### ## # ## # # ## # # # # # # # # # #
// # # ### # # # ## ## # # ## ### ### ## # #
$("#save").on("click", () => {
win.data.appSettings.chat.font.face = $("#font-face").val();
win.data.appSettings.chat.font.size = $("#font-size").val();
win.data.appSettings.chat.colors.chat.foreground = $("#colors-chat-foreground").val();
win.data.appSettings.chat.colors.chat.background = $("#colors-chat-background").val();
win.data.appSettings.chat.colors.chat.info = $("#colors-chat-info").val();
win.data.appSettings.chat.colors.chat.join = $("#colors-chat-join").val();
win.data.appSettings.chat.colors.chat.part = $("#colors-chat-part").val();
win.data.appSettings.chat.colors.chat.highlight = $("#colors-chat-highlight").val();
win.data.appSettings.chat.colors.input.foreground = $("#colors-input-foreground").val();
win.data.appSettings.chat.colors.input.background = $("#colors-input-background").val();
win.data.appSettings.chat.colors.userList.foreground = $("#colors-userlist-foreground").val();
win.data.appSettings.chat.colors.userList.background = $("#colors-userlist-background").val();
win.getParentWindow().emit("appSettings-set", win.data.appSettings);

win.getParentWindow().emit("appSettings-set", win.data.appSettings);
win.close();
});

win.close();
resolve();
});
})
]).then(() => {
var $fontFace = $("#font-face");

fonts.forEach((font) => {
$fontFace.append($("<option></option>").text(font));
});

$("#font-face").val(win.data.appSettings.chat.font.face);
}).catch((err) => {
console.log(err);
});
8 changes: 7 additions & 1 deletion app/site/modules/chat/twitch/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ const http = require("http"),
Tmi = require("tmi.js"),
TwitchApi = require("twitch-api"),
Chat = require("../../../js/base/chat"),
rangeRegex = /^([0-9]+)-([0-9]+)$/;
rangeRegex = /^([0-9]+)-([0-9]+)$/,
defaultColors = ["Blue", "Coral", "DodgerBlue", "SpringGreen", "YellowGreen", "Green", "OrangeRed", "Red", "GoldenRod", "HotPink", "CadetBlue", "SeaGreen", "Chocolate", "BlueViolet", "Firebrick"];

require("../../../js/extensions");

Expand Down Expand Up @@ -151,6 +152,11 @@ class Twitch extends Chat {
} else {
span.text(text);
}

if (!userstate.color) {
userstate.color = defaultColors[(userstate.username.charCodeAt(0) + userstate.username.charCodeAt(userstate.username.length - 1)) % defaultColors.length];
}

twitch.emit("message", channel, userstate.username, userstate.color, userstate["display-name"], span.html(), text);
});

Expand Down
Loading

0 comments on commit ccb491c

Please sign in to comment.