Previously, battles required 955 pixels each to appear side by side. Now,
we still guarantee 955 (well, 956 now) pixels for the left battle, but
we'll show a mini (320px) battle on the right side if it fits.
PS rooms and PS popups apparently share a lot of code, making this
transition surprisingly easy.
Anyway, Watch Battles makes more sense as a room in the end. It also
fixes a lot of UI weirdness; modal popups are really the wrong control.
- The CSS layout is slightly better
- Improve textbox colors slightly
- Make PM boxes semitransparent like chat
- Fix chatroom list colors
- Fix |unlink| revealed text colors
Exactly what it says on the tin.
Most things aren't particularly dark, but at the moment there aren't
any parts that look particularly ugly, so I consider this a mild
success.
More changes planned.
There's a reason why close-roomtab buttons are <a> tags right now, and
I think it has to do with compatibility with some obscure browser like
IE9 or something.
Still, though, the CSS is much nicer this way, especially for the
upcoming dark mode feature, so I'll just commit this and figure out a
different workaround for whatever problems come up.
Moved the pokemon down and the clear button up so that it better fits with the new folders
Change the clipboard design
Move the title and paste button.
The teambuilder is now running on search.js! Not all new features I'd
like to be in are in, but we've now reached feature parity, and most
of the bugs I found during testing have been fixed.
New in search.js is on-demand DOM loading, which basically means
much faster performance because instead of trying to load every single
row of e.g. the pokemon list at once, we just load the part that's
visible, and load the rest only when you scroll it into view.
Also new in search.js is a dexsearch-like feature, replacing the old
details-search system. The new filter system is simpler and more powerful
and has the same API as /dexsearch, although not all the more advanced
dexsearch features are supported.
On-demand DOM loading makes teambuilder loading pretty much completely
instantaneous. There are other small differences in how selection of
pokemon/items/abilities/moves works, but it should overall make more
sense.
The utilichart-relevant code has been overhauled for simplicity.
Utilichart results and headers are now both 33 pixels tall, total.
Headers are slightly larger, to make them fill the space better. The
larger font size makes them more header-like, anyway.
Results are two pixels taller than before, giving them enough room for
gen 6 pokemon icons (not enabled in this commit), and in general
aiding performance slightly (fewer result rows on the screen at a
time).
Making them both 33 pixels allows height to be computed precisely
as 33*rows, which is relevant for result rows to be inserted into
the DOM on-demand.
On-demand DOM insertion has previously been implemented in pokedex.js,
but the new on-demand DOM code in search.js works slightly differently.
It makes stronger assumptions (that the only bottleneck is DOM
insertion speed, and that ctrl+f without scrolling to the bottom
doesn't need to be supported, and that result rows and result
headers are always 33 pixels tall), which makes for much simpler
code, and is presumably slightly faster because of this.
The new on-demand DOM code is surfaced by an "All results" button
in the pokedex (pokemonshowdown.com/dex/), for basic testing, but
the long-term plan is for it to be used in the teambuilder for
pokemon/etc selection, to massively increase performance.
Nearly two years after I wrote search.js to be a better utilichart
API than utilichart.js, we'll soon finally start using it in place of
utilichart.js in the main sim teambuilder!
In addition to format folders, we now support regular folders that
behave as you'd expect. These folders even map to actual
directories in the downloadable client!
Folders are delimited by `/` in team names in all storage formats
(including export, and packed saving), and are stored in the
`.folder` field of team objects.
Because of this, `/` is no longer an acceptable character in team
names. This improves interoperability with teams and filesystems,
so we should probably have done this anyway.
I also added back a friendly message to the top of the teambuilder.
- 'uncategorized' was sometimes in the wrong place
- Firefox Windows button alignment
- crash when creating new format folder
- gen 2 and gen 3 were mixed up
This was ridiculous, or, in other words, par for the course when
you're dealing with HTML5 drag-and-drop.
Folders are now clickable divs instead of buttons. This turned out
not to be necessary as it was a different issue that was causing
drag-and-drop to fail, but I'd already changed everything over when
I discovered the real bug. Oh well, some things are slightly nicer
this way.
The team selector now hides teams that aren't for the format, by
default. Other teams can still be selected with a 'more' button.
There's now a Teambuilder button to be taken straight to making
or editing teams for that format.
The folders are really just format filter views, but in theory, this
should be all people need.
This implementation is very basic but I'm pretty sure I've gotten all
the bugs out. On small screens, the folders simply don't appear, on
the assumption that this will only happen on mobile, where people
shouldn't be creating enough teams to need folders, anyway. (I'll
fully support mobile later.)
Third-party servers may need to re-style the Edit and Delete buttons,
since they're black on transparent, which may interact poorly with
certain edgy background styles.
PS's UI is now updated to make it clearer whether or not you're
connected to a server, and which features are and aren't
available while disconnected.
The Reconnect? popup's "close" button has been renamed "Work offline",
to make it clearer that it's for people who want to continue using
the teambuilder or whatever while disconnected.
The button is a slight misnomer since some features, like the
Ladder, don't work without an internet connection.
2.7ish years ago, when I redesigned PS, PS's mascot was Meloetta,
and in the old design, there was a Meloetta-P icon on "Look for a
battle" and a Meloetta-A in the backgroud of the chat room.
The new design was built around custom backgrounds, and there
wasn't really room to fit Meloetta back in.
Well, now, I've finally fit Meloetta back in next to the user count
and battle count, and it actually looks pretty good there. Now more
people can be aware that PS has a mascot!
When you looks for a battle you get this grey color which doesn't really suite the red button: http://prntscr.com/8z9e9g
So I changed it to the border's color (a bit darker): http://prntscr.com/8z9hx4
Font Awesome 3 -> 4 was a backwards-incompatible change, so this
update is pretty invasive. I tested everything we use it for and it
still works, though. Including supporting both Font Awesome versions
in battle.js.
The validate button sends the current team and a validation request to the
server. The server will respond with a positive acknowledgement for valid teams,
or else a list of problems (the same list as when seeking a battle).
User and battle count are now buttons! Also, tables for layout,
but to be fair, the data is sort of tabular, and this is
basically the best option for this layout. Flexbox supposedly
fixes this, but we support plenty of browsers that don't
support flexbox, and I'm pragmatic enough to use tables here.
Some wording/layout is changed to look less ugly. This does come
with one major change, though: The team dropdown is now visible
at all times after clicking 'Join', and your selected team will
stay selected throughout the entire tournament.
The teambuilder honestly isn't great in mobile, but since it's
impossible to zoom out in mobile, it's better to start zoomed out
and let the user zoom in, than start zoomed in and not give the
user a choice.
With the tab overflow menu being perfect, I might as well fix the
button that opens it. It used to use default browser styles, which
was mostly fine in OS X but ugly on other systems, and nearly
unusable in iOS. The new one looks lovely on all OSes.
.button styling has been consolidated in CSS, and the tab overflow
menu has been adjusted to use button styling, which is the "more
improvements in the future" mentioned by 69524e935b.
I now declare the tab overflow menu officially out of beta. Now
for the rest of PS!
The Ladder now also uses the new button styling, but it's not out
of beta yet, I just wanted to see how it looked.
- Highlighted messages now span the entire width of the chat.
- Highlighted and personal messages are more vertically centered.
- Links and code are again properly hidden by spoilers
Previously, the userlist would be completely hidden in low
resolutions, but now a user count is displayed in the top left
corner. When clicked, the entire userlist appears.
