From 4399f0400d1536fdb9b18432120fcbc5a93afba8 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Rapha=C3=ABl=20Jakse?= <raphael.trivabble@jakse.fr>
Date: Sun, 3 Aug 2025 13:31:40 +0200
Subject: [PATCH] Misc: use CSS variables for colors

---
 lang-dists-extractor/make_board.js |   3 +-
 public/alert.js                    |   2 +-
 public/trivabble.css               | 259 +++++++++++++++--------------
 server/trivabble-server.js         |   3 +
 4 files changed, 143 insertions(+), 124 deletions(-)

diff --git a/lang-dists-extractor/make_board.js b/lang-dists-extractor/make_board.js
index ad00ef4..156831c 100755
--- a/lang-dists-extractor/make_board.js
+++ b/lang-dists-extractor/make_board.js
@@ -1,10 +1,9 @@
 #!/usr/bin/env node
 // vim: noai:ts=4:sw=4
 
-/* eslint-disable no-multi-str */
-/* eslint-disable no-process-env */
 /* eslint-disable no-sync */
 
+// eslint-disable-next-line no-process-env
 const ROOT = process.env.ROOT_BOARD || ".";
 
 const fs = require("fs");
diff --git a/public/alert.js b/public/alert.js
index 7709b70..37a25a1 100644
--- a/public/alert.js
+++ b/public/alert.js
@@ -233,4 +233,4 @@
         divAlert.style.display = "";
         divAlertConfirm.getElementsByTagName("button")[0].focus();
     };
-}(this));
+}(this)); // eslint-disable-line no-invalid-this
diff --git a/public/trivabble.css b/public/trivabble.css
index 7ed50d3..a0d9b87 100644
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -1,4 +1,4 @@
- :root {
+:root {
     --flash-light-color: #ee6633;
 }
 
@@ -11,10 +11,54 @@ a {
     color:blue;
 }
 
+:root {
+    --global-bg: #FFF;
+    --menu-color: #000;
+    --menu-button-color: #000;
+    --menu-button-bg: #CFC;
+    --menu-button-border: #8C8;
+    --menu-button-hover-border: #FD7;
+    --menu-button-hover-bg: #CA5;
+    --chat-border: silver;
+    --participants-th-color: #555;
+    --participants-th-bg: #EEE;
+    --rack-bg:#EEC;
+    --board-td-border: #220;
+    --board-tile-bg: #FFC;
+    --board-tile-color: #000;
+    --rack-tile-bg: #CCA;
+    --rack-tile-color: #000;
+    --tripleWord-bg: #F77;
+    --tripleLetter-bg: #77F;
+    --doubleLetter-bg: #7CF;
+    --doubleWord-bg: #FBB;
+    --tile-bg: #EE8;
+    --tile-color: #000;
+    --msg-sender-color: blue;
+    --score-cell-button-bg: #CCC;
+    --score-cell-button-color: #000;
+    --score-cell-button-hover-bg: #DDD;
+    --score-cell-span-hover-bg: #FFA;
+    --help-message-color: #222;
+    --next-help-message-color: #333;
+    --next-help-message-bg: #F1F1F1;
+    --next-help-message-hover-color: #CCC;
+    --center-cell-color: #000;
+    --modal-bg: #FFF;
+    --modal-color: #000;
+    --modal-shadow: #000;
+    --btn-settings-close-bg: lightgray;
+    --modal-button-bg: lightgray;
+    --modal-button-hover-bg: darkgray;
+    --btn-settings-bg: lightgray;
+    --btn-settings-color: black;
+}
+
 html {
     font-family: "Droid Sans", sans-serif;
-    background: white;
-    color: black;
+    background: #FFF;
+    background: var(--global-bg);
+    color: #000;
 }
 
 html, #board, [draggable], .tile {
@@ -73,7 +117,11 @@ html, #board, [draggable], .tile {
 #board td {
     text-transform:uppercase;
     border:1px solid #220;
+    border:1px solid var(--board-td-border);
     background:#FFC;
+    background:var(--board-tile-bg);
+    color: black;
+    color: var(--board-tile-color);
     vertical-align:middle;
     text-align:center;
 }
@@ -105,21 +153,25 @@ html, #board, [draggable], .tile {
 
 .special-cell-tripleWord {
     background:#F77 !important;
+    background: var(--tripleWord-bg) !important;
     box-shadow: 0 0 1px #F77;
 }
 
 .special-cell-tripleLetter {
     background:#77F !important;
+    background: var(--tripleLetter-bg) !important;
     box-shadow: 0 0 1px #77F;
 }
 
 .special-cell-doubleLetter {
     background:#7CF !important;
+    background: var(--doubleLetter-bg) !important;
     box-shadow: 0 0 1px #7CF;
 }
 
 .special-cell-doubleWord {
     background:#FBB !important;
+    background: var(--doubleWord-bg) !important;
     box-shadow: 0 0 1px #FBB;
 }
 
