Simplify styles and html for play.html

3 files changed, 430 insertions, 482 deletions

diff --git a/play.css b/play.css
new file mode 100644
index 0000000..175a87e
--- /dev/null
+++ b/play.css
@@ -0,0 +1,381 @@
+main { background-color: slategray; }
+aside { background-color: silver; }
+header { background-color: gainsboro; }
+body.Franks header.your_turn { background-color: #f7de46; /* 50% mix of khaki and gold */ }
+body.Saracens header.your_turn { background-color: lightgreen; }
+.one .role_name { background-color: khaki; }
+.two .role_name { background-color: darkseagreen; }
+#turn_info { background-color: gainsboro; }
+
+#log { background-color: whitesmoke; }
+#log .st { background-color: #246; color: white; font-weight: bold; }
+#log .F { background-color: khaki; }
+#log .S { background-color: darkseagreen; }
+#log .bs { background-color: lightgray; }
+#log .br { font-style: italic; text-decoration: underline; }
+
+#map #timeline {
+	position: absolute;
+	width: 88px; height: 35px; top: 2410px;
+	background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8));
+}
+
+#map #timeline.year_1187 { left: 702px; }
+#map #timeline.year_1188 { left: 793px; width: 89px; }
+#map #timeline.year_1189 { left: 885px; }
+#map #timeline.year_1190 { left: 976px; width: 89px; }
+#map #timeline.year_1191 { left: 1068px; }
+#map #timeline.year_1192 { left: 1160px; width: 85px; }
+
+#turn {
+	padding: 8px 0px 8px 8px;
+	border-bottom: 1px solid black;
+	white-space: pre-wrap;
+	font-style: italic;
+	font-size: 12px;
+	line-height: 18px;
+	font-family: "Source Serif SmText";
+}
+
+.card {
+	width: 225px;
+	height: 350px;
+	border-radius: 15px;
+}
+
+.card.enabled:hover {
+	transform: scale(1.1);
+}
+
+.small_card.prior {
+	filter: grayscale(100%) contrast(70%) brightness(120%);
+}
+
+.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 {
+	background-color: #224467;
+	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
+	width: 1275px;
+	height: 2475px;
+}
+
+#map {
+	width: 1275px;
+	height: 2475px;
+	background-repeat: no-repeat;
+	background-color: #224467;
+}
+
+#map > * {
+	position: absolute;
+}
+
+#map.hide_blocks #blocks {
+	visibility: hidden;
+}
+
+.town {
+	position: absolute;
+	opacity: 0.0;
+	z-index: 1;
+	border: 5px solid white;
+	width: 70px;
+	height: 70px;
+	border-radius: 50%;
+}
+.town.highlight {
+	cursor: pointer;
+	opacity: 0.6;
+	z-index: 9;
+}
+.town.muster {
+	opacity: 0.6;
+	border-color: brown;
+	z-index: 9;
+}
+.town.muster.highlight {
+	box-shadow: 0 0 0px 4px white;
+}
+
+#sea {
+	fill: skyblue;
+	fill-opacity: 0.4;
+}
+
+#sea { visibility: hidden; }
+#sea.highlight { visibility: visible; cursor: pointer; }
+
+/* BLOCKS */
+
+body.shift .block.known:hover {
+	filter: none;
+	transform: scale(2) !important;
+	transition: 100ms;
+	z-index: 100;
+}
+
+#battle .block { position: relative; }
+#map .block { position: absolute; z-index: 2; }
+#map .block.highlight { z-index: 3; }
+#map .block.selected { z-index: 4; }
+#map .block.known { z-index: 5; }
+#map .block.known:hover { z-index: 6; }
+
+.block {
+	background-size: cover;
+	background-repeat: no-repeat;
+	border-radius: 6px;
+	width: 60px;
+	height: 60px;
+	box-shadow: 0px 0px 4px 0px black;
+}
+
+.block.Franks { border: 3px solid darkkhaki; background-color: khaki; }
+.block.Saracens { border: 3px solid seagreen; background-color: darkseagreen; }
+.block.Saracens.known { background-color: darkgreen; }
+.block.Assassins { border: 3px solid rebeccapurple; background-color: rebeccapurple; }
+
+.block.Franks.highlight { border-color: white; }
+.block.Saracens.highlight { border-color: white; }
+.block.Assassins.highlight { border-color: white; }
+
+.block.Franks.selected { border-color: crimson; }
+.block.Saracens.selected { border-color: yellow; }
+.block.Assassins.selected { border-color: yellow; }
+
+.block.Franks.highlight:not(.selected) { box-shadow: 0 0 3px 0px white; }
+
+.hit .block.highlight { border-color: black; }
+.hit .block.Franks.highlight { box-shadow: 0 0 4px 0px black; }
+
+.block.highlight { cursor: pointer; }
+.block.moved { filter: brightness(80%) grayscale(40%); }
+.block.highlight.moved { filter: brightness(95%) grayscale(40%); }
+
+#map .block.castle.known { filter: grayscale(50%); }
+#map.stack_layout .block.castle { filter: grayscale(90%); }
+
+.block.castle:not(.known) {
+	background-image: url("badges/stone-tower.svg");
+	background-size: 60%;
+	background-position: center;
+}
+.block.besieging:not(.known) {
+	background-image: url("badges/trebuchet.svg");
+	background-size: 60%;
+	background-position: center;
+}
+.block.winter_campaign:not(.known) {
+	background-image: url("badges/camping-tent.svg");
+	background-size: 60%;
+	background-position: center;
+}
+.block.Franks.jihad:not(.known) {
+	background-image: url("badges/Cross_of_the_Knights_Templar.svg");
+	background-size: 60%;
+	background-position: center;
+}
+.block.Saracens.jihad:not(.known) {
+	background-image: url("badges/Star_and_Crescent.svg");
+	background-size: 60%;
+	background-position: center;
+}
+
+.block.besieging.Franks.jihad:not(.known) {
+	background-image: url("badges/trebuchet.svg"), url("badges/Cross_of_the_Knights_Templar.svg");
+	background-size: 60%, 40%;
+	background-position: 30% 80%, 85% 15%;
+}
+.block.besieging.Saracens.jihad:not(.known) {
+	background-image: url("badges/trebuchet.svg"), url("badges/Star_and_Crescent.svg");
+	background-size: 60%, 40%;
+	background-position: 30% 80%, 85% 15%;
+}
+
+.block.r0 { transform: rotate(0deg); }
+.block.r1 { transform: rotate(-90deg); }
+.block.r2 { transform: rotate(-180deg); }
+.block.r3 { transform: rotate(-270deg); }
+.block.r0.halfhit { transform: rotate(-15deg); }
+.block.r1.halfhit { transform: rotate(-105deg); }
+.block.r2.halfhit { transform: rotate(-195deg); }
+.block.r3.halfhit { transform: rotate(-285deg); }
+
+.block {
+	transition-property: top, left, transform;
+	transition-duration: 700ms, 700ms, 200ms;
+	transition-timing-function: ease;
+}
+
+/* LANDSCAPE MAP */
+
+@media (min-width: 2000px) {
+	#mapwrap:not(.fit) {
+		box-shadow: 1px 0px 10px rgba(0,0,0,0.5);
+		height: 1275px;
+		width: 2475px;
+		margin-bottom: 40px;
+		margin-top: 30px;
+	}
+	#mapwrap:not(.fit) #map {
+		transform: translateY(1275px) rotate(-90deg);
+		transform-origin: 0 0;
+	}
+	body.shift #mapwrap:not(.fit) #map .block.known:hover {
+		transform: rotate(90deg) scale(2) !important;
+	}
+	#mapwrap:not(.fit) #map .block { transform: rotate(90deg); }
+	#mapwrap:not(.fit) #map .block.r1 { transform: rotate(0deg); }
+	#mapwrap:not(.fit) #map .block.r2 { transform: rotate(-90deg); }
+	#mapwrap:not(.fit) #map .block.r3 { transform: rotate(-180deg); }
+}
+
+/* BATTLE BOARD */
+
+#battle {
+	background-color: tan;
+	min-width: 700px;
+}
+#battle_message {
+	background-color: gainsboro;
+	text-align: center;
+	border-top: 1px solid black;
+}
+#battle_header {
+	background-color: steelblue;
+	color: white;
+	text-align: center;
+	border-bottom: 1px solid black;
+}
+.battle_menu {
+	margin: 5px 5px;
+}
+
+#FF, #FC, #FR, #EF, #EC, #ER { margin: 0px auto; padding: 5px; }
+#EC { margin-bottom: 10px; }
+#FC { margin-bottom: 5px; }
+#EC .battle_menu_list { min-height: 0; }
+#ER .battle_menu_list { min-height: 0; }
+#FR .battle_menu_list { min-height: 0; }
+
+#FC, #EC {
+	background-size: cover;
+	background-repeat: no-repeat;
+	padding: 0;
+	height: 107px;
+	padding-top: 33px;
+	border-bottom: 5px solid dimgray;
+	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
+	justify-content: left;
+}
+
+#FC.c1 .battle_menu:first-child { margin-left: 30px; }
+#FC.c2 .battle_menu:first-child { margin-left: 25px; }
+#FC.c3 .battle_menu:first-child { margin-left: 20px; }
+#FC.c4 .battle_menu:first-child { margin-left: 15px; }
+#EC.c1 .battle_menu:first-child { margin-left: 30px; }
+#EC.c2 .battle_menu:first-child { margin-left: 25px; }
+#EC.c3 .battle_menu:first-child { margin-left: 20px; }
+#EC.c4 .battle_menu:first-child { margin-left: 15px; }
+
+#FC.c0, #EC.c0 { display: none; }
+#FC.c1, #EC.c1 { background-image: url('castle_1.svg'); width: 140px; }
+#FC.c2, #EC.c2 { background-image: url('castle_2.svg'); width: 220px; }
+#FC.c3, #EC.c3 { background-image: url('castle_3.svg'); width: 300px; }
+#FC.c4, #EC.c4 { background-image: url('castle_4.svg'); width: 380px; }
+
+#FC, #EC, #FF, #EF { min-height: 107px; }
+#ER { min-height: 15px; }
+#FR { min-height: 15px; }
+
+/* CARD AND BLOCK IMAGES */
+
+.card_back{background-image:url('cards/card_back.jpg')}
+.card_assassins{background-image:url('cards/card_assassins.jpg')}
+.card_guide{background-image:url('cards/card_guide.jpg')}
+.card_intrigue{background-image:url('cards/card_intrigue.jpg')}
+.card_jihad{background-image:url('cards/card_jihad.jpg')}
+.card_manna{background-image:url('cards/card_manna.jpg')}
+.card_winter_campaign{background-image:url('cards/card_winter_campaign.jpg')}
+.card_1{background-image:url('cards/card_1.jpg')}
+.card_2{background-image:url('cards/card_2.jpg')}
+.card_3{background-image:url('cards/card_3.jpg')}
+
+.known.block_11{background-image:url(blocks/block_11.png)}
+.known.block_12{background-image:url(blocks/block_12.png)}
+.known.block_13{background-image:url(blocks/block_13.png)}
+.known.block_14{background-image:url(blocks/block_14.png)}
+.known.block_15{background-image:url(blocks/block_15.png)}
+.known.block_16{background-image:url(blocks/block_16.png)}
+.known.block_17{background-image:url(blocks/block_17.png)}
+.known.block_21{background-image:url(blocks/block_21.png)}
+.known.block_22{background-image:url(blocks/block_22.png)}
+.known.block_23{background-image:url(blocks/block_23.png)}
+.known.block_24{background-image:url(blocks/block_24.png)}
+.known.block_25{background-image:url(blocks/block_25.png)}
+.known.block_26{background-image:url(blocks/block_26.png)}
+.known.block_27{background-image:url(blocks/block_27.png)}
+.known.block_31{background-image:url(blocks/block_31.png)}
+.known.block_32{background-image:url(blocks/block_32.png)}
+.known.block_33{background-image:url(blocks/block_33.png)}
+.known.block_34{background-image:url(blocks/block_34.png)}
+.known.block_35{background-image:url(blocks/block_35.png)}
+.known.block_36{background-image:url(blocks/block_36.png)}
+.known.block_37{background-image:url(blocks/block_37.png)}
+.known.block_41{background-image:url(blocks/block_41.png)}
+.known.block_42{background-image:url(blocks/block_42.png)}
+.known.block_43{background-image:url(blocks/block_43.png)}
+.known.block_44{background-image:url(blocks/block_44.png)}
+.known.block_45{background-image:url(blocks/block_45.png)}
+.known.block_46{background-image:url(blocks/block_46.png)}
+.known.block_47{background-image:url(blocks/block_47.png)}
+.known.block_51{background-image:url(blocks/block_51.png)}
+.known.block_52{background-image:url(blocks/block_52.png)}
+.known.block_53{background-image:url(blocks/block_53.png)}
+.known.block_54{background-image:url(blocks/block_54.png)}
+.known.block_55{background-image:url(blocks/block_55.png)}
+.known.block_56{background-image:url(blocks/block_56.png)}
+.known.block_57{background-image:url(blocks/block_57.png)}
+.known.block_61{background-image:url(blocks/block_61.png)}
+.known.block_62{background-image:url(blocks/block_62.png)}
+.known.block_63{background-image:url(blocks/block_63.png)}
+.known.block_64{background-image:url(blocks/block_64.png)}
+.known.block_65{background-image:url(blocks/block_65.png)}
+.known.block_66{background-image:url(blocks/block_66.png)}
+.known.block_67{background-image:url(blocks/block_67.png)}
+.known.block_71{background-image:url(blocks/block_71.png)}
+.known.block_72{background-image:url(blocks/block_72.png)}
+.known.block_73{background-image:url(blocks/block_73.png)}
+.known.block_74{background-image:url(blocks/block_74.png)}
+.known.block_75{background-image:url(blocks/block_75.png)}
+.known.block_76{background-image:url(blocks/block_76.png)}
+.known.block_77{background-image:url(blocks/block_77.png)}
+.known.block_81{background-image:url(blocks/block_81.png)}
+.known.block_82{background-image:url(blocks/block_82.png)}
+.known.block_83{background-image:url(blocks/block_83.png)}
+.known.block_84{background-image:url(blocks/block_84.png)}
+.known.block_85{background-image:url(blocks/block_85.png)}
+.known.block_86{background-image:url(blocks/block_86.png)}
+.known.block_87{background-image:url(blocks/block_87.png)}
+.known.block_91{background-image:url(blocks/block_91.png)}
+.known.block_92{background-image:url(blocks/block_92.png)}
+.known.block_93{background-image:url(blocks/block_93.png)}
+.known.block_94{background-image:url(blocks/block_94.png)}
+.known.block_95{background-image:url(blocks/block_95.png)}
+.known.block_96{background-image:url(blocks/block_96.png)}
+.known.block_97{background-image:url(blocks/block_97.png)}
diff --git a/play.html b/play.html
index 6d17c9c..56e7c31 100644
--- a/play.html
+++ b/play.html
@@ -8,408 +8,14 @@
 <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: slategray; }
