Feat: add palette settings at the top of the page (closes #99)

Leogendra · Leogendra · commit f175b40d1fcc · 2025-09-22T17:16:38.000+02:00
diff --git a/index.html b/index.html
@@ -94,12 +94,27 @@ <h1>Pixels Visualiser</h1>
                 <div id="paletteContainer" class="chart-container">
                     <div class="options small title"><img src="assets/palette_icon.svg" alt="Palette" class="icon-settings"><span>Customise your palette</span></div>
                     
-                    <div id="paletteGrid"></div>
+                    <div id="paletteGrid" class="palette-grid">
+                        <div class="color-cell">
+                            <input type="color" id="color1" />
+                        </div>
+                        <div class="color-cell">
+                            <input type="color" id="color2" />
+                        </div>
+                        <div class="color-cell">
+                            <input type="color" id="color3" />
+                        </div>
+                        <div class="color-cell">
+                            <input type="color" id="color4" />
+                        </div>
+                        <div class="color-cell">
+                            <input type="color" id="color5" />
+                        </div>
+                    </div>
 
                     <div class="dialog-buttons">
-                        <button type="button" class="button button-secondary" id="resetSettingsDialog">Reset</button>
-                        <button type="button" class="button" id="cancelSettingsDialog">Cancel</button>
-                        <button type="submit" class="button button-tertiary" id="saveSettingsDialog">Save</button>
+                        <button type="button" class="button button-secondary" id="resetPaletteSettings">Reset</button>
+                        <button type="submit" class="button button-tertiary" id="savePaletteSettings">Save</button>
                     </div>
                 </div>
 
@@ -342,7 +357,7 @@ <h2>🖼️ Create Pixels image</h2>
                                 <h3>Image settings</h3>
 
                                 <div class="dialog-settings-group">
-                                    <label for="color1">Score 1</label>
+                                    <!-- <label for="color1">Score 1</label>
                                     <input type="color" id="color1">
 
                                     <label for="color2">Score 2</label>
@@ -355,7 +370,7 @@ <h3>Image settings</h3>
                                     <input type="color" id="color4">
 
                                     <label for="color5">Score 5</label>
-                                    <input type="color" id="color5">
+                                    <input type="color" id="color5"> -->
 
                                     <label for="colorEmpty">Background</label>
                                     <input type="color" id="colorEmpty">
@@ -392,9 +407,7 @@ <h3>Image settings</h3>
                                 </div>
 
                                 <div class="dialog-buttons">
-                                    <button type="button" class="button button-secondary" id="resetSettingsDialog">Reset</button>
-                                    <button type="button" class="button" id="cancelSettingsDialog">Cancel</button>
-                                    <button type="submit" class="button button-tertiary" id="saveSettingsDialog">Save</button>
+                                    <button type="submit" class="button button-tertiary" id="saveDialogSettings">Save</button>
                                 </div>
                             </div>
                         </dialog>
@@ -495,8 +508,8 @@ <h2>📅 Search Pixels by date</h2>
                 <img src="assets/pixels_memories_logo.png" alt="Pixels Memories">
             </a>
         </div>
-        <div class="version">Version: v1.5.18</div>
-        <div class="version">Last update: 2025-09-16</div>
+        <div class="version">Version: v1.5.19</div>
+        <div class="version">Last update: 2025-09-22</div>
     </footer>
 
     <!-- Charts.js for graphs -->
diff --git a/scripts/card.js b/scripts/card.js
@@ -12,20 +12,13 @@ let calendar = null;
 
 
 async function load_colored_score_SVG(score) {
-    if (!score || (typeof score !== "number") || (score < 1) || (score > 5)) {
-        return document.createElement("span");
-    }
-    const path = `assets/pixels/score_${score}.svg`;
-    const res = await fetch(path);
-    const text = await res.text();
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(text, "image/svg+xml");
-    const svg = doc.querySelector("svg");
-
-    const color = png_settings.colors[score]
-
-    svg.querySelectorAll("[fill='currentColor']").forEach(el => el.setAttribute("fill", color));
-    return svg;
+  if (!Number.isInteger(score) || score < 1 || score > 5) return document.createElement("span");
+  const res = await fetch(`assets/pixels/score_${score}.svg`);
+  const text = await res.text();
+  const doc = new DOMParser().parseFromString(text, "image/svg+xml");
+  const svg = doc.querySelector("svg");
+  svg.style.color = png_settings.colors[score];
+  return svg;
 }
 
 
diff --git a/scripts/png.js b/scripts/png.js
@@ -2,9 +2,9 @@ const div_pixel_export_container = document.querySelector("#pixelGridExportConta
 
 const dialog_settings = document.querySelector("#dialogSettings");
 const btn_open_dialog_settings = document.querySelector("#openImageSettingsDialog");
-const btn_reset_dialog_settings = document.querySelector("#resetSettingsDialog");
-const btn_cancel_dialog_settings = document.querySelector("#cancelSettingsDialog");
-const btn_save_dialog_settings = document.querySelector("#saveSettingsDialog");
+const btn_reset_palette_settings = document.querySelector("#resetPaletteSettings");
+const btn_save_palette_settings = document.querySelector("#savePaletteSettings");
+const btn_save_dialog_settings = document.querySelector("#saveDialogSettings");
 const btn_generate_png = document.querySelector("#btnGeneratePixelGrid");
 const btn_download_png = document.querySelector("#btnDownloadPixelGrid");
 const div_result_png = document.querySelector("#pixelGridResults");
@@ -75,6 +75,9 @@ function set_image_settings(settings) {
     setting_color3.value = settings.colors[3];
     setting_color4.value = settings.colors[4];
     setting_color5.value = settings.colors[5];
+    for (let i = 1; i <= 5; i++) {
+        update_svg_color(i, settings.colors[i]);
+    }
     setting_colorEmpty.value = settings.colors.empty;
     setting_squareSize.value = settings.squareSize.toString();
     setting_borderSize.value = settings.borderSize.toString();
@@ -656,12 +659,13 @@ btn_open_dialog_settings.addEventListener("click", () => {
     open_dialog_settings();
 });
 
-btn_reset_dialog_settings.addEventListener("click", () => {
-    set_image_settings(png_default_settings);
+btn_reset_palette_settings.addEventListener("click", () => {
+    png_settings.colors = { ...png_default_settings.colors };
+    close_dialog_settings();
 });
 
-btn_cancel_dialog_settings.addEventListener("click", () => {
-    close_dialog_settings();
+btn_save_palette_settings.addEventListener("click", () => {
+    close_dialog_settings(save=true);
 });
 
 btn_save_dialog_settings.addEventListener("click", () => {
@@ -704,6 +708,6 @@ div_pixel_export_container.addEventListener("keydown", function (e) {
 dialog_settings.addEventListener("keydown", function (e) {
     if (e.key === "Enter") {
         e.preventDefault();
-        btn_save_dialog_settings.click();
+        btn_save_palette_settings.click();
     }
 });
diff --git a/scripts/statistics.js b/scripts/statistics.js
@@ -3,58 +3,35 @@ let scores_pie_chart_instance = null;
 
 
 
-
-// Loader : NE PAS écraser les fill="currentColor"
-async function load_score_SVG(score) {
-  if (!Number.isInteger(score) || score < 1 || score > 5) return document.createElement("span");
-  const res = await fetch(`assets/pixels/score_${score}.svg`);
-  const text = await res.text();
-  const doc = new DOMParser().parseFromString(text, "image/svg+xml");
-  const svg = doc.querySelector("svg");
-  return svg;
+async function update_svg_color(score, color) {
+    const svg = document.querySelector(`#color${score}`).parentElement.querySelector("svg");
+    if (svg) {
+        svg.style.color = color;
+    }
+    png_settings.colors[score] = color;
 }
 
 
-async function load_colored_score_SVG(score) {
-  const svg = await load_score_SVG(score);
-  svg.style.color = png_settings.colors[score];
-  return svg;
-}
-
 async function setup_palette_settings() {
-  const colors = get_image_settings().colors;
-  const grid = document.createElement("div");
-  grid.className = "palette-grid";
-  palette_grid.innerHTML = "";
-
-  for (let score = 1; score <= 5; score++) {
-    const cell = document.createElement("div");
-    cell.className = "color-cell";
-
-    const svg = await load_score_SVG(score);
-    svg.classList.add("color-icon");
-    svg.style.color = colors[score];
-
-    const input = document.createElement("input");
-    input.type = "color";
-    input.id = `color${score}`;
-    input.value = colors[score];
-    input.className = "color-picker-overlay";
-
-    input.addEventListener("input", () => {
-      svg.style.color = input.value;
-      png_settings.colors[score] = input.value;
-    });
+    const colors = get_image_settings().colors;
 
-    cell.appendChild(svg);
-    cell.appendChild(input);
-    grid.appendChild(cell);
-  }
+    for (let score = 1; score <= 5; score++) {
+        const cell = document.querySelector(`#color${score}`).parentElement;
+        const input = document.getElementById(`color${score}`);
+        
+        input.classList.add("color-picker-overlay");
 
-  palette_grid.appendChild(grid);
-}
+        const svg = await load_colored_score_SVG(score);
+        svg.classList.add("color-icon");
+        svg.style.color = colors[score];
 
+        input.addEventListener("input", () => {
+            update_svg_color(score, input.value);
+        });
 
+        cell.appendChild(svg);
+    }
+}
 
 
 function calculate_streaks() {
@@ -68,7 +45,7 @@ function calculate_streaks() {
         const [year, month, day] = dateStr.split("-").map(Number);
         return new Date(Date.UTC(year, month - 1, day));
     })
-    .sort((a, b) => a - b);
+        .sort((a, b) => a - b);
 
     let bestStreak = 1;
     let currentStreak = 1;
@@ -77,7 +54,7 @@ function calculate_streaks() {
         const previous_date = dates[i - 1];
         const current_date = dates[i];
         const diffDays = (current_date - previous_date) / (1000 * 60 * 60 * 24);
-        
+
         currentStreak++;
         if (diffDays !== 1) {
             currentStreak = 1;
@@ -105,31 +82,31 @@ function calculate_and_display_stats() {
     });
 
     stats_array = [
-        {title: "Number of Pixels", value: `<p>${current_data.filter(entry => entry.scores.length > 0).length}</p>`},
-        {title: "Average score", value: `<p>${average(allScores).toFixed(2)}</p>`},
-        {title: "Streaks", value: `<p>Last: ${streaks.currentStreak} | Best: ${streaks.bestStreak}</p>`},
-        {title: "Score distribution", value: "<canvas title='Update your colors in the \"Export Pixel image\" settings' id='scoresPieChart' class='pie-chart' width='100' height='100'></canvas>"},
+        { title: "Number of Pixels", value: `<p>${current_data.filter(entry => entry.scores.length > 0).length}</p>` },
+        { title: "Average score", value: `<p>${average(allScores).toFixed(2)}</p>` },
+        { title: "Streaks", value: `<p>Last: ${streaks.currentStreak} | Best: ${streaks.bestStreak}</p>` },
+        { title: "Score distribution", value: "<canvas title='Update your colors in the \"Export Pixel image\" settings' id='scoresPieChart' class='pie-chart' width='100' height='100'></canvas>" },
     ];
 
-    stats_container.innerHTML = stats_array.map(({title, value}) => `
+    stats_container.innerHTML = stats_array.map(({ title, value }) => `
     <div class="stat-card">
     <h3>${title}</h3>
     ${value}
     </div>
     `).join("");
-    
+
     setup_palette_settings();
     create_scores_pie_chart();
 }
 
 
 async function create_scores_pie_chart() {
     const rawScores = current_data
-                    .flatMap(entry => entry.scores)
-                    .reduce((acc, score) => {
-                        acc[score] = (acc[score] || 0) + 1;
-                        return acc;
-                    }, {});
+        .flatMap(entry => entry.scores)
+        .reduce((acc, score) => {
+            acc[score] = (acc[score] || 0) + 1;
+            return acc;
+        }, {});
 
     const scoresCount = Object.keys(rawScores).map(Number);
     const values = scoresCount.map(score => rawScores[score] || 0);
@@ -308,9 +285,9 @@ function get_word_frequency() {
                 searchTextLower = searchTextLower.replace(/\*\*/g, "*");
             }
             const pattern = searchTextLower
-                                .split("*")
-                                .map(escape_regex)
-                                .join("(\\w+)");
+                .split("*")
+                .map(escape_regex)
+                .join("(\\w+)");
             searchPattern = new RegExp(pattern, "gi");
         }
     }
@@ -342,24 +319,24 @@ function get_word_frequency() {
         let words = wordRegexSearch
             ? []
             : notesLower
-            .replace(/[^\p{L}\p{N}\p{Extended_Pictographic}\u200D\uFE0F]+/gu, " ")
-            .split(/\s+/)
-            .filter(word =>
-                (word.replace(/[^a-zA-Z]/g, "").length >= 3 || /\p{Extended_Pictographic}/u.test(word)) && // Word is at least 3 letters long or emoji
-                (!STOP_WORDS.has(word)) && // Word is not a stop word
-                ((searchWords.length === 0) || (word !== searchTextLower)) && // Word is not the search term (avoid duplicates)
-                (
-                    (searchWords.length === 0) || // Either no search words or
-                    searchWords.some((sw, i) => {
-                        if (i === searchWords.length - 1) { // Last search word can be a prefix or exact match
-                            return (word.startsWith(sw) || sw.startsWith(word));
-                        }
-                        else { // Other search words must be exact matches
-                            return (word === sw);
-                        }
-                    })
-                )
-            );
+                .replace(/[^\p{L}\p{N}\p{Extended_Pictographic}\u200D\uFE0F]+/gu, " ")
+                .split(/\s+/)
+                .filter(word =>
+                    (word.replace(/[^a-zA-Z]/g, "").length >= 3 || /\p{Extended_Pictographic}/u.test(word)) && // Word is at least 3 letters long or emoji
+                    (!STOP_WORDS.has(word)) && // Word is not a stop word
+                    ((searchWords.length === 0) || (word !== searchTextLower)) && // Word is not the search term (avoid duplicates)
+                    (
+                        (searchWords.length === 0) || // Either no search words or
+                        searchWords.some((sw, i) => {
+                            if (i === searchWords.length - 1) { // Last search word can be a prefix or exact match
+                                return (word.startsWith(sw) || sw.startsWith(word));
+                            }
+                            else { // Other search words must be exact matches
+                                return (word === sw);
+                            }
+                        })
+                    )
+                );
 
         // If searchPattern is defined, find words that match the pattern
         if (searchPattern) {
@@ -403,7 +380,7 @@ function get_word_frequency() {
             words_data[word].count += 1;
             words_data[word].scores.push(average_score);
         });
-        
+
     });
 
 
@@ -432,18 +409,18 @@ async function create_word_frequency_section() {
     if (words_filtered.length > 0) {
         word_freq_container.innerHTML = `
             ${words_filtered.map(word => {
-                let isWordSearched = false;
-                if (wordSearchText) {
-                    isWordSearched = (normalize_string(word.word) === normalize_string(wordSearchText)) ||
-                                    wordSearchText.split(/\s+/)
-                                                .some(term => normalize_string(word.word) === (normalize_string(term)));
-                }
-                return `<div class="word-card ${isWordSearched ? "searched-word" : ""}">
+            let isWordSearched = false;
+            if (wordSearchText) {
+                isWordSearched = (normalize_string(word.word) === normalize_string(wordSearchText)) ||
+                    wordSearchText.split(/\s+/)
+                        .some(term => normalize_string(word.word) === (normalize_string(term)));
+            }
+            return `<div class="word-card ${isWordSearched ? "searched-word" : ""}">
                     <h4>${capitalize(word.word)}</h4>
                     <p title="Number of apearance">count: ${wordDisplayPercentage ? (100 * word.count / current_data.length).toFixed(1) + "%" : word.count}</p>
                     <p title="Average score">score: ${(word.avg_score).toFixed(2)}</p>
                     </div>`
-            }
+        }
         ).join("")}`
     }
     else { word_freq_container.innerHTML = "<p>No word frequency data available. Try to change search words, or lower the minimum count.</p>"; }
@@ -489,7 +466,7 @@ async function update_wordcloud() {
     if (!wordOrderByScore) {
         const minimumCount = words[words.length - 1][1];
         adjustedWords = words.map(([word, count]) => {
-            const adjustedCount = Math.pow(count - minimumCount + 1, (3 / (wordcloudCompression+2))) + 1;
+            const adjustedCount = Math.pow(count - minimumCount + 1, (3 / (wordcloudCompression + 2))) + 1;
             return [word, adjustedCount];
         });
     }
diff --git a/styles/main.css b/styles/main.css
