Use WebSockets instead of socket.io.

4 files changed, 168 insertions, 105 deletions

diff --git a/public/common/battle_abc.css b/public/common/columbia.css
index 3a211a1..1a646b6 100644
--- a/public/common/battle_abc.css
+++ b/public/common/columbia.css
@@ -1,4 +1,4 @@
-/* ABC BATTLE DISPLAY FOR COLUMBIA BLOCK GAMES */
+/* BATTLE DIALOG FOR COLUMBIA BLOCK GAMES */
 
 #battle {
 	position: absolute;
@@ -11,18 +11,22 @@
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
 	visibility: hidden;
 }
+
 #battle.show {
 	visibility: visible;
 }
+
 #battle th {
 	padding: 0;
 	border: 1px solid black;
 }
+
 #battle td {
 	padding: 0;
 	border: 1px solid black;
 	vertical-align: top;
 }
+
 #battle_header {
 	font-weight: bold;
 	height: 2em;
@@ -31,12 +35,14 @@
 	user-select: none;
 	cursor: move;
 }
+
 #battle_message {
 	font-weight: normal;
 	height: 2em;
 	line-height: 2em;
 	padding: 0 8px;
 }
+
 #FA, #FB, #FC, #FD, #FF, #FR, #EA, #EB, #EC, #ED, #EF, #ER {
 	display: flex;
 	flex-wrap: wrap;
@@ -64,11 +70,6 @@
 	display: none;
 }
 
