Added experimental ACE calc feature

Author: StrawberryMaster

index.html

@@ -73,6 +73,92 @@
 				animation: octocat-wave 560ms ease-in-out
 			}
 		}
+
+		/* ACE modal styles */
+		#ace-results.ace-card {
+			position: fixed;
+			right: 1rem;
+			bottom: 1rem;
+			z-index: 1000;
+			display: flex;
+			flex-direction: column;
+			gap: .35rem;
+			padding: .75rem .9rem;
+			width: clamp(220px, 28vw, 340px);
+			max-height: min(46vh, 420px);
+			color: #fff;
+			background: rgba(24, 24, 24, 0.92);
+			backdrop-filter: blur(6px);
+			border-radius: .6rem;
+			box-shadow: 0 10px 30px rgba(0,0,0,.35);
+			border: 1px solid rgba(255,255,255,.08);
+		}
+
+		#ace-results.ace-card h3 {
+			margin: 0;
+			font-size: 1rem;
+			font-weight: 700;
+			letter-spacing: .02em;
+			border-bottom: 1px solid rgba(255,255,255,.08);
+			padding-bottom: .35rem;
+		}
+
+		#ace-results .ace-total {
+			font-weight: 600;
+			color: #fbaf00;
+		}
+
+		#ace-results .ace-list {
+			list-style: none;
+			margin: .25rem 0 0 0;
+			padding: 0;
+			overflow: auto;
+			flex: 1 1 auto;
+		}
+
+		#ace-results .ace-list li {
+			display: flex;
+			justify-content: space-between;
+			align-items: baseline;
+			gap: .5rem;
+			padding: .25rem 0;
+			border-bottom: 1px dashed rgba(255,255,255,.08);
+			font-size: .95rem;
+			line-height: 1.2;
+		}
+
+		#ace-results .ace-list li:last-child {
+			border-bottom: none;
+		}
+
+		#ace-results .ace-list li span {
+			opacity: .75;
+			font-size: .85em;
+			white-space: nowrap;
+		}
+
+		@media (max-width: 640px) {
+			#ace-results.ace-card {
+				left: .75rem;
+				right: .75rem;
+				bottom: .75rem;
+				width: auto;
+				max-height: 40vh;
+				padding: .65rem .75rem;
+			}
+		}
+
+		@media (prefers-color-scheme: light) {
+			#ace-results.ace-card {
+				color: #111;
+				background: rgba(255,255,255,.95);
+				border: 1px solid rgba(0,0,0,.08);
+			}
+
+			#ace-results .ace-list li {
+				border-bottom-color: rgba(0,0,0,.08);
+			}
+		}
 	</style>
 
 	<div id="map-indicator">
@@ -302,6 +388,13 @@ <h4>Create/edit custom scales</h4>
 		</button>
 	</div>
 
+	<!-- ACE results panel -->
+	<div id="ace-results" class="ace-card hidden" aria-live="polite">
+		<h3>ACE</h3>
+		<div class="ace-total">Total: —</div>
+		<ul class="ace-list"></ul>
+	</div>
+
 	<script src="static/js/sw.js"></script>
 	<script src="static/js/pages.js"></script>
 	<script src="static/js/generate.js"></script>

static/css/style.css

