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