All in one.

1 files changed, 107 insertions, 81 deletions

diff --git a/play.html b/play.html
index bc33c84..5b114c6 100644
--- a/play.html
+++ b/play.html
@@ -12,64 +12,141 @@
 <script defer src="play.js"></script>
 <style>
 
-main { background-color: dimgray }
+main {
+	background-color: #666;
+	background-image: url(background.png);
+	box-shadow: inset 0 0 8px #0008;
+}
+
+#log {
+	background-color: oldlace;
+}
 
-#role_Red .role_name { background-color: salmon; }
-#role_Blue .role_name { background-color: skyblue; }
+#role_Red .role_name { background-color: hsl(359,100%,75%); }
+#role_Blue .role_name { background-color: hsl(220,100%,80%); }
 
 #mapwrap {
-	width: 1104px;
-	height: 854px;
-	box-shadow: 0px 1px 10px #0008;
-	margin: 12px auto;
+	width: 827px;
+	margin: 0px auto;
 }
 
 #map {
-	width: 1100px;
-	height: 850px;
-	background-size: 1100px 850px;
-	background-image: url(map100.jpg);
-	border: 2px solid #333;
+	width: 825px;
+	height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px + 12px);
+}
+
+#board, #hand, .court {
+	box-sizing: border-box;
+	position: absolute;
+	width: 825px;
+	border: 2px solid #0004;
+	border-color: #fff4 #0004 #0004 #fff4;
+	box-shadow: 0 0 0 1px #222, 1px 1px 8px -2px #000;
+	border-radius: 8px;
+}
+
+#hand, .court {
+	height: 80px;
+}
+
+#board {
+	height: 638px;
+	background-size: 825px 638px;
+	background-position: center;
+	background-image: url(map75.jpg);
+	border-color: #fff8 #2228 #2228 #fff8;
 }
 
+#court1 { top: 12px }
+#board { top: calc(12px + 80px + 12px) }
+#court2 { top: calc(12px + 80px + 12px + 638px + 12px) }
+#hand { top: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px) }
+#mapwrap { height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px) }
+
+.red.court { background-color: hsl(359,35%,45%) }
+.blue.court { background-color: hsl(220,35%,45%) }
+
+X#hand { background-color: hsl(46, 63%, 56%) }
+#hand { background-color: hsl(46, 35%, 45%) }
+X#hand { background-image: url(bg_gold3.png); background-size: 256px 256px; }
+X#hand { background-color: #666 }
+
 @media (min-resolution: 97dpi) {
-	#map { background-image: url(map200.jpg) }
+	#board { background-image: url(map150.jpg) }
 }
 
 #map div {
 	position: absolute;
 	transition-property: top, left;
-	transition-duration: 1s;
+	transition-duration: 500ms;
 	transition-timing-function: ease;
 }
 
