1000-turn battles often took over a minute to load, but they should now
be loaded in a few seconds. In addition, loading no longer freezes tabs,
and skipping several turns back should be a lot more performant.
There are two tricks here:
1. Every 300ms, we rest for 1ms to let the event loop run, which doesn't
provide _that_ much UI responsiveness, but enough for the tab not to
freeze entirely, and allows things like leaving the battle or clicking
"Prev turn" multiple times in a row.
2. Instead of writing every single turn to the battle log when skipping
to the end of a replay (such as when joining a battle), we only write
the most recent 100 turns. This drastically speeds up loading.
Two simple changes:
1. The "Play" button on replays is now button-class (and affected by
dark mode)
2. "Resume" no longer appears over paused replays (obviously the
play/pause button is still there), which should make things easier
for anyone trying to narrate a replay at their preferred pace.
I heard some complaints about Horizon looking blurry on large screens, so
here I am spending nearly 600 KB of the home page's 1 MB bandwidth use on
a nice-looking background.
To be fair, it is in fact a nice-looking background and the most
eyecatching thing there, so it's probably worth it.
This actually makes a surprising amount of difference for now nice things
look!
This takes advantage of inline-block, a feature not supported by IE6. I'm
always weirdly hesitant to use "modern" CSS, but I suppose worrying about
IE6 support is a bit insane even for me; even Replays required IE7+ when
I first wrote it.
Battle previously wanted an array of strings, but text logs from replays
are stored as a text file, and so supporting pure strings makes the Battle
constructor easier to use.
PS's current desktop client supports mobile. But we currently use battle
scenes in four places:
- PS itself
- Replays
- Downloaded replays
- PS Preact client
And the other three don't support mobile. That changes today! Well, it
doesn't, but it changes sometime in the future, with this being the
next step.
So that the code doesn't need to be duplicated between all four clients,
it's been moved from `client-battle.js` to `battle.ts`.
The redesign was always designed to accommodate all PS pages; I just
dragged my feet in transitioning the other pages over.
Sadly, the other main tabs (dex, replays, ladder) can't be
transitioned over because they use our panel layout.
