diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 95 |
1 files changed, 62 insertions, 33 deletions
@@ -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> |