From c01f291bc71dc72ce27bade32bae1ca72a5f2463 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Thu, 9 May 2013 19:14:13 -0700
Subject: [PATCH] Battle list

---
 js/client-chat.js     | 16 +++++------
 js/client-mainmenu.js | 63 +++++++++++++++++++++++++++++++++++++++++++
 js/client.js          |  2 +-
 style/client.css      | 31 +++++++++++++++++++++
 4 files changed, 103 insertions(+), 9 deletions(-)

diff --git a/js/client-chat.js b/js/client-chat.js
index 54bb332df..5f0a6cdad 100644
--- a/js/client-chat.js
+++ b/js/client-chat.js
@@ -531,7 +531,7 @@
 					name2 = row[3];
 					silent = (row[0] === 'B');
 
-					var matches = this.parseBattleID(id);
+					var matches = ChatRoom.parseBattleID(id);
 					if (!matches) {
 						return; // bogus room ID could be used to inject JavaScript
 					}
@@ -751,13 +751,7 @@
 				if (message.substr(0,2) === '//') message = message.substr(1);
 				this.$chat.append(chatDiv + timestamp + '<strong style="' + color + '">' + clickableName + ':</strong> <em' + (name.substr(1) === app.user.get('name') ? ' class="mine"' : '') + '>' + messageSanitize(message) + '</em></div>');
 			}
-		},
-		parseBattleID: function(id) {
-			if (id.lastIndexOf('-') > 6) {
-				return id.match(/^battle\-([a-z0-9]*)\-?[0-9]*$/);
-			}
-			return id.match(/^battle\-([a-z0-9]*[a-z])[0-9]*$/);
-		},
+		}
 	}, {
 		getTimestamp: function(section) {
 			var pref = Tools.prefs('timestamps') || {};
@@ -771,6 +765,12 @@
 			return '[' + components.map(
 					function(x) { return (x < 10) ? '0' + x : x; }
 				).join(':') + '] ';
+		},
+		parseBattleID: function(id) {
+			if (id.lastIndexOf('-') > 6) {
+				return id.match(/^battle\-([a-z0-9]*)\-?[0-9]*$/);
+			}
+			return id.match(/^battle\-([a-z0-9]*[a-z])[0-9]*$/);
 		}
 	});
 
diff --git a/js/client-mainmenu.js b/js/client-mainmenu.js
index 8d2da5660..6a6670634 100644
--- a/js/client-mainmenu.js
+++ b/js/client-mainmenu.js
@@ -25,6 +25,9 @@
 			buf += '<p><label class="label">Format:</label>'+this.renderFormats()+'</p>';
 			buf += '<p><label class="label">Team:</label>'+this.renderTeams()+'</p>';
 			buf += '<p><button class="button big" name="search"><strong>Look for a battle</strong></button></p></form></div>';
+
+			buf += '<div class="menugroup"><p><button class="button" name="roomlist">Watch a battle</button></p></div>';
+
 			buf += '<div class="menugroup"><p><button class="button" name="joinRoom" value="teambuilder">Teambuilder</button></p><p><button class="button" name="joinRoom" value="ladder">Ladder</button></p></div></div></div>';
 
 			// right menu
@@ -475,6 +478,9 @@
 		},
 		joinRoom: function(room) {
 			app.joinRoom(room);
+		},
+		roomlist: function() {
+			app.addPopup('roomlist', BattleListPopup);
 		}
 	});
 
@@ -598,4 +604,61 @@
 		}
 	});
 
+	var BattleListPopup = this.BattleListPopup = Popup.extend({
+		type: 'semimodal',
+		initialize: function() {
+			app.on('response:roomlist', this.update, this);
+			app.send('/cmd roomlist');
+			this.update();
+		},
+		events: {
+			'click .ilink': 'clickLink'
+		},
+		update: function(data) {
+			if (!data) {
+				this.$el.html('<p>Loading...</p>');
+				return;
+			}
+			var buf = '';
+			var i = 0;
+			for (var id in data.rooms) {
+				var roomData = data.rooms[id];
+				var matches = ChatRoom.parseBattleID(id);
+				if (!matches) {
+					continue; // bogus room ID could be used to inject JavaScript
+				}
+				var format = (matches ? '<small>[' + matches[1] + ']</small><br />' : '');
+				var roomDesc = format + '<em class="p1">' + Tools.escapeHTML(roomData.p1) + '</em> <small class="vs">vs.</small> <em class="p2">' + Tools.escapeHTML(roomData.p2) + '</em>';
+				if (!roomData.p1) {
+					matches = id.match(/[^0-9]([0-9]*)$/);
+					roomDesc = format + 'empty room ' + matches[1];
+				} else if (!roomData.p2) {
+					roomDesc = format + '<em class="p1">' + Tools.escapeHTML(roomData.p1) + '</em>';
+				}
+				buf += '<div><a href="' + app.root+id + '" class="ilink">' + roomDesc + '</a></div>';
+				i++;
+			}
+
+			if (!i) {
+				buf = '<p>No battles are going on right now.</p>';
+			} else {
+				buf = '<div class="roomlist"><p><button name="refresh"><i class="icon-refresh"></i> Refresh</button> <button name="close"><i class="icon-remove"></i> Close</button></p><p>'+i+' battles</p>'+buf+'</div>';
+			}
+
+			this.$el.html(buf);
+		},
+		clickLink: function(e) {
+			if (e.cmdKey || e.metaKey || e.ctrlKey) return;
+			e.preventDefault();
+			e.stopPropagation();
+			this.close();
+			var roomid = $(e.currentTarget).attr('href').substr(app.root.length);
+			app.tryJoinRoom(roomid);
+		},
+		refresh: function(i, button) {
+			button.disabled = true;
+			app.send('/cmd roomlist');
+		}
+	});
+
 }).call(this, jQuery);
diff --git a/js/client.js b/js/client.js
index 02f48d89b..662878eb1 100644
--- a/js/client.js
+++ b/js/client.js
@@ -602,7 +602,7 @@
 		 * Receive from sim server
 		 */
 		receive: function(data) {
-			console.log('received: '+data);
+			// console.log('received: '+data);
 			var roomid = '';
 			if (data.substr(0,1) === '>') {
 				var nlIndex = data.indexOf('\n');
diff --git a/style/client.css b/style/client.css
index 39f04c617..54049ab34 100644
--- a/style/client.css
+++ b/style/client.css
@@ -775,6 +775,37 @@ p.or:after {
 	color: gray;
 }
 
+.roomlist {
+	text-align: center;
+}
+.roomlist a.ilink {
+	display: block;
+	margin: 2px 7px 4px 7px;
+	padding: 0px 2px 1px 2px;
+	border: 1px solid #BBCCDD;
+	background: #F8FBFD;
+	
+	border-radius: 4px;
+	text-decoration: none;
+	color: #336699;
+	text-shadow: #ffffff 0px -1px 0;
+	box-shadow: 1px 1px 1px #D5D5D5;
+	cursor: pointer;
+	font-size: 9pt;
+
+	overflow: hidden;
+	white-space: nowrap;
+}
+.roomlist a.ilink small {
+	font-size: 8pt;
+}
+.roomlist a.ilink:hover {
+	border: 1px solid #8899AA;
+	background: #F1F4F9;
+	color: #224466;
+	text-decoration: none;
+}
+
 /*********************************************************
  * Chat
  *********************************************************/