Simplify styles and html for play.html

2 files changed, 186 insertions, 137 deletions

diff --git a/public/common/client.js b/public/common/client.js
index cf23ee4..01b6c05 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -116,6 +116,22 @@ function stop_blinker() {
 window.addEventListener("focus", stop_blinker);
 
 function load_chat() {
+	let chat_window = document.createElement("div");
+	chat_window.id = "chat_window";
+	chat_window.innerHTML = `
+		<div id="chat_header">Chat</div>
+		<div id="chat_text"></div>
+		<form id="chat_form" action=""><input id="chat_input" autocomplete="off"></form>
+		`;
+	document.querySelector("body").appendChild(chat_window);
+
+	let chat_button = document.createElement("div");
+	chat_button.id = "chat_button";
+	chat_button.className = "icon_button";
+	chat_button.innerHTML = '<img src="/images/chat-bubble.svg">';
+	chat_button.addEventListener("click", toggle_chat);
+	document.querySelector("header").insertBefore(chat_button, document.getElementById("prompt"));
+
 	chat_key = "chat/" + param_game_id;
 	chat_text = document.getElementById("chat_text");
 	chat_last_day = null;
@@ -202,14 +218,14 @@ function init_client(roles) {
 
 	socket.on('connect', () => {
 		console.log("CONNECTED");
-		document.getElementById("grid_top").classList.remove('disconnected');
+		document.querySelector("header").classList.remove('disconnected');
 		socket.emit('getchat', chat_log); // only send new messages when we reconnect!
 	});
 
 	socket.on('disconnect', () => {
 		console.log("DISCONNECTED");
 		document.getElementById("prompt").textContent = "Disconnected from server!";
-		document.getElementById("grid_top").classList.add('disconnected');
+		document.querySelector("header").classList.add('disconnected');
 	});
 
 	socket.on('roles', (me, players) => {
@@ -298,12 +314,12 @@ let old_active = null;
 function on_update_bar() {
 	document.getElementById("prompt").textContent = game.prompt;
 	if (game.actions) {
-		document.getElementById("grid_top").classList.add("your_turn");
+		document.querySelector("header").classList.add("your_turn");
 		if (!is_your_turn || old_active !== game.active)
 			start_blinker("YOUR TURN");
 		is_your_turn = true;
 	} else {
-		document.getElementById("grid_top").classList.remove("your_turn");
+		document.querySelector("header").classList.remove("your_turn");
 		is_your_turn = false;
 	}
 	old_active = game.active;
@@ -370,7 +386,7 @@ function toggle_chat() {
 }
 
 function zoom_map() {
-	let grid = document.getElementById("grid_center");
+	let grid = document.querySelector("main");
 	let mapwrap = document.getElementById("mapwrap");
 	let map = document.getElementById("map");
 	map.style.transform = null;
@@ -411,16 +427,24 @@ function init_shift_zoom() {
 }
 
 function toggle_log() {
-	document.getElementById("grid_window").classList.toggle("hide_log");
+	document.querySelector("aside").classList.toggle("hide");
 	zoom_map();
 }
 
-function show_action_button(sel, action, use_label = false) {
-	let button = document.querySelector(sel);
+function action_button(action, label) {
+	let id = action + "_button";
+	let button = document.getElementById(id);
+	if (!button) {
+		button = document.createElement("button");
+		button.id = id;
+		button.textContent = label;
+		button.addEventListener("click", evt => send_action(action));
+		document.getElementById("actions").appendChild(button);
+	}
 	if (game.actions && action in game.actions) {
 		button.classList.remove("hide");
 		if (game.actions[action]) {
-			if (use_label)
+			if (label === undefined)
 				button.textContent = game.actions[action];
 			button.disabled = false;
 		} else {
diff --git a/public/common/grid.css b/public/common/grid.css
index 61edd18..47bc6b1 100644
--- a/public/common/grid.css
+++ b/public/common/grid.css
@@ -13,130 +13,110 @@ html, button, input, select {
 	font-family: "Source Serif", "Circled Numbers", "Dingbats", "Noto Emoji", "Georgia", serif;
 }
 
-#log {
+#log, #turn_info {
 	font-family: "Source Serif SmText", "Circled Numbers", "Dingbats", "Noto Emoji", "Georgia", serif;
 }
 
-body:not(.shift) .debug {
+.hide {
 	display: none;
 }
 
-html, body, div {
-	margin: 0;
-	padding: 0;
+body:not(.shift) .debug {
+	display: none;
 }
 
-html {
-	overflow: clip;
+body.Observer .resign {
+	display: none;
 }
 
-#status {
-	position:absolute;
-	z-index: 100;
-	left: 0;
-	bottom: 0;
-	background-color: white;
-	padding: 0 1ex;
+button {
+	font-size: 1rem;
+	margin: 0;
+	padding: 1px 12px;
+	background-color: gainsboro;
+}
+button:disabled {
+	color: gray;
+	border: 2px solid gainsboro;
+	outline: 1px solid gray;
+}
+button:enabled {
+	border: 2px outset white;
+	outline: 1px solid black;
+}
+button:enabled:active:hover {
+	border: 2px inset white;
+	padding: 2px 11px 0px 13px;
 }
 
-#grid_window {
+/* MAIN GRID */
+
+body {
+	margin: 0;
+	padding: 0;
 	display: grid;
+	overflow: clip;
 	grid-template-columns: 1fr min-content;
-	grid-template-rows: min-content min-content 1fr;
-	gap: 0px;
+	grid-template-rows: min-content 1fr;
 	width: 100vw;
 	height: 100vh;
 }
 
-#grid_window.hide_log #grid_role {
-	display: none;
+header {
+	grid-column: 1/3;
+	grid-row: 1;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid black;
 }
-#grid_window.hide_log #log {
-	display: none;
+
+header.disconnected {
+	background-color: red !important;
+}
+
+header.your_turn {
+	background-color: orange;
 }
 
-#grid_center {
+main {
 	grid-column: 1;
-	grid-row: 2/4;
+	grid-row: 2;
 	overflow: auto;
 	scrollbar-width: none;
 }
 
-#grid_role {
+aside {
 	grid-column: 2;
 	grid-row: 2;
-	border-left: 1px solid black;
-	width: 209px;
-}
-
-.role_name {
-	padding-top: 3px;
-	padding-bottom: 3px;
-	padding-left: 5px;
-	padding-right: 5px;
-	border-bottom: 1px solid black;
-}
-
-.role_vp {
-	float: right;
-}
-
-.role_user {
-	font-style: italic;
-	text-align: right;
+	display: grid;
 	overflow: clip;
-	text-overflow: "...";
-	white-space: nowrap;
-}
-
-.role .role_name::before { content: "\25cb  "; opacity: 0.6; }
-.role.present .role_name::before { content: "\25cf  "; opacity: 0.6; }
-
-.role_info {
-	border-bottom: 1px solid black;
-	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
+	grid-template-rows: min-content 1fr;
+	width: 209px;
+	border-left: 1px solid black;
 }
 
-#turn_info {
-	padding: 8px 0px 8px 8px;
-	border-bottom: 1px solid black;
-	white-space: pre-line;
-	font-style: italic;
-	font-size: 12px;
-	line-height: 18px;
-	font-family: "Source Serif SmText";
+#roles {
+	grid-column: 1;
+	grid-row: 1;
 }
 
 #log {
-	grid-column: 2;
-	grid-row: 3;
-	border-left: 1px solid black;
+	grid-column: 1;
+	grid-row: 2;
 	overflow-y: scroll;
 	scrollbar-width: thin;
-	padding: 12px 0;
-	font-size: 12px;
-	line-height: 18px;
-	white-space: pre-wrap;
 }
 
-#log > * {
-	padding-left: 20px;
-	padding-right: 4px;
-	text-indent: -12px;
-	min-height: 9px;
+footer {
+	position:absolute;
+	z-index: 100;
+	left: 0;
+	bottom: 0;
+	background-color: white;
+	padding: 0 1ex;
 }
 
-#grid_top {
-	grid-column: 1/3;
-	grid-row: 1;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid black;
-}
-
-#grid_top.disconnected {
-	background-color: red !important;
-}
+/* MENU */
 
 .menu {
 	user-select: none;
@@ -176,32 +156,27 @@ html {
 	color: white;
 }
 
-body.Observer .menu .resign {
-	display: none;
-}
+/* TOOL BAR */
 
-.image_button {
+.icon_button {
 	user-select: none;
 }
-.image_button img {
+.icon_button img {
 	display: block;
 	height: 35px;
 	padding: 5px;
 }
-.image_button:hover {
+.icon_button:hover {
 	background-color: black;
 	color: white;
 }
-.image_button:hover img {
+.icon_button:hover img {
 	filter: invert(100%);
 }
 
-#grid_top button {
+header button {
 	margin: 0 10px;
 }
-#grid_top .hide {
-	display: none;
-}
 
 #prompt {
 	margin: 0 50px;
@@ -209,6 +184,79 @@ body.Observer .menu .resign {
 	flex-grow: 1;
 }
 
+/* ROLES */
+
+.role_name {
+	border-bottom: 1px solid black;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.role_info, .card_info, #turn_info {
+	border-bottom: 1px solid black;
+	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
+}
+
+.role_vp {
+	float: right;
+}
+
+.role_user {
+	font-style: italic;
+	text-align: right;
+	overflow: clip;
+	text-overflow: "...";
+	white-space: nowrap;
+}
+
+.role .role_name::before { content: "\25cb  "; opacity: 0.6; }
+.role.present .role_name::before { content: "\25cf  "; opacity: 0.6; }
+
+#turn_info {
+	padding: 8px 0px 8px 8px;
+	white-space: pre-line;
+	font-style: italic;
+	font-size: 12px;
+	line-height: 18px;
+}
+
+/* LOG */
+
+#log {
+	padding: 12px 0;
+	font-size: 12px;
+	line-height: 18px;
+	white-space: pre-wrap;
+}
+
+#log > * {
+	padding-left: 20px;
+	padding-right: 4px;
+	text-indent: -12px;
+	min-height: 9px;
+}
+
+/* MAP */
+
+#mapwrap {
+	position: relative;
+	margin: 0 auto;
+}
+
+#mapwrap.fit {
+	max-width: 100%;
+}
+
+#map {
+	position: absolute;
+	isolation: isolate;
+	transform-origin: 0 0;
+}
+
+/* CARDS */
+
 .hand {
 	margin: 15px;
 	display: flex;
@@ -225,12 +273,15 @@ body.Observer .menu .resign {
 	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 	display: none;
 }
+
 .card.show {
 	display: block;
 }
+
 .card.enabled {
 	cursor: pointer;
 }
+
 .card.disabled {
 	filter: grayscale(100%);
 }
@@ -243,44 +294,12 @@ body.Observer .menu .resign {
 	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 }
 
-#mapwrap {
-	margin: 0 auto;
-}
-
-#mapwrap.fit {
-	max-width: 100%;
-}
-
-#map {
-	isolation:isolate;
-	transform-origin: 0 0;
-}
-
-button {
-	font-size: 1rem;
-	margin: 0;
-	padding: 1px 12px;
-	background-color: gainsboro;
-}
-button:disabled {
-	color: gray;
-	border: 2px solid gainsboro;
-	outline: 1px solid gray;
-}
-button:enabled {
-	border: 2px outset white;
-	outline: 1px solid black;
-}
-button:enabled:active:hover {
-	border: 2px inset white;
-	padding: 2px 11px 0px 13px;
-}
-
 /* CHAT WINDOW */
 
 #chat_button.new {
 	filter: invert(100%);
 }
+
 #chat_window {
 	position: absolute;
 	left: 10px;
@@ -294,15 +313,18 @@ button:enabled:active:hover {
 	display: grid;
 	grid-template-rows: min-content 1fr min-content;
 }
+
 #chat_window.show {
 	visibility: visible;
 }
+
 #chat_header {
 	cursor: move;
 	background-color: gainsboro;
 	border-bottom: 1px solid black;
 	padding: 5px 10px;
 }
+
 #chat_text {
 	font-size: 16px;
 	line-height: 24px;
@@ -310,15 +332,18 @@ button:enabled:active:hover {
 	padding: 0px 5px;
 	overflow-y: scroll;
 }
+
 #chat_text .date {
 	font-weight: bold;
 }
+
 #chat_form {
 	display: block;
 	margin: 0;
 	padding: 0;
 	border-top: 1px solid black;
 }
+
 #chat_input {
 	box-sizing: border-box;
 	width: 100%;