Massive SQL cleanup.

3 files changed, 74 insertions, 58 deletions

diff --git a/public/common/client.js b/public/common/client.js
index 9ef89e5..c516880 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -11,7 +11,8 @@ let chat_is_visible = false;
 let chat_text = null;
 let chat_key = null;
 let chat_last_day = null;
-let chat_log = null;
+let chat_log = 0;
+let chat_seen = 0;
 
 function scroll_with_middle_mouse(panel_sel, multiplier) {
 	let panel = document.querySelector(panel_sel);
@@ -104,7 +105,19 @@ function stop_blinker() {
 
 window.addEventListener("focus", stop_blinker);
 
-function add_chat_lines(log) {
+function load_chat(game_id) {
+	chat_key = "chat/" + game_id;
+	chat_text = document.querySelector(".chat_text");
+	chat_last_day = null;
+	chat_log = 0;
+	chat_seen = window.localStorage.getItem(chat_key) | 0;
+}
+
+function save_chat() {
+	window.localStorage.setItem(chat_key, chat_log);
+}
+
+function update_chat(chat_id, utc_date, user, message) {
 	function format_time(date) {
 		let mm = date.getMinutes();
 		let hh = date.getHours();
@@ -124,10 +137,9 @@ function add_chat_lines(log) {
 		chat_text.appendChild(line);
 		chat_text.scrollTop = chat_text.scrollHeight;
 	}
-	for (let entry of log) {
-		chat_log.push(entry);
-		let [date, user, message] = entry;
-		date = new Date(date);
+	if (chat_id > chat_log) {
+		chat_log = chat_id;
+		let date = new Date(utc_date + "Z");
 		let day = date.toDateString();
 		if (day !== chat_last_day) {
 			add_date_line(day);
@@ -135,37 +147,14 @@ function add_chat_lines(log) {
 		}
 		add_chat_line(format_time(date), user, message);
 	}
-}
-
-function load_chat(game_id) {
-	chat_key = "chat/" + game_id;
-	chat_text = document.querySelector(".chat_text");
-	chat_last_day = null;
-	chat_log = [];
-	let save = JSON.parse(window.localStorage.getItem(chat_key));
-	if (save) {
-		if (Date.now() < save.expires)
-			add_chat_lines(save.chat);
+	if (chat_id > chat_seen) {
+		let button = document.querySelector(".chat_button");
+		start_blinker("NEW MESSAGE");
+		if (!chat_is_visible)
+			button.classList.add("new");
 		else
-			window.localStorage.removeItem(chat_key);
-	}
-	return chat_log.length;
-}
-
-function save_chat() {
-	const DAY = 86400000;
-	let save = { expires: Date.now() + 7 * DAY, chat: chat_log };
-	window.localStorage.setItem(chat_key, JSON.stringify(save));
-}
-
-function update_chat(log_start, log) {
-	if (log_start === 0) {
-		chat_last_day = null;
-		chat_log = [];
-		while (chat_text.firstChild)
-			chat_text.removeChild(chat_text.firstChild);
+			save_chat();
 	}
-	add_chat_lines(log);
 }
 
 function init_client(roles) {
@@ -209,7 +198,7 @@ function init_client(roles) {
 	socket.on('connect', () => {
 		console.log("CONNECTED");
 		document.querySelector(".grid_top").classList.remove('disconnected');
-		socket.emit('getchat', chat_log.length); // only send new messages when we reconnect!
+		socket.emit('getchat', chat_log); // only send new messages when we reconnect!
 	});
 
 	socket.on('disconnect', () => {
@@ -226,7 +215,7 @@ function init_client(roles) {
 		document.querySelector("body").classList.add(player);
 		for (let i = 0; i < roles.length; ++i) {
 			let pr = players.find(p => p.role === roles[i]);
-			document.querySelector(USER_SEL[i]).textContent = pr ? pr.user_name : "NONE";
+			document.querySelector(USER_SEL[i]).textContent = pr ? pr.name : "NONE";
 		}
 	});
 
@@ -261,15 +250,9 @@ function init_client(roles) {
 		document.getElementById("prompt").textContent = msg;
 	});
 
-	socket.on('chat', function (log_start, log) {
-		console.log("CHAT UPDATE", log_start, log.length);
-		update_chat(log_start, log);
-		let button = document.querySelector(".chat_button");
-		start_blinker("NEW MESSAGE");
-		if (!chat_is_visible)
-			button.classList.add("new");
-		else
-			save_chat();
+	socket.on('chat', function (item) {
+		console.log("CHAT MESSAGE", JSON.stringify(item));
+		update_chat(item[0], item[1], item[2], item[3]);
 	});
 
 	document.querySelector(".chat_form").addEventListener("submit", e => {
diff --git a/public/join.js b/public/join.js
index a5a2e3a..ce3d0d0 100644
--- a/public/join.js
+++ b/public/join.js
@@ -76,8 +76,12 @@ function start_event_source() {
 	}
 }
 
-function is_your_turn(player, role) {
-	return (game.active_role === role || game.active_role === "Both" || game.active_role === "All");
+function is_active(player, role) {
+	return (game.active === role || game.active === "Both" || game.active === "All");
+}
+
+function is_solo() {
+	return players.every(p => p.user_id === players[0].user_id);
 }
 
 function update() {
@@ -94,19 +98,19 @@ function update() {
 		let element = document.getElementById(role_id);
 		if (player) {
 			if (game.status > 0) {
-				if (is_your_turn(player, role))
-					element.className = "is_your_turn";
+				if (is_active(player, role))
+					element.className = "is_active";
 				else
 					element.className = "";
 				if (player.user_id === user_id)
 					element.innerHTML = `<a href="/play/${game.game_id}/${role}">Play</a>`;
 				else
-					element.innerHTML = player.user_name;
+					element.innerHTML = player.name;
 			} else {
 				if ((player.user_id === user_id) || (game.owner_id === user_id))
-					element.innerHTML = `<a class="red" href="javascript:send('/part/${game.game_id}/${role}')">\u274c</a> ${player.user_name}`;
+					element.innerHTML = `<a class="red" href="javascript:send('/part/${game.game_id}/${role}')">\u274c</a> ${player.name}`;
 				else
-					element.innerHTML = player.user_name;
+					element.innerHTML = player.name;
 			}
 		} else {
 			if (game.status === 0)
@@ -131,7 +135,7 @@ function update() {
 	if (game.owner_id === user_id) {
 		window.start_button.disabled = !ready;
 		window.start_button.classList = (game.status === 0) ? "" : "hide";
-		window.delete_button.classList = (game.status === 0 || game.is_solo) ? "" : "hide";
+		window.delete_button.classList = (game.status === 0 || is_solo()) ? "" : "hide";
 		if (game.status === 0 && ready)
 			start_blinker("READY TO START");
 		else
diff --git a/public/style.css b/public/style.css
index 20865a4..f72cdb7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -24,22 +24,51 @@ h2 { margin-left: -1px; }
 .main hr { max-width: 50rem; margin-right: auto; margin-left: 0; }
 .main hr { border: none; border-top: 2px dotted brown; }
 .main hr + p { font-style: italic; }
-table.wide { min-width: 50rem; }
+.is_active { background-color: lemonchiffon; }
 .error { color: brown; font-style: italic; white-space: pre-wrap; }
 .warning { color: brown; }
 .warning::before { content: "\26a0"; }
-.logo { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); height: 200px; }
+img.logo {
+	float: left;
+	margin: 0 20px 5px 0;
+	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
+	height: 200px;
+}
+img.avatar {
+	float: left;
+	margin: 0 20px 5px 0;
+	box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5);
+	width: 80px; height: 80px;
+}
+
 table { border-collapse: collapse; }
+tfoot td { background-color: gainsboro; }
 th { text-align: left; background-color: gainsboro; }
 th, td { border: 1px solid black; }
 th, td { padding: 3px 1ex; }
+
+table.game { min-width: min(50rem,100%); }
+table.game .title { white-space: nowrap; }
+table.game .scenario { white-space: nowrap; }
+table.game .role { white-space: nowrap; }
+table.game .time { white-space: nowrap; }
+table.game td a { text-decoration: none; color: black; }
+table.game td.command a { text-decoration: underline; color: blue; }
+
+table.post { min-width: min(50rem,100%); }
+table.post .author { white-space: nowrap; width: 10rem; }
+table.post .time { white-space: nowrap; text-align: right; width: 5rem; }
+table.post .replies { width: 0; }
+table.post .unread { background-color: lightyellow; }
+table.post .body { white-space: pre-wrap; padding: 10px 10px; }
+table.post th a { text-decoration: none; color: black; }
+table.post td:not(.body):not(.edit) a { text-decoration: none; color: black; }
+
 label { user-select: none; }
 button, input, select { font-size: 1rem; margin: 5px 0; }
 input[type="text"], input[type="password"], textarea { padding: 5px; }
 select { padding-right: 20px; }
 form { display: inline; }
-.nowrap { white-space: nowrap; }
-.is_your_turn { background-color: lemonchiffon; }
 button, select {
 	margin: 5px 10px 5px 0;
 	padding: 1px 10px;