-#grid_role { background-color: silver; }
-#grid_top { background-color: gainsboro; }
-.Franks #grid_top.your_turn { background-color: #f7de46; /* 50% mix of khaki and gold */ }
-.Saracens #grid_top.your_turn { background-color: lightgreen; }
-.one .role_name { background-color: khaki; }
-.two .role_name { background-color: darkseagreen; }
-#turn_info { background-color: gainsboro; }
-
-#log { background-color: whitesmoke; }
-#log .st { background-color: #246; color: white; font-weight: bold; }
-#log .F { background-color: khaki; }
-#log .S { background-color: darkseagreen; }
-#log .bs { background-color: lightgray; }
-#log .br { font-style: italic; text-decoration: underline; }
-
-#map #timeline {
-	position: absolute;
-	width: 88px; height: 35px; top: 2410px;
-	background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8));
-}
-
-#map #timeline.year_1187 { left: 702px; }
-#map #timeline.year_1188 { left: 793px; width: 89px; }
-#map #timeline.year_1189 { left: 885px; }
-#map #timeline.year_1190 { left: 976px; width: 89px; }
-#map #timeline.year_1191 { left: 1068px; }
-#map #timeline.year_1192 { left: 1160px; width: 85px; }
-
-#turn {
-	padding: 8px 0px 8px 8px;
-	border-bottom: 1px solid black;
-	white-space: pre-wrap;
-	font-style: italic;
-	font-size: 12px;
-	line-height: 18px;
-	font-family: "Source Serif SmText";
-}
-
-.card {
-	width: 225px;
-	height: 350px;
-	border-radius: 15px;
-}
-
-.card.enabled:hover {
-	transform: scale(1.1);
-}
-
-.small_card.prior {
-	filter: grayscale(100%) contrast(70%) brightness(120%);
-}
-
-.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;
-	background-color: #224467;
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-	width: 1275px;
-	height: 2475px;
-}
-
-#map {
-	position: absolute;
-	width: 1275px;
-	height: 2475px;
-	background-repeat: no-repeat;
-	background-color: #224467;
-}
-
-#map > * {
-	position: absolute;
-}
-
-#map.hide_blocks #blocks {
-	visibility: hidden;
-}
-
-.town {
-	position: absolute;
-	opacity: 0.0;
-	z-index: 1;
-	border: 5px solid white;
-	width: 70px;
-	height: 70px;
-	border-radius: 50%;
-}
-.town.highlight {
-	cursor: pointer;
-	opacity: 0.6;
-	z-index: 9;
-}
-.town.muster {
-	opacity: 0.6;
-	border-color: brown;
-	z-index: 9;
-}
-.town.muster.highlight {
-	box-shadow: 0 0 0px 4px white;
-}
-
-#sea {
-	fill: skyblue;
-	fill-opacity: 0.4;
-}
-
-#sea { visibility: hidden; }
-#sea.highlight { visibility: visible; cursor: pointer; }
-
-/* BLOCKS */
-
-body.shift .block.known:hover {
-	filter: none;
-	transform: scale(2) !important;
-	transition: 100ms;
-	z-index: 100;
-}
-
-#battle .block { position: relative; }
-#map .block { position: absolute; z-index: 2; }
-#map .block.highlight { z-index: 3; }
-#map .block.selected { z-index: 4; }
-#map .block.known { z-index: 5; }
-#map .block.known:hover { z-index: 6; }
-
-.block {
-	background-size: cover;
-	background-repeat: no-repeat;
-	border-radius: 6px;
-	width: 60px;
-	height: 60px;
-	box-shadow: 0px 0px 4px 0px black;
-}
-
-.block.Franks { border: 3px solid darkkhaki; background-color: khaki; }
-.block.Saracens { border: 3px solid seagreen; background-color: darkseagreen; }
-.block.Saracens.known { background-color: darkgreen; }
-.block.Assassins { border: 3px solid rebeccapurple; background-color: rebeccapurple; }
-
-.block.Franks.highlight { border-color: white; }
-.block.Saracens.highlight { border-color: white; }
-.block.Assassins.highlight { border-color: white; }
-
-.block.Franks.selected { border-color: crimson; }
-.block.Saracens.selected { border-color: yellow; }
-.block.Assassins.selected { border-color: yellow; }
-
-.block.Franks.highlight:not(.selected) { box-shadow: 0 0 3px 0px white; }
-
-.hit .block.highlight { border-color: black; }
-.hit .block.Franks.highlight { box-shadow: 0 0 4px 0px black; }
-
-.block.highlight { cursor: pointer; }
-.block.moved { filter: brightness(80%) grayscale(40%); }
-.block.highlight.moved { filter: brightness(95%) grayscale(40%); }
-
-#map .block.castle.known { filter: grayscale(50%); }
-#map.stack_layout .block.castle { filter: grayscale(90%); }
-
-.block.castle:not(.known) {
-	background-image: url("badges/stone-tower.svg");
-	background-size: 60%;
-	background-position: center;
-}
-.block.besieging:not(.known) {
-	background-image: url("badges/trebuchet.svg");
-	background-size: 60%;
-	background-position: center;
-}
-.block.winter_campaign:not(.known) {
-	background-image: url("badges/camping-tent.svg");
-	background-size: 60%;
-	background-position: center;
-}
-.block.Franks.jihad:not(.known) {
-	background-image: url("badges/Cross_of_the_Knights_Templar.svg");
-	background-size: 60%;
-	background-position: center;
-}
-.block.Saracens.jihad:not(.known) {
-	background-image: url("badges/Star_and_Crescent.svg");
-	background-size: 60%;
-	background-position: center;
-}
-
-.block.besieging.Franks.jihad:not(.known) {
-	background-image: url("badges/trebuchet.svg"), url("badges/Cross_of_the_Knights_Templar.svg");
-	background-size: 60%, 40%;
-	background-position: 30% 80%, 85% 15%;
-}
-.block.besieging.Saracens.jihad:not(.known) {
-	background-image: url("badges/trebuchet.svg"), url("badges/Star_and_Crescent.svg");
-	background-size: 60%, 40%;
-	background-position: 30% 80%, 85% 15%;
-}
-
-.block.r0 { transform: rotate(0deg); }
-.block.r1 { transform: rotate(-90deg); }
-.block.r2 { transform: rotate(-180deg); }
-.block.r3 { transform: rotate(-270deg); }
-.block.r0.halfhit { transform: rotate(-15deg); }
-.block.r1.halfhit { transform: rotate(-105deg); }
-.block.r2.halfhit { transform: rotate(-195deg); }
-.block.r3.halfhit { transform: rotate(-285deg); }
-
-.block {
-	transition-property: top, left, transform;
-	transition-duration: 700ms, 700ms, 200ms;
-	transition-timing-function: ease;
-}
-
-/* LANDSCAPE MAP */
-
-@media (min-width: 2000px) {
-	#mapwrap:not(.fit) {
-		box-shadow: 1px 0px 10px rgba(0,0,0,0.5);
-		height: 1275px;
-		width: 2475px;
-		margin-bottom: 40px;
-		margin-top: 30px;
-	}
-	#mapwrap:not(.fit) #map {
-		transform: translateY(1275px) rotate(-90deg);
-		transform-origin: 0 0;
-	}
-	body.shift #mapwrap:not(.fit) #map .block.known:hover {
-		transform: rotate(90deg) scale(2) !important;
-	}
-	#mapwrap:not(.fit) #map .block { transform: rotate(90deg); }
-	#mapwrap:not(.fit) #map .block.r1 { transform: rotate(0deg); }
-	#mapwrap:not(.fit) #map .block.r2 { transform: rotate(-90deg); }
-	#mapwrap:not(.fit) #map .block.r3 { transform: rotate(-180deg); }
-}
-
-/* BATTLE BOARD */
-
-#battle {
-	background-color: tan;
-	min-width: 700px;
-}
-#battle_message {
-	background-color: gainsboro;
-	text-align: center;
-	border-top: 1px solid black;
-}
-#battle_header {
-	background-color: steelblue;
-	color: white;
-	text-align: center;
-	border-bottom: 1px solid black;
-}
-.battle_menu {
-	margin: 5px 5px;
-}
-
-#FF, #FC, #FR, #EF, #EC, #ER { margin: 0px auto; padding: 5px; }
-#EC { margin-bottom: 10px; }
-#FC { margin-bottom: 5px; }
-#EC .battle_menu_list { min-height: 0; }
-#ER .battle_menu_list { min-height: 0; }
-#FR .battle_menu_list { min-height: 0; }
-
-#FC, #EC {
-	background-size: cover;
-	background-repeat: no-repeat;
-	padding: 0;
-	height: 107px;
-	padding-top: 33px;
-	border-bottom: 5px solid dimgray;
-	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
-	justify-content: left;
-}
-
-#FC.c1 .battle_menu:first-child { margin-left: 30px; }
-#FC.c2 .battle_menu:first-child { margin-left: 25px; }
-#FC.c3 .battle_menu:first-child { margin-left: 20px; }
-#FC.c4 .battle_menu:first-child { margin-left: 15px; }
-#EC.c1 .battle_menu:first-child { margin-left: 30px; }
-#EC.c2 .battle_menu:first-child { margin-left: 25px; }
-#EC.c3 .battle_menu:first-child { margin-left: 20px; }
-#EC.c4 .battle_menu:first-child { margin-left: 15px; }
-
-#FC.c0, #EC.c0 { display: none; }
-#FC.c1, #EC.c1 { background-image: url('castle_1.svg'); width: 140px; }
-#FC.c2, #EC.c2 { background-image: url('castle_2.svg'); width: 220px; }
-#FC.c3, #EC.c3 { background-image: url('castle_3.svg'); width: 300px; }
-#FC.c4, #EC.c4 { background-image: url('castle_4.svg'); width: 380px; }
-
-#FC, #EC, #FF, #EF { min-height: 107px; }
-#ER { min-height: 15px; }
-#FR { min-height: 15px; }
-
-/* CARD AND BLOCK IMAGES */
-
-.card_back{background-image:url('cards/card_back.jpg')}
-.card_assassins{background-image:url('cards/card_assassins.jpg')}
-.card_guide{background-image:url('cards/card_guide.jpg')}
-.card_intrigue{background-image:url('cards/card_intrigue.jpg')}
-.card_jihad{background-image:url('cards/card_jihad.jpg')}
-.card_manna{background-image:url('cards/card_manna.jpg')}
-.card_winter_campaign{background-image:url('cards/card_winter_campaign.jpg')}
-.card_1{background-image:url('cards/card_1.jpg')}
-.card_2{background-image:url('cards/card_2.jpg')}
-.card_3{background-image:url('cards/card_3.jpg')}
-
-.known.block_11{background-image:url(blocks/block_11.png)}
-.known.block_12{background-image:url(blocks/block_12.png)}
-.known.block_13{background-image:url(blocks/block_13.png)}
-.known.block_14{background-image:url(blocks/block_14.png)}
-.known.block_15{background-image:url(blocks/block_15.png)}
-.known.block_16{background-image:url(blocks/block_16.png)}
-.known.block_17{background-image:url(blocks/block_17.png)}
-.known.block_21{background-image:url(blocks/block_21.png)}
-.known.block_22{background-image:url(blocks/block_22.png)}
-.known.block_23{background-image:url(blocks/block_23.png)}
-.known.block_24{background-image:url(blocks/block_24.png)}
-.known.block_25{background-image:url(blocks/block_25.png)}
-.known.block_26{background-image:url(blocks/block_26.png)}
-.known.block_27{background-image:url(blocks/block_27.png)}
-.known.block_31{background-image:url(blocks/block_31.png)}
-.known.block_32{background-image:url(blocks/block_32.png)}
-.known.block_33{background-image:url(blocks/block_33.png)}
-.known.block_34{background-image:url(blocks/block_34.png)}
-.known.block_35{background-image:url(blocks/block_35.png)}
-.known.block_36{background-image:url(blocks/block_36.png)}
-.known.block_37{background-image:url(blocks/block_37.png)}
-.known.block_41{background-image:url(blocks/block_41.png)}
-.known.block_42{background-image:url(blocks/block_42.png)}
-.known.block_43{background-image:url(blocks/block_43.png)}
-.known.block_44{background-image:url(blocks/block_44.png)}
-.known.block_45{background-image:url(blocks/block_45.png)}
-.known.block_46{background-image:url(blocks/block_46.png)}
-.known.block_47{background-image:url(blocks/block_47.png)}
-.known.block_51{background-image:url(blocks/block_51.png)}
-.known.block_52{background-image:url(blocks/block_52.png)}
-.known.block_53{background-image:url(blocks/block_53.png)}
-.known.block_54{background-image:url(blocks/block_54.png)}
-.known.block_55{background-image:url(blocks/block_55.png)}
-.known.block_56{background-image:url(blocks/block_56.png)}
-.known.block_57{background-image:url(blocks/block_57.png)}
-.known.block_61{background-image:url(blocks/block_61.png)}
-.known.block_62{background-image:url(blocks/block_62.png)}
-.known.block_63{background-image:url(blocks/block_63.png)}
-.known.block_64{background-image:url(blocks/block_64.png)}
-.known.block_65{background-image:url(blocks/block_65.png)}
-.known.block_66{background-image:url(blocks/block_66.png)}
-.known.block_67{background-image:url(blocks/block_67.png)}
-.known.block_71{background-image:url(blocks/block_71.png)}
-.known.block_72{background-image:url(blocks/block_72.png)}
-.known.block_73{background-image:url(blocks/block_73.png)}
-.known.block_74{background-image:url(blocks/block_74.png)}
-.known.block_75{background-image:url(blocks/block_75.png)}
-.known.block_76{background-image:url(blocks/block_76.png)}
-.known.block_77{background-image:url(blocks/block_77.png)}
-.known.block_81{background-image:url(blocks/block_81.png)}
-.known.block_82{background-image:url(blocks/block_82.png)}
-.known.block_83{background-image:url(blocks/block_83.png)}
-.known.block_84{background-image:url(blocks/block_84.png)}
-.known.block_85{background-image:url(blocks/block_85.png)}
-.known.block_86{background-image:url(blocks/block_86.png)}
-.known.block_87{background-image:url(blocks/block_87.png)}
-.known.block_91{background-image:url(blocks/block_91.png)}
-.known.block_92{background-image:url(blocks/block_92.png)}
-.known.block_93{background-image:url(blocks/block_93.png)}
-.known.block_94{background-image:url(blocks/block_94.png)}
-.known.block_95{background-image:url(blocks/block_95.png)}
-.known.block_96{background-image:url(blocks/block_96.png)}
-.known.block_97{background-image:url(blocks/block_97.png)}
-
-</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>
-
 <div id="battle">
 <div id="battle_header"></div>
 <div id="ER"></div>
