Change the color of the player list in the web client

oestrich · Apr 7, 2018 · 198f860 · 198f860
1 parent 913cae4
commit 198f860
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/assets/app/js/color.js b/assets/app/js/color.js
@@ -7,8 +7,8 @@ let defaultColor = (tag, color) => {
   };
 };
 
-let defaultCommandColorCSS = (tag) => {
-  let configuredColor = gameConfig["color_" + tag] || "white";
+export function defaultColorCSS(tag, color) {
+  let configuredColor = gameConfig["color_" + tag] || color;
   if (DEFAULT_COLORS.includes(configuredColor)) {
     return configuredColor;
   } else {
@@ -30,14 +30,14 @@ function formatColor(payload) {
   string = string.replace(/{hint}/g, defaultColor("hint", "cyan"));
 
   string = string.replace(/{exit}/g, () => {
-    return `<span class='${defaultCommandColorCSS("exit")} command'>`;
+    return `<span class='${defaultColorCSS("exit", "white")} command'>`;
   });
 
   string = string.replace(/{command click=false}/g, defaultColor("command", "white"));
   string = string.replace(/{exit click=false}/g, defaultColor("exit", "white"));
 
   string = string.replace(/{command( send='(.*)')?}/g, (_match, _fullSend, command) => {
-    let color = defaultCommandColorCSS("command");
+    let color = defaultColorCSS("command", "white");
     if (payload.delink == undefined || payload.delink == false) {
       if (command != undefined) {
         return `<span class='${color} command' data-command='${command}'>`;
@@ -81,8 +81,6 @@ function formatLines(string) {
   return string;
 }
 
-function format(payload) {
+export function format(payload) {
   return formatLines(formatColor(payload));
 }
-
-export default format
diff --git a/assets/app/js/gmcp.js b/assets/app/js/gmcp.js
@@ -1,7 +1,7 @@
 import Sizzle from "sizzle"
 import _ from "underscore"
 
-import format from "./color"
+import {format, defaultColorCSS} from "./color"
 
 import Notifacations from "./notifications"
 
@@ -97,16 +97,19 @@ let renderRoom = (channel, room) => {
     exits.append(html)
   })
 
+  let npcColor = defaultColorCSS("npc", "yellow");
+  let playerColor = defaultColorCSS("player", "blue");
+
   let characters = _.first(Sizzle(".room-info .characters"))
   characters.innerHTML = ""
   _.each(room.npcs, (npc) => {
     let html = document.createElement('div')
-    html.innerHTML = `<li class="yellow">${npc.name}</li>`
+    html.innerHTML = `<li class="${npcColor}">${npc.name}</li>`
     _.each(html.children, (li) => { characters.append(li) })
   })
   _.each(room.players, (player) => {
     let html = document.createElement('div')
-    html.innerHTML = `<li class="blue">${player.name}</li>`
+    html.innerHTML = `<li class="${playerColor}">${player.name}</li>`
     _.each(html.children, (li) => { characters.append(li) })
   })
 }

diff --git a/assets/app/js/panel.js b/assets/app/js/panel.js
@@ -1,7 +1,7 @@
 import Sizzle from "sizzle"
 import _ from "underscore"
 
-import format from "./color"
+import {format} from "./color"
 
 let scrollToBottom = (callback) => {
   let panel = _.first(Sizzle(".panel"))