Updated colour schemes in the web app

Proper colour schemes were added to the web app based on the `Colours` class in `constants.py` (which received some minor changes in colour hex values). This will ensure that there is consistent colouring in both the customtkinter GUI and the web app. Additionally, a custom background from `https://css-pattern.com` was added.

Removed `Pillow==10.0.0` from `requirements.txt` as this will cause an error with the 10.2.0 version being in the file as well.

.gitignore

@@ -5,4 +5,4 @@ tempCodeRunnerFile.py
 tempCodeRunnerFile.python
 
 __pycache__
-**.DS_Store
+**/.DS_Store

requirements.txt

@@ -2,6 +2,5 @@ Babel==2.14.0
 customtkinter==5.2.2
 Flask==3.0.1
 googletrans==3.0.0
-Pillow==10.0.0
 Pillow==10.2.0
 regex==2023.6.3

src/config.ini

@@ -5,7 +5,7 @@ theme = dark-blue
 language = en
 
 [misc]
-launches = 4
-cword_browser_opened = 1
+launches = 0
+cword_browser_opened = 0
 webapp_port = 5000
 

src/constants.py

@@ -19,14 +19,18 @@ class Global:
         EXIT_BUTTON_HOVER = "#BF0013"
 
     class Light:
-        MAIN = "#B0BEC5"
-        SUB = "#CFD8DC"
+        MAIN = "#c7d0d4"
+        SUB = "#dfe8ed"
+        TEXT = "#242424" # From tkinter, needed for web app
         TEXT_DISABLED = "#999999"
+        FOCUS = "#a7d8ff" # For focusing on a cell in the web app
 
     class Dark:
         MAIN = "#263238"
         SUB = "#37474F"
+        TEXT = "#d7d6d6"
         TEXT_DISABLED = "#737373"
+        FOCUS = "#5b778c"
 
 
 class CrosswordDifficulties:
@@ -52,7 +56,6 @@ class LanguageReplacementsForPybabel:
         "ht": None,
         "hmn": "hnj",
         "sm": None,
-
         "he": None,
         "ar": None,
         "fa": None,
@@ -63,7 +66,6 @@ class LanguageReplacementsForPybabel:
     }
 
 
