Merge pull request #145 from Leogendra/develop

Develop v1.8.5 with bug fixes and improvements

Author: Leogendra

assets/pixels/score_1.svg

@@ -540,7 +540,7 @@ <h3>Map Custom Moods to Scores</h3>
                 <img src="assets/logos/kofi.png" alt="Ko-fi">
             </a>
         </div>
-        <div class="version">Version: v1.8.4</div>
+        <div class="version">Version: v1.8.5</div>
     </footer>
 
     <!-- Charts.js for graphs -->

assets/pixels/score_2.svg

@@ -22,7 +22,13 @@ async function load_colored_score_SVG(score) {
     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];
+    const scoreColor = png_settings.colors[score];
+    svg.classList.add("color-icon");
+    svg.style.color = scoreColor;
+    
+    const bgColor = get_contrasting_text_color(scoreColor, highTreshold = 225);
+    svg.style.setProperty('--backgroundColor', bgColor);
+    
     return svg;
 }
 

assets/pixels/score_3.svg

@@ -96,14 +96,14 @@ async function update_svg_color(score, color) {
     const svg = document.querySelector(`#color${score}`).parentElement.querySelector("svg");
     if (svg) {
         svg.style.color = color;
+        const bgColor = get_contrasting_text_color(color, highTreshold = 225);
+        svg.style.setProperty('--backgroundColor', bgColor);
     }
     png_settings.colors[score] = color;
 }
 
 
 async function setup_palette_settings() {
-    const colors = png_settings.colors;
-
     for (let score = 1; score <= 5; score++) {
         const cell = document.querySelector(`#color${score}`).parentElement;
         const input = document.getElementById(`color${score}`);
@@ -113,11 +113,10 @@ async function setup_palette_settings() {
         let old_svg = cell.querySelector("svg");
         if (!old_svg) {
             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);
+                btn_save_palette_settings.style.display = "flex";
+                btn_reset_palette_settings.style.display = "flex";
             });
 
             cell.appendChild(svg);
@@ -328,7 +327,7 @@ async function generate_pixels_PNG() {
     const direction = layout.includes("vertical") ? "col" : "row";
     const isWeek = layout.includes("weeks");
     const textColor = get_contrasting_text_color(colors.empty);
-    const lightTextColor = get_contrasting_text_color(colors.empty, less = true);
+    const lightTextColor = get_contrasting_text_color(colors.empty, highTreshold = 186, less = true);
 
     // create a map of pixels by date
     const pixel_map = new Map();
@@ -1140,11 +1139,14 @@ btn_open_dialog_settings.addEventListener("click", () => {
 
 btn_reset_palette_settings.addEventListener("click", () => {
     png_settings.colors = { ...png_default_settings.colors };
+    btn_save_palette_settings.style.display = "none";
+    btn_reset_palette_settings.style.display = "none";
     close_dialog_settings();
 });
 
 btn_save_palette_settings.addEventListener("click", () => {
     close_dialog_settings(save = true);
+    btn_save_palette_settings.style.display = "none";
     show_popup_message("Palette settings saved", "success", 3000);
 });
 

assets/pixels/score_4.svg

@@ -46,10 +46,53 @@ function calculate_streaks() {
 }
 
 
+function calculate_best_day_of_year() {
+    const dayStats = {}; // { "MM-DD": { total: X, count: Y } }
+
+    current_data.forEach(entry => {
+        const avgScore = average(entry.scores);
+        if (!avgScore || !entry.date) { return; }
+
+        const date = new Date(entry.date);
+        const month = String(date.getMonth());
+        const day = String(date.getDate());
+        const dayKey = `${month}-${day}`;
+
+        if (!dayStats[dayKey]) {
+            dayStats[dayKey] = { total: 0, count: 0 };
+        }
+        dayStats[dayKey].total += avgScore;
+        dayStats[dayKey].count += 1;
+    });
+
+    let bestDay = null;
+    let bestAvg = 0;
+
+    Object.entries(dayStats).forEach(([dayKey, stats]) => {
+        const avg = stats.total / stats.count;
+        if (avg > bestAvg) {
+            bestAvg = avg;
+            bestDay = dayKey;
+        }
+    });
+
+    if (!bestDay) {
+        return { day: "N/A", score: 0 };
+    }
+
+    const [month, day] = bestDay.split('-').map(Number);
+    const monthName = new Date(0, month).toLocaleString(userLocale, { month: 'long' });
+    const formattedDay = `${day} ${monthName}`;
+
+    return { day: formattedDay, score: bestAvg };
+}
+
+
 function calculate_and_display_stats() {
     const allScores = current_data.flatMap(entry => entry.scores);
     const streaks = calculate_streaks();
     const moodCounts = {};
+    const bestDayInfos = calculate_best_day_of_year();
     averageScore = average(allScores);
     nbTotalDays = current_data.filter(entry => entry.scores.length > 0).length;
 
@@ -58,10 +101,10 @@ function calculate_and_display_stats() {
     });
 
     stats_array = [
-        { title: "Number of Pixels", value: `<p>${nbTotalDays}</p>` },
-        { title: "Average score", value: `<p>${averageScore.toFixed(2)}</p>` },
+        { title: "Number of Pixels", value: `<p>${nbTotalDays} | Avg score: ${averageScore.toFixed(2)}</p>` },
         { title: "Streaks", value: `<p>Last: ${streaks.currentStreak} | Best: ${streaks.bestStreak}</p>` },
-        { title: "Score distribution", value: `<canvas title="Click to enlarge" id="scoresPieChart" class="pie-chart" width="100" height="100"></canvas>` },
+        { title: "Best day of the year", value: `<p>${bestDayInfos.day}, score: ${bestDayInfos.score.toFixed(2)}</p>` },
+        { title: "Score distribution (click)", value: `<canvas title="Click to enlarge" id="scoresPieChart" class="pie-chart" width="100" height="100"></canvas>` },
     ];
 
     stats_container.innerHTML = stats_array.map(({ title, value }, index) => `

assets/pixels/score_5.svg

@@ -214,17 +214,17 @@ function RGB_to_hex({ r, g, b }) {
 }
 
 
-function get_contrasting_text_color(bgColor, less = false) {
+function get_contrasting_text_color(bgColor, highTreshold = 186, less = false) {
     const hex = bgColor.replace("#", "");
     const r = parseInt(hex.substr(0, 2), 16);
     const g = parseInt(hex.substr(2, 2), 16);
     const b = parseInt(hex.substr(4, 2), 16);
 
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b);
     if (less) {
-        return luminance > 186 ? "#808080" : "#d3d3d3";
+        return luminance > highTreshold ? "#808080" : "#d3d3d3";
     }
-    return luminance > 186 ? "#000000" : "#ffffff";
+    return luminance > highTreshold ? "#000000" : "#ffffff";
 }