Use bigger Meloetta sprites

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.
DylanSp · Apr 1, 2020 · 730d1ff · 730d1ff
1 parent 97ca68f
commit 730d1ff
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 36 deletions.
diff --git a/js/client-rooms.js b/js/client-rooms.js
@@ -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("") : ''));

diff --git a/src/panel-rooms.tsx b/src/panel-rooms.tsx
@@ -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

diff --git a/style/client.css b/style/client.css
@@ -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 {

diff --git a/style/client2.css b/style/client2.css
@@ -914,31 +914,47 @@ 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;
 	width: 120px;
 	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 {