@@ -421,85 +27,60 @@ body.shift .block.known:hover {
 <div id="battle_message"></div>
 </div>
 
-<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="set_spread_layout()">Spread blocks</div>
-				<div class="menu_item" onclick="set_stack_layout()">Stack blocks</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 id="toolbar">
+	<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="set_spread_layout()">Spread blocks</div>
+			<div class="menu_item" onclick="set_stack_layout()">Stack blocks</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="eliminate_button" class="hide" onclick="on_button_eliminate()">Eliminate</button>
-		<button id="winter_campaign_button" class="hide" onclick="on_button_winter_campaign()">Winter campaign</button>
-		<button id="sea_move_button" class="hide" onclick="on_button_sea_move()">Sea move</button>
-		<button id="end_sea_move_button" class="hide" onclick="on_button_end_sea_move()">End sea move</button>
-		<button id="group_move_button" class="hide" onclick="on_button_group_move()">Group move</button>
-		<button id="end_group_move_button" class="hide" onclick="on_button_end_group_move()">End group move</button>
-		<button id="muster_button" class="hide" onclick="on_button_muster()">Muster</button>
-		<button id="end_muster_button" class="hide" onclick="on_button_end_muster()">End muster</button>
-		<button id="end_retreat_button" class="hide" onclick="on_button_end_retreat()">End retreat</button>
-		<button id="end_regroup_button" class="hide" onclick="on_button_end_regroup()">End regroup</button>
-		<button id="end_move_phase_button" class="hide" onclick="on_button_end_move_phase()">End move phase</button>
-		<button id="pass_button" class="hide" onclick="on_button_pass()">Pass</button>
-		<button id="next_button" class="hide" onclick="on_button_next()">Next</button>
-		<button id="undo_button" class="hide" onclick="on_button_undo()">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 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>
+	<div id="prompt"></div>
+	<div id="actions"></div>
+</header>
 
-	<div id="grid_role">
-
+<aside>
+	<div id="roles">
 		<div class="role one">
 			<div class="role_name">
 				Franks
-				<div class="role_vp" id="frank_vp"></div>
+				<div class="role_vp" id="frank_vp">VP</div>
 				<div class="role_user">-</div>
 			</div>
 			<div class="role_info"><div class="small_card card_back" id="frank_card"></div></div>
 		</div>
-
 		<div class="role two">
 			<div class="role_name">
 				Saracens
-				<div class="role_vp" id="saracen_vp"></div>
+				<div class="role_vp" id="saracen_vp">VP</div>
 				<div class="role_user">-</div>
 			</div>
 			<div class="role_info"><div class="small_card card_back" id="saracen_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">
 <svg id="svgmap" width="1275px" height="2475px" viewBox="0 0 1275 2475">
-<image href="map.jpg" x="0" y="0" width="1275" height="2475" />
 <path id="sea" d="M30 1201v1170l2-1c1 0 4-1 5-3 2-1 4-2 5-2 2 0 5-1 7-2 3-2 7-4 11-6 3-2 7-4 8-6 1-1 3-2 3-2 2 0 47-23 54-27 4-2 10-6 14-8 7-3 13-7 27-19 4-3 5-4 5-8l1-4h5c4 0 7-1 12-5 6-4 27-24 41-41 7-8 20-21 23-24 1-1 4-3 5-6l6-6c1-1 3-3 4-5 2-3 3-4 10-12 3-3 6-7 6-9 1-1 2-3 3-4 2-1 5-5 7-9 2-3 4-6 5-6 2 0 5-6 5-9 0-2 2-6 5-10s5-7 5-8 0-1 1-1 1-1 2-3c1-4 3-9 8-14 4-5 7-12 7-14 0-1 2-6 4-10 3-4 5-9 6-10 0-1 1-4 3-5 1-2 2-4 2-5 0 0 1-3 3-5 2-3 3-5 3-10 0-6 1-9 4-14 2-3 3-7 3-8 0-3 4-20 6-22 2-3 4-11 4-17 0-1 0-3 1-3 0 0 2-2 2-5 1-2 3-7 4-9 1-3 2-9 3-15 1-11 1-10 0-18 0-5 0-7 1-9s2-5 2-7c1-3 1-5 2-7 0-1 1-4 1-6v-8c4-22 4-23 3-26-1-2-1-4 0-6s1-8 1-13 1-9 1-10v-5c-1-3-1-8-1-12v-10-36c0-8-1-21-2-23 0-1-1-5-1-10 0-14-1-27-2-35-1-3-1-8-1-11s-2-10-5-17c-1-1-1-2 0-3 1-2 1-2 0-3 0-1-1-2 0-2 0-1 0-2-1-3 0-1 0-4-1-7 0-3-1-6-2-9-1-2-2-4-1-4 0-1-1-2-2-2-1-2-1-2 1-3s2-1 3-8c0-5 0-8-2-11-1-2-1-7-1-11-1-5-1-8-3-12-4-6-3-10 0-13 5-4 18-4 26 0l5 3 3-2c1-2 4-3 6-4 3-1 10-9 15-16 2-3 2-3 1-12-2-13-4-18-9-16-2 0-3 0-2-3 0-2-1-4-3-7-2-4-2-5-3-16 0-22-1-28-2-29s-1-2 0-3c2-1-1-9-3-12-2-1-2-2-1-5 0-4 2-7 8-9 9-5 10-5 10-6s1-3 3-5c1-2 2-5 2-6-1-1-1-2 0-3 1 0 1-2 1-2-1-2 0-2 3-2 2 0 4-1 6-3 3-3 4-9 3-10s0-2 1-3c4-3 3-5 0-16-2-5-3-6-6-8-2-1-6-2-8-2-5 0-5-2-1-2 6-2 7-2 8-4 0-2 1-5 2-8 0-3 1-6 2-7s1-3 1-3c-1-1 0-2 0-3 1 0 1-3 1-6v-13c0-4-1-8-1-9-1-2-1-3 1-4 2-2 2-2 1-5 0-2-1-4 0-4 0-1 1-3 2-5 1-3 1-4-1-5-1-1-1-1 2-3 2-2 3-3 3-4s1-2 3-2c4-2 12-10 16-16 2-2 3-4 4-4 0 0 1-1 2-3 1-1 2-4 4-6s2-3 2-6c-1-2-1-5-1-6s0-3-1-4-1-1 1-3c4-3 6-11 4-14-1-2-1-2 1-4 1-2 1-2 0-6-1-2-2-5-1-6 0 0 0-2-1-2-1-2 0-2 3-4l4-3-2-6c-1-3-2-7-3-7-2-1 1-4 4-4s7-4 7-8c0-1-1-4-2-5-2-3-3-6-2-7 1 0 1-1 1-2s2-6 5-11c4-7 4-9 4-13-1-11-12-33-16-33-2 0-7-3-7-4s5-4 8-5c1 0 7 0 12-1s10-1 11-2c3-2 6-1 7 1 1 3 3 4 3 2 0-3 3-5 7-6 7-2 11-4 13-9 1-2 2-4 2-5v-7c-1-4 0-6 1-7 1 0 2-2 1-4 0-2 0-3 3-4 1 0 3-2 3-3 1-1 2-2 5-2 5-1 8-5 6-8-1-2-6-4-11-4-1 0-3-1-4-1-2-2-1-13 0-16 1-1 2-5 2-9 1-8 1-9-2-12-2-2-4-4-5-4 0 0-2-1-2-3-2-2-3-3-6-4-6-1-7-1-7-3 0-1-1-3-2-5-1-3-2-5-2-7 0-1-1-3-2-4-1-3-1-5 3-7 3-3 6-9 4-11 0-1-1-3 0-4 0-1-1-2-3-4-3-3-3-3-2-4 1-2 1-2-2-3-4-3-4-4 1-8 3-2 3-3 3-6-1-4-1-4 4-6 4-3 5-3 8-2 7 1 14-2 15-6v-5c1-1 0-4 0-7-2-3-2-5-1-5 0-1 1-3 1-4 0-3 0-3 3-5 2 0 5-1 7-1 1 0 3-1 5-2 0-1 2-2 3-2l4-2c1-2 3-3 4-3 0 0 2-1 3-3 1-1 5-3 7-4 4-2 4-3 4-6 0-1-1-3-2-4-2-1-4-3-5-4-1-2-4-3-5-4-5-1-3-2 4-2 6 0 13-1 14-3 1-1 11-5 16-6 2-1 4-2 4-3 0-2 5-4 10-3 3 0 4 0 9-5 3-3 6-6 6-7 0-2 13-13 15-14 2 0 5-1 8-2l5-2v-6c0-5-1-7-4-14-2-4-6-10-8-12-5-6-28-25-36-28-2-1-6-5-9-8-4-3-7-6-8-7-4-1-8-6-11-12-2-5-3-7-7-9-2-2-5-3-5-3-1 0-9-5-10-6-5-5-19-15-22-16-1-1-2-2-2-3l-5-5c-7-5-9-9-9-15-1-4-2-7-5-9 0-1-1-2-1-4s0-3-1-3-1-2-2-4c0-3 0-4 4-8 2-2 4-5 4-5 0-2-12-14-15-16-4-2-5-6-3-9s1-5-3-7c-3-1-4-4-2-5 1-1 1-2 1-3s1-3 3-4c2-2 3-3 3-5 0-1 0-4 2-6 2-3 3-5 1-8s0-5 5-8c5-2 9-6 9-8 0-4-20-18-30-22-8-3-10-6-10-12-1-6-1-7-6-13-2-3-4-6-4-8 0-1-2-5-6-9-7-9-8-11-7-15 0-3 0-3-3-4-1-1-6-2-11-2-11-2-10-2-27-9-4-2-8-3-11-3s-10-1-15-2c-5 0-10-1-11-1-7 0-15 2-19 4s-8 2-9-1c0-1 0-3 1-4 2-3 1-6-1-8-1-1-6-2-13-3-14-2-15-2-13-5 1-2 1-3 0-4s-2-1-6 1c-2 1-4 2-5 2 0-1 4-4 11-8 5-2 7-3 7-5 0-1 1-2 3-3 1 0 2-1 2-3s0-3 1-4c1 0 1-1 1-3s-1-3-4-5c-2-2-5-3-6-4-4-1-5-3-2-7 1-2 3-3 7-4 5-1 5-1 8-7 1-3 3-6 5-7 1-1 3-4 3-7 1-3 3-7 3-8 1-1 1-3 1-4-1-3-11-13-17-16-3-2-7-5-10-8-2-2-5-4-7-4-1 0-2-1-3-2s-2-2-4-3l-3-1 7-2c3 0 9-1 12-2 7-1 12-3 18-7 5-4 7-8 7-15 0-5 1-7 10-14 1-1 2-3 2-4 0-3 5-14 9-18s5-6 4-9c0-2 0-3 4-5 6-2 6-4-1-9-6-4-9-7-14-13-2-1-5-4-7-6-3-2-7-5-8-7-2-1-6-3-9-4-2-1-5-2-6-3-2-1-13-6-15-6s-11-4-11-5c-1-1-9-5-18-10-18-8-30-15-35-18-2-2-12-5-31-10-7-3-12-7-12-11 0-2 1-4 5-7 4-4 6-7 7-10l2-5 9-5c10-4 12-6 12-12s1-7 8-10c10-5 11-7 11-12-1-4-1-5 4-9 4-5 9-8 21-12 4-1 11-4 15-7 9-4 10-5 11-9 2-8 8-13 18-16 8-2 11-6 12-13v-5H30v1171z"/>
 </svg>
 <div id="blocks"></div>
@@ -545,7 +126,8 @@ body.shift .block.known:hover {
 <div id="back+6" class="card card_back"></div>
 </div>
 
-	</div>
+</main>
+
+<footer id="status"></footer>
 
-</div>
 </body>
diff --git a/ui.js b/play.js
index ea7b575..70a7f19 100644
--- a/ui.js
+++ b/play.js
@@ -230,21 +230,6 @@ function on_click_card(evt) {
 	send_action('play', c);
 }
 
-function on_button_next(evt) { send_action('next'); }
-function on_button_pass(evt) { send_action('pass'); }
-function on_button_undo(evt) { send_action('undo'); }
-function on_button_winter_campaign(evt) { send_action('winter_campaign'); }
-function on_button_group_move(evt) { send_action('group_move'); }
-function on_button_end_group_move(evt) { send_action('end_group_move'); }
-function on_button_sea_move(evt) { send_action('sea_move'); }
-function on_button_end_sea_move(evt) { send_action('end_sea_move'); }
-function on_button_muster(evt) { send_action('muster'); }
-function on_button_end_muster(evt) { send_action('end_muster'); }
-function on_button_end_move_phase(evt) { send_action('end_move_phase'); }
-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 build_battle_button(menu, b, c, click, enter, img_src) {
 	let img = new Image();
 	img.draggable = false;
@@ -774,20 +759,20 @@ function start_flash() {
 }
 
 function on_update() {
-	show_action_button("#next_button", "next");
-	show_action_button("#pass_button", "pass");
-	show_action_button("#undo_button", "undo");
-	show_action_button("#winter_campaign_button", "winter_campaign");
-	show_action_button("#group_move_button", "group_move");
-	show_action_button("#end_group_move_button", "end_group_move");
-	show_action_button("#sea_move_button", "sea_move");
-	show_action_button("#end_sea_move_button", "end_sea_move");
-	show_action_button("#muster_button", "muster");
-	show_action_button("#end_muster_button", "end_muster");
-	show_action_button("#end_move_phase_button", "end_move_phase");
-	show_action_button("#end_regroup_button", "end_regroup");
-	show_action_button("#end_retreat_button", "end_retreat");
-	show_action_button("#eliminate_button", "eliminate");
+	action_button("eliminate_button", "Eliminate");
+	action_button("winter_campaign_button", "Winter campaign");
+	action_button("sea_move_button", "Sea move");
+	action_button("end_sea_move_button", "End sea move");
+	action_button("group_move_button", "Group move");
+	action_button("end_group_move_button", "End group move");
+	action_button("muster_button", "Muster");
+	action_button("end_muster_button", "End muster");
+	action_button("end_retreat_button", "End retreat");
+	action_button("end_regroup_button", "End regroup");
+	action_button("end_move_phase_button", "End move phase");
+	action_button("pass", "Pass");
+	action_button("next", "Next");
+	action_button("undo", "Undo");
 
 	document.getElementById("frank_vp").textContent = game.f_vp;
 	document.getElementById("saracen_vp").textContent = game.s_vp;
@@ -810,7 +795,7 @@ function on_update() {
 build_map();
 
 drag_element_with_mouse("#battle", "#battle_header");
-scroll_with_middle_mouse("#grid_center", 3);
+scroll_with_middle_mouse("main", 3);
 init_map_zoom();
 init_shift_zoom();
 init_client(["Franks", "Saracens"]);