@@ -148,7 +200,8 @@ html, #board, [draggable], .tile {
 
 #center-cell .special-cell-label {
     font-weight:bold;
-    color:black;
+    color:#000;
+    color:var(--center-cell-color);
     font-size:large
 }
 
@@ -163,6 +216,8 @@ body {
 }
 
 #menu, #panel {
+    color: #FFF;
+    color: var(--menu-color);
     display:-webkit-flex;
     display:flex;
     -webkit-flex-direction:column;
@@ -183,14 +238,20 @@ button, select {
     margin: 0.25em 0;
     min-height:2em;
     background: #CFC;
+    background: var(--menu-button-bg);
     border: 1px solid #8C8;
+    border: 1px solid var(--menu-button-border);
     cursor: pointer;
     transition: 0.2s;
+    color: black;
+    color: var(--menu-button-color);
 }
 
 .panel button:hover, select:hover {
     background: #FD7;
+    background: var(--menu-button-hover-border);
     border: 1px solid #CA5;
+    border: 1px solid var(--menu-button-hover-bg);
 }
 
 .panel button[disabled=disabled], .panel button:disabled {
@@ -200,6 +261,8 @@ button, select {
 
 #rack {
     background:#EEC;
+    background:var(--rack-bg);
+
     z-index:10;
     font-size:0;
     border-radius:4px;
@@ -223,6 +286,9 @@ button, select {
 
 .tile {
     background-color: #EE8;
+    background-color: var(--tile-bg);
+    color: #000;
+    color: var(--tile-color);
     transition:background-color 1s, border 1s;
     display: inline-block;
     width: 95%;
@@ -372,6 +438,9 @@ td.blink {
     display:inline-block;
     vertical-align:middle;
     background:#CCA;
+    background:var(--rack-tile-bg);
+    color: #000;
+    color: var(--rack-tile-color);
 }
 
 #panel {
@@ -413,6 +482,7 @@ td.blink {
 
 .msg-sender {
     color:blue;
+    color: var(--msg-sender-color):
 }
 
 #chat-messages {
@@ -452,6 +522,7 @@ td.blink {
 
 #chat-messages {
     border:1px solid silver;
+    border:1px solid var(--chat-border);
     box-sizing:border-box;
     width: 100%;
     margin-bottom:1px;
@@ -486,7 +557,8 @@ td.blink {
 
 #participants .score-cell > span:hover, #participants .turn-cell button:hover {
     cursor:pointer;
-    background:#FFA
+    background:#FFA;
+    background:var(--score-cell-span-hover-bg);
 }
 
 #participants .score-cell button {
@@ -496,18 +568,23 @@ td.blink {
     padding:0 1ex;
     margin:0;
     background:#CCC;
+    background:var(--score-cell-button-bg);
     color:back;
+    color:var(--score-cell-button-color);
     border:0;
 }
 
 #participants .score-cell button:hover {
     background:#DDD;
+    background:var(--score-cell-button-hover-bg);
 }
 
 #participants th {
     font-weight:normal;
     background:#EEE;
+    background:var(--participants-th-bg);
     color: black;
+    color: var(--participants-th-color);
     font-size:smaller
 }
 
@@ -620,10 +697,15 @@ td.blink {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: white;
     padding: 1rem 1.5rem;
     width: 24rem;
     border-radius: 0.3rem;
+    background-color: #FFF;
+    background-color: var(--modal-bg);
+    color:#000;
+    color:var(--modal-color);
+    box-shadow: 0 0 20px #000;
+    box-shadow: 0 0 20px var(--modal-shadow);
 }
 
 #btn-settings-close {
@@ -646,10 +728,12 @@ td.blink {
     cursor: pointer;
     border-radius: 0.25rem;
     background-color: lightgray;
+    background-color: var(--modal-button-bg);
 }
 
 .modal-button:hover, #btn-settings:hover {
     background-color: darkgray;
+    background-color: var(--modal-button-hover-bg);
 }
 
 .show-modal {
@@ -684,7 +768,9 @@ td.blink {
 
 #panel #btn-settings {
     background:lightgray;
+    background:var(--btn-settings-bg);
     color:black;
+    color: var(--btn-settings-color);
     font-size:small;
     border-radius:3px;
     border:none;
@@ -747,11 +833,12 @@ td.blink {
 
 button#next-help-msg {
     border:0;
-    background:none;
+    background:#F1F1F1;
+    background:var(--next-help-message-bg);
     color:#333;
+    color:var(--next-help-message-color);
     font-size:1.2rem;
     margin-right:0.5ex;
-    background:#F1F1F1;
     border-radius:100rem;
     height:1.75rem;
     width:2.2rem;
@@ -761,6 +848,7 @@ button#next-help-msg {
 
 button#next-help-msg:hover {
     background:#CCC;
+    background:var(--next-help-message-hover-color);
 }
 
 #help-box-title {
@@ -777,6 +865,7 @@ button#next-help-msg:hover {
     margin:0;
     font-size:0.9;
     color:#222;
+    color: var(--help-message-color);
     padding:0 0.5ex;
     max-width:17em;
 }
@@ -843,121 +932,49 @@ textarea {
 }
 
 @media (prefers-color-scheme: dark) {
-    html {
-        background: black;
-    }
-    #menu, #panel {
-        color: #DDD;
-    }
-
-    .panel button, select {
-        background: #030;
-        border: 1px  solid green;
-        color: #EEE;
-    }
-
-    .panel button:hover, select:hover {
-        background: green;
-        border: 1px solid green;
-    }
-
-    #chat-messages {
-        border: 1px solid gray;
-    }
-
-    #participants th {
-        color: #EEE;
-        background: #555
-    }
-
-    #rack {
-        background: #333
-    }
-
-    #board td {
-        border: 1px solid #555;
-    }
-
-    #board td, #rack .tile-placeholder {
-        background: #000;
-        color: #BBB;
-    }
-
-    td.special-cell-tripleWord {
-        background: #700 !important;
-    }
-
-    td.special-cell-tripleLetter {
-        background: #234 !important;
-    }
-
-
-    td.special-cell-doubleWord {
-        background: #522 !important;
-    }
-
-    td.special-cell-doubleLetter {
-        background: #014 !important;
-    }
-
-    .tile {
-        background: #770;
-        color: #DDD;
+    :root {
+        --global-bg: black;
+        --menu-color: #DDD;
+        --menu-button-bg: #030;
+        --menu-button-color: #EEE;
+        --menu-button-border: green;
+        --menu-button-hover-border: green;
+        --menu-button-hover-bg: green;
+        --chat-border: gray;
+        --participants-th-color: #EEE;
+        --participants-th-bg: #555;
+        --rack-bg: #333;
+        --board-td-border: #555;
+        --board-tile-bg: #000;
+        --board-tile-color: #BBB;
+        --rack-tile-bg: #000;
+        --rack-tile-color: #BBB;
+        --tripleWord-bg: #700;
+        --tripleLetter-bg: #234;
+        --doubleWord-bg: #522;
+        --doubleLetter-bg: #014;
+        --tile-bg: #770;
+        --tile-color: #DDD;
+        --msg-sender-color: #5AC;
+        --score-cell-button-bg: #555;
+        --score-cell-button-color: #FFF;
+        --score-cell-button-hover-bg: #999;
+        --score-cell-span-hover-bg: #770;
+        --help-message-color: #AAA;
+        --next-help-message-bg: #333;
+        --next-help-message-color: #AAA;
+        --next-help-message-hover-color: #333;
+        --center-cell-color: #AAA;
+        --modal-bg: #000;
+        --modal-color: #DDD;
+        --modal-shadow: #AAA;
+        --modal-button-bg: #AAA;
+        --modal-button-hover-bg: #FFF;
+        --btn-settings-bg: #555;
+        --btn-settings-color: #CCC;
     }
 
     #bag {
-        filter: invert(30%)
-    }
-
-    .msg-sender {
-        color: #5AC;
-    }
-
-    #participants .score-cell button {
-        background: #555;
-    }
-
-    #participants .score-cell button:hover {
-        background: #999;
-    }
-
-    #participants .score-cell > span:hover, #participants .turn-cell button:hover {
-        background:#770
-    }
-
-    #help-messages p {
-        color: #AAA;
-    }
-
-    button#next-help-msg {
-        background: #333;
-        color: #AAA;
-    }
-
-    button#next-help-msg:hover {
-        color: #333;
-    }
-
-    #center-cell .special-cell-label {
-        color: #AAA;
-    }
-
-    .modal-content {
-        background: black;
-        color: #DDD;
-        box-shadow: 0 0 20px #AAA;
-    }
-
-    #btn-settings-close {
-        background: #AAA
-    }
-
-    #btn-settings-close:hover {
-        background: white
-    }
-
-    #panel #btn-settings {
-        background: #555;
-        color: #CCC
+        filter: invert(30%);
     }
 }
diff --git a/server/trivabble-server.js b/server/trivabble-server.js
index 35b6214..9fbb0be 100644
--- a/server/trivabble-server.js
+++ b/server/trivabble-server.js
@@ -25,6 +25,7 @@
 /*eslint strict: [2, "global"]*/
 
 "use strict";
+/*eslint-disable no-process-env*/
 
 const port = parseInt(process.env.TRIVABBLE_PORT || "3000");
 const host = process.env.TRIVABBLE_HOST || "localhost";
@@ -52,6 +53,8 @@ if (DEV_ENABLE_SERVING_FILES) {
     console.log("DEV_ENABLE_SERVING_FILES: Serving files in the current directory. Please never do this on a production server, this is for development purposes only.");
 }
 
+/*eslint-enable no-process-env*/
+
 const debuglog = DEBUG_LOG ? console.log.bind(console) : () => null;
 
 const http   = require("http");
-- 
2.30.2