-.battle_menu .action:hover { background-color: red; }
-.battle_menu .action.retreat:hover { background-color: #eee; }
-.battle_menu .action.withdraw:hover { background-color: #eee; }
-.battle_menu .action.pass:hover { background-color: gray; }
-
 .battle_menu_list {
 	margin-top: 5px;
 	min-height: 26px;
@@ -82,6 +83,11 @@
 	display: none;
 }
 
+.battle_menu .action:hover { background-color: red; }
+.battle_menu .action.retreat:hover { background-color: #eee; }
+.battle_menu .action.withdraw:hover { background-color: #eee; }
+.battle_menu .action.pass:hover { background-color: gray; }
+
 .battle_menu.fire .action.fire { display: inline; }
 .battle_menu.retreat .action.retreat { display: inline; }
 .battle_menu.pass .action.pass { display: inline; }
diff --git a/public/common/grid.css b/public/common/play.css
index 228c0aa..64e9202 100644
--- a/public/common/grid.css
+++ b/public/common/play.css
@@ -25,7 +25,7 @@ body:not(.shift) .debug {
 	display: none;
 }
 
-body.Observer .resign, body.replay .resign {
+body.Observer .resign {
 	display: none;
 }
 
@@ -184,7 +184,7 @@ header .replay {
 	display: flex;
 }
 
-header button.replay_button {
+header .replay button {
 	margin: 0;
 }
 
@@ -311,12 +311,11 @@ header button.replay_button {
 	border: 1px solid black;
 	background-color: white;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	display: none;
-	grid-template-rows: auto minmax(0, 1fr) auto;
+	visibility: hidden;
 }
 
 #chat_window.show {
-	display: grid;
+	visibility: visible;
 }
 
 #chat_header {
diff --git a/public/common/client.js b/public/common/play.js
index d9a1f48..ede3a5b 100644
--- a/public/common/client.js
+++ b/public/common/play.js
@@ -117,13 +117,10 @@ window.addEventListener("focus", stop_blinker);
 function init_chat() {
 	// only fetch new messages when we reconnect!
 	if (chat !== null) {
-		console.log("RECONNECT CHAT");
-		socket.emit("getchat", chat.log);
+		send_message("getchat", chat.log);
 		return;
 	}
 
-	console.log("CONNECT CHAT");
-
 	let chat_window = document.createElement("div");
 	chat_window.id = "chat_window";
 	chat_window.innerHTML = `
@@ -156,7 +153,7 @@ function init_chat() {
 		let input = document.getElementById("chat_input");
 		e.preventDefault();
 		if (input.value) {
-			socket.emit("chat", input.value);
+			send_message("chat", input.value);
 			input.value = "";
 		} else {
 			hide_chat();
@@ -179,7 +176,7 @@ function init_chat() {
 		}
 	});
 
-	socket.emit("getchat", 0);
+	send_message("getchat", 0);
 }
 
 function save_chat() {
@@ -251,6 +248,38 @@ function toggle_chat() {
 		show_chat();
 }
 
+/* REMATCH BUTTON */
+
+function remove_resign_menu() {
+	document.querySelectorAll(".resign").forEach(x => x.remove());
+}
+
+function goto_rematch() {
+	window.location = "/rematch/" + params.game_id + "/" + params.role;
+}
+
+function goto_replay() {
+	window.location = "/" + params.title_id + "/replay:" + params.game_id;
+}
+
+function on_game_over() {
+	function icon_button(id, img, title, fn) {
+		if (!document.getElementById(id)) {
+			let button = document.createElement("div");
+			button.id = id;
+			button.title = title;
+			button.className = "icon_button";
+			button.innerHTML = '<img src="/images/' + img + '.svg">';
+			button.addEventListener("click", fn);
+			document.querySelector("header").appendChild(button);
+		}
+	}
+	icon_button("replay_button", "sherlock-holmes-mirror", "Watch replay", goto_replay);
+	if (player !== "Observer")
+		icon_button("rematch_button", "cycle", "Propose a rematch!", goto_rematch);
+	remove_resign_menu();
+}
+
 /* CONNECT TO GAME SERVER */
 
 function init_player_names(players) {
@@ -261,76 +290,102 @@ function init_player_names(players) {
 	}
 }
 
-function init_play_client() {
-	const ROLE_SEL = [
-		".role.one",
-		".role.two",
-		".role.three",
-		".role.four",
-		".role.five",
-		".role.six",
-		".role.seven",
-	];
+function send_message(cmd, arg) {
+	let data = JSON.stringify([cmd, arg]);
+	console.log("SEND %s %s", cmd, arg);
+	socket.send(data);
+}
 
-	console.log("JOINING", params.title_id + "/" + params.game_id + "/" + params.role);
+let reconnect_count = 0;
+let reconnect_max = 10;
 
-	socket = io({
-		transports: ["websocket"],
-		query: { title: params.title_id, game: params.game_id, role: params.role },
-	});
+function connect_play() {
+	if (reconnect_count >= reconnect_max) {
+		document.title = "DISCONNECTED";
+		document.getElementById("prompt").textContent = "Disconnected.";
+		return;
+	}
 
-	socket.on("connect", () => {
-		console.log("CONNECTED");
-		document.querySelector("header").classList.remove("disconnected");
-	});
+	let protocol = (window.location.protocol === "http:") ? "ws" : "wss";
+	let seen = document.getElementById("log").children.length;
+	let url = `${protocol}://${window.location.host}/play-socket?title=${params.title_id}&game=${params.game_id}&role=${params.role}&seen=${seen}`;
 
-	socket.on("disconnect", () => {
-		console.log("DISCONNECTED");
-		document.getElementById("prompt").textContent = "Disconnected from server!";
-		document.querySelector("header").classList.add("disconnected");
-	});
+	console.log("CONNECTING", url);
+	document.getElementById("prompt").textContent = "Connecting... ";
+
+	socket = new WebSocket(url);
 
-	socket.on("roles", (me, players) => {
-		console.log("PLAYERS", me, JSON.stringify(players));
-		player = me;
-		document.querySelector("body").classList.add(player.replace(/ /g, "_"));
-		if (player !== "Observer")
-			init_chat();
-		init_player_names(players);
+	window.addEventListener('beforeunload', function () {
+		socket.close(1000);
 	});
 
-	socket.on("presence", (presence) => {
-		console.log("PRESENCE", JSON.stringify(presence));
-		for (let i = 0; i < roles.length; ++i) {
-			let elt = document.getElementById(roles[i].id);
-			if (roles[i].role in presence)
-				elt.classList.add("present");
-			else
-				elt.classList.remove("present");
+	socket.onopen = function (evt) {
+		console.log("OPEN");
+		document.querySelector("header").classList.remove("disconnected");
+		reconnect_count = 0;
+	}
+
+	socket.onclose = function (evt) {
+		console.log("CLOSE %d", evt.code);
+		if (evt.code === 1000 && evt.reason !== "") {
+			document.getElementById("prompt").textContent = "Disconnected: " + evt.reason;
+			document.title = "DISCONNECTED";
 		}
-	});
+		if (evt.code !== 1000) {
+			document.querySelector("header").classList.add("disconnected");
+			document.getElementById("prompt").textContent = `Reconnecting soon... (${reconnect_count+1}/${reconnect_max})`;
+			let wait = 1000 * (Math.random() + 0.5) * Math.pow(2, reconnect_count++);
+			console.log("WAITING %.1f TO RECONNECT", wait/1000);
+			setTimeout(connect_play, wait);
+		}
+	}
 
-	socket.on("state", (new_view) => {
-		console.log("STATE");
-		view = new_view;
-		on_update_header();
-		on_update();
-		on_update_log();
-	});
+	socket.onmessage = function (evt) {
+		let [ cmd, arg ] = JSON.parse(evt.data);
+		console.log("MESSAGE %s", cmd);
+		switch (cmd) {
+		case 'error':
+			document.getElementById("prompt").textContent = arg;
+			break;
 
-	socket.on("save", (msg) => {
-		console.log("SAVE");
-		window.localStorage[params.title_id + "/save"] = msg;
-	});
+		case 'chat':
+			update_chat(arg[0], arg[1], arg[2], arg[3]);
+			break;
 
-	socket.on("error", (msg) => {
-		console.log("ERROR", msg);
-		document.getElementById("prompt").textContent = msg;
-	});
+		case 'players':
+			player = arg[0];
+			document.querySelector("body").classList.add(player.replace(/ /g, "_"));
+			if (player !== "Observer")
+				init_chat();
+			else
+				remove_resign_menu();
+			init_player_names(arg[1]);
+			break;
 
-	socket.on("chat", function (item) {
-		update_chat(item[0], item[1], item[2], item[3]);
-	});
+		case 'presence':
+			for (let i = 0; i < roles.length; ++i) {
+				let elt = document.getElementById(roles[i].id);
+				if (roles[i].role in arg)
+					elt.classList.add("present");
+				else
+					elt.classList.remove("present");
+			}
+			break;
+
+		case 'state':
+			view = arg;
+			on_update_header();
+			on_update();
+			on_update_log();
+			if (view.game_over)
+				on_game_over();
+			break;
+
+		case 'save':
+			window.localStorage[params.title_id + "/save"] = msg;
+			break;
+		}
+	}
 }
 
 /* HEADER */
@@ -474,17 +529,16 @@ function send_action(verb, noun) {
 		return;
 	// Reset action list here so we don't send more than one action per server prompt!
 	if (noun !== undefined) {
-		if (view.actions && view.actions[verb] && view.actions[verb].includes(noun)) {
+		let realnoun = Array.isArray(noun) ? noun[0] : noun;
+		if (view.actions && view.actions[verb] && view.actions[verb].includes(realnoun)) {
 			view.actions = null;
-			console.log("ACTION", verb, JSON.stringify(noun));
-			socket.emit("action", verb, noun);
+			send_message("action", [verb, noun]);
 			return true;
 		}
 	} else {
 		if (view.actions && view.actions[verb]) {
 			view.actions = null;
-			console.log("ACTION", verb);
-			socket.emit("action", verb);
+			send_message("action", [verb]);
 			return true;
 		}
 	}
@@ -493,21 +547,21 @@ function send_action(verb, noun) {
 
 function confirm_resign() {
 	if (window.confirm("Are you sure that you want to resign?"))
-		socket.emit("resign");
+		send_message("resign");
 }
 
 /* DEBUGGING */
 
 function send_save() {
-	socket.emit("save");
+	send_message("save");
 }
 
 function send_restore() {
-	socket.emit("restore", window.localStorage[params.title_id + "/save"]);
+	send_message("restore", window.localStorage[params.title_id + "/save"]);
 }
 
 function send_restart(scenario) {
-	socket.emit("restart", scenario);
+	send_message("restart", scenario);
 }
 
 /* REPLAY */
@@ -546,9 +600,10 @@ async function require(path) {
 
 let replay = null;
 
-async function init_replay_client() {
+async function init_replay() {
+	remove_resign_menu();
+
 	document.getElementById("prompt").textContent = "Loading replay...";
-	document.querySelector("body").classList.add("replay");
 
 	console.log("LOADING RULES");
 	let rules = await require("rules.js");
@@ -660,7 +715,7 @@ async function init_replay_client() {
 
 		if (viewpoint === "Active") {
 			player = s.active;
-			if (player === "All" || player === "Both" || !player)
+			if (player === "All" || player === "Both" || player === "None" || !player)
 				player = "Observer";
 		}
 
@@ -679,10 +734,13 @@ async function init_replay_client() {
 			view.game_over = 1;
 
 		if (replay.length > 0) {
-			if (document.querySelector("body").classList.contains("shift"))
-				view.prompt = `[${p}/${replay.length}] ${s.active} / ${s.state} / ${replay[p].action} ${replay[p].arguments}`;
-			else
+			if (document.querySelector("body").classList.contains("shift")) {
+				view.prompt = `[${p}/${replay.length}] ${s.active} / ${s.state}`;
+				if (p < replay.length)
+					view.prompt += ` / ${replay[p].action} ${replay[p].arguments}`;
+			} else {
 				view.prompt = "[" + p + "/" + replay.length + "] " + view.prompt;
+			}
 		}
 		if (log_length < view.log.length)
 			view.log_start = log_length;
@@ -696,11 +754,10 @@ async function init_replay_client() {
 		on_update_log();
 	}
 
-	function replay_button(div, label, fn) {
+	function text_button(div, txt, fn) {
 		let button = document.createElement("button");
 		button.addEventListener("click", fn);
-		button.className = "replay_button";
-		button.textContent = label;
+		button.textContent = txt;
 		div.appendChild(button);
 		return button;
 	}
@@ -715,20 +772,20 @@ async function init_replay_client() {
 
 		let div = document.createElement("div");
 		div.className = "replay";
-		replay_button(div, "Active", () => set_viewpoint("Active"));
+		text_button(div, "Active", () => set_viewpoint("Active"));
 		for (let r of roles)
-			replay_button(div, r.role, () => set_viewpoint(r.role));
-		replay_button(div, "Observer", () => set_viewpoint("Observer"));
+			text_button(div, r.role, () => set_viewpoint(r.role));
+		text_button(div, "Observer", () => set_viewpoint("Observer"));
 		document.querySelector("header").appendChild(div);
 
 		div = document.createElement("div");
 		div.className = "replay";
-		replay_button(div, "<<<", () => goto_replay(1));
-		replay_button(div, "<<", () => goto_replay(prev()));
-		replay_button(div, "<\xa0", () => goto_replay(p-1));
-		replay_button(div, "\xa0>", () => goto_replay(p+1));
-		replay_button(div, ">>", () => goto_replay(next()));
-		replay_button(div, "Run", play_pause_replay).style.width = "65px";
+		text_button(div, "<<<", () => goto_replay(1));
+		text_button(div, "<<", () => goto_replay(prev()));
+		text_button(div, "<\xa0", () => goto_replay(p-1));
+		text_button(div, "\xa0>", () => goto_replay(p+1));
+		text_button(div, ">>", () => goto_replay(next()));
+		text_button(div, "Run", play_pause_replay).style.width = "65px";
 		document.querySelector("header").appendChild(div);
 
 		if (window.location.hash === "")
@@ -744,7 +801,7 @@ async function init_replay_client() {
 	}
 }
 
-if (params.mode === "play")
-	init_play_client();
 if (params.mode === "replay")
-	init_replay_client();
+	init_replay();
+if (params.mode === "play")
+	connect_play();
diff --git a/public/images/sherlock-holmes-mirror.svg b/public/images/sherlock-holmes-mirror.svg
new file mode 100644
index 0000000..f2f0f19
--- /dev/null
+++ b/public/images/sherlock-holmes-mirror.svg
@@ -0,0 +1 @@
+<svg style="height:512px;width:512px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M326.582 36.882s24.67 5.747 35.756 15.557c38.586 34.149 51.256 67.652 53.746 105.53l43.97 47.023c-96.221-17.906-207.672-21.92-340.581-20.912 21.002-14.144 41.37-25.753 59.322-36.814 14.473-35.496 33.701-76.597 65.934-95.373 14.145-8.24 29.144-14.024 43.962-16.83 10.736-20.307 35.4-11.819 37.89 1.82zM407.023 214.8c-20.328 40.62-56.635 79.575-89.761 103.012-18.256 12.63-36.742 21.653-51.035 24.144-11.946 2.242-23.46-1.416-28.825-10.672l-.002-.004v-.002c-8.103-14.299-14.714-28.724-20.359-43.197-15.776 1.737-33.408 2.541-38.04-1.178-7.31-5.871 8.751-56.088 16.056-69.443C192 211.24 192 204.665 192 199.88c39.436-2.194 150.638 6.423 215.023 14.92zm-342.142 6.07c13.335.302 24.897 9.857 33.428 22.668 9.413 14.137 16.138 33.34 18.798 55.055 2.66 21.714.771 41.971-4.95 57.963-4.29 11.99-11.133 22.318-20.655 27.515l10.77 108.676-17.913 1.775-10.615-107.13c-12.015-1.592-22.443-10.62-30.299-22.418-9.413-14.137-16.136-33.339-18.797-55.053-2.66-21.714-.77-41.974 4.952-57.965 5.721-15.991 15.983-29.026 31.087-30.877a29.036 29.036 0 0 1 4.194-.209zm-2.004 18.076c-5.494.673-11.846 6.541-16.33 19.075-4.485 12.533-6.397 30.421-4.033 49.71 2.363 19.29 8.538 36.186 15.916 47.266 7.377 11.08 14.955 15.242 20.449 14.568 5.494-.673 11.844-6.54 16.328-19.074 4.485-12.533 6.396-30.42 4.033-49.709-2.363-19.289-8.536-36.187-15.914-47.267-5.011-6.164-12.69-15.168-20.449-14.569zm349.951 3.584c6.243 8.543 13.975 17.27 23.111 25.744 12.11 11.231 26.664 21.827 43.198 30.211-37.101 7.524-77.514 23.385-115.21 42.594-42.326 21.57-80.776 47.18-106.775 71.145l-2.314-24.686c11.388-12.634 23.526-23.83 35.869-34.252 12.152-5.001 24.557-12.203 36.797-20.672 36.371-25.164 70.878-60.916 85.324-90.084zM68.246 253.806c-.036 21.503-3.015 45.534-9.771 64.632-6.729-19.745-7.02-55.246 9.771-64.632zm137.598 54.43a353.014 353.014 0 0 0 7.74 16.574c-7.33 5.423-11.536 10.592-13.904 15.505-3.119 6.47-3.49 13.077-2.176 21.295 2.24 14.002 10.213 31.472 14.32 52.23 9.049 12.67 1.565 56.042-18.265 60.938-44.677 11.03-69.71-35.7-59.614-46.716 9.817-10.713 37.598-19.736 57.92-19.952-4.048-14.733-9.79-28.985-12.136-43.656-1.666-10.412-1.325-21.456 3.736-31.955 4.255-8.827 11.576-16.856 22.379-24.264zm272.875 8.81c4.751 7.296 9.937 15.484 15.281 24.413V494H238.848c2.921-14.12 5.609-28.7 8.763-42.629.65-5.674 5.269-9.093 9.059-13.314 21.957-24.459 66.328-55.92 115.432-80.942 35.16-17.917 72.94-32.625 106.617-40.07z"/></svg>
\ No newline at end of file