From 0853b9852b5ac182ff9931b3f8ea1c706fd6e033 Mon Sep 17 00:00:00 2001
From: fraxle <fraxle@yahoo.co.uk>
Date: Sun, 24 May 2026 01:21:14 +0100
Subject: [PATCH] 1.7.7

Fix tables colours and moon phase
---
 assets/js/app.js        | 102 +++++++++++++++++-----------------------
 assets/js/components.js |   8 ++--
 assets/js/utils.js      |  43 ++++++++++-------
 3 files changed, 75 insertions(+), 78 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index c15efc7..7a56f71 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -23,7 +23,7 @@
 import { h, render, Fragment } from '../vendor/preact.js';
 import htm from '../vendor/htm.js';
 import {
-  utciCategory,
+  utciCategory, UTCI_BANDS,
   SKIN_TYPES, sunburnMinutes, burnLabel,
   VEHICLE_TYPES, BUILDING_TYPES,
   confidenceBand, moonGlyph,
@@ -505,39 +505,40 @@ ${isPro && (activeProfile === 'custom' || activeCols['air']) && html`<button cla
                     };
                 // Returns a background tint based on temperature value - all share the same
                 // Thermal Stress Bands colors with 50% alpha for consistency. Uses exact legend ranges.
+				// Converts a hex colour - r,g,b components for rgba().
+                const hexToRgb = (hex) => {
+                  const n = parseInt(hex.replace('#',''), 16);
+                  return [(n>>16)&255, (n>>8)&255, n&255];
+                };
+                // Air + UTCI columns - 35% alpha light tint.
                 const tempBg = (t) => {
-                  if (t == null || t <= -27) return 'transparent';
-                  if (t <= -13)  return `rgba(63,115,196,0.5)`;            // Arctic: -27 to -13 (from #3f73c4)
-                  if (t <= 0)    return `rgba(126,176,224,0.5)`;           // Freezing: -13 to 0 (from #7eb0e0)
-                  if (t <= 9)    return `rgba(188,217,236,0.5)`;          // Cold: 0 to 9 (from #bcd9ec)
-                  if (t <= 18)   return `rgba(200,220,192,0.5)`;          // Chilled: 9 to 18 (from #c8dcc0)
-                  if (t <= 26)   return `rgba(74,138,58,0.5)`;            // Comfortable: 18 to 26 (from #4a8a3a)
-                  if (t <= 32)   return `rgba(232,197,71,0.5)`;           // Mod heat: 26 to 32 (from #e8c547)
-                  if (t <= 38)   return `rgba(220,138,58,0.5)`;           // Strong heat: 32 to 38 (from #dc8a3a)
-                  if (t <= 46)   return `rgba(196,74,58,0.5)`;            // V. strong: 38 to 46 (from #c44a3a)
-                  return `rgba(122,26,26,0.5)`;                            // Extreme heat: >46 (from #7a1a1a)
+                  if (t == null) return 'transparent';
+                  const band = utciCategory(t);
+                  if (!band) return 'transparent';
+                  const [r,g,b] = hexToRgb(band.bg);
+                  return `rgba(${r},${g},${b},0.35)`;
                 };
+                // All other coloured columns - 50% alpha.
                 const tempBgStrong = (t) => {
-                  if (t == null || t <= -27) return 'transparent';
-                  if (t <= -13)  return `rgba(63,115,196,0.5)`;             // Arctic: -27 to -13
-                  if (t <= 0)    return `rgba(126,176,224,0.5)`;            // Freezing: -13 to 0
-                  if (t <= 9)    return `rgba(188,217,236,0.5)`;           // Cold: 0 to 9
-                  if (t <= 18)   return `rgba(200,220,192,0.5)`;           // Chilled: 9 to 18
-                  if (t <= 26)   return `rgba(74,138,58,0.5)`;             // Comfortable: 18 to 26
-                  if (t <= 32)   return `rgba(232,197,71,0.5)`;            // Mod heat: 26 to 32
-                  if (t <= 38)   return `rgba(220,138,58,0.5)`;            // Strong heat: 32 to 38
-                  if (t <= 46)   return `rgba(196,74,58,0.5)`;             // V. strong: 38 to 46
-                  return `rgba(122,26,26,0.5)`;                              // Extreme heat: >46
+                  if (t == null) return 'transparent';
+                  const band = utciCategory(t);
+                  if (!band) return 'transparent';
+                  const [r,g,b] = hexToRgb(band.bg);
+                  return `rgba(${r},${g},${b},0.5)`;
                 };
-                  const tempFontColor = (t) => {
+				// Returns perceived luminance 0..1 from a hex colour.
+                const luminance = (hex) => {
+                  const [r,g,b] = hexToRgb(hex);
+                  return (0.299*r + 0.587*g + 0.114*b) / 255;
+                };
+                // Light tint (35% alpha) - always dark text, background is never dark enough.
+                const tempFontColor = (t) => '#4a3218';
+                // Medium tint (50% alpha) - use light text on dark bands, dark text on light bands.
+                const tempFontColorStrong = (t) => {
                   if (t == null) return '#4a3218';
-                  if (t <= -13) return '#fff';              // Arctic (-27 to -13)
-                  if (t <= 0)  return '#111';                // Freezing (-13 to 0)
-                  if (t <= 9)  return '#111';                 // Cold (0 to 9)
-                  if (t <= 18) return '#111';                // Chilled (9 to 18)
-                  if (t <= 26) return '#fff';                  // Comfortable (18 to 26)
-                  if (t <= 38) return '#111';                  // Mod heat/Strong heat (26 to 38)
-                  return '#fff';                               // V. strong/Extreme (38+)
+                  const band = utciCategory(t);
+                  if (!band) return '#4a3218';
+                  return luminance(band.bg) < 0.35 ? '#ffffff' : '#4a3218';
                 };
                 const scaleBg = (v, min, max, rgb, maxAlpha = 0.14) => {
                       if (v == null || isNaN(v)) return 'transparent';
@@ -672,12 +673,12 @@ ${isPro && (activeProfile === 'custom' || activeCols['air']) && html`<button cla
 								<span class="wind-dir-label" style=${{ fontFamily: 'Manrope, sans-serif', fontSize: '11px', fontWeight: 700 }}>${r.compass.label}</span>
 							  </span>
 							</td>`}
-			            		 ${visibleCols.air     && html`<td class=${groupStart('air')} style=${{ background: tempBg(r.Ta), color: tempFontColor(r.Ta) }}>${r.Ta.toFixed(1)}</td>`}
+			            		 ${visibleCols.air     && html`<td class=${groupStart('air')} style=${{ background: tempBg(r.Ta), color: tempFontColorStrong(r.Ta) }}>${r.Ta.toFixed(1)}</td>`}
 		                          ${visibleCols.rh      && html`<td class=${groupStart('rh')} style=${{ background: scaleBg(r.RH, 30, 100, '70,145,200') }}>${Math.round(r.RH)}</td>`}
- 			 		    ${visibleCols.dew     && html`<td class=${groupStart('dew')} style=${{ background: tempBg(r.dew), color: tempFontColor(r.dew) }}>${r.dew != null ? r.dew.toFixed(1) : '—'}</td>`}
-		                          ${visibleCols.tmrt    && html` 					  <td class=${groupStart('tmrt')} style=${{ background: tempBg(r.Tmrt), color: tempFontColor(r.Tmrt) }}>${r.Tmrt.toFixed(1)}</td>`}
+ 			 		    ${visibleCols.dew     && html`<td class=${groupStart('dew')} style=${{ background: tempBgStrong(r.dew), color: tempFontColorStrong(r.dew) }}>${r.dew != null ? r.dew.toFixed(1) : '—'}</td>`}
+		                          ${visibleCols.tmrt    && html` 					  <td class=${groupStart('tmrt')} style=${{ background: tempBgStrong(r.Tmrt), color: tempFontColorStrong(r.Tmrt) }}>${r.Tmrt.toFixed(1)}</td>`}
 							${visibleCols.utci && html`
-							  <td class=${groupStart('utci')} style=${{ background: hexToRgba(cat.bg, 0.22), color: cat.fg === '#fff' ? cat.fg : '#2a1a08', fontWeight: 600 }}>
+							  <td class=${groupStart('utci')} style=${{ background: hexToRgba(cat.bg, 0.35), color: tempFontColorStrong(r.utci), fontWeight: 600 }}>
 								${r.utci.toFixed(1)}°
 							  </td>`}
 							${visibleCols.delta   && html`
@@ -689,29 +690,27 @@ ${isPro && (activeProfile === 'custom' || activeCols['air']) && html`<button cla
 								${delta > 0 ? '+' : ''}${delta.toFixed(1)}
 							  </td>`}
 							${visibleCols.utciP && html`
-							  <td class=${groupStart('utciP')} style=${{ background: hexToRgba(adjCat.bg, 0.55), color: adjCat.fg === '#fff' ? adjCat.fg : '#2a1a08', fontWeight: 700, fontSize: '13px' }}>
+							  <td class=${groupStart('utciP')} style=${{ background: hexToRgba(adjCat.bg, 0.50), color: tempFontColorStrong(r.utciAdj), fontWeight: 700, fontSize: '13px' }}>
 								${r.utciAdj.toFixed(1)}°
 							  </td>`}
 							${visibleCols.concreteT && html`
-    							  <td class=${groupStart('concreteT')} style=${{ color: tempFontColor(r.concreteT), fontWeight: 'bold', background: tempBg(r.concreteT) }}>
+    							<td class=${groupStart('concreteT')} style=${{ color: tempFontColorStrong(r.concreteT), fontWeight: 'bold', background: tempBgStrong(r.concreteT) }}>
 								${r.concreteT != null ? r.concreteT.toFixed(1) : '—'}
 							  </td>`}
 							${visibleCols.vehicleT && html`
-    							  <td class=${groupStart('vehicleT')} style=${{ color: tempFontColor(r.vehicleT), fontWeight: 'bold', background: tempBgStrong(r.vehicleT) }}>
+    							  <td class=${groupStart('vehicleT')} style=${{ color: tempFontColorStrong(r.vehicleT), fontWeight: 'bold', background: tempBgStrong(r.vehicleT) }}>
 								${r.vehicleT != null ? r.vehicleT.toFixed(1) : '—'}
 							  </td>`}
 							${indoorMode === 'on' && !indoorManaged && html`
-    							  <td class=${groupStart('indoorT')} style=${{ color: tempFontColor(r.indoorT), fontWeight: 'bold', background: tempBgStrong(r.indoorT) }}>
+    							  <td class=${groupStart('indoorT')} style=${{ color: tempFontColorStrong(r.indoorT), fontWeight: 'bold', background: tempBgStrong(r.indoorT) }}>
 								${r.indoorT != null ? r.indoorT.toFixed(1) : '—'}
 							  </td>`}
 							${indoorMode === 'on' && indoorManaged && html`
-   							  <td class=${groupStart('managedT')} style=${{ color: tempFontColor(r.managedT), fontWeight: 'bold', background: tempBgStrong(r.managedT) }}>
+   							  <td class=${groupStart('managedT')} style=${{ color: tempFontColorStrong(r.managedT), fontWeight: 'bold', background: tempBgStrong(r.managedT) }}>
 					 		   ${r.managedT != null ? r.managedT.toFixed(1) : '—'}
 							  </td>`}
 							${visibleCols.soilT && html`
-  					        <td class=${groupStart('soilT')} style=${{ color: tempFontColor(r.soilT0), background: tempBg(r.soilT0) }}>${r.soilT0 != null ? r.soilT0.toFixed(1) : '—'}</td>`}
-							${visibleCols.soilT6 && html`
-  					        <td class=${groupStart('soilT6')} style=${{ color: tempFontColor(r.soilT6), background: tempBg(r.soilT6) }}>${r.soilT6 != null ? r.soilT6.toFixed(1) : '—'}</td>`}
+  					        <td class=${groupStart('soilT')} style=${{ color: tempFontColorStrong(r.soilT0), background: tempBgStrong(r.soilT0) }}>${r.soilT0 != null ? r.soilT0.toFixed(1) : '—'}</td>`}
 							${visibleCols.soilM && html`
 							  <td class=${groupStart('soilM')} style=${{ color: '#2a6a90', background: scaleBg(r.soilM, 0.12, 0.45, '50,125,190') }}>${r.soilM != null ? r.soilM.toFixed(3) : '—'}</td>`}
 							${visibleCols.precip && html`
@@ -785,24 +784,11 @@ ${isPro && (activeProfile === 'custom' || activeCols['air']) && html`<button cla
                 </div>`;
             })()}
 
