search

zax-xyz / kh-rando-tracker

A web-based tracker intended for use with randomisers in the Kingdom Hearts series
https://tracker.zaxu.xyz/
MIT License
3 stars 7 forks source link

[next] Refactor secondary numbers (100 Acre and drives) #14

Closed auscompgeek closed 3 years ago

auscompgeek commented 4 years ago

Hopefully @Televo won't be too bothered by these being a few pixels off from the original images. I tried to keep them as close as possible to the originals whilst using round numbers.

This doesn't trim off the extra whitespace on the original secondary icons. We could do this if desired, but I'm not bothered right now.

Please check that this does actually save bandwidth before merging.

zax-xyz commented 3 years ago

Rather than using several different CSS selectors, it might be better to add a conditionally rendered image with a computed src value from a getter, with an optional MAX level specified in the state, and having additional styles only for MAX. This would allow it to be more generic, and reduce code repetition. Changing the approach to this should probably also use a Vue prop rather than a data attribute.

Perhaps with using this conditionally rendered image similar to the others in the component, we can also add the same transitions to the secondary numbers that we have for the regular numbers.

auscompgeek commented 3 years ago

Good call. Feel free to bikeshed the names I've added.

zax-xyz commented 3 years ago

I've done a comparison for transfer size before and after these changes.

Building for production (npm run build), the total size of dist is 6044 KB with the changes, and 6572 KB without (528 KB difference).

Running a server with python -m http.server inside each of these dist folders, using default tracker layouts, Firefox reports 4.21 MB / 4.22 MB size/transfer size of all requests after a hard refresh with the changes applied, compared to 4.68 / 4.70 MB without (0.47 / 0.48 MB difference). Limiting to image requests gives 3.94 MB / 3.96 MB and 4.41 MB / 4.43 MB respectively (0.47 MB difference).

Note that since we preload all the images at the beginning, activating the secondary images is unnecessary as they are already cached by that point.

zax-xyz commented 3 years ago

(lol wrong button)