Leahnaya/pokemon-showdown-client
1
0
Fork 0
mirror of https://github.com/smogon/pokemon-showdown-client.git synced 2026-09-11 21:38:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use bigger Meloetta sprites

Browse Source 
There are people who didn't know Meloetta was PS's mascot! They clearly
needs to be more noticeable. And now they definitely will be.

We're now using the full Gen 5 sprite instead of the minisprite,
overlapping with the buttons, and animated on hover. This might be a
bit over-the-top, but oh well, it's only on hover.
This commit is contained in:
Guangcong Luo
2020-04-01 16:04:12 -07:00
parent 97ca68f685
commit 730d1ffd1a
4 changed files with 64 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/client-rooms.js
View File

@@ -80,9 +80,9 @@
if (rooms.userCount) {
var userCount = Number(rooms.userCount);
var battleCount = Number(rooms.battleCount);
var leftSide = '<span style="' + Dex.getPokemonIcon('meloetta', true) + ';" class="picon icon-left" title="Meloetta is PS\'s mascot! The Aria forme is about using its voice, and represents our chatrooms."></span> <button class="button" name="finduser" title="Find an online user"><strong>' + userCount + '</strong> ' + (userCount == 1 ? 'user' : 'users') + ' online</button>';
var rightSide = '<button class="button" name="roomlist" title="Watch an active battle"><strong>' + battleCount + '</strong> active ' + (battleCount == 1 ? 'battle' : 'battles') + '</button> <span style="' + Dex.getPokemonIcon('meloetta-pirouette') + '" class="picon icon-right" title="Meloetta is PS\'s mascot! The Pirouette forme is Fighting-type, and represents our battles."></span>';
this.$('.roomlisttop').html('<table class="roomcounters" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>' + leftSide + '</td><td>' + rightSide + '</td></tr></table>');
var leftSide = '<button class="button" name="finduser" title="Find an online user"><span class="pixelated usercount" title="Meloetta is PS\'s mascot! The Aria forme is about using its voice, and represents our chatrooms." ></span><strong>' + userCount + '</strong> ' + (userCount == 1 ? 'user' : 'users') + ' online</button> ';
var rightSide = '<button class="button" name="roomlist" title="Watch an active battle"><span class="pixelated battlecount" title="Meloetta is PS\'s mascot! The Pirouette forme is Fighting-type, and represents our battles." ></span><strong>' + battleCount + '</strong> active ' + (battleCount == 1 ? 'battle' : 'battles') + '</button>';
this.$('.roomlisttop').html('<div class="roomcounters">' + leftSide + '</td><td>' + rightSide + '</div>');
}
this.$('.roomlist').first().html('<h2 class="rooms-officialchatrooms">Official chat rooms</h2>' + _.map(rooms.official, this.renderRoomBtn).join("") +
(rooms.pspl && rooms.pspl.length ? '<a href="https://www.smogon.com/forums/threads/3649563/" target="_blank"><h2 class="rooms-psplchatrooms">PSPL Winner</h2></a>' + _.map(rooms.pspl, this.renderRoomBtn).join("") : ''));

20
src/panel-rooms.tsx
View File

