From f5d026541bf7f4aab58e13c4babfcd6737e84343 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Wed, 31 Oct 2018 18:19:50 -0500
Subject: [PATCH] Add basic popup support

---
 src/client-main.ts | 12 ++++++++++++
 src/panels.tsx     | 40 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/client-main.ts b/src/client-main.ts
index 992482ec72..922446fcb3 100644
--- a/src/client-main.ts
+++ b/src/client-main.ts
@@ -228,6 +228,7 @@ interface RoomOptions {
 	side?: PSRoomSide | null;
 	/** Handled after initialization, outside of the constructor */
 	queue?: string[];
+	parentElem?: HTMLElement,
 };
 
 class PSRoom extends PSStreamModel implements RoomOptions {
@@ -516,6 +517,7 @@ const PS = new class extends PSModel {
 		if (!options.type) {
 			switch (options.id) {
 			case 'teambuilder': case 'ladder': case 'battles': case 'rooms':
+			case 'options': case 'volume':
 				options.type = options.id;
 				break;
 			default:
@@ -535,6 +537,10 @@ const PS = new class extends PSModel {
 			case 'chat':
 				options.side = 'right';
 				break;
+			case 'options':
+			case 'volume':
+				options.side = 'popup';
+				break;
 			}
 		}
 
@@ -624,6 +630,12 @@ const PS = new class extends PSModel {
 		}
 		this.update();
 	}
+	closePopup() {
+		if (!this.popups.length) return;
+		const roomid = this.popups.pop()!;
+		this.leave(roomid);
+		this.update();
+	}
 	join(roomid: RoomID, side?: PSRoomSide | null) {
 		this.addRoom({id: roomid, side});
 		this.update();
diff --git a/src/panels.tsx b/src/panels.tsx
index 6afb93bb27..060a71f21e 100644
--- a/src/panels.tsx
+++ b/src/panels.tsx
@@ -143,8 +143,8 @@ class PSHeader extends preact.Component<{style: {}}> {
 			</div></div>
 			<div class="userbar">
 				<span class="username" data-name={PS.user.name} style="color:hsl(96,67%,36%);"><i class="fa fa-user" style="color:#779EC5"></i> {PS.user.name}</span>{' '}
-				<button class="icon button" name="openSounds" title="Sound" aria-label="Sound"><i class="fa fa-volume-up"></i></button>{' '}
-				<button class="icon button" name="openOptions" title="Options" aria-label="Options"><i class="fa fa-cog"></i></button>
+				<button class="icon button" name="joinRoom" value="volume" title="Sound" aria-label="Sound"><i class="fa fa-volume-up"></i></button>{' '}
+				<button class="icon button" name="joinRoom" value="options" title="Options" aria-label="Options"><i class="fa fa-cog"></i></button>
 			</div>
 		</div>;
 	}
@@ -152,6 +152,11 @@ class PSHeader extends preact.Component<{style: {}}> {
 
 class PSRoomPanel extends preact.Component<{style: {}, room: PSRoom}> {
 	render() {
+		if (this.props.room.side === 'popup') {
+			return <div class="ps-popup" id={`room-${this.props.room.id}`} style={this.props.style}>
+				<div class="mainmessage"><p>Loading...</p></div>
+			</div>;
+		}
 		return <div class="ps-room ps-room-light" id={`room-${this.props.room.id}`} style={this.props.style}>
 			<div class="mainmessage"><p>Loading...</p></div>
 		</div>;
@@ -165,11 +170,21 @@ class PSMain extends preact.Component {
 
 		window.addEventListener('click', e => {
 			let elem = e.target as HTMLElement | null;
+			if (elem && elem.className === 'ps-overlay') {
+				PS.closePopup();
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				return;
+			}
 			while (elem) {
 				if (elem.tagName === 'A') {
 					const roomid = this.roomidFromLink(elem as HTMLAnchorElement);
 					if (roomid !== null) {
-						PS.join(roomid);
+						PS.addRoom({
+							id: roomid,
+							parentElem: elem,
+						});
+						PS.update();
 						e.preventDefault();
 						e.stopImmediatePropagation();
 						return;
@@ -195,7 +210,11 @@ class PSMain extends preact.Component {
 			PS.leave(elem.value as RoomID);
 			return true;
 		case 'joinRoom':
-			PS.join(elem.value as RoomID);
+			PS.addRoom({
+				id: elem.value as RoomID,
+				parentElem: elem,
+			});
+			PS.update();
 			return true;
 		}
 		return false;
@@ -267,14 +286,25 @@ class PSMain extends preact.Component {
 		const Panel = roomType ? roomType.Component : PSRoomPanel;
 		return <Panel key={room.id} style={this.posStyle(pos)} room={room} />;
 	}
+	renderPopup(room: PSRoom) {
+		const roomType = PS.roomTypes[room.type];
+		const Panel = roomType ? roomType.Component : PSRoomPanel;
+		return <div class="ps-overlay">
+			<Panel key={room.id} style={{maxWidth: 480}} room={room} />
+		</div>;
+	}
 	render() {
 		let rooms = [] as preact.VNode[];
 		for (const roomid in PS.rooms) {
-			rooms.push(this.renderRoom(PS.rooms[roomid]!));
+			const room = PS.rooms[roomid]!;
+			if (room.side !== 'popup') {
+				rooms.push(this.renderRoom(room));
+			}
 		}
 		return <div class="ps-frame">
 			<PSHeader style={this.posStyle({bottom: 50})} />
 			{rooms}
+			{PS.popups.map(roomid => this.renderPopup(PS.rooms[roomid]!))}
 		</div>;
 	}
 }