@@ -358,7 +358,7 @@ ion-icon+span {
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 #image-container {

static/js/atcf.js

@@ -28,6 +28,7 @@ function parseAtcf(data) {
                 name: cols[1],
                 shape: getAtcfShape(cols[10]),
                 category: speedToCat(Number(cols[8])),
+                speed: Number(cols[8]),
                 latitude: cols[6].slice(0, -2) + "." + cols[6].slice(-2),
                 longitude: cols[7].slice(0, -2) + "." + cols[7].slice(-2)
             }

static/js/generate.js

@@ -357,6 +357,8 @@ class MapManager {
             mapManager.hideLoader();
             mapManager.state.loading = false;
         }
+        const acePanel = document.getElementById("ace-results");
+        if (acePanel) acePanel.classList.add("hidden");
     }
 
     handleCustomMapUpload(event) {
@@ -552,6 +554,50 @@ function normalizeLongitude(lng) {
     return ((lng + 180) % 360 + 360) % 360 - 180;
 }
 
+// ACE helpers
+function computeACEByStorm(points) {
+    const groups = points.reduce((acc, p) => {
+        const k = p.name || "Unnamed";
+        (acc[k] ??= []).push(p);
+        return acc;
+    }, {});
+    const storms = [];
+    let total = 0;
+
+    Object.entries(groups).forEach(([name, arr]) => {
+        let sum = 0, pts = 0, tsPts = 0;
+        arr.forEach(p => {
+            const v = Number(p.speed);
+            if (!Number.isFinite(v)) return;
+            pts++;
+            if (v >= 34) {
+                const v5 = Math.round(v / 5) * 5; // NOAA convention
+                sum += v5 * v5;
+                tsPts++;
+            }
+        });
+        const ace = +(sum / 10000).toFixed(2);
+        storms.push({ name, ace, points: pts, tsPoints: tsPts });
+        total += ace;
+    });
+
+    storms.sort((a, b) => b.ace - a.ace);
+    return { totalAce: +total.toFixed(2), storms };
+}
+
+function renderACEResults(ace) {
+	const container = document.getElementById("ace-results");
+	if (!container) return;
+	container.classList.remove("hidden");
+	container.innerHTML = `
+		<h3 style="margin:.25rem 0;">ACE</h3>
+		<div class="ace-total">Total: ${ace.totalAce}</div>
+		<ul class="ace-list">
+			${ace.storms.map(s => `<li>${s.name || "Unnamed"}: ${s.ace} <span>(pts: ${s.tsPoints}/${s.points})</span></li>`).join("")}
+		</ul>
+	`;
+}
+
 // determine point type (tropical/subtropical/extratropical) from available fields
 function getPointType(point) {
 	const normalizeType = (t) => {
@@ -575,6 +621,10 @@ function createMap(data, accessible) {
     const imageContainer = elements.imageContainer;
     const smallerDotsCheckbox = document.getElementById("smaller-dots");
 
+    // Hide ACE panel while generating to avoid stale values
+    const acePanel = document.getElementById("ace-results");
+    if (acePanel) acePanel.classList.add("hidden");
+
     closeButton.classList.remove("hidden");
     output.classList.add("hidden");
     loader.classList.remove("hidden");
@@ -803,6 +853,13 @@ function createMap(data, accessible) {
             loader.classList.add("hidden");
             output.classList.remove("hidden");
 
+            try {
+                const ace = computeACEByStorm(data);
+                renderACEResults(ace);
+            } catch (e) {
+                console.warn("ACE calculation failed:", e);
+            }
+
             // if map generation is successful, hide the loader icon
             mapManager.hideLoader();
             mapManager.updateStatus('success');
@@ -815,5 +872,8 @@ function createMap(data, accessible) {
             mapManager.hideLoader();
             mapManager.updateStatus('error');
             mapManager.state.loading = false;
+
+            const acePanel = document.getElementById("ace-results");
+            if (acePanel) acePanel.classList.add("hidden");
         });
 }

static/js/hurdat.js

@@ -32,6 +32,7 @@ function parseHurdat(data) {
                     name: uniqueId,
                     shape: getHurdatShape(cols[3]),
                     category: speedToCat(Number(cols[6])),
+                    speed: Number(cols[6]),
                     latitude: cols[4],
                     longitude: cols[5]
                 }

static/js/ibtracs.js

@@ -54,6 +54,7 @@ function parseIbtracs(data) {
                     name: cols[0],
                     shape: getIbtracsShape(cols[10]),
                     category: speedToCat(max_wind),
+                    speed: max_wind,
                     latitude: parseCoord(cols[6].trim()),
                     longitude: parseCoord(cols[7].trim())
                 }

static/js/manual_input.js

@@ -85,7 +85,8 @@ document.querySelector("form").addEventListener("submit", (e) => {
             shape: stageToShape(stage),
             category: speedToCat(speedInKnots),
             latitude: latInput + latDir,
-            longitude: longInput + longDir
+            longitude: longInput + longDir,
+            speed: speedInKnots
         });
     });
 

static/js/rsmc.js

@@ -29,6 +29,7 @@ function parseRsmc(data) {
                     name: uniqueId,
                     shape: getRsmcShape(cols[2]),
                     category: speedToCat(Number(cols[6])),
+                    speed: Number(cols[6]),
                     latitude: cols[3].slice(0, -1) + "." + cols[3].slice(-1) + "N",
                     longitude: cols[4].slice(0, -1) + "." + cols[4].slice(-1) + "E"
                 }

static/js/storms.js

@@ -54,6 +54,7 @@ function parseStorms(data) {
                 name: tcNumber,
                 shape: getStormsShape(category),
                 category: speedToCat(windSpeedKnots),
+                speed: windSpeedKnots,
                 latitude: formatLatitude(parseFloat(cols[5])),
                 longitude: formatLongitude(parseFloat(cols[6])),
             });