HTML cleanup pt 1

bbrk24 · Mar 21, 2024 · c25b370 · c25b370
1 parent 5f23dce
commit c25b370
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 64 deletions.
diff --git a/index.css b/index.css
@@ -113,7 +113,8 @@ label[for="checkbox-all"] {
   padding: 0 0.5em;
 }
 
-#kart-preview img {
+#kart-preview img,
+#rivals img {
   margin-bottom: -0.75em;
   margin-left: 0.25em;
 }
diff --git a/index.html b/index.html
@@ -285,5 +285,106 @@
     </table>
     <hr />
     <div id="kart-preview">Loading...</div>
+    <div id="stats-display">
+      <table>
+        <tbody>
+          <tr>
+            <td>Land speed</td>
+            <td>
+              <div class="meter" id="land-speed-prev"></div>
+            </td>
+            <td id="land-speed-value"></td>
+          </tr>
+          <tr>
+            <td>Water speed</td>
+            <td>
+              <div class="meter" id="water-speed-prev"></div>
+            </td>
+            <td id="water-speed-value"></td>
+          </tr>
+          <tr>
+            <td>Air speed</td>
+            <td>
+              <div class="meter" id="air-speed-prev"></div>
+            </td>
+            <td id="air-speed-value"></td>
+          </tr>
+          <tr>
+            <td>Antigravity speed</td>
+            <td>
+              <div class="meter" id="antigrav-speed-prev"></div>
+            </td>
+            <td id="antigrav-speed-value"></td>
+          </tr>
+          <tr>
+            <td>Acceleration</td>
+            <td>
+              <div class="meter" id="accel-prev"></div>
+            </td>
+            <td id="accel-value"></td>
+          </tr>
+          <tr>
+            <td>Weight</td>
+            <td>
+              <div class="meter" id="weight-prev"></div>
+            </td>
+            <td id="weight-value"></td>
+          </tr>
+          <tr>
+            <td>Land handling</td>
+            <td>
+              <div class="meter" id="land-handling-prev"></div>
+            </td>
+            <td id="land-handling-value"></td>
+          </tr>
+          <tr>
+            <td>Water handling</td>
+            <td>
+              <div class="meter" id="water-handling-prev"></div>
+            </td>
+            <td id="water-handling-value"></td>
+          </tr>
+          <tr>
+            <td>Air handling</td>
+            <td>
+              <div class="meter" id="air-handling-prev"></div>
+            </td>
+            <td id="air-handling-value"></td>
+          </tr>
+          <tr>
+            <td>Antigravity handling</td>
+            <td>
+              <div class="meter" id="antigrav-handling-prev"></div>
+            </td>
+            <td id="antigrav-handling-value"></td>
+          </tr>
+          <tr>
+            <td>Traction</td>
+            <td>
+              <div class="meter" id="traction-prev"></div>
+            </td>
+            <td id="traction-value"></td>
+          </tr>
+          <tr>
+            <td>Mini-Turbo</td>
+            <td>
+              <div class="meter" id="mini-turbo-prev"></div>
+            </td>
+            <td id="mini-turbo-value"></td>
+          </tr>
+          <tr>
+            <td>Invulnerability</td>
+            <td>
+              <div class="meter" id="invuln-prev"></div>
+            </td>
+            <td id="invuln-value"></td>
+          </tr>
+        </tbody>
+      </table>
+      <div id="rivals">Rivals<sup
+        class="info"
+        title="When playing as P1 in a Grand Prix, these characters are guaranteed to be COM characters and should be better than other COMs, unless they are chosen by other players. Not all characters have rivals."
+      ></sup>:&nbsp;</div>
+    </div>
   </body>
-</html>
+</html>
diff --git a/src/index.civet b/src/index.civet
@@ -38,7 +38,7 @@ form.addEventListener 'submit', (e) =>
             results.0.3.gliders.0
 
 kartPreview := document.getElementById('kart-preview')!
-kartPreview.innerHTML = ''
+kartPreview.textContent = ''
 
 characterLabel := document.createElement 'label'
 characterLabel.textContent = 'Character'
@@ -50,9 +50,7 @@ for each statBlock, i of data.characters
             ||> .value = String i
             ||> .text = name.replace rgx, ' $&'
             |> characterDropdown.appendChild
-kartPreview.appendChild characterLabel
-kartPreview.append ' '
-kartPreview.appendChild characterDropdown
+kartPreview.append characterLabel, ' ', characterDropdown
 characterImg := document.createElement 'img' |> kartPreview.appendChild 
 kartPreview.appendChild document.createElement 'br'
 
@@ -66,9 +64,7 @@ for each statBlock, i of data.karts
             ||> .value = String i
             ||> .text = name.replace rgx, ' $&'
             |> kartDropdown.appendChild
-kartPreview.appendChild kartLabel
-kartPreview.append ' '
-kartPreview.appendChild kartDropdown
+kartPreview.append kartLabel, ' ', kartDropdown
 kartImg := document.createElement 'img' |> kartPreview.appendChild 
 kartPreview.appendChild document.createElement 'br'
 
