Implement side rooms

js/client-mainmenu.js

@@ -1,6 +1,8 @@
 (function($) {
 
 	var MainMenuRoom = this.MainMenuRoom = this.Room.extend({
+		minWidth: 480,
+		maxWidth: 480,
 		events: {
 			'click .button': 'clickButton'
 		},
@@ -13,6 +15,13 @@
 			buf += '<div class="rightmenu"><div class="mainmenu"><p><button class="button" value="lobby">Join lobby chat</button></p></div></div>';
 			this.$el.html(buf);
 		},
+		updateRightMenu: function() {
+			if (app.sideRoom) {
+				this.$('.rightmenu').hide();
+			} else {
+				this.$('.rightmenu').show();
+			}
+		},
 		clickButton: function(e) {
 			e.preventDefault();
 			var $target = $(e.currentTarget);

js/client.js

@@ -59,9 +59,13 @@
 
 		initializeRooms: function() {
 			this.rooms = {};
+
+			$(window).on('resize', _.bind(this.updateLayout, this));
 		},
+		// the currently active room
 		curRoom: null,
 		curSideRoom: null,
+		sideRoom: null,
 		joinRoom: function(id, type) {
 			if (this.rooms[id]) {
 				this.focusRoom(id);
@@ -93,17 +97,84 @@
 			if (!room) return false;
 			if (this.curRoom === room || this.curSideRoom === room) return true;
 
-			if (this.curRoom) {
-				this.curRoom.hide();
-				this.curRoom = null;
+			this.updateSideRoom(id);
+			this.updateLayout();
+			if (this.curSideRoom !== room) {
+				if (this.curRoom) {
+					this.curRoom.hide();
+					this.curRoom = null;
+				}
+				this.curRoom = window.room = room;
+				this.updateLayout();
+				if (this.curRoom.id === id) this.navigate(id);
 			}
-			this.curRoom = room;
-			this.curRoom.show();
 
-			app.navigate(id);
-			this.topbar.updateTabbar();
 			return;
 		},
+		updateLayout: function() {
+			if (!this.curRoom) return; // can happen during initialization
+			if (!this.sideRoom) {
+				this.curRoom.show('full');
+				this.topbar.updateTabbar();
+				return;
+			}
+			var leftMin = (this.curRoom.minWidth || this.curRoom.bestWidth);
+			var rightMin = (this.sideRoom.minWidth || this.sideRoom.bestWidth);
+			var available = $('body').width();
+			if (this.curRoom.isSideRoom) {
+				// we're trying to focus a side room
+				if (available >= this.rooms[''].minWidth + leftMin) {
+					// it fits to the right of the main menu, so do that
+					this.curSideRoom = this.sideRoom = this.curRoom;
+					this.curRoom = this.rooms[''];
+					leftMin = (this.curRoom.minWidth || this.curRoom.bestWidth);
+					rightMin = (this.sideRoom.minWidth || this.sideRoom.bestWidth);
+				} else if (this.sideRoom) {
+					// nooo
+					if (this.curSideRoom) {
+						this.curSideRoom.hide();
+						this.curSideRoom = null;
+					}
+					this.curRoom.show('full');
+					this.topbar.updateTabbar();
+					return;
+				}
+			}
+			if (available < leftMin + rightMin) {
+				if (this.curSideRoom) {
+					this.curSideRoom.hide();
+					this.curSideRoom = null;
+				}
+				this.curRoom.show('full');
+				this.topbar.updateTabbar();
+				return;
+			}
+			this.curSideRoom = this.sideRoom;
+			var leftMax = (this.curRoom.maxWidth || this.curRoom.bestWidth);
+			var rightMax = (this.sideRoom.maxWidth || this.sideRoom.bestWidth);
+			var rightWidth = rightMin;
+			if (leftMax + rightMax <= available) {
+				rightWidth = rightMax;
+			} else {
+				available -= leftMin + rightMin;
+				var wanted = leftMax - leftMin + rightMax - rightMin;
+				if (wanted) rightWidth = Math.floor(rightMin + (rightMax - rightMin) * available / wanted);
+			}
+			this.curRoom.show('left', rightWidth);
+			this.curSideRoom.show('right', rightWidth);
+			this.topbar.updateTabbar();
+		},
+		updateSideRoom: function(id) {
+			if (id && this.rooms[id].isSideRoom) {
+				this.sideRoom = this.rooms[id];
+				if (this.curSideRoom && this.curSideRoom !== this.sideRoom) {
+					this.curSideRoom.hide();
+					this.curSideRoom = this.sideRoom;
+				}
+				// updateLayout will null curSideRoom if there's
+				// no room for this room
+			}
+		},
 		leaveRoom: function(id) {
 			var room = this.rooms[id];
 			if (!room) return false;
@@ -116,7 +187,12 @@
 				if (room === this.curRoom) this.focusRoom('');
 				delete this.rooms[id];
 				room.destroy();
-				this.topbar.updateTabbar();
+				if (room === this.sideRoom) {
+					this.sideRoom = null;
+					this.curSideRoom = null;
+					this.updateSideRoom();
+				}
+				this.updateLayout();
 				return true;
 			}
 			return false;
@@ -135,24 +211,41 @@
 		},
 		'$tabbar': null,
 		updateTabbar: function() {
-			var curId = '';
-			if (app.curRoom) curId = app.curRoom.id;
+			var curId = (app.curRoom ? app.curRoom.id : '');
+			var curSideId = (app.curSideRoom ? app.curSideRoom.id : '');
+
 			var buf = '<ul><li><a class="button'+(curId===''?' cur':'')+'" href="'+app.root+'"><i class="icon-home"></i> Home</a></li></ul>';
 			var atLeastOne = false;
+			var sideBuf = '';
 			for (var id in app.rooms) {
 				if (!id) continue;
 				var name = id;
 				if (id === 'lobby') name = '<i class="icon-comments-alt"></i> Lobby chat';
 				else if (id === 'teambuilder') name = '<i class="icon-edit"></i> Teambuilder';
 				else if (id === 'ladder') name = '<i class="icon-list-ol"></i> Ladder';
+				if (app.rooms[id].isSideRoom) {
+					if (!sideBuf) sideBuf = '<ul>';
+					sideBuf += '<li><a class="button'+(curId===id||curSideId===id?' cur':'')+' closable" href="'+app.root+id+'">'+name+'</a><a class="closebutton" href="'+app.root+id+'"><i class="icon-remove-sign"></i></a></li>';
+					continue;
+				}
 				if (!atLeastOne) {
-					buf += ' <ul>';
+					buf += '<ul>';
 					atLeastOne = true;
 				}
 				buf += '<li><a class="button'+(curId===id?' cur':'')+' closable" href="'+app.root+id+'">'+name+'</a><a class="closebutton" href="'+app.root+id+'"><i class="icon-remove-sign"></i></a></li>';
 			}
 			if (atLeastOne) buf += '</ul>';
-			this.$tabbar.html(buf);
+			if (app.curSideRoom) {
+				var sideWidth = app.curSideRoom.width;
+				this.$tabbar.css({right:sideWidth}).html(buf);
+				this.$sidetabbar.css({left:'auto',width:sideWidth,right:0}).show().html(sideBuf);
+			} else {
+				buf += sideBuf;
+				this.$tabbar.css({right:0}).html(buf);
+				this.$sidetabbar.hide();
+			}
+
+			if (app.rooms['']) app.rooms[''].updateRightMenu();
 		},
 		click: function(e) {
 			e.preventDefault();
@@ -195,7 +288,20 @@
 
 		// graphical
 
-		show: function() {
+		bestWidth: 640,
+		show: function(position, rightWidth) {
+			switch (position) {
+			case 'left':
+				this.$el.css({left: 0, width: 'auto', right: rightWidth});
+				break;
+			case 'right':
+				this.$el.css({left: 'auto', width: rightWidth, right: 0});
+				this.width = rightWidth;
+				break;
+			case 'full':
+				this.$el.css({left: 0, width: 'auto', right: 0});
+				break;
+			}
 			this.$el.show();
 			this.focus();
 		},
@@ -215,6 +321,8 @@
 	});
 
 	var ChatRoom = this.ChatRoom = Room.extend({
+		minWidth: 320,
+		isSideRoom: true,
 		initialize: function() {
 			var buf = '<div class="chat-log"><div class="inner"></div><div class="inner-after"></div></div><div class="chat-log-add">Connecting...</div>';
 			this.$el.addClass('ps-room-light').html(buf);

style/client.css

@@ -40,12 +40,14 @@ body {
 	display: block;
 	list-style: none;
 	margin: 0;
-	padding: 0 0 0 10px;
+	padding: 0 0 0 0;
 	text-align: left;
 
 	color: white;
 	text-shadow: 0 1px 0 black;
 	font-size: 10pt;
+
+	line-height: 100%;
 }
 .tabbar:after {
 	content: "";
@@ -53,17 +55,18 @@ body {
 	height: 6px;
 	background: #f8f8f8;
 	border: solid 1px #AAAAAA;
-	margin: 4px 0 0 -10px;
+	margin: 4px 0 0 0;
 	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
 	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
 	box-shadow: 0 1px 2px rgba(0,0,0,.2);
 }
 .tabbar.maintabbar {
-	padding-left: 150px;
+	padding-left: 142px;
 }
 .tabbar.maintabbar:after {
-	margin-left: -150px;
+	margin-left: -142px;
 }
+
 .tabbar li,
 .tabbar ul {
 	display: inline;
@@ -131,6 +134,7 @@ body {
 }
 .tabbar li:first-child a.button {
 	border-top-left-radius: 5px;
+	margin-left: 8px;
 }
 .tabbar li:last-child a.button {
 	border-top-right-radius: 5px;
@@ -150,14 +154,17 @@ body {
 
 	text-decoration: none;
 	font-size: 14px;
-	color: #777777;
+	color: #999999;
 	text-shadow: none;
 }
 .tabbar a.cur + .closebutton {
 	top: 0;
 }
 .tabbar .closebutton:hover {
-	color: black;
+	color: #BB2222;
+}
+.tabbar .closebutton:active {
+	color: #661111;
 }
 
 /* ROOMS */