Lotsa stuff.

1 files changed, 62 insertions, 33 deletions

diff --git a/play.html b/play.html
index 5b114c6..2311ab0 100644
--- a/play.html
+++ b/play.html
@@ -5,28 +5,59 @@
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
 <meta charset="UTF-8">
 <title>THE FIELD OF THE CLOTH OF GOLD</title>
-<link rel="icon" href="favicon.png">
+<link rel="icon" href="favicon.svg">
 <link rel="stylesheet" href="/fonts/fonts.css">
 <link rel="stylesheet" href="/common/play.css">
 <script defer src="/common/play.js"></script>
 <script defer src="play.js"></script>
 <style>
 
+@font-face{
+	font-family: "Albert Text";
+	src: url('fonts/AlbertText-Bold.woff2') format('woff2');
+}
+
 main {
+	user-select: none;
 	background-color: #666;
 	background-image: url(background.png);
 	box-shadow: inset 0 0 8px #0008;
 }
 
-#log {
-	background-color: oldlace;
+body.Observer #hand {
+	display: none;
+}
+
+.court, #hand {
+	font-family: "Albert Text";
+	padding: 6px 10px;
+	text-align: right;
+	font-size: 20px;
+	color: #0004;
+}
+
+#log { background-color: oldlace; }
+#log .h1 {
+	margin: 6px 0;
+	padding: 2px 8px;
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+	background-color: hsl(0,0%,85%);
 }
+#log .h1.x { background-color: hsl(0,0%,85%); }
+#log .h1.gold { background-color: hsl(50,81%,79%); }
+#log .h1.blue { background-color: hsl(201,80%,67%); }
+#log .h1.white { background-color: hsl(0,0%,100%); }
+#log .h1.red { background-color: hsl(0,90%,69%); }
+#log .h1.purple { background-color: hsl(296,29%,65%); }
+#log .h1.r{background-image:linear-gradient(90deg,transparent 180px,#000 180px,#000 181px, hsl(359,85%,60%) 181px); }
+#log .h1.b{background-image:linear-gradient(90deg,transparent 180px,#000 180px,#000 181px, hsl(220,85%,60%) 181px); }
 
 #role_Red .role_name { background-color: hsl(359,100%,75%); }
 #role_Blue .role_name { background-color: hsl(220,100%,80%); }
 
 #mapwrap {
-	width: 827px;
+	width: 825px;
 	margin: 0px auto;
 }
 
@@ -42,7 +73,6 @@ main {
 	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 {
@@ -57,6 +87,10 @@ main {
 	border-color: #fff8 #2228 #2228 #fff8;
 }
 
+@media (min-resolution: 97dpi) {
+	#board { background-image: url(map150.jpg) }
+}
+
 #court1 { top: 12px }
 #board { top: calc(12px + 80px + 12px) }
 #court2 { top: calc(12px + 80px + 12px + 638px + 12px) }
@@ -65,15 +99,7 @@ main {
 
 .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) {
-	#board { background-image: url(map150.jpg) }
-}
+#hand { background-color: #666 }
 
 #map div {
 	position: absolute;
@@ -110,8 +136,9 @@ X#hand { background-color: #666 }
 }
 
 .tile {
-	width: 52px;
-	height: 52px;
+	box-sizing: border-box;
+	width: 56px;
+	height: 56px;
 	background-repeat: no-repeat;
 	background-size: 38px 38px;
 	background-position: center;
@@ -130,29 +157,32 @@ X#hand { background-color: #666 }
 
 .space {
 	box-sizing: border-box;
-	border-radius: 50%;
 	border: 3px solid transparent;
 }
 
+.space.oval {
+	border-radius: 50%;
+}
+
 .space.action {
 	border: 3px solid white;
+	box-shadow: 0 0 4px 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/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.gold { background-image: url(images/gold.png); background-color: hsl(50,81%,59%); }
+.tile.blue { background-image: url(images/blue.png); background-color: hsl(201,80%,47%); }
+.tile.white { background-image: url(images/white.png); background-color: hsl(0,0%,94%); }
+.tile.red { background-image: url(images/red.png); background-color: hsl(0,90%,49%); }
+.tile.green { background-image: url(images/green.png); background-color: hsl(125,21%,33%); }
 
-.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%); }
-.tile.blue { background-color: hsl(201,80%,47%); border-color: hsl(201,80%,57%) hsl(201,80%,37%) hsl(201,80%,37%) hsl(201,80%,57%); }
-.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%); }
+.tile { border-color: #fff5 #0003 #0003 #fff5; }
+.tile.gold { border-color: #fff6 #0003 #0003 #fff6 }
+.tile.white { border-color: #ddd #bbb #bbb #ddd }
+.tile.green { border-color: #fff3 #0003 #0003 #fff3 }
 
 </style>
 </head>
@@ -169,6 +199,7 @@ X#hand { background-color: #666 }
 		</div>
 	</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>
@@ -194,14 +225,12 @@ X#hand { background-color: #666 }
 
 <main>
 
-<div id="mapwrap">
+<div id="mapwrap" class="fit">
 <div id="map">
-
-<div id="court1" class="red court"></div>
+<div id="court1" class="red court">Rival Court</div>
 <div id="board"></div>
-<div id="court2" class="blue court"></div>
-<div id="hand" class="blue hand"></div>
-
+<div id="court2" class="blue court">Court</div>
+<div id="hand" class="blue hand">Hand</div>
 </div>
 </div>