@@ -82,9 +78,7 @@ for each statBlock, i of data.wheels
             ||> .value = String i
             ||> .text = name.replace rgx, ' $&'
             |> wheelDropdown.appendChild
-kartPreview.appendChild wheelLabel
-kartPreview.append ' '
-kartPreview.appendChild wheelDropdown
+kartPreview.append wheelLabel, ' ', wheelDropdown
 wheelImg := document.createElement 'img' |> kartPreview.appendChild 
 kartPreview.appendChild document.createElement 'br'
 
@@ -98,40 +92,21 @@ for each statBlock, i of data.gliders
             ||> .value = String i
             ||> .text = name.replace rgx, ' $&'
             |> gliderDropdown.appendChild
-kartPreview.appendChild gliderLabel
-kartPreview.append ' '
-kartPreview.appendChild gliderDropdown
+kartPreview.append gliderLabel, ' ', gliderDropdown
 gliderImg := document.createElement 'img' |> kartPreview.appendChild 
 kartPreview.appendChild document.createElement 'br'
 
 kartPreview.appendChild document.createElement 'br'
 
-statsDisplay := document.createElement 'div'
-    ||> .id = 'stats-display'
-    |> kartPreview.appendChild
-
-makeMeter := (id: string, value: number) =>
-    document.createElement 'div'
-        ||> .className = 'meter'
-        ||> .id = id
-        ||> .style.cssText = `--meter-length: ${value * 100/6}%;`
-        |> .outerHTML
-
-rivalsDiv := document.createElement 'div'
-    ||> .id = 'rivals'
-    ||> .append 'Rivals'
-
-rivalInfoString := 'When playing as P1 in a Grand Prix, these characters are guaranteed to be COM characters and should be better than other COMs, unless they are chosen by other players. Not all characters have rivals.'
-
-document.createElement 'sup'
-    ||> .className = 'info'
-    ||> .title = rivalInfoString
-    |> rivalsDiv.appendChild
-rivalsDiv.append ': '
-
+rivalsDiv := document.getElementById('rivals') as HTMLDivElement
 rivalImgContainer := document.createElement 'span' |> rivalsDiv.appendChild
 
 updatePreview := :void =>
+    character := try data.characters[+characterDropdown.value]
+    kart := try data.karts[+kartDropdown.value]
+    wheel := try data.wheels[+wheelDropdown.value]
+    glider := try data.gliders[+gliderDropdown.value]
+
     try
         rivalImgContainer.innerHTML = ''
         characterName := Array::find.call(characterDropdown.options, .selected).text.replaceAll ' ', ''
@@ -144,11 +119,6 @@ updatePreview := :void =>
     catch
         characterImg.src = './img/unknown.png'
 
-    character := try data.characters[+characterDropdown.value]
-    kart := try data.karts[+kartDropdown.value]
-    wheel := try data.wheels[+wheelDropdown.value]
-    glider := try data.gliders[+gliderDropdown.value]
-
     imgError .= false
     try 
         kartImg.src = `./img/${Array::find.call(kartDropdown.options, .selected).text.replaceAll ' ', ''}.png`
@@ -169,29 +139,37 @@ updatePreview := :void =>
     unless character? and kart? and wheel? and glider? and not imgError
         document.querySelectorAll<HTMLElement> '.meter'
             .forEach .style.cssText = ''
-        statsDisplay.querySelectorAll<HTMLTableCellElement> 'td:last-child'
-            .forEach .innerHTML = ''
+        document.querySelectorAll<HTMLTableCellElement> '#stats-display td:last-child'
+            .forEach .textContent = ''
         return
 
     statBlock := sum<BaseStatBlock> character, kart, wheel, glider