@@ -136,22 +136,20 @@ class RoomsPanel extends PSRoomPanel {
<i class="fa fa-caret-right"></i> Hide
</button>
<div class="roomcounters">
<span
style="background:transparent url(https://play.pokemonshowdown.com/sprites/pokemonicons-sheet.png?a5) no-repeat scroll -0px -2790px;"
class="picon icon-left"
title="Meloetta is PS's mascot! The Aria forme is about using its voice, and represents our chatrooms."
></span> {}
<button class="button" data-href="/users" title="Find an online user">
<span
class="pixelated usercount"
title="Meloetta is PS's mascot! The Aria forme is about using its voice, and represents our chatrooms."
></span>
<strong>{rooms.userCount || '-'}</strong> users online
</button> {}
<button class="button" data-href="/battles" title="Watch an active battle">
<span
class="pixelated battlecount"
title="Meloetta is PS's mascot! The Pirouette forme is Fighting-type, and represents our battles."
></span>
<strong>{rooms.battleCount || '-'}</strong> active battles
</button> {}
<span
style="background:transparent url(https://play.pokemonshowdown.com/sprites/pokemonicons-sheet.png?a5) no-repeat scroll -0px -2220px"
class="picon icon-right"
title="Meloetta is PS's mascot! The Pirouette forme is Fighting-type, and represents our battles."
></span>
</button>
</div>
<div>
<input

38
style/client.css
View File

@@ -1220,10 +1220,8 @@ p.or:after {
margin-bottom: 10px;
}
.roomcounters {
margin: 4px auto;
max-width: 400px;
}
.roomcounters td {
max-width: 480px;
margin: 8px 0 15px 0;
text-align: center;
}
.roomcounters button {
@@ -1232,22 +1230,38 @@ p.or:after {
height: 60px;
padding: 3px 8px;
text-align: center;
vertical-align: middle;
font-size: 10pt;
position: relative;
}
.roomcounters button strong {
display: block;
font-size: 18pt;
font-weight: normal;
}
.roomcounters .icon-left {
display: inline-block;
vertical-align: middle;
transform:scaleX(-1);
webkit-transform:scaleX(-1);
.roomcounters .usercount {
display: block;
width: 49px;
height: 63px;
position: absolute;
left: -30px;
bottom: -5px;
background: url(https://play.pokemonshowdown.com/sprites/gen5/meloetta.png) center no-repeat;
}
.roomcounters .icon-right {
display: inline-block;
vertical-align: middle;
.roomcounters button:hover .usercount {
background: url(https://play.pokemonshowdown.com/sprites/gen5ani/meloetta.gif) center no-repeat;
}
.roomcounters .battlecount {
display: block;
width: 46px;
height: 76px;
position: absolute;
right: -30px;
bottom: -10px;
background: url(https://play.pokemonshowdown.com/sprites/gen5/meloetta-pirouette.png) center no-repeat;
}
.roomcounters button:hover .battlecount {
background: url(https://play.pokemonshowdown.com/sprites/gen5ani/meloetta-pirouette.gif) center no-repeat;
}
.roomlist {

36
style/client2.css
View File

@@ -914,8 +914,8 @@ p.or:after {
.roomcounters {
max-width: 480px;
margin: 4px 0 10px;
text-align: center;
margin: 8px 0 15px 0;
text-align: center;
}
.roomcounters button {
margin: 0 auto;
@@ -923,22 +923,38 @@ p.or:after {
height: 60px;
padding: 3px 8px;
text-align: center;
vertical-align: middle;
font-size: 10pt;
position: relative;
}
.roomcounters button strong {
display: block;
font-size: 18pt;
font-weight: normal;
}
.roomcounters .icon-left {
display: inline-block;
vertical-align: middle;
transform: scaleX(-1);
-webkit-transform: scaleX(-1);
.roomcounters .usercount {
display: block;
width: 49px;
height: 63px;
position: absolute;
left: -30px;
bottom: -5px;
background: url(https://play.pokemonshowdown.com/sprites/gen5/meloetta.png) center no-repeat;
}
.roomcounters .icon-right {
display: inline-block;
vertical-align: middle;
.roomcounters button:hover .usercount {
background: url(https://play.pokemonshowdown.com/sprites/gen5ani/meloetta.gif) center no-repeat;
}
.roomcounters .battlecount {
display: block;
width: 46px;
height: 76px;
position: absolute;
right: -30px;
bottom: -10px;
background: url(https://play.pokemonshowdown.com/sprites/gen5/meloetta-pirouette.png) center no-repeat;
}
.roomcounters button:hover .battlecount {
background: url(https://play.pokemonshowdown.com/sprites/gen5ani/meloetta-pirouette.gif) center no-repeat;
}
.roomlist {