HTML cleanup pt 2

Mostly performance improvments

index.css

@@ -1,17 +1,23 @@
 img {
-  width: min(2.5em, calc((100vw - 6.5em) / 8));
+  width: min(2.5em, calc((100vw - 5.25em) / 8));
 }
 
 button, select, input[type="number"] {
   font-size: 0.8333rem;
 }
 
 menu {
-  columns: 2;
   position: relative;
 }
 
-@media screen and (min-width: 36em) {
+/* The screen widths here are rounded up to an integer number of ems. */
+@media screen and (min-width: 25em) {
+  menu {
+    columns: 2;
+  }
+}
+
+@media screen and (min-width: 37em) {
   menu {
     columns: 3;
   }

index.html

@@ -262,24 +262,10 @@
       </thead>
       <tbody id="output">
         <tr>
-          <td>
-            <img src="./img/Mario.png" alt="Mario" title="Mario" />
-            <img src="./img/Ludwig.png" alt="Ludwig" title="Ludwig" />
-            <img src="./img/MediumMii.png" alt="MediumMii" title="Medium Mii" />
-          </td>
-          <td>
-            <img src="./img/StandardKart.png" alt="StandardKart" title="Standard Kart" />
-            <img src="./img/TheDuke.png" alt="TheDuke" title="The Duke" />
-          </td>
-          <td>
-            <img src="./img/Standard.png" alt="Standard" title="Standard" />
-            <img src="./img/BlueStandard.png" alt="BlueStandard" title="Blue Standard" />
-          </td>
-          <td>
-            <img src="./img/SuperGlider.png" alt="SuperGlider" title="Super Glider" />
-            <img src="./img/WaddleWing.png" alt="WaddleWing" title="Waddle Wing" />
-            <img src="./img/HylianKite.png" alt="HylianKite" title="Hylian Kite" />
-          </td>
+          <td><img src="./img/Mario.png" alt="Mario" title="Mario" /><img src="./img/Ludwig.png" alt="Ludwig" title="Ludwig" /><img src="./img/MediumMii.png" alt="MediumMii" title="Medium Mii" /></td>
+          <td><img src="./img/StandardKart.png" alt="StandardKart" title="Standard Kart" /><img src="./img/TheDuke.png" alt="TheDuke" title="The Duke" /></td>
+          <td><img src="./img/Standard.png" alt="Standard" title="Standard" /><img src="./img/BlueStandard.png" alt="BlueStandard" title="Blue Standard" /></td>
+          <td><img src="./img/SuperGlider.png" alt="SuperGlider" title="Super Glider" /><img src="./img/WaddleWing.png" alt="WaddleWing" title="Waddle Wing" /><img src="./img/HylianKite.png" alt="HylianKite" title="Hylian Kite" /></td>
         </tr>
       </tbody>
     </table>

package.json

@@ -2,7 +2,7 @@
     "name": "mariokart-optimizer",
     "private": true,
     "dependencies": {
-        "@danielx/civet": "~0.6.83",
+        "@danielx/civet": "~0.6.85",
         "js-yaml": "^4.1.0"
     },
     "scripts": {

src/imageCache.civet

@@ -0,0 +1,17 @@
+class ImageCache
+    #map: Map<string, HTMLImageElement>
+
+    @()
+        #map = new Map
+
+    getImage(name: string)
+        if #map.has name
+            #map.get(name)!.cloneNode() as HTMLImageElement
+        else
+            document.createElement 'img'
+                ||> .src = `./img/${name}.png`
+                ||> .alt = name
+                ||> .title = name.replace /(?<=[^A-Z])[A-Z]|(?!^)[A-Z][a-z]|(?<=\D)\d/g, ' $&'
+                ||> #map@set name
+
+export default cache := new ImageCache

src/index.civet

@@ -3,15 +3,22 @@
 data from ./data.civet
 { optimize, sum } from ./optimize.civet
 getFormValues from ./getFormValues.civet
+cache from ./imageCache.civet
 type { BaseStatBlock } from ./yamlTypes.civet
 
 limitedData .= structuredClone data
 
 rgx := /(?<=[^A-Z])[A-Z]|(?!^)[A-Z][a-z]|(?<=\D)\d/g
 
 form := document.querySelector('form')!
+output := document.getElementById('output')!
+let timeoutID?: number
 form.addEventListener 'submit', (e) =>
     e.preventDefault()
+    if timeoutID?
+        clearTimeout timeoutID
+        timeoutID = undefined
+
     results := optimize
         {
             characters: limitedData.characters.filter .characters.#
@@ -22,21 +29,34 @@ form.addEventListener 'submit', (e) =>
         getFormValues()
         // @ts-expect-error I have neither the time nor the crayons to fix this line
         document.getElementById('inward-drift').value
-    document.getElementById('output')!.innerHTML = results
-        .map (el) => `<tr><td>${
-            [el.0.characters, el.1.karts, el.2.wheels, el.3.gliders
-                ].map(
-                    .map((name) => `<img src="./img/${name}.png" alt="${name}" title="${name.replace rgx, ' $&'}"/>`).join ' '
-                ).join '</td><td>'
-        }</td></tr>`
-        .join ''
+
     if results.# > 0
         setPreviewedKart
             results.0.0.characters.0
             results.0.1.karts.0
             results.0.2.wheels.0
             results.0.3.gliders.0
 
+    output.innerHTML = ''
+    // If there's lots of results, this can take a couple seconds. So batch it and give the UI a chance to catch up.
+    appendPartialResults := (startIndex: number): void =>
+        batchSize := 1000
+        for i of [startIndex...(startIndex + batchSize)]
+            if i >= results.#
+                timeoutID = undefined
+                return
+            el := results[i]
+
+            tr := document.createElement 'tr'
+            for names of [el.0.characters, el.1.karts, el.2.wheels, el.3.gliders]
+                document.createElement 'td'
+                    ||> .append ...names.map cache@getImage
+                    |> tr.appendChild
+            output.appendChild tr
+        // 4 is the minimum timeout for chained timeouts
+        timeoutID = setTimeout appendPartialResults, 4, batchSize + startIndex
+    appendPartialResults 0
+
 kartPreview := document.getElementById('kart-preview')!
 kartPreview.textContent = ''
 
@@ -112,10 +132,7 @@ updatePreview := :void =>
         characterName := Array::find.call(characterDropdown.options, .selected).text.replaceAll ' ', ''
         characterImg.src = `./img/${characterName}.png`
         try for rival of data.rivals[characterName]
-            document.createElement 'img'
-                ||> .alt = rival.replace rgx, ' $&'
-                ||> .src = `./img/${rival}.png`
-                |> rivalImgContainer.appendChild
+            rival |> cache.getImage |> rivalImgContainer.appendChild
     catch
         characterImg.src = './img/unknown.png'