-    statsDisplay.innerHTML = ```
-        <table><tbody>
-        <tr><td><label for="land-speed-prev">Land speed</label></td><td>${makeMeter 'land-speed-prev', statBlock.speed.land}</td><td>${statBlock.speed.land}</td></tr>
-        <tr><td><label for="water-speed-prev">Water speed</label></td><td>${makeMeter 'water-speed-prev', statBlock.speed.water}</td><td>${statBlock.speed.water}</td></tr>
-        <tr><td><label for="air-speed-prev">Air speed</label></td><td>${makeMeter 'air-speed-prev', statBlock.speed.air}</td><td>${statBlock.speed.air}</td></tr>
-        <tr><td><label for="antigrav-speed-prev">Antigravity speed</label></td><td>${makeMeter 'antigrav-speed-prev', statBlock.speed.antigrav}</td><td>${statBlock.speed.antigrav}</td></tr>
-        <tr><td><label for="accel-prev">Acceleration</label></td><td>${makeMeter 'accel-prev', statBlock.accel}</td><td>${statBlock.accel}</td></tr>
-        <tr><td><label for="weight-prev">Weight</label></td><td>${makeMeter 'weight-prev', statBlock.weight}</td><td>${statBlock.weight}</td></tr>
-        <tr><td><label for="land-handling-prev">Land handling</label></td><td>${makeMeter 'land-handling-prev', statBlock.handling.land}</td><td>${statBlock.handling.land}</td></tr>
-        <tr><td><label for="water-handling-prev">Water handling</label></td><td>${makeMeter 'water-handling-prev', statBlock.handling.water}</td><td>${statBlock.handling.water}</td></tr>
-        <tr><td><label for="air-handling-prev">Air handling</label></td><td>${makeMeter 'air-handling-prev', statBlock.handling.air}</td><td>${statBlock.handling.air}</td></tr>
-        <tr><td><label for="antigrav-handling-prev">Antigravity handling</label></td><td>${makeMeter 'antigrav-handling-prev', statBlock.handling.antigrav}</td><td>${statBlock.handling.antigrav}</td></tr>
-        <tr><td><label for="traction-prev">Traction</label></td><td>${makeMeter 'traction-prev', statBlock.traction}</td><td>${statBlock.traction}</td></tr>
-        <tr><td><label for="mini-turbo-prev">Mini-Turbo</label></td><td>${makeMeter 'mini-turbo-prev', statBlock.miniTurbo}</td><td>${statBlock.miniTurbo}</td></tr>
-        <tr><td><label for="invuln-prev">Invulnerability</label></td><td>${makeMeter 'invuln-prev', statBlock.invuln}</td><td>${statBlock.invuln}</td></tr>
-        </tbody></table>
-        ```
-    statsDisplay.appendChild rivalsDiv
+    document.getElementById('land-speed-prev')!.style.setProperty '--meter-length', `${statBlock.speed.land * 100/6}%`
+    document.getElementById('land-speed-value')!.textContent = String statBlock.speed.land
+    document.getElementById('water-speed-prev')!.style.setProperty '--meter-length', `${statBlock.speed.water * 100/6}%`
+    document.getElementById('water-speed-value')!.textContent = String statBlock.speed.water
+    document.getElementById('air-speed-prev')!.style.setProperty '--meter-length', `${statBlock.speed.air * 100/6}%`
+    document.getElementById('air-speed-value')!.textContent = String statBlock.speed.air
+    document.getElementById('antigrav-speed-prev')!.style.setProperty '--meter-length', `${statBlock.speed.antigrav * 100/6}%`
+    document.getElementById('antigrav-speed-value')!.textContent = String statBlock.speed.antigrav
+    document.getElementById('accel-prev')!.style.setProperty '--meter-length', `${statBlock.accel * 100/6}%`
+    document.getElementById('accel-value')!.textContent = String statBlock.accel
+    document.getElementById('weight-prev')!.style.setProperty '--meter-length', `${statBlock.weight * 100/6}%`
+    document.getElementById('weight-value')!.textContent = String statBlock.weight
+    document.getElementById('land-handling-prev')!.style.setProperty '--meter-length', `${statBlock.handling.land * 100/6}%`
+    document.getElementById('land-handling-value')!.textContent = String statBlock.handling.land
+    document.getElementById('water-handling-prev')!.style.setProperty '--meter-length', `${statBlock.handling.water * 100/6}%`
+    document.getElementById('water-handling-value')!.textContent = String statBlock.handling.water
+    document.getElementById('air-handling-prev')!.style.setProperty '--meter-length', `${statBlock.handling.air * 100/6}%`
+    document.getElementById('air-handling-value')!.textContent = String statBlock.handling.air
+    document.getElementById('antigrav-handling-prev')!.style.setProperty '--meter-length', `${statBlock.handling.antigrav * 100/6}%`
+    document.getElementById('antigrav-handling-value')!.textContent = String statBlock.handling.antigrav
+    document.getElementById('traction-prev')!.style.setProperty '--meter-length', `${statBlock.traction * 100/6}%`
+    document.getElementById('traction-value')!.textContent = String statBlock.traction
+    document.getElementById('mini-turbo-prev')!.style.setProperty '--meter-length', `${statBlock.miniTurbo * 100/6}%`
+    document.getElementById('mini-turbo-value')!.textContent = String statBlock.miniTurbo
+    document.getElementById('invuln-prev')!.style.setProperty '--meter-length', `${statBlock.invuln * 100/6}%`
+    document.getElementById('invuln-value')!.textContent = String statBlock.invuln
 
 updatePreview()
 

diff --git a/src/optimize.civet b/src/optimize.civet
@@ -77,5 +77,5 @@ export optimize := (data: Omit<YamlData, 'rivals'>, options: OptimizeOptions, in
                             maxValue = value
                             results = [[character, kart, wheel, glider, statBlock]]
                         else if value is maxValue
-                            results.push [character, kart, wheel, glider, statBlock]   
+                            results.push [character, kart, wheel, glider, statBlock]
     return results.sort (a, b) => optValue(b.4, maxOpts)! - optValue(a.4, maxOpts)!