From d4ccabebef35a35cb94bc760b8db813ac9b6d563 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Fri, 24 Jul 2015 03:17:55 -0400
Subject: [PATCH] Redesign room join page

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.
---
 js/client-rooms.js | 42 +++++++++++++++++++++++++++---------------
 style/client.css   | 28 ++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/js/client-rooms.js b/js/client-rooms.js
index 7d1bf391c..684e478e5 100644
--- a/js/client-rooms.js
+++ b/js/client-rooms.js
@@ -11,7 +11,7 @@
 		},
 		initialize: function () {
 			this.$el.addClass('ps-room-light').addClass('scrollable');
-			var buf = '<div class="pad"><button style="float:right" name="close">Close</button><div class="roomlisttop"></div><div class="roomlist" style="max-width:480px"><p><em style="font-size:20pt">Loading...</em></p></div><p><button name="joinRoomPopup">Join other room</button></p></div>';
+			var buf = '<div class="pad"><button style="float:right" name="close">Close</button><div class="roomlisttop"></div><div class="roomlist" style="max-width:480px"><p><em style="font-size:20pt">Loading...</em></p></div><div class="roomlist" style="max-width:480px"></div><p><button name="joinRoomPopup">Join other room</button></p></div>';
 			this.$el.html(buf);
 			app.on('response:rooms', this.update, this);
 			app.send('/cmd rooms');
@@ -53,39 +53,39 @@
 				rooms = app.roomsData;
 			}
 			if (!rooms) return;
-			this.$('.roomlist').html(this.renderRoomList());
+			this.updateRoomList();
 			if (!app.roomsFirstOpen && window.location.host !== 'demo.psim.us') {
-				var buf = '';
-				if (Config.roomsFirstOpenBuffer) {
-					this.$('.roomlisttop').html(Config.roomsFirstOpenBuffer());
-				}
 				if (Config.roomsFirstOpenScript) {
 					Config.roomsFirstOpenScript();
 				}
 				app.roomsFirstOpen = 2;
 			}
 		},
-		renderRoomList: function () {
+		updateRoomList: function () {
 			var rooms = app.roomsData;
 			var buf = '';
 
 			if (rooms.userCount) {
 				var userCount = Number(rooms.userCount);
 				var battleCount = Number(rooms.battleCount);
-				buf += '<p style="height:60px">';
-				buf += '<span style="float:left;width:200px;height:50px;padding:3px 8px;text-align:center"><strong style="display:block;font-size:18pt;font-weight:normal">' + userCount + '</strong> ' + (userCount == 1 ? 'user' : 'users') + ' online</span> ';
-				buf += '<span style="float:left;width:200px;height:50px;padding:3px 8px;text-align:center"><strong style="display:block;font-size:18pt;font-weight:normal">' + battleCount + '</strong> active ' + (battleCount == 1 ? 'battle' : 'battles') + '</span>';
-				buf += '</p>';
+				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 += '</td></tr></table>';
+				this.$('.roomlisttop').html(buf);
 			}
 
-			buf += '<h2 style="clear:left">Official chat rooms</h2>';
+			buf = '';
+			buf += '<h2 class="rooms-officialchatrooms">Official chat rooms</h2>';
 			for (var i = 0; i < rooms.official.length; i++) {
 				var roomData = rooms.official[i];
 				var id = toId(roomData.title);
 				buf += '<div><a href="' + app.root + id + '" class="ilink"><small style="float:right">(' + Number(roomData.userCount) + ' users)</small><strong><i class="icon-comment-alt"></i> ' + Tools.escapeHTML(roomData.title) + '<br /></strong><small>' + Tools.escapeHTML(roomData.desc || '') + '</small></a></div>';
 			}
+			this.$('.roomlist').first().html(buf);
 
-			buf += '<h2>Chat rooms</h2>';
+			buf = '';
+			buf += '<h2 class="rooms-chatrooms">Chat rooms</h2>';
 			rooms.chat.sort(function (a, b) {
 				return b.userCount - a.userCount;
 			});
@@ -95,8 +95,20 @@
 				var escapedDesc = Tools.escapeHTML(roomData.desc || '');
 				buf += '<div><a href="' + app.root + id + '" class="ilink"><small style="float:right">(' + Number(roomData.userCount) + ' users)</small><strong><i class="icon-comment-alt"></i> ' + Tools.escapeHTML(roomData.title) + '<br /></strong><small>' + escapedDesc + '</small></a></div>';
 			}
-
-			return buf;
+			this.$('.roomlist').last().html(buf);
+		},
+		roomlist: function () {
+			app.addPopup(BattleListPopup);
+		},
+		finduser: function () {
+			app.addPopupPrompt("Username", "Open", function (target) {
+				if (!target) return;
+				if (toId(target) === 'zarel') {
+					app.addPopup(Popup, {htmlMessage: "Zarel is very busy; please don't contact him this way. If you're looking for help, try <a href=\"/help\">joining the Help room</a>?"});
+					return;
+				}
+				app.addPopup(UserPopup, {name: target});
+			});
 		}
 	});
 
diff --git a/style/client.css b/style/client.css
index b08daf435..d64d0ec51 100644
--- a/style/client.css
+++ b/style/client.css
@@ -927,6 +927,30 @@ p.or:after {
 	display: none;
 }
 
+/*********************************************************
+ * Room list
+ *********************************************************/
+
+.roomlisttop {
+	max-width: 480px;
+	margin-bottom: 10px;
+}
+.roomcounters td {
+	text-align: center;
+}
+.roomcounters button {
+	margin: 0 auto;
+	width: 140px;
+	height: 60px;
+	padding: 3px 8px;
+	text-align: center;
+	font-size: 10pt;
+}
+.roomcounters button strong {
+	display: block;
+	font-size: 18pt;
+	font-weight: normal;
+}
 .roomlist {
 	text-align: left;
 }
@@ -958,6 +982,10 @@ p.or:after {
 	text-decoration: none;
 }
 
+/*********************************************************
+ * Credits
+ *********************************************************/
+
 .ps-popup.credits {
 	max-width: 380px;
 	margin-top: 20px;