-
 class CrosswordDirections:
     '''Constants representing words going across or down. Used extensively in conditional statements
     and functions in `cword_gen.py`.

src/cword_webapp/app.py

@@ -8,6 +8,7 @@ def run(*args, **data):
     def main():
         return render_template(
             "index.html",
+            colour_palette=data["colour_palette"],
             cword_data=data["cword_data"],
             empty=data["empty"],
             name=data["name"],

src/cword_webapp/static/script.js

@@ -3,16 +3,13 @@ Additionally, this script offers automatic detection of crossword completion, an
 information to the user. 
 */
 
-let grid, dimensions, empty, definitions_a, definitions_d; // Jinja2 template variables
+let grid, dimensions, empty, definitions_a, definitions_d, colour_palette // Jinja2 template variables
 let direction = 'ACROSS',
     cellCoords = null,
     currentCell = null,
     futureCoords = null,
     mode = null;
 
-const FOCUSED_CELL_COLOUR = "#a7d8ff";
-const UNFOCUSED_CELL_COLOUR = "whitesmoke"; // for now
-
 
 document.addEventListener("DOMContentLoaded", () => { // On page load
     const body = document.querySelector("body");
@@ -23,6 +20,7 @@ document.addEventListener("DOMContentLoaded", () => { // On page load
     empty = body.getAttribute("data-empty");
     definitions_a = body.getAttribute("data-definitions_a");
     definitions_d = body.getAttribute("data-definitions_d");
+    colour_palette = eval(body.getAttribute("data-colour_palette"))
 });
 
 
@@ -60,7 +58,6 @@ function shiftCellCoords(coords, dir, mode) {
                             : [coords[0], coords[1] - 1]
     };
     let futureCell = getInputCellElement(futureCoords);
-
     return futureCell !== null && futureCell.classList.contains('non_empty_cell')
            ? futureCoords /* If the cell at the future coords has the `non_empty_cell` class */
            : coords; /* Keep the coords at the current cell */
@@ -80,8 +77,8 @@ function onCellClick(cell) {
     if (currentCell !== null) { changeCellFocus(currentCell, focus=false) };
 
     currentCell = cell
-    updateCellCoords(cell);
-    changeCellFocus(cell, focus=true);
+    updateCellCoords(currentCell);
+    changeCellFocus(currentCell, focus=true);
     direction = shiftCellCoords(cellCoords, 'ACROSS', mode="enter") == cellCoords ? 'DOWN' : 'ACROSS';
 };
 
@@ -90,13 +87,13 @@ function updateCellCoords(cell) {
 };
 
 function changeCellFocus(cell, focus) {
-    cell.style.backgroundColor = focus ? FOCUSED_CELL_COLOUR : UNFOCUSED_CELL_COLOUR;
+    cell.style.backgroundColor = focus ? colour_palette[3] : colour_palette[1];
 };
 
 function getInputCellElement(cellCoords) {
     return cellCoords 
             ? document.querySelector(`[data-row="${cellCoords[0]}"][data-column="${cellCoords[1]}"]`) 
-            : true;
+            : null;
 };
 
 function checkIfCrosswordIsComplete() {

src/cword_webapp/templates/index.html

@@ -18,9 +18,32 @@
             --cell_font_size: calc(95vmin / calc(var(--dimensions) * 1.7));
             --num_label_font_size: calc(var(--cell_font_size) / 1.75);
             --grid_size: calc(95vmin / var(--dimensions));
+            --main_colour: {{ colour_palette[0] }};
+            --sub_colour: {{ colour_palette[1] }};
+            --text_colour: {{ colour_palette[2] }};
         }
 
-        html { font-family: Arial, Helvetica, sans-serif; }
+        html { 
+            font-family: Arial, Helvetica, sans-serif; 
+            color: var(--text_colour);
+        }
+
+        body { /* These styles are from https://css-pattern.com */
+            --s: 80px; /* the size */
+            --c: var(--main_colour);
+
+            --_s: calc(2*var(--s)) calc(2*var(--s));
+            --_g: 35.36% 35.36% at;
+            --_c: #0000 66%, var(--sub_colour) 68% 70%,#0000 72%;
+            background:
+                radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
+                radial-gradient(var(--_g) 0    75%,var(--_c)) var(--s) var(--s)/var(--_s),
+                radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
+                radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
+                repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s),
+                radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
+                var(--c);
+        }
 
         #container { /* Holds the crossword grid and the definitions div */
             margin: 1em;
@@ -43,7 +66,7 @@
         #grid > div.empty_cell { background: black; }
 
         #grid > div.non_empty_cell {
-            background: whitesmoke;
+            background: var(--sub_colour);
             text-transform: uppercase; /* Force inner html to be uppercase */
             font-size: var(--cell_font_size);
             display: flex;
@@ -65,7 +88,7 @@
 
         .definitions { /* Contains two divs that display the words that run across/down the grid */
             display: flex;
-            background-color: whitesmoke;
+            background-color: var(--sub_colour);
             justify-content: center;
             right: 0;
             overflow-y: auto;
@@ -99,7 +122,8 @@
 <body 
     data-grid="{{ grid }}" 
     data-dimensions="{{ dimensions }}" 
-    data-empty="{{ empty }}">
+    data-empty="{{ empty }}"   
+    data-colour_palette="{{ colour_palette }}">
 
     <div id="container">                         
     <div id="grid">

src/main.py

@@ -375,7 +375,7 @@ def load_selected_cword(self) -> None:
         self._interpret_cword_data(crossword)
         self.init_webapp(crossword)
 
-        sleep(1.0) # Must force user to wait before they click, or else the browser might break
+        sleep(1.5) # Must force user to wait before they click, or else the browser might break
         self.b_open_cword_webapp.configure(state="normal")
         self.b_terminate_cword_webapp.configure(state="normal")
 
@@ -384,18 +384,19 @@ def init_webapp(self,
                     ) -> None:
         '''Start the flask web app with information from the crossword and other interpreted data'''
         app.init_webapp(
+            colour_palette=AppHelper._get_colour_palette_for_webapp(ctk.get_appearance_mode()),
             cword_data=crossword.data,
             port=self.master.cfg.get("misc", "webapp_port"), 
             empty=CrosswordStyle.EMPTY,
             name=crossword.name,
-            word_count = crossword.word_count,
-            failed_insertions = crossword.fails,
-            dimensions = crossword.dimensions,
-            starting_word_positions = self.starting_word_positions,
-            starting_word_matrix = self.starting_word_matrix,
-            grid = crossword.grid,
-            definitions_a = self.definitions_a,
-            definitions_d = self.definitions_d
+            word_count=crossword.word_count,
+            failed_insertions=crossword.fails,
+            dimensions=crossword.dimensions,
+            starting_word_positions=self.starting_word_positions,
+            starting_word_matrix=self.starting_word_matrix,
+            grid=crossword.grid,
+            definitions_a=self.definitions_a,
+            definitions_d=self.definitions_d
         )
 
     def _interpret_cword_data(self, 
@@ -608,7 +609,8 @@ def show_messagebox(same_lang: bool = False,
                 "force quitting the application (using cmd+q) while the web app is running will prevent "
                 "it from properly terminating. If you mistakenly do this, either find the Flask app "
                 "process and terminate it, change the `webapp_port` number in src/config.ini, or "
-                "restart your computer.")
+                "restart your computer.\n\nAlso important to know:\nIn some cases, you may have launched "
+                "the web app yet your browser cannot view it. If this happens, please restart your browser.")
 
     @staticmethod
     def _update_config(cfg, 
@@ -654,6 +656,12 @@ def _load_cword_info(name: str) -> Dict[str, Union[str, int]]:
             info = json.load(file)
 
         return info
+
+    @staticmethod
+    def _get_colour_palette_for_webapp(appearance_mode: str) -> List[str]:
+        return [Colour.Light.MAIN, Colour.Light.SUB, Colour.Light.TEXT, Colour.Light.FOCUS] \
+               if appearance_mode == "Light" else \
+               [Colour.Dark.MAIN, Colour.Dark.SUB, Colour.Dark.TEXT, Colour.Dark.FOCUS]
 
 
 if __name__ == "__main__":