From 01d666e6d0b9e2b40ca94c9462fc89e065d66518 Mon Sep 17 00:00:00 2001 From: William Baker Date: Thu, 21 Mar 2024 00:15:38 -0400 Subject: [PATCH] HTML cleanup pt 2 Mostly performance improvments --- index.css | 12 +++++++++--- index.html | 22 ++++------------------ package-lock.json | 8 ++++---- package.json | 2 +- src/imageCache.civet | 17 +++++++++++++++++ src/index.civet | 41 +++++++++++++++++++++++++++++------------ 6 files changed, 64 insertions(+), 38 deletions(-) create mode 100644 src/imageCache.civet diff --git a/index.css b/index.css index 943e28e..f7ca211 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,5 @@ img { - width: min(2.5em, calc((100vw - 6.5em) / 8)); + width: min(2.5em, calc((100vw - 5.25em) / 8)); } button, select, input[type="number"] { @@ -7,11 +7,17 @@ button, select, input[type="number"] { } 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; } diff --git a/index.html b/index.html index d9c712d..cb79f83 100644 --- a/index.html +++ b/index.html @@ -262,24 +262,10 @@ - - Mario - Ludwig - MediumMii - - - StandardKart - TheDuke - - - Standard - BlueStandard - - - SuperGlider - WaddleWing - HylianKite - + MarioLudwigMediumMii + StandardKartTheDuke + StandardBlueStandard + SuperGliderWaddleWingHylianKite diff --git a/package-lock.json b/package-lock.json index 58ca511..6d2120c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "": { "name": "mariokart-optimizer", "dependencies": { - "@danielx/civet": "~0.6.83", + "@danielx/civet": "~0.6.85", "js-yaml": "^4.1.0" }, "devDependencies": { @@ -25,9 +25,9 @@ } }, "node_modules/@danielx/civet": { - "version": "0.6.83", - "resolved": "https://registry.npmjs.org/@danielx/civet/-/civet-0.6.83.tgz", - "integrity": "sha512-QtrR8oiMOa4Eia5Ef1o9FcmWM5JOAxS/+1M/sKk8tVmgzfngv3sPIitUgLblXph4pvB7wz6Vha+gEihRJpIYBA==", + "version": "0.6.85", + "resolved": "https://registry.npmjs.org/@danielx/civet/-/civet-0.6.85.tgz", + "integrity": "sha512-XPe9/nXkrkuHVE+7Qb4stg3m9zWinVKtjMZYE6d4Bz3wNnYCyY+gxS9hX8M5qShU4MrRcYefr6PY6U9p+aLRxg==", "dependencies": { "@cspotcode/source-map-support": "^0.8.1", "@typescript/vfs": "^1.5.0", diff --git a/package.json b/package.json index 2b83d37..d8669d5 100644 --- a/package.json +++ b/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": { diff --git a/src/imageCache.civet b/src/imageCache.civet new file mode 100644 index 0000000..33d95e3 --- /dev/null +++ b/src/imageCache.civet @@ -0,0 +1,17 @@ +class ImageCache + #map: Map + + @() + #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 diff --git a/src/index.civet b/src/index.civet index 38d87f3..30eabfc 100644 --- a/src/index.civet +++ b/src/index.civet @@ -3,6 +3,7 @@ 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 @@ -10,8 +11,14 @@ 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,14 +29,7 @@ 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) => `${ - [el.0.characters, el.1.karts, el.2.wheels, el.3.gliders - ].map( - .map((name) => `${name}`).join ' ' - ).join '' - }` - .join '' + if results.# > 0 setPreviewedKart results.0.0.characters.0 @@ -37,6 +37,26 @@ form.addEventListener 'submit', (e) => 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'