-            <div class="utci-legend">
-              <span class="utci-legend-label">Thermal stress bands</span>
-              <div class="utci-legend-row">
-                ${[
-                  { l: '-27 to -13  Arctic',     bg: '#3f73c4', fg: '#fff' },
-                  { l: '-13 to 0  Freezing',     bg: '#7eb0e0', fg: '#111' },
-                  { l: '0 to 9  Cold',           bg: '#bcd9ec', fg: '#111' },
-                  { l: '9 to 18  Chilled',       bg: '#c8dcc0', fg: '#111' },
-                  { l: '18 to 26  Comfortable',  bg: '#4a8a3a', fg: '#fff' },
-                  { l: '26 to 32  Mod heat',     bg: '#e8c547', fg: '#111' },
-                  { l: '32 to 38  Strong heat',  bg: '#dc8a3a', fg: '#111' },
-                  { l: '38 to 46  V. strong',    bg: '#c44a3a', fg: '#fff' },
-                  { l: '> 46  Extreme heat',     bg: '#7a1a1a', fg: '#fff' },
-                ].map((b, i) => html`
+            <div class="utci-legend-row">
+                ${UTCI_BANDS.map((b, i) => html`
                   <span key=${i} class="utci-legend-item" style=${{ background: b.bg, color: b.fg }}>
-                    ${b.l}
+                    ${b.label}
                   </span>`)}
-              </div>
             </div>
 
             
@@ -902,4 +888,4 @@ ${isPro && (activeProfile === 'custom' || activeCols['air']) && html`<button cla
       </footer>
       </main>
     </div>`;
-}
+}
\ No newline at end of file
diff --git a/assets/js/components.js b/assets/js/components.js
index ae54fba..3bbd201 100644
--- a/assets/js/components.js
+++ b/assets/js/components.js
@@ -179,9 +179,9 @@ export function SkyScope({ elev, dt, glob = 0, size = 26 }) {
 
   const phase = moonPhaseFraction(dt);
   const moonR = innerR * 0.55;
-  const phaseOffset = Math.cos(2 * Math.PI * phase) * moonR;
+  const phaseOffset = Math.cos(Math.PI * phase) * moonR;
   const moonLitFromRight = phase < 0.5;
-  const shadowCx = r + (moonLitFromRight ? -phaseOffset : phaseOffset);
+  const shadowCx = r + phaseOffset;
   const grass = grassFillForElev(elev);
 
   const uid    = `ss-${size}-${Math.round(elev * 10)}-${Math.round(phase * 1000)}-${isRising ? 'r' : 's'}`;
@@ -424,9 +424,9 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
   const sunGlowPeak = 0.30 + radFrac * 0.45 + horizFrac * 0.15; // centre opacity
   const moonDrawR = 15;
   const moonY = cy - 45;
-  const phaseOffset = Math.cos(2 * Math.PI * phase) * moonDrawR;
+  const phaseOffset = Math.cos(Math.PI * phase) * moonDrawR;
   const moonLitFromRight = phase < 0.5;
-  const moonShadowCx = cx + (moonLitFromRight ? -phaseOffset : phaseOffset);
+  const moonShadowCx = cx + phaseOffset;
   // Readout text colours flip with day/night for legibility against the sky.
   const readoutColor = isDay ? '#1e1208' : '#f5edd6';
   const readoutMutedColor = isDay ? '#9a7d5a' : '#d4c5a8';
diff --git a/assets/js/utils.js b/assets/js/utils.js
index 15f3dab..4afcf91 100644
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@@ -24,24 +24,35 @@
 // ------------------------------------------------------------------------
 
 // -------------------------------------------------------------------
-// UTCI THERMAL STRESS BANDS - the coloured pills in the table.
+// UTCI THERMAL STRESS BANDS - single source of truth.
 // -------------------------------------------------------------------
-// To recolour any band, change its bg/fg hex code. To shift the
-// boundary between bands (e.g. make "Comfortable" wider), change the
-// 'if (u < -)' thresholds. Order matters - they're checked top-down.
+// Edit this array to change labels, colours or thresholds.
+// Each entry: { max, label, bg, fg }
+//   max  - upper boundary (exclusive). Omit on the last entry.
+//   bg   - background hex for table cells and legend.
+//   fg   - foreground hex for text on that background.
+// utciCategory() reads from this array - do not duplicate elsewhere.
 // -------------------------------------------------------------------
+export const UTCI_BANDS = [
+  { max: -20, label: 'Extreme cold',  bg: '#0e1a50', fg: '#c8d4f0' },
+  { max: -10, label: 'Arctic',        bg: '#2a52b0', fg: '#dce8ff' },
+  { max:   0, label: 'Freezing',      bg: '#5c90cc', fg: '#ffffff' },
+  { max:   5, label: 'Very cold',     bg: '#90bcd8', fg: '#08182e' },
+  { max:  10, label: 'Cold',          bg: '#b8d4dc', fg: '#08182e' },
+  { max:  15, label: 'Chilly',        bg: '#c8dfc0', fg: '#082010' },
+  { max:  19, label: 'Cool',          bg: '#8aca78', fg: '#082010' },
+  { max:  24, label: 'Comfortable',   bg: '#157018', fg: '#b8f0b8' },
+  { max:  29, label: 'Warm',          bg: '#e8d840', fg: '#201800' },
+  { max:  34, label: 'Hot',           bg: '#eca030', fg: '#201800' },
+  { max:  39, label: 'Very hot',      bg: '#d84818', fg: '#ffffff' },
+  { max:  44, label: 'Extremely hot', bg: '#a81810', fg: '#ffc8b8' },
+  {           label: 'Danger',        bg: '#3a0404', fg: '#ffffff' },
+];
+
 export function utciCategory(u) {
-  if (u < -40) return { label: 'Extreme cold',     bg: '#1a1438', fg: '#fff' };
-  if (u < -27) return { label: 'Very strong cold', bg: '#23408f', fg: '#fff' };
-  if (u < -13) return { label: 'Arctic',           bg: '#3f73c4', fg: '#fff' };
-  if (u <   0) return { label: 'Freezing',         bg: '#7eb0e0', fg: '#1a1612' };
-  if (u <   9) return { label: 'Cold',             bg: '#bcd9ec', fg: '#1a1612' };
-  if (u <  18) return { label: 'Chilled',          bg: '#c8dcc0', fg: '#1a1612' };
-  if (u <  26) return { label: 'Comfortable',      bg: '#4a8a3a', fg: '#fff' };
-  if (u <  32) return { label: 'Moderate heat',    bg: '#e8c547', fg: '#1a1612' };
-  if (u <  38) return { label: 'Strong heat',      bg: '#dc8a3a', fg: '#1a1612' };
-  if (u <  46) return { label: 'Very strong heat', bg: '#c44a3a', fg: '#fff' };
-  return        { label: 'Extreme heat',           bg: '#7a1a1a', fg: '#fff' };
+  for (const band of UTCI_BANDS) {
+    if (band.max === undefined || u < band.max) return band;
+  }
 }
 
 // -------------------------------------------------------------------
@@ -367,4 +378,4 @@ export function grassFillForElev(e) {
   if (e > -8)  return { top: '#665884', bot: '#3e3556' };  // civil twilight purple
   if (e > -14) return { top: '#363356', bot: '#1c1a34' };  // nautical night
   return { top: '#201d3a', bot: '#0d0b20' };               // astronomical night
-}
+}
\ No newline at end of file