Add connection support

The actual connect function is commented out, because there's no reason
for it to do anything. But it can actually connect to a server now.

.eslintignore

@@ -11,6 +11,7 @@ node_modules/
 /js/battle-scene-stub.js
 /js/client-core.js
 /js/client-main.js
+/js/client-connection.js
 /js/panels.js
 /js/panel-mainmenu.js
 /js/panel-rooms.js

.gitignore

@@ -22,6 +22,7 @@ package-lock.json
 /js/battle-scene-stub.js
 /js/client-core.js
 /js/client-main.js
+/js/client-connection.js
 /js/panels.js
 /js/panel-mainmenu.js
 /js/panel-rooms.js

src/client-connection.ts

@@ -0,0 +1,45 @@
+/**
+ * Connection library
+ *
+ * @author Guangcong Luo <guangcongluo@gmail.com>
+ * @license MIT
+ */
+
+declare var SockJS: any;
+
+class PSConnection {
+	socket: any = null;
+	connected = false;
+	queue = [] as string[];
+	constructor() {
+		// this.connect();
+	}
+	connect() {
+		const server = PS.server;
+		const port = server.protocol === 'https' ? '' : ':' + server.port;
+		const url = server.protocol + '://' + server.host + port + server.prefix;
+		const socket = this.socket = new SockJS(url);
+		socket.onopen = () => {
+			console.log('\u2705 (CONNECTED)');
+			this.connected = true;
+			for (const msg of this.queue) socket.send(msg);
+			this.queue = [];
+		};
+		socket.onmessage = (e: MessageEvent) => {
+			PS.receive('' + e.data);
+		};
+		socket.onclose = () => {
+			console.log('\u2705 (DISCONNECTED)');
+			this.socket = null;
+		};
+	}
+	send(msg: string) {
+		if (!this.connected) {
+			this.queue.push(msg);
+			return;
+		}
+		this.socket.send(msg);
+	}
+}
+
+PS.connection = new PSConnection();

src/client-core.ts

@@ -68,6 +68,14 @@ if (!Object.create) {
 		return new (F as any)();
 	};
 }
+if (!window.console) {
+	// in IE8, the console object is only defined when devtools is open
+	// I don't actually know if this will cause problems when you open devtools,
+	// but that's something I can figure out if I ever bother testing in IE8
+	(window as any).console = {
+		log() {},
+	};
+}
 
 /**********************************************************************
  * PS Models

src/client-main.ts

@@ -201,6 +201,20 @@ class PSUser extends PSModel {
 	avatar = "1";
 }
 
+/**********************************************************************
+ * Server
+ *********************************************************************/
+
+class PSServer {
+	id = 'showdown';
+	host = 'sim2.psim.us';
+	port = 8000;
+	altport = 80;
+	registered = true;
+	prefix = '/showdown';
+	protocol: 'http' | 'https' = 'https';
+}
+
 /**********************************************************************
  * Rooms
  *********************************************************************/
@@ -243,7 +257,15 @@ class PSRoom extends PSStreamModel implements RoomOptions {
 	receive(message: string) {
 		throw new Error(`This room is not designed to receive messages`);
 	}
+	send(msg: string) {
+		const id = this.id === 'lobby' ? '' : this.id;
+		PS.send(id + '|' + msg);
+	}
 	destroy() {
+		if (this.connected) {
+			this.send('/leave');
+			this.connected = false;
+		}
 	}
 }
 
@@ -265,6 +287,8 @@ const PS = new class extends PSModel {
 	prefs = new PSPrefs();
 	teams = new PSTeams();
 	user = new PSUser();
+	server = new PSServer();
+	connection: PSConnection | null = null;
 
 	router: PSRouter = null!;
 
@@ -407,6 +431,40 @@ const PS = new class extends PSModel {
 		if (!layoutAlreadyUpdated) this.updateLayout();
 		super.update();
 	}
+	receive(msg: string) {
+		msg = msg.endsWith('\n') ? msg.slice(0, -1) : msg;
+		let roomid = '' as RoomID;
+		if (msg.startsWith('>')) {
+			const nlIndex = msg.indexOf('\n');
+			roomid = msg.slice(1, nlIndex) as RoomID;
+			msg = msg.slice(nlIndex + 1);
+		}
+		const roomid2 = roomid || 'lobby' as RoomID;
+		let room = PS.rooms[roomid];
+		console.log('\u2705 ' + (roomid ? '[' + roomid + '] ' : '') + '%c' + msg, "color: #007700");
+		for (const line of msg.split('\n')) {
+			if (line.startsWith('|init|')) {
+				room = PS.rooms[roomid2];
+				const type = line.slice(6);
+				if (!room) {
+					this.addRoom({
+						id: roomid2,
+						type: type,
+					});
+					room = PS.rooms[roomid2];
+				} else {
+					room.type = type;
+					this.updateRoomTypes();
+				}
+				continue;
+			}
+			if (room) room.receive(line);
+		}
+	}
+	send(msg: string) {
+		console.log('\u25b6\ufe0f %c' + msg, "color: #776677");
+		this.connection!.send(msg);
+	}
 	isVisible(room: PSRoom) {
 		if (this.leftRoomWidth === 0) {
 			// one panel visible

testclient-beta.html

@@ -52,6 +52,8 @@ <h3><button class="closebutton" tabindex="-1" aria-label="Close"><i class="fa fa
 	</script>
 	<script src="js/client-core.js"></script>
 	<script src="js/client-main.js"></script>
+	<script src="js/lib/sockjs-1.1.1-nwjsfix.min.js"></script>
+	<script src="js/client-connection.js"></script>
 	<script src="js/lib/preact.min.js"></script>
 	<script src="js/panel-mainmenu.js"></script>
 	<script src="js/panel-rooms.js"></script>