Split CSS off into separate file.

3 files changed, 363 insertions, 231 deletions

diff --git a/play.css b/play.css
new file mode 100644
index 0000000..6bbab8a
--- /dev/null
+++ b/play.css
@@ -0,0 +1,357 @@
+header { background-color: hsl(39, 25%, 75%); }
+#replay_panel { background-color: hsl(39, 25%, 75%);; }
+#log { background-color: hsl(51, 63%, 92%); }
+#log .h1 { background-color: hsl(48, 26%, 65%); }
+#log .h2 { background-color: hsl(39, 25%, 75%); }
+
+body.French header.your_turn { background-color:  hsl(195, 72%, 75%); }
+#role_French .role_name { background-color:  hsl(195, 72%, 80%); }
+body.Coalition header.your_turn { background-color: white; }
+#role_Coalition .role_name { background-color: white; }
+
+#log { padding-top: 0 }
+#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; }
+#log .h2 { padding-top:1px; padding-bottom:1px; }
+#log .h1, .h2 {
+	margin: 9px 0;
+	text-align: center;
+	border-bottom: 1px solid #444;
+	border-top: 1px solid #444;
+}
+
+#log div { padding-left: 20px; text-indent: -12px; }
+#log div.i { padding-left: 32px; text-indent: -12px; }
+
+main {
+	background-color: dimgray;
+}
+
+#mapwrap {
+	margin: 0 auto;
+	width: 2550px;
+	height: 1900px;
+}
+
+#map {
+	position: absolute;
+	width: 2550px;
+	height: 1900px;
+}
+
+#board, #tracks, #hexes, #pieces {
+	position: absolute;
+}
+
+#board {
+	top: 0px;
+	left: 0px;
+	width: 2550px;
+	height: 1650px;
+	background-color: #803a3b;
+	background-image: url(images/map75.jpg);
+	background-size: 2550px 1650px;
+	box-shadow: 0 0 8px #0008;
+}
+
+#tracks {
+	top: 1650px;
+	left: 0px;
+	width: 600px;
+	height: 250px;
+	background-color: #d0c5b1;
+	background-size: 600px 250px;
+	background-position: 0px 0px;
+	background-repeat: no-repeat;
+	background-image: url(images/tracks75.webp);
+	box-shadow: 0 0 8px #0008;
+}
+
+@media (min-resolution:97dpi) {
+	#board { background-image: url(images/map150.jpg); }
+	#tracks { background-image: url(images/tracks150.webp); }
+}
+
+#hexes, #pieces, #labels { position: absolute }
+
+.label {
+	user-select: none;
+	position: absolute;
+	text-align: center;
+	font-family: "Source Serif SmText";
+	//font-weight: bold;
+	font-size: 10px;
+	line-height: 1em;
+	color: black;
+	text-shadow:
+		-1px -1px 1px white,
+		1px -1px 1px white,
+		1px 1px 1px white,
+		-1px 1px 1px white,
+		0 0 6px white
+		;
+}
+
+#label_3002,
+#label_1217,
+#label_1204,
+#label_1737,
+#label_3925,
+#label_2911
+{
+	font-size: 14px;
+	font-variant: small-caps;
+}
+
+#label_1015,
+#label_1018,
+#label_1021,
+#label_1024,
+#label_1100,
+#label_1201,
+#label_1239,
+#label_1401,
+#label_1407,
+#label_1830,
+#label_1928,
+#label_2035,
+#label_2123,
+#label_2223,
+#label_2327,
+#label_2537,
+#label_2715,
+#label_3013,
+#label_3031,
+#label_3206,
+#label_3226,
+#label_3231,
+#label_3233,
+#label_3441,
+#label_3719,
+#label_3723,
+#label_3803
+{
+	margin-top: -10px
+}
+
+#label_1800,
+#label_2324,
+#label_2500,
+#label_3327,
+#label_3708
+{
+	margin-top: -30px;
+}
+
+#label_1118
+{
+	margin-top: -15px;
+	margin-left: 10px;
+}
+
+.hex {
+	box-sizing: border-box;
+	position: absolute;
+	border-radius: 50%;
+	border: 2px solid transparent;
+}
+
+.hex.town { background-color: #F006; }
+.hex.stream { background-color: #00F6; }
+.hex.town.stream { background-color: #F0F6; }
+
+.hex.action {
+	border: 4px solid #fff6;
+	background-color: #fff2;
+	box-shadow: 0 0 3px #0008;
+	z-index: 100;
+}
+
+.hex.action.stop {
+	background-color: #f002;
+}
+
+.hexside {
+	position: absolute;
+	display: none;
+	transform-origin: 0 0;
+	width: 58px;
+	height: 4px;
+}
+
+.hexside.s1 { transform: rotate(-60deg) }
+.hexside.s2 { transform: rotate(-120deg) }
+
+.hexside.road {
+	display: block;
+	background-color: brown;
+}
+
+.hexside.river {
+	display: block;
+	background-color: blue;
+}
+
+.hexside.road.river {
+	display: block;
+	background-color: green;
+}
+
+.large {
+	position: absolute;
+	background-size: 84px auto;
+	width: 42px;
+	height: 42px;
+}
+
+.small {
+	position: absolute;
+	background-size: 34px auto;
+	width: 34px;
+	height: 34px;
+}
+
+.large, .small {
+	transition-property: top, left;
+	transition-duration: 500ms;
+	transition-timing-function: ease;
+	border-width: 2px;
+	border-style: solid;
+	box-shadow: 0 0 0 1px #444, 0 0 4px #0008;
+}
+
+.large.action, .small.action {
+	box-shadow: 0 0 0 1px #444, 0 0 0 4px white;
+}
+
+.large.selected, .small.selected {
+	box-shadow: 0 0 0 1px #444, 0 0 0 4px yellow;
+}
+
+.large.target, .small.target {
+	box-shadow: 0 0 0 1px #444, 0 0 0 3px black;
+}
+
+.large.support, .small.support {
+	box-shadow: 0 0 0 1px #444, 0 0 0 3px green;
+}
+
+.large.selected.action, .small.selected.action {
+	box-shadow: 0 0 0 1px #444, 0 0 0 3px mediumblue, 0 0 0 5px white;
+}
+
+.large.target.action, .small.target.action {
+	box-shadow: 0 0 0 1px #444, 0 0 0 3px black, 0 0 0 6px white;
+}
+
+.hex.tip {
+	border: 4px solid #f008;
+	z-index: 200;
+}
+
+#arrow {
+	opacity: 80%;
+	position: absolute;
+	top: 1559px;
+	left: 36px;
+	width: 50px;
+	z-index: 300;
+	pointer-events: none;
+	height: 50px;
+	background-size: cover;
+	background-image: url(images/arrow.svg);
+	transform-origin: 25px 50px;
+	filter: drop-shadow(0 0 3px white);
+}
+
+#arrow.r0 { transform: rotate(30deg) }
+#arrow.r1 { transform: rotate(90deg) }
+#arrow.r2 { transform: rotate(150deg) }
+#arrow.r3 { transform: rotate(210deg) }
+#arrow.r4 { transform: rotate(270deg) }
+#arrow.r5 { transform: rotate(330deg) }
+
+div.french.tip, div.anglo.tip, div.prussian.tip {
+	box-shadow: 0 0 0 4px #f008;
+	z-index: 200;
+}
+
+.marker { border-color: hsl(199,65%,85%) hsl(199,55%,50%) hsl(199,55%,50%) hsl(199,65%,85%) }
+.large.french, .small.french { border-color: hsl(199,85%,90%) hsl(199,75%,70%) hsl(199,75%,70%) hsl(199,85%,90%) }
+.large.anglo, .small.anglo { border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%) }
+.large.prussian, .small.prussian { border-color: hsl(202,10%,70%) hsl(202,10%,50%) hsl(202,10%,50%) hsl(202,10%,70%) }
+
+.large.french { background-image: url(images/sheet_french1_75.webp) }
+.large.anglo { background-image: url(images/sheet_anglo1_75.webp) }
+.large.prussian { background-image: url(images/sheet_prussian1_75.webp) }
+.large.marker { background-image: url(images/sheet_misc_75.webp) }
+.small.french { background-image: url(images/sheet_french2_75.webp) }
+.small.anglo { background-image: url(images/sheet_anglo2_75.webp) }
+.small.prussian { background-image: url(images/sheet_prussian2_75.webp) }
+
+@media (min-resolution:97dpi) {
+.large.french { background-image: url(images/sheet_french1_150.webp) }
+.large.anglo { background-image: url(images/sheet_anglo1_150.webp) }
+.large.prussian { background-image: url(images/sheet_prussian1_150.webp) }
+.large.marker { background-image: url(images/sheet_misc_150.webp) }
+.small.french { background-image: url(images/sheet_french2_150.webp) }
+.small.anglo { background-image: url(images/sheet_anglo2_150.webp) }
+.small.prussian { background-image: url(images/sheet_prussian2_150.webp) }
+}
+
+.large.y1 { background-position: -0px -0px }
+.large.y2 { background-position: -0px -42px }
+.large.y3 { background-position: -0px -84px }
+.large.y4 { background-position: -0px -126px }
+.large.y5 { background-position: -0px -168px }
+.large.y6 { background-position: -0px -210px }
+.large.y7 { background-position: -0px -252px }
+.large.y8 { background-position: -0px -294px }
+.large.y9 { background-position: -0px -336px }
+.large.y10 { background-position: -0px -378px }
+.large.y11 { background-position: -0px -420px }
+
+.large.flip.y1 { background-position: -42px -0px }
+.large.flip.y2 { background-position: -42px -42px }
+.large.flip.y3 { background-position: -42px -84px }
+.large.flip.y4 { background-position: -42px -126px }
+.large.flip.y5 { background-position: -42px -168px }
+.large.flip.y6 { background-position: -42px -210px }
+.large.flip.y7 { background-position: -42px -252px }
+.large.flip.y8 { background-position: -42px -294px }
+.large.flip.y9 { background-position: -42px -336px }
+.large.flip.y10 { background-position: -42px -378px }
+.large.flip.y11 { background-position: -42px -420px }
+
+.small.y1 { background-position: 0px 0px }
+.small.y2 { background-position: 0px -34px }
+.small.y3 { background-position: 0px -68px }
+.small.y4 { background-position: 0px -102px }
+.small.y5 { background-position: 0px -136px }
+.small.y6 { background-position: 0px -170px }
+
+.small.flip.y1 { background-position: -34px -0px }
+.small.flip.y2 { background-position: -34px -34px }
+.small.flip.y3 { background-position: -34px -68px }
+.small.flip.y4 { background-position: -34px -102px }
+.small.flip.y5 { background-position: -34px -136px }
+.small.flip.y6 { background-position: -34px -170px }
+
+#log .dice {
+	display: inline-block;
+	vertical-align: -2px;
+	width: 12px;
+	height: 12px;
+	background-size: 600% 100%;
+	background-repeat: no-repeat;
+	background-image: url(images/die_black_pips.svg);
+	background-color: gold;
+	border: 1px solid black;
+}
+
+.d0 { background-position: -100% 0 }
+.d1 { background-position: 0% 0; }
+.d2 { background-position: 20% 0; }
+.d3 { background-position: 40% 0; }
+.d4 { background-position: 60% 0; }
+.d5 { background-position: 80% 0; }
+.d6 { background-position: 100% 0; }
diff --git a/play.html b/play.html
index e5ccf97..b47842e 100644
--- a/play.html
+++ b/play.html
@@ -7,232 +7,11 @@
 <link rel="icon" href="favicon.png">
 <link rel="stylesheet" href="/fonts/fonts.css">
 <link rel="stylesheet" href="/common/play.css">