+.action {
+	cursor: pointer;
+}
+
 .token {
-	width: 58px;
-	height: 64px;
-	background-size: 58px 64px;
+	width: 41px;
+	height: 44px;
+	background-size: 41px 44px;
 	filter: drop-shadow(0px 2px 4px #0008);
 }
 
+.token.action {
+	filter:
+		drop-shadow(0px 2px 0px white)
+		drop-shadow(2px 0px 0px white)
+		drop-shadow(-2px 0px 0px white)
+		drop-shadow(0px -2px 0px white)
+}
+
+.token.selected {
+	filter:
+		drop-shadow(0px 2px 0px yellow)
+		drop-shadow(2px 0px 0px yellow)
+		drop-shadow(-2px 0px 0px yellow)
+		drop-shadow(0px -2px 0px yellow)
+}
+
 .tile {
-	width: 75px;
-	height: 75px;
+	width: 52px;
+	height: 52px;
 	background-repeat: no-repeat;
-	background-size: 50px 50px;
+	background-size: 38px 38px;
 	background-position: center;
 	border-width: 2px;
 	border-style: solid;
 	box-shadow: 0 0 0 1px #222, 1px 2px 4px #0008;
 }
 
+.tile.action {
+	box-shadow: 0 0 0 1px #222, 0 0 0 4px white;
+}
+
+.tile.selected {
+	box-shadow: 0 0 0 1px #222, 0 0 0 4px yellow;
+}
+
+.space {
+	box-sizing: border-box;
+	border-radius: 50%;
+	border: 3px solid transparent;
+}
+
+.space.action {
+	border: 3px solid white;
+}
+
 .token.white { background-image: url(images/token_white.svg) }
 .token.red { background-image: url(images/token_red.svg) }
 .token.blue { background-image: url(images/token_blue.svg) }
 
-.tile.white { background-image: url(images/tile_white.png) }
-.tile.red { background-image: url(images/tile_red.png) }
-.tile.blue { background-image: url(images/tile_blue.png) }
-.tile.gold { background-image: url(images/tile_gold.png) }
-.tile.green { background-image: url(images/tile_green.png) }
+.tile.white { background-image: url(images/white.png) }
+.tile.red { background-image: url(images/red.png) }
+.tile.blue { background-image: url(images/blue.png) }
+.tile.gold { background-image: url(images/gold.png) }
+.tile.green { background-image: url(images/green.png) }
 
 .tile.red { background-color: hsl(0,90%,49%); border-color: hsl(0,90%,59%) hsl(0,90%,39%) hsl(0,90%,39%) hsl(0,90%,59%); }
 .tile.white { background-color: hsl(0,0%,94%); border-color: hsl(0,0%,100%) hsl(0,0%,84%) hsl(0,0%,84%) hsl(0,0%,100%); }
@@ -77,38 +154,6 @@ main { background-color: dimgray }
 .tile.gold { background-color: hsl(50,81%,59%); border-color: hsl(50,81%,69%) hsl(50,81%,49%) hsl(50,81%,49%) hsl(50,81%,69%); }
 .tile.green { background-color: hsl(125,21%,33%); border-color: hsl(125,21%,43%) hsl(125,21%,23%) hsl(125,21%,23%) hsl(125,21%,43%); }
 
-.panel {
-	max-width: 1100px;
-	margin: 24px auto;
-	background-color: #555;
-	border: 2px solid #333;
-	box-shadow: 0 1px 10px #0008;
-}
-
-#red_court_header { background-color: #644 }
-#red_court { background-color: #655 }
-
-#blue_court_header { background-color: #446 }
-#blue_court { background-color: #556 }
-
-.panel_header {
-	background-color: #444;
-	color: white;
-	user-select: none;
-	font-weight: bold;
-	text-align: center;
-	padding: 3px 1em;
-}
-
-.panel_body {
-	display: flex;
-	justify-content: start;
-	flex-wrap: wrap;
-	padding: 16px;
-	gap: 16px;
-	min-height: 80px;
-}
-
 </style>
 </head>
 <body>
@@ -149,36 +194,17 @@ main { background-color: dimgray }
 
 <main>
 
-<div id="mapwrap" class="">
+<div id="mapwrap">
 <div id="map">
 
-<div id="token_white" class="token white" style="left:90px;top:135px;"></div>
-<div id="token_red1" class="token red" style="left:200px"></div>
-<div id="token_red2" class="token red" style="left:300px"></div>
-<div id="token_red3" class="token red" style="left:400px"></div>
-<div id="token_blue1" class="token blue" style="left:500px"></div>
-<div id="token_blue2" class="token blue" style="left:600px"></div>
-<div id="token_blue3" class="token blue" style="left:700px"></div>
+<div id="court1" class="red court"></div>
+<div id="board"></div>
+<div id="court2" class="blue court"></div>
+<div id="hand" class="blue hand"></div>
 
 </div>
 </div>
 
-<div id="hand_panel" class="panel">
-<div id="hand_header" class="panel_header">Hand</div>
-<div id="hand" class="panel_body">
-</div>
-</div>
-
-<div id="red_court_panel" class="panel">
-<div id="red_court_header" class="panel_header">Red Court</div>
-<div id="red_court" class="panel_body">
-</div></div>
-
-<div id="blue_court_panel" class="panel">
-<div id="blue_court_header" class="panel_header">Blue Court</div>
-<div id="blue_court" class="panel_body">
-</div></div>
-
 </main>
 
 <footer id="status"></footer>