From c25b370df9a9ffb1ef5799968a985b8488cd8abf Mon Sep 17 00:00:00 2001 From: William Baker Date: Wed, 20 Mar 2024 21:30:19 -0400 Subject: [PATCH] HTML cleanup pt 1 --- index.css | 3 +- index.html | 103 ++++++++++++++++++++++++++++++++++++++++++++- src/index.civet | 100 +++++++++++++++++-------------------------- src/optimize.civet | 2 +- 4 files changed, 144 insertions(+), 64 deletions(-) diff --git a/index.css b/index.css index 8a5ae14..943e28e 100644 --- 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 index ab29d67..d9c712d 100644 --- a/index.html +++ b/index.html @@ -285,5 +285,106 @@
Loading...
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Land speed +
+
Water speed +
+
Air speed +
+
Antigravity speed +
+
Acceleration +
+
Weight +
+
Land handling +
+
Water handling +
+
Air handling +
+
Antigravity handling +
+
Traction +
+
Mini-Turbo +
+
Invulnerability +
+
+
Rivals: 
+
- \ No newline at end of file + diff --git a/src/index.civet b/src/index.civet index 046bae9..38d87f3 100644 --- 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 '.meter' .forEach .style.cssText = '' - statsDisplay.querySelectorAll 'td:last-child' - .forEach .innerHTML = '' + document.querySelectorAll '#stats-display td:last-child' + .forEach .textContent = '' return statBlock := sum character, kart, wheel, glider - statsDisplay.innerHTML = ``` - - - - - - - - - - - - - - -
${makeMeter 'land-speed-prev', statBlock.speed.land}${statBlock.speed.land}
${makeMeter 'water-speed-prev', statBlock.speed.water}${statBlock.speed.water}
${makeMeter 'air-speed-prev', statBlock.speed.air}${statBlock.speed.air}
${makeMeter 'antigrav-speed-prev', statBlock.speed.antigrav}${statBlock.speed.antigrav}
${makeMeter 'accel-prev', statBlock.accel}${statBlock.accel}
${makeMeter 'weight-prev', statBlock.weight}${statBlock.weight}
${makeMeter 'land-handling-prev', statBlock.handling.land}${statBlock.handling.land}
${makeMeter 'water-handling-prev', statBlock.handling.water}${statBlock.handling.water}
${makeMeter 'air-handling-prev', statBlock.handling.air}${statBlock.handling.air}
${makeMeter 'antigrav-handling-prev', statBlock.handling.antigrav}${statBlock.handling.antigrav}
${makeMeter 'traction-prev', statBlock.traction}${statBlock.traction}
${makeMeter 'mini-turbo-prev', statBlock.miniTurbo}${statBlock.miniTurbo}
${makeMeter 'invuln-prev', statBlock.invuln}${statBlock.invuln}
- ``` - 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 index f5fa263..9bacc6d 100644 --- a/src/optimize.civet +++ b/src/optimize.civet @@ -77,5 +77,5 @@ export optimize := (data: Omit, 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)!