New Replays now supports adding `?p2` to the end of a replay
URL, to see the replay from the opposing viewpoint.
Search results will now automatically be from the viewpoint of
the player you're searching for.
Viewpoint is now a selector rather than a "Switch sides" button,
which should hopefully be clearer about what it's doing.
Old Replays's two column support was the Panel system most notably
shown off by PSDex. It was definitely very nice but a bit hard to
port to Preact.
This new one, written from scratch, has a few niceities:
- topbar can scroll offscreen
- only one scrollable area (scroll wheel works everywhere, and
the PageUp/PageDown/Spacebar keys are unambiguous)
- uses very little JavaScript when resizing; most of the layout
work is done by CSS
With the drawbacks:
- no animation
- only two columns supported (not relevant to Replays which has
never used over two columns)
- uses a lot of modern CSS (overflow: sticky, and flexbox) but
should degrade gracefully
The headline feature here is that we now support being logged in and
searching for private replays. We also have a new button to instantly
find your own replays.
Also here is the basics of HTML5 history support. It's the first step
to having the two-column layout up and running!
The main difference is that the main search screen should look
much nicer now.
https://pokemonshowdown.com/replays/
Putting search/featured/recent in separate sections makes the new
design look much nicer. And dark mode is now fully supported.
New Replays isn't done yet but I've done a lot of work on it and
probably it deserves a commit.
Why rewrite Replays:
- I redesigned pokemonshowdown.com to look more modern and support
dark mode, and rejiggering Old Replays would be a lot of work
anyway.
- It'd be nice to actually deploy some of PS's whole Preact
infrastructure somewhere, instead of it just being in development
hell.
- Nice to get a second look at the relevant code, leading to fixes
like fc00e68231 and f28b1e9bf3.
- Replays is due for a migration from JS/PHP to TS anyway.
Anyway, feel free to try out New Replays, it's live in:
https://pokemonshowdown.com/replays/
Old Replays will stick around until we hit feature parity, but
that shouldn't be too long (I know, famous last words).
In the distant past, Lobby was open by default, so people linking
to Lobby usually meant to link to PS itself, so links to Lobby
would just open PS.
This is no longer necessary, now that we no longer open Lobby by
default.
This commit also cleans up a bunch of other .htaccess entries,
for style/readability.
By default, buttons on mobile wait 300ms (to see if you're double
tapping) before they register as pressed.
Adding `touch-action: manipulation` prevents this delay, at the
cost of not being able to zoom in when double-tapping a button,
which I'm sure no one has ever tried to do.
Unfortunately, the my computer crashed, and took with it the PSD
for this updated logo. But fortunately, I managed to upload all
the important versions (like the orange version for "you have a
notification").
This bug hasn't been noticed because the two main uses of battle
frames (the sim itself, and Replays) both absolutely position
battle frames, so they have nothing "below" them.
But on downloaded replays, on screens smaller than 640px across,
they took up an incorrect height. This is also relevant to New
Replays. This commit fixes that.
* Overhaul the format selector to be more easily used
* Update js/client-mainmenu.js
Co-authored-by: Kris Johnson <11083252+KrisXV@users.noreply.github.com>
* Lower search pop open limit
---------
Co-authored-by: Kris Johnson <11083252+KrisXV@users.noreply.github.com>
This should help differentiate local teams and remote-loaded teams. When they're initially requested, the client now compares each new team against all the existing teams - if they appear to be similar, it doesn't add it to the builder (so that dupe teams don't show up). It considers them similar if they have the same mons, title, and format. Otherwise, if it finds one that's close, it'll add it but marked as (server version) so people can tell which is which.
