From e93187742dcb0c52ab31de523f3167f544c95dc4 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 14 Feb 2026 14:57:40 -0700
Subject: [PATCH] feat: Implement interactive step-by-step METAR decoding

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 metar.html | 237 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 182 insertions(+), 55 deletions(-)
diff --git a/metar.html b/metar.html
index 90c695d..638c447 100644
--- a/metar.html
+++ b/metar.html
@@ -24,6 +24,15 @@
             font-size: 1em;
             padding: 0.5em 1em;
         }
+        .highlight {
+            background-color: yellow;
+        }
+        #decoding-display {
+            margin-top: 1em;
+            padding: 1em;
+            border: 1px solid #ccc;
+            white-space: pre-wrap; /* Respect newlines for remarks */
+        }
     </style>
 </head>
 <body>
@@ -33,77 +42,157 @@
         <div id="metar-display"></div>
         <button id="new-metar-btn">New METAR</button>
         <button id="test-all-btn">Test All METARs</button>
+        <div id="decoding-display"></div>
+        <button id="next-btn" style="margin-top: 1em;">Next</button>
     </div>
     <script>
         const metarDisplay = document.getElementById('metar-display');
+        const decodingDisplay = document.getElementById('decoding-display');
         const newMetarBtn = document.getElementById('new-metar-btn');
         const testAllBtn = document.getElementById('test-all-btn');
+        const nextBtn = document.getElementById('next-btn');
         const metars = [];
 
