<!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>