diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 324 |
1 files changed, 324 insertions, 0 deletions
diff --git a/play.html b/play.html new file mode 100644 index 0000000..9f16e30 --- /dev/null +++ b/play.html @@ -0,0 +1,324 @@ +<!DOCTYPE html> +<!-- vim:set nowrap: --> +<html lang="en"> +<head> +<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover"> +<meta name="theme-color" content="#444"> +<meta charset="UTF-8"> +<title>TABLE BATTLES</title> +<link rel="icon" href="favicon.png"> +<link rel="stylesheet" href="/fonts/fonts.css"> +<link rel="stylesheet" href="/common/client.css"> +<link rel="stylesheet" href="cards.css"> +<script defer src="/common/client.js"></script> +<script defer src="data.js"></script> +<script defer src="play.js"></script> +<style> + +#replay_panel { background-color: tan; } +#roles { background-color: bisque; } +#log { background-color: floralwhite; } + +main { + background-color: #666; + background-image: url(background.png); + background-attachment: local; + box-shadow: inset 0 0 8px #0008; +} + +/* +main[data-scenario="1"] { + background-image: url("images/The_Battle_of_White_Mountain_(by_Peter_Snayers).jpg"); + background-size: cover; + background-position: center; +} + +main[data-scenario="5"] { + background-image: url(images/Malplaquet.jpg); + background-size: cover; + background-position: center; +} +*/ + +/* +#player1 div, #player2 div { outline: 1px dotted pink; } +*/ + +.card, .card * { + pointer-events: none; +} + +.card.action, .card *.action { + pointer-events: auto; +} + +.player_pool { + width: 500px; + margin: 24px auto; + background-color: #2225; + padding: 2px; + border-radius: 24px; +} + +.player_name { + color: antiquewhite; + text-shadow: 0 0 3px goldenrod; + font-size: 20px; + text-align: center; + font-style: italic; + font-family: "Source Serif"; + margin: 4px; +} + +.table_reserve, .table_front, .table_pool { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 24px; +} + +.table_reserve { + margin: 24px; +} + +.slot_cubes { + height: 87px; + display: flex; + flex-direction: row; + justify-content: center; + align-content: end; + flex-wrap: wrap; + gap: 8px; + margin: 12px; +} + +.slot_sticks { + height: 87px; + display: flex; + flex-direction: column; + justify-content: end; + align-content: center; + flex-wrap: wrap; + gap: 1px; + margin: 12px; +} + +.slot_dice { + display: flex; + height: 36px; + flex-direction: row; + justify-content: center; + align-content: end; + flex-wrap: wrap; + gap: 6px; + margin: 12px 0; +} + +.flip .slot_sticks { + justify-content: start; +} +.flip .slot_cubes { + align-content: start; +} + +.table_reserve .slot_sticks { display: none } +.table_reserve .slot_cubes { display: none } +.table_reserve .slot_dice { display: none } + +.stick { + width: 200px; + height: 6px; + border: 2px solid black; + box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004; + Xbox-shadow: 1px 1px 3px 0px #0004; +} + +:root { + --red: hsl(360, 77%, 51%); + --pink: hsl(359, 81%, 78%); + --blue: hsl(211, 78%, 52%); + --dkblue: hsl(240, 69%, 57%); + + --hi-red: hsl(360, 77%, 61%); + --hi-pink: hsl(359, 81%, 83%); + --hi-blue: hsl(211, 78%, 62%); + --hi-dkblue: hsl(240, 69%, 67%); + + --lo-red: hsl(360, 77%, 41%); + --lo-pink: hsl(359, 81%, 68%); + --lo-blue: hsl(211, 78%, 42%); + --lo-dkblue: hsl(240, 69%, 47%); +} + +.red .stick { background-color: var(--red); } +.pink .stick { background-color: var(--pink); } +.blue .stick { background-color: var(--blue); } +.dkblue .stick { background-color: var(--dkblue); } + +.red .stick { border-color: var(--hi-red) var(--lo-red) var(--lo-red) var(--hi-red); } +.pink .stick { border-color: var(--hi-pink) var(--lo-pink) var(--lo-pink) var(--hi-pink); } +.blue .stick { border-color: var(--hi-blue) var(--lo-blue) var(--lo-blue) var(--hi-blue); } +.dkblue .stick { border-color: var(--hi-dkblue) var(--lo-dkblue) var(--lo-dkblue) var(--hi-dkblue); } + +.table_pool { + margin: 12px; + height: 36px; + gap: 12px; + align-items: center; +} + +.flip .table_reserve, .flip .table_front { + flex-direction: row-reverse; +} + +.flip .card, .flip .card > div { + transform: rotate(180deg); +} + +.card { + box-shadow: 1px 2px 8px #0008; +} + +.flip .card { + box-shadow: -1px -2px 8px #0008; +} + +.flip .card .strength { + left: 6px; + right: unset; +} + +.table_separator { + text-align: center; + color: orange; + font-size: 48px; +} + +.cube { + width: 24px; + height: 24px; + background-color: #eee; + border-style: solid; + border-width: 2px; + border-color: #fff #ccc #ccc #fff; + box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004; +} + +.die { + width: 32px; + height: 32px; + border-width: 2px; + border-style: solid; + background-size: 600% 100%; + background-repeat: no-repeat; + + background-image: url(die_black_pips.svg); + background-color: #ccc; + border-color: #e5e5e5 #a0a0a0 #a0a0a0 #e5e5e5; + box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004; +} + +.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; } + +.d0::before { + position: absolute; + content: "?"; + width: 32px; height: 32px; + line-height: 32px; + font-family: "Source Sans"; + font-size: 24px; + color: #0006; + text-align: center; +} + +.die.action { box-shadow: 0 0 0 1px #333, 0 0 0px 3px white; } +.card.action { box-shadow: 0 0 0 3px whitesmoke; } +.card.selected { box-shadow: 0 0 0px 3px gold; } + +.action_type.action { + border-color: white; + box-shadow: 0 0 0 2px white; +} + + +.action_type.fizzle { + border-color: black; + box-shadow: 0 0 0 2px black; +} + +/* +.card.blue.selected { box-shadow: 0 0 0px 3px dodgerblue; } +.card.dkblue.selected { box-shadow: 0 0 0px 3px dodgerblue; } +.card.pink.selected { box-shadow: 0 0 0px 3px red; } +.card.red.selected { box-shadow: 0 0 0px 3px red; } +*/ + +</style> +</head> +<body> + +<header> + <div id="toolbar"> + <details> + <summary><img src="/images/cog.svg"></summary> + <menu> + <li><a href="info/rules.html" target="_blank">Rules</a> + <li class="resign separator"> + <li class="resign" onclick="confirm_resign()">Resign + </menu> + </details> + </div> +</header> + +<aside> + <div id="roles"> + <div class="role" id="role_First"> + <div class="role_name"> + <span id="role1">First</span> + <div class="role_morale" id="red_morale"></div> + <div class="role_user"></div> + </div> + </div> + <div class="role" id="role_Second"> + <div class="role_name"> + <span id="role2">Second</span> + <div class="role_morale" id="blue_morale"></div> + <div class="role_user"></div> + </div> + </div> + </div> + <div id="log"></div> +</aside> + +<main data-min-zoom="0.5" data-max-zoom="1.125" map-width="1920" map-height="1080"> + + <div class="flip" id="player1"> + <div class="player_pool"> + <div id="name1" class="player_name"></div> + <div id="pool1" class="table_pool"></div> + <div id="morale1" class="table_pool"></div> + </div> + <div id="reserve1" class="table_reserve"></div> + <div id="front1" class="table_front"></div> + </div> + + <div id="player2"> + <div id="front2" class="table_front"></div> + <div id="reserve2" class="table_reserve"></div> + <div class="player_pool"> + <div id="morale2" class="table_pool"></div> + <div id="pool2" class="table_pool"></div> + <div id="name2" class="player_name"></div> + </div> + </div> +</main> + +<footer id="status"></footer> + +</body> |