From 8264fea7d22ae8cea5e1bd974d9cb6ca880b7ca0 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Sat, 28 Nov 2015 04:00:22 -0500
Subject: [PATCH] Add Meloetta icons to roomlist

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!
---
 js/client-rooms.js | 4 ++--
 style/client.css   | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/js/client-rooms.js b/js/client-rooms.js
index 238e2ca51..a907238a6 100644
--- a/js/client-rooms.js
+++ b/js/client-rooms.js
@@ -59,8 +59,8 @@
 				var userCount = Number(rooms.userCount);
 				var battleCount = Number(rooms.battleCount);
 				buf += '<table class="roomcounters" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>';
-				buf += '<button class="button" name="finduser"><strong>' + userCount + '</strong> ' + (userCount == 1 ? 'user' : 'users') + ' online</button></td><td>';
-				buf += '<button class="button" name="roomlist"><strong>' + battleCount + '</strong> active ' + (battleCount == 1 ? 'battle' : 'battles') + '</button>';
+				buf += '<span style="' + Tools.getIcon('meloetta') + ';display:inline-block;vertical-align:middle;transform:scaleX(-1);webkit-transform:scaleX(-1);" class="pokemonicon" title="Meloetta is PS\'s mascot! The Aria forme is about using its voice, and represents our chatrooms."></span> <button class="button" name="finduser"><strong>' + userCount + '</strong> ' + (userCount == 1 ? 'user' : 'users') + ' online</button></td><td>';
+				buf += '<button class="button" name="roomlist"><strong>' + battleCount + '</strong> active ' + (battleCount == 1 ? 'battle' : 'battles') + '</button> <span style="' + Tools.getIcon('meloetta-pirouette') + ';display:inline-block;vertical-align:middle" class="pokemonicon" title="Meloetta is PS\'s mascot! The Pirouette forme is Fighting-type, and represents our battles."></span>';
 				buf += '</td></tr></table>';
 				this.$('.roomlisttop').html(buf);
 			}
diff --git a/style/client.css b/style/client.css
index c7b29245d..c5bf4bae9 100644
--- a/style/client.css
+++ b/style/client.css
@@ -947,12 +947,16 @@ p.or:after {
 	max-width: 480px;
 	margin-bottom: 10px;
 }
+.roomcounters {
+	margin: 4px auto;
+	max-width: 400px;
+}
 .roomcounters td {
 	text-align: center;
 }
 .roomcounters button {
 	margin: 0 auto;
-	width: 140px;
+	width: 120px;
 	height: 60px;
 	padding: 3px 8px;
 	text-align: center;