Simplify styles and html for play.html

3 files changed, 317 insertions, 398 deletions

diff --git a/play.css b/play.css
new file mode 100644
index 0000000..b287433
--- /dev/null
+++ b/play.css
@@ -0,0 +1,274 @@
+main { background-color: #777; }
+#roles { background-color: #999; }
+header { background-color: silver; }
+header.your_turn { background-color: orange; }
+#role_Lancaster .role_name { background-color: salmon; }
+#role_York .role_name { background-color: ghostwhite; }
+#turn_info { background-color: gainsboro; }
+.role_vp { float: right; }
+
+#log { background-color: ghostwhite; }
+#log div { padding-left: 20px; text-indent: -12px; }
+#log .st { background-color: steelblue; color: white; font-weight: bold; }
+#log .L { background-color: pink; }
+#log .Y { background-color: gainsboro; }
+#log .bs { background-color: lightsteelblue; }
+#log .br { font-style: italic; text-decoration: underline; }
+
+.hand {
+	margin: 25px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 16px;
+	min-height: 280px;
+}
+
+.card {
+	background-size: cover;
+	background-repeat: no-repeat;
+	width: 180px;
+	height: 280px;
+	border-radius: 12px;
+	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	transition: 100ms;
+	display: none;
+}
+
+.card.show {
+	display: block;
+}
+
+.card.enabled:hover {
+	transform: translateY(-8px);
+}
+
+.card.enabled {
+	cursor: pointer;
+}
+
+.card.disabled {
+	filter: grayscale(100%);
+}
+
+.role_info {
+	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
+	padding-top: 16px;
+}
+
+.role_info .card {
+	margin: 0 auto 16px auto;
+}
+
+.role_info .card:not(:hover) {
+	margin: 0 auto;
+	height: 96px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+/* MAP */
+
+#mapwrap {
+	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
+	width: 1688px;
+	height: 1950px;
+}
+
+#map {
+	width: 1688px;
+	height: 1950px;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+#map { background-image: url("map75.jpg") }
+@media (min-resolution: 97dpi) {
+	#map { background-image: url("map150.jpg") }
+}
+
+#map svg {
+	position: absolute;
+}
+
+#map svg image {
+	pointer-events: none;
+}
+
+#map svg path.area {
+	fill: green;
+	stroke: green;
+	stroke-width: 20px;
+	fill-opacity: 0.4;
+	stroke-opacity: 0.8;
+	opacity: 0;
+}
+
+#map svg #area_France { fill: white; stroke: white; }
+#map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; }
+#map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; }
+#map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; }
+#map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; }
+
+#map svg path.area.highlight {
+	cursor: pointer;
+	opacity: 1;
+}
+#map svg path.area.where {
+	opacity: 1;
+	fill: darkslategray;
+	stroke: darkslategray;
+}
+#map svg path.area.where.highlight {
+	stroke: white;
+}
+
+#map.hide_blocks #blocks {
+	visibility: hidden;
+}
+
+/* BLOCKS */
+
+body.shift .block.known:hover {
+	transform: scale(2) !important;
+	transition: 100ms;
+	z-index: 100;
+}
+
+#battle div.block {
+	position: relative;
+}
+
+#map div.block {
+	position: absolute;
+}
+
+div.block {
+	border-radius: 6px;
+	width: 60px;
+	height: 60px;
+}
+
+div.block { background-size: 700% 900%; background-repeat: no-repeat; }
+
+div.block { box-shadow: 0px 0px 3px 0px black; }
+
+div.block.Lancaster { border: 3px solid brown; background-color: indianred; }
+div.block.York { border: 3px solid gainsboro; background-color: whitesmoke; }
+div.block.Rebel { border: 3px solid dimgray; background-color: gray; }
+
+div.block.Lancaster.highlight { border-color: white; }
+div.block.York.highlight { border-color: white; }
+div.block.Rebel.highlight { border-color: white; }
+
+.hit div.block.highlight { border-color: black; box-shadow: 0 0 3px 0px black; }
+
+div.block.Lancaster.selected { border-color: yellow; }
+div.block.York.selected { border-color: yellow; }
+div.block.Rebel.selected { border-color: yellow; }
+
+div.block.highlight { cursor: pointer; box-shadow: 0 0 3px 1px white; }
+div.block.selected { box-shadow: 0 0 3px 1px yellow; }
+div.block.moved { filter: grayscale(50%) brightness(85%); }
+div.block.highlight.moved { filter: grayscale(60%) brightness(95%); }
+
+div.block:hover { z-index: 1; }
+
+div.block.r1 { transform: rotate(-90deg); }
+div.block.r2 { transform: rotate(-180deg); }
+div.block.r3 { transform: rotate(-270deg); }
+
+div.block {
+	transition-property: top, left, transform;
+	transition-duration: 700ms, 700ms, 200ms;
+	transition-timing-function: ease;
+}
+
+/* BATTLE BOARD */
+
+#battle { background-color: silver; }
+#battle_message { background-color: lightsteelblue; }
+#battle_header { background-color: steelblue; color: white; }
+#FR, #ER { background-color: #acacac; }
+
+/* CARD AND BLOCK IMAGES */
+
+.card, .small_card { background-color: #d3b37b; }
+.card_back { background-color: black; }
+
+.card_back{background-image:url('cards/card_back.jpg')}
+.card_force_march{background-image:url('cards/card_force_march.jpg')}
+.card_muster{background-image:url('cards/card_muster.jpg')}
+.card_piracy{background-image:url('cards/card_piracy.jpg')}
+.card_plague{background-image:url('cards/card_plague.jpg')}
+.card_surprise{background-image:url('cards/card_surprise.jpg')}
+.card_treason{background-image:url('cards/card_treason.jpg')}
+.card_2{background-image:url('cards/card_2.jpg')}
+.card_3{background-image:url('cards/card_3.jpg')}
+.card_4{background-image:url('cards/card_4.jpg')}
+
+.known.block{background-image:url(blocks.jpg)}
+
+.known.block_11{background-position:0px 0px}
+.known.block_12{background-position:-60px 0px}
+.known.block_13{background-position:-120px 0px}
+.known.block_14{background-position:-180px 0px}
+.known.block_15{background-position:-240px 0px}
+.known.block_16{background-position:-300px 0px}
+.known.block_17{background-position:-360px 0px}
+.known.block_21{background-position:0px -60px}
+.known.block_22{background-position:-60px -60px}
+.known.block_23{background-position:-120px -60px}
+.known.block_24{background-position:-180px -60px}
+.known.block_25{background-position:-240px -60px}
+.known.block_26{background-position:-300px -60px}
+.known.block_27{background-position:-360px -60px}
+.known.block_31{background-position:0px -120px}
+.known.block_32{background-position:-60px -120px}
+.known.block_33{background-position:-120px -120px}
+.known.block_34{background-position:-180px -120px}
+.known.block_35{background-position:-240px -120px}
+.known.block_36{background-position:-300px -120px}
+.known.block_37{background-position:-360px -120px}
+.known.block_41{background-position:0px -180px}
+.known.block_42{background-position:-60px -180px}
+.known.block_43{background-position:-120px -180px}
+.known.block_44{background-position:-180px -180px}
+.known.block_45{background-position:-240px -180px}
+.known.block_46{background-position:-300px -180px}
+.known.block_47{background-position:-360px -180px}
+.known.block_51{background-position:0px -240px}
+.known.block_52{background-position:-60px -240px}
+.known.block_53{background-position:-120px -240px}
+.known.block_54{background-position:-180px -240px}
+.known.block_55{background-position:-240px -240px}
+.known.block_56{background-position:-300px -240px}
+.known.block_57{background-position:-360px -240px}
+.known.block_61{background-position:0px -300px}
+.known.block_62{background-position:-60px -300px}
+.known.block_63{background-position:-120px -300px}
+.known.block_64{background-position:-180px -300px}
+.known.block_65{background-position:-240px -300px}
+.known.block_66{background-position:-300px -300px}
+.known.block_67{background-position:-360px -300px}
+.known.block_71{background-position:0px -360px}
+.known.block_72{background-position:-60px -360px}
+.known.block_73{background-position:-120px -360px}
+.known.block_74{background-position:-180px -360px}
+.known.block_75{background-position:-240px -360px}
+.known.block_76{background-position:-300px -360px}
+.known.block_77{background-position:-360px -360px}
+.known.block_81{background-position:0px -420px}
+.known.block_82{background-position:-60px -420px}
+.known.block_83{background-position:-120px -420px}
+.known.block_84{background-position:-180px -420px}
+.known.block_85{background-position:-240px -420px}
+.known.block_86{background-position:-300px -420px}
+.known.block_87{background-position:-360px -420px}
+.known.block_91{background-position:0px -480px}
+.known.block_92{background-position:-60px -480px}
+.known.block_93{background-position:-120px -480px}
+.known.block_94{background-position:-180px -480px}
+.known.block_95{background-position:-240px -480px}
+.known.block_96{background-position:-300px -480px}
+.known.block_97{background-position:-360px -480px}
diff --git a/play.html b/play.html
index 6d1f227..cc14c49 100644
--- a/play.html
+++ b/play.html
@@ -2,278 +2,20 @@
 <html>
 <head>
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
-<meta charset="UTF-8">
+<meta charset="utf-8">
 <title>RICHARD III</title>
 <link rel="icon" href="icons/Red_Rose_Badge_of_Lancaster.svg">
 <link rel="stylesheet" href="/fonts/fonts.css">
 <link rel="stylesheet" href="/common/grid.css">
 <link rel="stylesheet" href="/common/battle_abc.css">
+<link rel="stylesheet" href="play.css">
 <script defer src="/socket.io/socket.io.min.js"></script>
 <script defer src="/common/client.js"></script>
 <script defer src="data.js"></script>
-<script defer src="ui.js"></script>
-<style>
-
-#grid_center { background-color: #788; }
-#grid_role { background-color: silver; }
-#grid_top { background-color: silver; }
-#grid_top.your_turn { background-color: orange; }
-.one .role_name { background-color: salmon; }
-.two .role_name { background-color: ghostwhite; }
-#turn_info { background-color: gainsboro; }
-
-#log { background-color: ghostwhite; }
-#log .st { background-color: steelblue; color: white; font-weight: bold; }
-#log .L { background-color: pink; }
-#log .Y { background-color: gainsboro; }
-#log .bs { background-color: lightsteelblue; }
-#log .br { font-style: italic; text-decoration: underline; }
-
-.hand {
-	min-height: 300px;
-}
-
-.card {
-	width: 180px;
-	height: 280px;
-	border-radius: 12px;
-}
-
-.card.enabled:hover {
-	transform: scale(1.1);
-}
-
-.role_info { padding: 15px; }
-.small_card { width: 90px; height: 140px; border-radius: 5px; }
-.small_card:hover { width: 180px; height: 280px; border-radius: 10px; }
-
-@media (max-height: 800px) {
-	.role_info { padding: 15px 0 0 0; }
-	.small_card { width: 180px; height: 80px; border-radius: 10px 10px 0 0; }
-	.small_card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
-}
-
-@media (min-height: 1200px) {
-	.small_card { width: 180px; height: 280px; border-radius: 10px; }
-}
-
-/* MAP */
-
-#mapwrap {
-	position: relative;
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-	width: 1688px;
-	height: 1950px;
-}
-
-#map {
-	position: absolute;
-	width: 1688px;
-	height: 1950px;
-}
-
-#map svg {
-	position: absolute;
-}
-
-#map svg image {
-	pointer-events: none;
-}
-
-#map svg path.area {
-	fill: green;
-	stroke: green;
-	stroke-width: 20px;
-	fill-opacity: 0.4;
-	stroke-opacity: 0.8;
-	opacity: 0;
-}
-
-#map svg #area_France { fill: white; stroke: white; }
-#map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; }
-#map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; }
-#map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; }
-#map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; }
-
-#map svg path.area.highlight {
-	cursor: pointer;
-	opacity: 1;
-}
-#map svg path.area.where {
-	opacity: 1;
-	fill: darkslategray;
-	stroke: darkslategray;
-}
-#map svg path.area.where.highlight {
-	stroke: white;
-}
-
-#map.hide_blocks #blocks {
-	visibility: hidden;
-}
-
-/* BLOCKS */
-
-body.shift .block.known:hover {
-	transform: scale(2) !important;
-	transition: 100ms;
-	z-index: 100;
-}
-
-#battle div.block {
-	position: relative;
-}
-
-#map div.block {
-	position: absolute;
-}
-
-div.block {
-	border-radius: 6px;
-	width: 60px;
-	height: 60px;
-}
-
-div.block { background-size: cover; background-repeat: no-repeat; }
-
-div.block { box-shadow: 0px 0px 3px 0px black; }
-
-div.block.Lancaster { border: 3px solid brown; background-color: indianred; }
-div.block.York { border: 3px solid gainsboro; background-color: whitesmoke; }
-div.block.Rebel { border: 3px solid dimgray; background-color: gray; }
-
-div.block.Lancaster.highlight { border-color: white; }
-div.block.York.highlight { border-color: white; }
-div.block.Rebel.highlight { border-color: white; }
-
-.hit div.block.highlight { border-color: black; box-shadow: 0 0 3px 0px black; }
-
-div.block.Lancaster.selected { border-color: yellow; }
-div.block.York.selected { border-color: yellow; }
-div.block.Rebel.selected { border-color: yellow; }
-
-div.block.highlight { cursor: pointer; box-shadow: 0 0 3px 1px white; }
-div.block.selected { box-shadow: 0 0 3px 1px yellow; }
-div.block.moved { filter: grayscale(50%) brightness(85%); }
-div.block.highlight.moved { filter: grayscale(60%) brightness(95%); }
-
-div.block:hover { z-index: 1; }
-
-div.block.r1 { transform: rotate(-90deg); }
-div.block.r2 { transform: rotate(-180deg); }
-div.block.r3 { transform: rotate(-270deg); }
-
-div.block {
-	transition-property: top, left, transform;
-	transition-duration: 700ms, 700ms, 200ms;
-	transition-timing-function: ease;
-}
-
-/* BATTLE BOARD */
-
-#battle { background-color: silver; }
-#battle_message { background-color: lightsteelblue; }
-#battle_header { background-color: steelblue; color: white; }
-.battle_separator { background-color: steelblue; }
-
-.battle_reserves > td > div { height: 75px; padding: 5px; }
-.battle_a_cell > div { min-width: 180px; padding: 5px 10px; }
-.battle_b_cell > div { min-width: 180px; padding: 5px 10px; }
-.battle_c_cell > div { min-width: 180px; padding: 5px 10px; }
-.battle_d_cell > div { min-width: 90px; padding: 5px 10px; }
-
-/* CARD AND BLOCK IMAGES */
-
-.card, .small_card { background-color: #d3b37b; }
-.card_back { background-color: black; }
-
-.card_back{background-image:url('cards/card_back.jpg')}
-.card_force_march{background-image:url('cards/card_force_march.jpg')}
-.card_muster{background-image:url('cards/card_muster.jpg')}
-.card_piracy{background-image:url('cards/card_piracy.jpg')}
-.card_plague{background-image:url('cards/card_plague.jpg')}
-.card_surprise{background-image:url('cards/card_surprise.jpg')}
-.card_treason{background-image:url('cards/card_treason.jpg')}
-.card_2{background-image:url('cards/card_2.jpg')}
-.card_3{background-image:url('cards/card_3.jpg')}
-.card_4{background-image:url('cards/card_4.jpg')}
-
-.known.block_11{background-image:url(blocks/block_11.jpg)}
-.known.block_12{background-image:url(blocks/block_12.jpg)}
-.known.block_13{background-image:url(blocks/block_13.jpg)}
-.known.block_14{background-image:url(blocks/block_14.jpg)}
-.known.block_15{background-image:url(blocks/block_15.jpg)}
-.known.block_16{background-image:url(blocks/block_16.jpg)}
-.known.block_17{background-image:url(blocks/block_17.jpg)}
-.known.block_21{background-image:url(blocks/block_21.jpg)}
-.known.block_22{background-image:url(blocks/block_22.jpg)}
-.known.block_23{background-image:url(blocks/block_23.jpg)}
-.known.block_24{background-image:url(blocks/block_24.jpg)}
-.known.block_25{background-image:url(blocks/block_25.jpg)}
-.known.block_26{background-image:url(blocks/block_26.jpg)}
-.known.block_27{background-image:url(blocks/block_27.jpg)}
-.known.block_31{background-image:url(blocks/block_31.jpg)}
-.known.block_32{background-image:url(blocks/block_32.jpg)}
-.known.block_33{background-image:url(blocks/block_33.jpg)}
-.known.block_34{background-image:url(blocks/block_34.jpg)}
-.known.block_35{background-image:url(blocks/block_35.jpg)}
-.known.block_36{background-image:url(blocks/block_36.jpg)}
-.known.block_37{background-image:url(blocks/block_37.jpg)}
-.known.block_41{background-image:url(blocks/block_41.jpg)}
-.known.block_42{background-image:url(blocks/block_42.jpg)}
-.known.block_43{background-image:url(blocks/block_43.jpg)}
-.known.block_44{background-image:url(blocks/block_44.jpg)}
-.known.block_45{background-image:url(blocks/block_45.jpg)}
-.known.block_46{background-image:url(blocks/block_46.jpg)}
-.known.block_47{background-image:url(blocks/block_47.jpg)}
-.known.block_51{background-image:url(blocks/block_51.jpg)}
-.known.block_52{background-image:url(blocks/block_52.jpg)}
-.known.block_53{background-image:url(blocks/block_53.jpg)}
-.known.block_54{background-image:url(blocks/block_54.jpg)}
-.known.block_55{background-image:url(blocks/block_55.jpg)}
-.known.block_56{background-image:url(blocks/block_56.jpg)}
-.known.block_57{background-image:url(blocks/block_57.jpg)}
-.known.block_61{background-image:url(blocks/block_61.jpg)}
-.known.block_62{background-image:url(blocks/block_62.jpg)}
-.known.block_63{background-image:url(blocks/block_63.jpg)}
-.known.block_64{background-image:url(blocks/block_64.jpg)}
-.known.block_65{background-image:url(blocks/block_65.jpg)}
-.known.block_66{background-image:url(blocks/block_66.jpg)}
-.known.block_67{background-image:url(blocks/block_67.jpg)}
-.known.block_71{background-image:url(blocks/block_71.jpg)}
-.known.block_72{background-image:url(blocks/block_72.jpg)}
-.known.block_73{background-image:url(blocks/block_73.jpg)}
-.known.block_74{background-image:url(blocks/block_74.jpg)}
-.known.block_75{background-image:url(blocks/block_75.jpg)}
-.known.block_76{background-image:url(blocks/block_76.jpg)}
-.known.block_77{background-image:url(blocks/block_77.jpg)}
-.known.block_81{background-image:url(blocks/block_81.jpg)}
-.known.block_82{background-image:url(blocks/block_82.jpg)}
-.known.block_83{background-image:url(blocks/block_83.jpg)}
-.known.block_84{background-image:url(blocks/block_84.jpg)}
-.known.block_85{background-image:url(blocks/block_85.jpg)}
-.known.block_86{background-image:url(blocks/block_86.jpg)}
-.known.block_87{background-image:url(blocks/block_87.jpg)}
-.known.block_91{background-image:url(blocks/block_91.jpg)}
-.known.block_92{background-image:url(blocks/block_92.jpg)}
-.known.block_93{background-image:url(blocks/block_93.jpg)}
-.known.block_94{background-image:url(blocks/block_94.jpg)}
-.known.block_95{background-image:url(blocks/block_95.jpg)}
-.known.block_96{background-image:url(blocks/block_96.jpg)}
-.known.block_97{background-image:url(blocks/block_97.jpg)}
-
-</style>
+<script defer src="play.js"></script>
 </head>
 <body>
 
-<div id="status"></div>
-
-<div id="chat_window">
-<div id="chat_header">Chat</div>
-<div id="chat_text"></div>
-<form id="chat_form" action=""><input id="chat_input" autocomplete="off"></form>
-</div>
-
 <table id="battle">
 <tr>
 <th id="battle_header" colspan=4></th>
@@ -297,74 +39,29 @@ div.block {
 <th id="battle_message" colspan=4></th>
 </table>
 
-<div id="grid_window">
-
-	<div id="grid_top">
-
-		<div class="menu">
-			<div class="menu_title"><img src="/images/cog.svg"></div>
-			<div class="menu_popup">
-				<div class="menu_item" onclick="toggle_fullscreen()">Fullscreen</div>
-				<div class="menu_separator"></div>
-				<div class="menu_item" onclick="window.open('info/notes.html', '_blank')">Notes</div>
-				<div class="menu_item" onclick="window.open('info/rules.html', '_blank')">Rules</div>
-				<div class="menu_item" onclick="window.open('info/cards.html', '_blank')">Cards</div>
-				<div class="menu_item" onclick="window.open('info/blocks.html', '_blank')">Blocks</div>
-				<div class="resign menu_separator"></div>
-				<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
-			</div>
+<header>
+	<div class="menu">
+		<div class="menu_title"><img src="/images/cog.svg"></div>
+		<div class="menu_popup">
+			<div class="menu_item" onclick="toggle_fullscreen()">Fullscreen</div>
+			<div class="menu_separator"></div>
+			<div class="menu_item" onclick="window.open('info/notes.html', '_blank')">Notes</div>
+			<div class="menu_item" onclick="window.open('info/rules.html', '_blank')">Rules</div>
+			<div class="menu_item" onclick="window.open('info/cards.html', '_blank')">Cards</div>
+			<div class="menu_item" onclick="window.open('info/blocks.html', '_blank')">Blocks</div>
+			<div class="resign menu_separator"></div>
+			<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
 		</div>
-
-		<div class="image_button" onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></div>
-		<div class="image_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
-		<div class="image_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
-		<div id="chat_button" class="image_button" onclick="toggle_chat()"><img src="/images/chat-bubble.svg"></div>
-
-		<div id="prompt">Connecting...</div>
-
-		<button id="execute_clarence_button" onclick="on_button_execute_clarence()" class="hide">
-			Execute Clarence
-		</button>
-		<button id="execute_exeter_button" onclick="on_button_execute_exeter()" class="hide">
-			Execute Exeter
-		</button>
-		<button id="treachery_button" onclick="on_button_treachery()" class="hide">
-			Treachery
-		</button>
-		<button id="eliminate_button" onclick="on_button_eliminate()" class="hide">
-			Eliminate
-		</button>
-		<button id="end_retreat_button" onclick="on_button_end_retreat()" class="hide">
-			End retreat
-		</button>
-		<button id="end_regroup_button" onclick="on_button_end_regroup()" class="hide">
-			End regroup
-		</button>
-		<button id="end_political_turn_button" onclick="on_button_end_political_turn()" class="hide">
-			End political turn
-		</button>
-		<button id="end_supply_phase_button" onclick="on_button_end_supply_phase()" class="hide">
-			End supply phase
-		</button>
-		<button id="end_action_phase_button" onclick="on_button_end_action_phase()" class="hide">
-			End action phase
-		</button>
-		<button id="end_exile_limits_button" onclick="on_button_end_exile_limits()" class="hide">
-			End exile limits
-		</button>
-		<button id="pass_button" onclick="on_button_pass()" class="hide">
-			Pass
-		</button>
-		<button id="undo_button" onclick="on_button_undo()" class="hide">
-			Undo
-		</button>
-
-		<div id="rematch_button" class="image_button hide" onclick="send_rematch()"><img src="/images/cycle.svg"></div>
-		<div id="exit_button" class="image_button hide" onclick="send_exit()"><img src="/images/exit-door.svg"></div>
 	</div>
-
-	<div id="grid_role">
-
+	<div class="icon_button" onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></div>
+	<div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
+	<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
+	<div id="prompt"></div>
+	<div id="actions"></div>
+</header>
+
+<aside>
+	<div id="roles">
 		<div class="role one">
 			<div class="role_name">
 				Lancaster
@@ -373,7 +70,6 @@ div.block {
 			</div>
 			<div class="role_info"><div class="small_card card_back" id="lancaster_card"></div></div>
 		</div>
-
 		<div class="role two">
 			<div class="role_name">
 				York
@@ -382,15 +78,12 @@ div.block {
 			</div>
 			<div class="role_info"><div class="small_card card_back" id="york_card"></div></div>
 		</div>
-
 		<div id="turn_info">-</div>
-
 	</div>
-
 	<div id="log"></div>
+</aside>
 
-	<div id="grid_center">
-
+<main>
 <div id="mapwrap">
 <div id="map">
 
@@ -1556,11 +1249,10 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71
 
 <div id="blocks"></div>
 <div id="offmap" style="visibility:hidden"></div>
-
 </div>
 </div>
 
-<div class="hand">
+<div id="cards" class="hand">
 <div id="card+1" class="card card_force_march"></div>
 <div id="card+2" class="card card_muster"></div>
 <div id="card+3" class="card card_piracy"></div>
@@ -1595,7 +1287,8 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71
 <div id="back+7" class="card card_back"></div>
 </div>
 
-	</div>
+</main>
+
+<footer id="status"></footer>
 
-</div>
 </body>
diff --git a/ui.js b/play.js
index 2f8632a..b12f235 100644
--- a/ui.js
+++ b/play.js
@@ -266,54 +266,6 @@ function on_click_card(evt) {
 	send_action('play', c);
 }
 
-function on_button_undo(evt) {
-	send_action('undo');
-}
-
-function on_button_pass(evt) {
-	send_action('pass');
-}
-
-function on_button_end_action_phase(evt) {
-	send_action('end_action_phase');
-}
-
-function on_button_end_supply_phase(evt) {
-	send_action('end_supply_phase');
-}
-
-function on_button_end_political_turn(evt) {
-	send_action('end_political_turn');
-}
-
-function on_button_end_exile_limits(evt) {
-	send_action('end_exile_limits');
-}
-
-function on_button_end_regroup(evt) {
-	send_action('end_regroup');
-}
-
-function on_button_end_retreat(evt) {
-	send_action('end_retreat');
-}
-
-function on_button_eliminate(evt) {
-	send_action('eliminate');
-}
-
-function on_button_treachery(evt) {
-	send_action('treachery');
-}
-
-function on_button_execute_clarence(evt) {
-	send_action('execute_clarence');
-}
-
-function on_button_execute_exeter(evt) {
-	send_action('execute_exeter');
-}
-
 function build_battle_button(menu, b, c, click, enter, img_src) {
 	let img = new Image();
 	img.draggable = false;
@@ -780,22 +732,22 @@ function update_battle() {
 }
 
 function on_update() {
-	show_action_button("#undo_button", "undo");
-	show_action_button("#pass_button", "pass");
-	show_action_button("#end_action_phase_button", "end_action_phase");
-	show_action_button("#end_supply_phase_button", "end_supply_phase");
-	show_action_button("#end_political_turn_button", "end_political_turn");
-	show_action_button("#end_exile_limits_button", "end_exile_limits");
-	show_action_button("#end_regroup_button", "end_regroup");
-	show_action_button("#end_retreat_button", "end_retreat");
-	show_action_button("#eliminate_button", "eliminate");
-	show_action_button("#execute_clarence_button", "execute_clarence");
-	show_action_button("#execute_exeter_button", "execute_exeter");
-
 	let king = block_owner(game.king);
 	document.getElementById("lancaster_vp").textContent = (king === LANCASTER ? KING_TEXT : PRETENDER_TEXT);
 	document.getElementById("york_vp").textContent = (king === YORK ? KING_TEXT : PRETENDER_TEXT);
 
+	action_button("eliminate", "Eliminate");
+	action_button("execute_clarence", "Execute Clarence");
+	action_button("execute_exeter", "Execute Exeter");
+	action_button("end_action_phase", "End action phase");
+	action_button("end_supply_phase", "End supply phase");
+	action_button("end_political_turn", "End political turn");
+	action_button("end_exile_limits", "End exile limits");
+	action_button("end_regroup", "End regroup");
+	action_button("end_retreat", "End retreat");
+	action_button("pass", "Pass");
+	action_button("undo", "Undo");
+
 	update_cards();
 	update_map();
 
@@ -812,7 +764,7 @@ function on_update() {
 build_map();
 
 drag_element_with_mouse("#battle", "#battle_header");
-scroll_with_middle_mouse("#grid_center", 2);
+scroll_with_middle_mouse("main", 2);
 init_map_zoom();
 init_shift_zoom();
 init_client(["Lancaster", "York"]);