-        function parseMetar(metarString) {
-            const decoded = {};
+        let currentMetarSections = [];
+        let currentSectionIndex = 0;
+
+        // --- Decoding Functions ---
+
+        function decodeAirport(code) {
+            if (code === 'CYYC') return "CYYC: Calgary International Airport";
+            return `${code}: Unknown Airport`;
+        }
+
+        function decodeTime(code) {
+            const day = code.substring(0, 2);
+            const hours = code.substring(2, 4);
+            const minutes = code.substring(4, 6);
+            return `${code}: On the ${day}th day of the month at ${hours}:${minutes} UTC`;
+        }
+
+        function decodeWind(code) {
+            if (code === '00000KT') return `${code}: Calm winds`;
+            const dir = code.substring(0, 3);
+            const speed = parseInt(code.substring(3, 5));
+            const gustMatch = code.match(/G(\d{2})/);
+            let text = `${code}: Wind from ${dir}° at ${speed} knots`;
+            if (gustMatch) {
+                text += `, gusting to ${parseInt(gustMatch[1])} knots`;
+            }
+            return text;
+        }
+
+        function decodeVisibility(code) {
+            const vis = code.replace('SM', '');
+            return `${code}: Visibility ${vis} statute miles`;
+        }
+
+        function decodeClouds(code) {
+            const coverMap = {
+                'SKC': 'Sky clear',
+                'FEW': 'Few clouds',
+                'SCT': 'Scattered clouds',
+                'BKN': 'Broken clouds',
+                'OVC': 'Overcast clouds'
+            };
+            const cover = coverMap[code.substring(0, 3)];
+            if (!cover) return `${code}: Unknown cloud information`;
+            const alt = parseInt(code.substring(3, 6)) * 100;
+            return `${code}: ${cover} at ${alt.toLocaleString()} feet above ground`;
+        }
+
+        function decodeTempDew(code) {
+            const parts = code.split('/');
+            const temp = parts[0].startsWith('M') ? -parseInt(parts[0].substring(1)) : parseInt(parts[0]);
+            const dew = parts[1].startsWith('M') ? -parseInt(parts[1].substring(1)) : parseInt(parts[1]);
+            return `${code}: Temperature ${temp}°C, Dewpoint ${dew}°C`;
+        }
+
+        function decodeAltimeter(code) {
+            const alt = code.substring(1);
+            return `${code}: Altimeter ${alt.slice(0, 2)}.${alt.slice(2)} inches of mercury`;
+        }
+        
+        function decodeSlp(code) {
+            const pressure = parseInt(code.substring(3));
+            const hpa = (pressure < 500 ? 1000 : 900) + (pressure / 10);
+            return `SLP${pressure}: Sea-level pressure ${hpa.toFixed(1)} hPa`;
+        }
+
+        function decodeRemarks(parts) {
+            let decoded = ["RMK: Remarks"];
+            parts.forEach(part => {
+                if (part.startsWith('SLP')) {
+                    decoded.push(`  - ${decodeSlp(part)}`);
+                } else if (part.match(/^(AC|CI|CC)/)) {
+                     decoded.push(`  - ${part}: Cloud types and coverage details`);
+                } else {
+                     decoded.push(`  - ${part}: Other remark`);
+                }
+            });
+            return decoded.join('\n');
+        }
+
+        function generateMetarSections(metarString) {
+            const sections = [];
             const parts = metarString.split(/\s+/).filter(Boolean);
             let index = 0;
 
-            // Airport
+            // Section 1: Airport, Time, Auto
+            let airportTimeAutoRaw = [];
+            let airportTimeAutoDecoded = [];
+
             if (parts[index] && parts[index].length === 4 && parts[index].match(/^[A-Z][A-Z0-9]{3}$/)) {
-                decoded.airport = parts[index++];
-            } else {
-                console.error('Failed to parse airport in:', metarString);
-            }
-
-            // Time
-            if (parts[index] && parts[index].endsWith('Z')) {
-                decoded.time = parts[index++];
-            } else {
-                console.error('Failed to parse time in:', metarString);
-            }
-
-            // AUTO
-            if (parts[index] && parts[index] === 'AUTO') {
-                decoded.auto = true;
+                airportTimeAutoRaw.push(parts[index]);
+                airportTimeAutoDecoded.push(decodeAirport(parts[index]));
                 index++;
             }
-
-            // Wind
-            if (parts[index] && parts[index].endsWith('KT')) {
-                decoded.wind = parts[index++];
+            if (parts[index] && parts[index].endsWith('Z')) {
+                airportTimeAutoRaw.push(parts[index]);
+                airportTimeAutoDecoded.push(decodeTime(parts[index]));
+                index++;
+            }
+            if (parts[index] && parts[index] === 'AUTO') {
+                airportTimeAutoRaw.push(parts[index]);
+                airportTimeAutoDecoded.push("AUTO: Fully automated observation");
+                index++;
+            }
+            if (airportTimeAutoRaw.length > 0) {
+                sections.push({
+                    raw: airportTimeAutoRaw.join(' '),
+                    decoded: airportTimeAutoDecoded.join('\n')
+                });
             }
 
-            // The rest is semi-ordered. Find remarks first.
-            const remainingParts = parts.slice(index);
-            const rmkIndex = remainingParts.indexOf('RMK');
-            let mainParts = remainingParts;
-            if (rmkIndex !== -1) {
-                decoded.remarks = remainingParts.slice(rmkIndex + 1).join(' ');
-                mainParts = remainingParts.slice(0, rmkIndex);
-            }
-
-            // Identify other parts from what's left.
-            const cloudRegex = /^(SKC|CLR|FEW|SCT|BKN|OVC)(\d{3})?(CB|TCU)?$/;
-            const tempDewRegex = /^(M?\d{2})\/(M?\d{2})$/;
-            const altimeterRegex = /^A(\d{4})$/;
-
-            decoded.weather = [];
-            decoded.clouds = [];
-
+            // Find remarks
+            const rmkIndex = parts.indexOf('RMK');
+            const mainParts = rmkIndex !== -1 ? parts.slice(index, rmkIndex) : parts.slice(index);
+            
+            // Intermediate sections
             mainParts.forEach(part => {
-                if (tempDewRegex.test(part)) {
-                    if (!decoded.temp_dew) decoded.temp_dew = part;
-                } else if (altimeterRegex.test(part)) {
-                    if (!decoded.altimeter) decoded.altimeter = part;
-                } else if (cloudRegex.test(part)) {
-                    decoded.clouds.push(part);
-                } else if (part.endsWith('SM') && !decoded.visibility) {
-                    decoded.visibility = part;
-                } else {
-                    decoded.weather.push(part);
+                if (part.endsWith('KT')) {
+                    sections.push({ raw: part, decoded: decodeWind(part) });
+                } else if (part.endsWith('SM') || part.match(/^\d+$/) || part.match(/^\d\/\dSM$/)) {
+                    sections.push({ raw: part, decoded: decodeVisibility(part) });
+                } else if (part.match(/^(SKC|CLR|FEW|SCT|BKN|OVC)/)) {
+                    sections.push({ raw: part, decoded: decodeClouds(part) });
+                } else if (part.match(/^(M?\d{2})\/(M?\d{2})$/)) {
+                    sections.push({ raw: part, decoded: decodeTempDew(part) });
+                } else if (part.startsWith('A') && part.length === 5 && !isNaN(part.substring(1))) {
+                    sections.push({ raw: part, decoded: decodeAltimeter(part) });
                 }
             });
 
-            if (!decoded.altimeter) console.error('Failed to parse Altimeter in:', metarString);
+            // Remarks section
+            if (rmkIndex !== -1) {
+                const remarkParts = parts.slice(rmkIndex + 1);
+                sections.push({
+                    raw: `RMK ${remarkParts.join(' ')}`,
+                    decoded: decodeRemarks(remarkParts)
+                });
+            }
 
-            return decoded;
+            return sections;
         }
 
         function displayNewMetar() {
@@ -113,9 +202,10 @@
             }
             const randomIndex = Math.floor(Math.random() * metars.length);
             const metarString = metars[randomIndex];
-            metarDisplay.textContent = metarString;
 
-            const decodedMetar = parseMetar(metarString);
+            currentMetarSections = generateMetarSections(metarString);
+            currentSectionIndex = 0;
+            updateDisplay();
         }
 
         fetch('metars.txt')
@@ -140,12 +230,49 @@
 
         newMetarBtn.addEventListener('click', displayNewMetar);
 
+        function updateDisplay() {
+            if (currentMetarSections.length === 0) return;
+
+            // Build highlighted string
+            const parts = [];
+            currentMetarSections.forEach((section, index) => {
+                if (index === currentSectionIndex) {
+                    parts.push(`<span class="highlight">${section.raw}</span>`);
+                } else {
+                    parts.push(section.raw);
+                }
+            });
+            metarDisplay.innerHTML = parts.join(' ');
+
+            // Show decoding
+            decodingDisplay.textContent = currentMetarSections[currentSectionIndex].decoded;
+
+            // Show/hide next button
+            nextBtn.style.display = (currentSectionIndex < currentMetarSections.length - 1) ? 'inline-block' : 'none';
+        }
+
+        nextBtn.addEventListener('click', () => {
+            if (currentSectionIndex < currentMetarSections.length - 1) {
+                currentSectionIndex++;
+                updateDisplay();
+            }
+        });
+
         function testAllMetars() {
             console.log(`--- Starting test of ${metars.length} METARs ---`);
+            let failed = 0;
             metars.forEach(metarString => {
-                parseMetar(metarString);
+                try {
+                    const sections = generateMetarSections(metarString);
+                    if (sections.length === 0 && metarString.length > 0) {
+                        throw new Error("Parser produced no sections");
+                    }
+                } catch (e) {
+                    console.error("Failed to parse:", metarString, e);
+                    failed++;
+                }
             });
-            console.log(`--- Test finished ---`);
+            console.log(`--- Test finished, ${failed} failures ---`);
         }
 
         testAllBtn.addEventListener('click', testAllMetars);