-<link rel="stylesheet" href="/common/columbia.css">
+<link rel="stylesheet" href="play.css">
 <script defer src="/common/play.js"></script>
 <script defer src="data.js"></script>
 <script defer src="play.js"></script>
 </head>
-<style>
-
-#log { background-color: whitesmoke; }
-#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; margin: 8px 0; text-align: center; }
-#log .h2 { padding-top:1px; padding-bottom:1px; text-align: center; }
-#log .h1 { border-bottom: 1px solid #444; border-top: 1px solid #444; }
-#log .h2 { border-bottom: 1px solid #444; border-top: 1px solid #444; }
-#log .h1 { background-color: silver; }
-#log .h2 { background-color: gainsboro; }
-#log div { padding-left: 20px; text-indent: -12px; }
-#log div.i { padding-left: 32px; text-indent: -12px; }
-
-main {
-	background-color: dimgray;
-}
-
-#mapwrap {
-	margin: 0 auto;
-	width: 2550px;
-	height: 1900px;
-}
-
-#map {
-	position: absolute;
-	width: 2550px;
-	height: 1900px;
-}
-
-#board, #tracks, #hexes, #pieces {
-	position: absolute;
-}
-
-#board {
-	top: 0px;
-	left: 0px;
-	width: 2550px;
-	height: 1650px;
-	background-color: #803a3b;
-	background-image: url(map75.png);
-	background-size: 2550px 1650px;
-	box-shadow: 0 0 8px #0008;
-}
-
-#tracks {
-	top: 1650px;
-	left: 0px;
-	width: 600px;
-	height: 250px;
-	background-color: #d0c5b1;
-	background-size: 600px 250px;
-	background-image: url(tracks75.png);
-	box-shadow: 0 0 8px #0008;
-}
-
-#hexes, #pieces { position: absolute }
-
-.hex {
-	box-sizing: border-box;
-	position: absolute;
-	border-radius: 50%;
-	border: 2px solid transparent;
-}
-
-.hex.town { background-color: #F006; }
-.hex.stream { background-color: #00F6; }
-.hex.town.stream { background-color: #F0F6; }
-
-.hex.action {
-	border: 4px solid #fff6;
-	background-color: #fff2;
-	box-shadow: 0 0 3px #0008;
-	z-index: 100;
-}
-
-.hex.action.stop {
-	background-color: #f002;
-}
-
-.hexside {
-	position: absolute;
-	display: none;
-	transform-origin: 0 0;
-	width: 58px;
-	height: 4px;
-}
-
-.hexside.s1 { transform: rotate(-60deg) }
-.hexside.s2 { transform: rotate(-120deg) }
-
-.hexside.road {
-	display: block;
-	background-color: brown;
-}
-
-.hexside.river {
-	display: block;
-	background-color: blue;
-}
-
-.hexside.road.river {
-	display: block;
-	background-color: green;
-}
-
-.large {
-	position: absolute;
-	background-size: 84px auto;
-	width: 42px;
-	height: 42px;
-}
-
-.small {
-	position: absolute;
-	background-size: 68px auto;
-	width: 34px;
-	height: 34px;
-}
-
-.large, .small {
-	transition-property: top, left;
-	transition-duration: 500ms;
-	transition-timing-function: ease;
-	border-width: 2px;
-	border-style: solid;
-	box-shadow: 0 0 0 1px #444, 0 0 4px #0008;
-}
-
-.large.action, .small.action {
-	box-shadow: 0 0 0 1px #444, 0 0 0 4px white;
-}
-
-.large.selected, .small.selected {
-	box-shadow: 0 0 0 1px #444, 0 0 0 4px yellow;
-}
-
-.large.target, .small.target {
-	box-shadow: 0 0 0 1px #444, 0 0 0 4px red;
-}
-
-.marker { border-color: hsl(199,65%,85%) hsl(199,55%,50%) hsl(199,55%,50%) hsl(199,65%,85%) }
-.large.french, .small.french { border-color: hsl(199,85%,90%) hsl(199,75%,70%) hsl(199,75%,70%) hsl(199,85%,90%) }
-.large.anglo, .small.anglo { border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%) }
-.large.prussian, .small.prussian { border-color: hsl(202,10%,70%) hsl(202,10%,50%) hsl(202,10%,50%) hsl(202,10%,70%) }
-
-.large.french { background-image: url(sheet_french1_75.png) }
-.large.anglo { background-image: url(sheet_anglo1_75.png) }
-.large.prussian { background-image: url(sheet_prussian1_75.png) }
-.large.marker { background-image: url(sheet_misc_75.png) }
-.small.french { background-image: url(sheet_french2_75.png) }
-.small.anglo { background-image: url(sheet_anglo2_75.png) }
-.small.prussian { background-image: url(sheet_prussian2_75.png) }
-
-@media (min-resolution:97dpi) {
-.large.french { background-image: url(sheet_french1_150.png) }
-.large.anglo { background-image: url(sheet_anglo1_150.png) }
-.large.prussian { background-image: url(sheet_prussian1_150.png) }
-.large.marker { background-image: url(sheet_misc_150.png) }
-.small.french { background-image: url(sheet_french2_150.png) }
-.small.anglo { background-image: url(sheet_anglo2_150.png) }
-.small.prussian { background-image: url(sheet_prussian2_150.png) }
-}
-
-.large.y1 { background-position: -0px -0px }
-.large.y2 { background-position: -0px -42px }
-.large.y3 { background-position: -0px -84px }
-.large.y4 { background-position: -0px -126px }
-.large.y5 { background-position: -0px -168px }
-.large.y6 { background-position: -0px -210px }
-.large.y7 { background-position: -0px -252px }
-.large.y8 { background-position: -0px -294px }
-.large.y9 { background-position: -0px -336px }
-.large.y10 { background-position: -0px -378px }
-.large.y11 { background-position: -0px -420px }
-
-.large.flip.y1 { background-position: -42px -0px }
-.large.flip.y2 { background-position: -42px -42px }
-.large.flip.y3 { background-position: -42px -84px }
-.large.flip.y4 { background-position: -42px -126px }
-.large.flip.y5 { background-position: -42px -168px }
-.large.flip.y6 { background-position: -42px -210px }
-.large.flip.y7 { background-position: -42px -252px }
-.large.flip.y8 { background-position: -42px -294px }
-.large.flip.y9 { background-position: -42px -336px }
-.large.flip.y10 { background-position: -42px -378px }
-.large.flip.y11 { background-position: -42px -420px }
-
-.small.y1 { background-position: 0px 0px }
-.small.y2 { background-position: 0px -34px }
-.small.y3 { background-position: 0px -68px }
-.small.y4 { background-position: 0px -102px }
-.small.y5 { background-position: 0px -136px }
-.small.y6 { background-position: 0px -170px }
-
-.small.flip.y1 { background-position: -34px -0px }
-.small.flip.y2 { background-position: -34px -34px }
-.small.flip.y3 { background-position: -34px -68px }
-.small.flip.y4 { background-position: -34px -102px }
-.small.flip.y5 { background-position: -34px -136px }
-.small.flip.y6 { background-position: -34px -170px }
-
-#log .dice {
-	display: inline-block;
-	vertical-align: -2px;
-	width: 12px;
-	height: 12px;
-	background-size: 600% 100%;
-	background-repeat: no-repeat;
-	background-image: url(die_black_pips.svg);
-	background-color: #fff;
-	border: 1px solid #444;
-}
-
-.d0 { background-position: -100% 0 }
-.d1 { background-position: 0% 0; }
-.d2 { background-position: 20% 0; }
-.d3 { background-position: 40% 0; }
-.d4 { background-position: 60% 0; }
-.d5 { background-position: 80% 0; }
-.d6 { background-position: 100% 0; }
-
-</style>
 <body>
 
 <header>
diff --git a/rules.js b/rules.js
index 473b6fc..44a2dee 100644
--- a/rules.js
+++ b/rules.js
@@ -420,11 +420,8 @@ function update_zoc() {
 // === COMMAND PHASE ===
 
 function goto_command_phase() {
-	log("")
 	log(".h1 Turn " + game.turn)
-	log("")
 	log(".h2 Command Phase")
-	log("")
 	bring_on_reinforcements()
 	goto_hq_placement_step()
 }
@@ -839,7 +836,6 @@ function goto_organization_phase() {
 		}
 	}
 
-	log("")
 	log(".h2 Organization Phase")
 
 	// F: ADVANCE FORMATION
@@ -877,7 +873,6 @@ function can_withdraw_any() {
 }
 
 function goto_withdrawal() {
-	log("")
 	log(".h2 Withdrawal")
 	game.remain = 0
 	game.active = P2
@@ -999,9 +994,7 @@ function can_move_any() {
 }
 
 function goto_movement_phase() {
-	log("")
 	log(".h2 Movement Phase")
-	log("")
 	game.remain = 0
 	game.active = P2
 	next_movement()
@@ -1130,6 +1123,11 @@ states.movement_to = {
 
 		set_piece_hex(game.who, x)
 
+		if (game.active === P1)
+			log("F: P" + game.who + " moved to " + x)
+		else
+			log("C: P" + game.who + " moved to " + x)
+
 		// must flip (stream without road, or enter zoc)
 		if (!(move_seen[x-1000] & 2))
 			set_piece_mode(game.who, 1)
@@ -1428,9 +1426,7 @@ function can_attack_any() {
 }
 
 function goto_attack_phase() {
-	log("")
 	log(".h2 Attack Phase")
-	log("")
 	game.remain = 0
 	game.active = P2
 	next_attack()