<!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>
:root {
--red: hsl(360, 77%, 51%);
--pink: hsl(359, 81%, 78%);
--blue: hsl(211, 78%, 52%);
--dkblue: hsl(240, 69%, 57%);
--bg-red: hsl(360, 80%, 80%);
--bg-blue: hsl(211, 80%, 85%);
--fg-red: hsl(360, 100%, 35%);
--fg-dkblue: hsl(211, 100%, 25%);
--fg-pink: hsl(360, 75%, 60%);
--fg-blue: hsl(211, 75%, 50%);
--xfg-red: hsl(360, 77%, 31%);
--xfg-pink: hsl(359, 81%, 58%);
--xfg-blue: hsl(211, 78%, 32%);
--xfg-dkblue: hsl(240, 69%, 37%);
--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%);
--gray: hsl(0, 0%, 90%);
--lo-gray: hsl(0, 0%, 75%);
--hi-gray: hsl(0, 0%, 100%);
}
#replay_panel { background-color: tan; }
#roles { background-color: bisque; }
#log { background-color: floralwhite; }
.role.blue { background-color: #8bf }
.role.red { background-color: #f88 }
#tooltip {
pointer-events: none;
position: fixed;
z-index: 600;
right: 240px;
top: 60px;
width: 242px;
height: 338px;
}
#tooltip:empty {
display: none;
}
@media (max-width: 800px) {
#tooltip {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
/* LOG */
#log .h1 {
text-align: center;
font-weight: bold;
font-variant: small-caps;
background-color: tan;
padding: 2px 8px;
}
#log .h1 a {
color: black;
text-decoration: none;
}
#log .h1 a:hover {
text-decoration: underline;
}
#log .h2 {
text-align: center;
font-variant: small-caps;
background-color: wheat;
padding: 2px 8px;
}
#log .h3 {
text-align: right;
background-color: wheat;
margin: 8px 0;
}
#log .h3.red {
background-color: var(--bg-red);
}
#log .h3.blue {
background-color: var(--bg-blue);
}
#log div { padding-left: 20px; text-indent: -12px; }
#log div.i1 { padding-left: 32px; text-indent: -12px; }
#log div.i2 { padding-left: 44px; text-indent: -12px; }
#log .img {
padding: 0;
text-indent: 0;
min-height: 0;
}
#log img {
max-width: 100%;
}
#log .lore {
font-style: italic;
text-indent: 0;
padding-left: 8px;
}
#log .rule {
text-indent: 0;
padding-left: 8px;
}
X#log .n { font-style: italic; }
#log .n:hover { text-decoration: underline; }
#log .n.dkblue { color: var(--fg-dkblue); }
#log .n.blue { color: var(--fg-blue); }
#log .n.red { color: var(--fg-red); }
#log .n.pink { color: var(--fg-pink); }
.mini {
display: inline-block;
vertical-align: -3px;
width: 12px;
height: 12px;
border-width: 1px;
background-size: 600% 100%;
background-repeat: no-repeat;
background-image: url(images/die_black_pips.svg);
background-color: #ddd;
border: 1px solid black;
}
/* PANELS */
main {
background-color: #666;
background-image: url(images/background.png);
background-attachment: local;
box-shadow: inset 0 0 8px #0008;
}
/* TODO: set min-width per scenario */
.table { min-width: fit-content; }
/* TODO: set this if side ever has any reserves */
.table_reserve.always { min-height: 449px; }
.player_pool {
width: 500px;
background-color: #0003;
padding: 8px;
border-radius: 24px;
margin: 24px auto;
}
.player_name {
color: antiquewhite;
text-shadow: 0 0 3px goldenrod;
font-size: 20px;
text-align: center;
font-style: italic;
font-family: "Source Serif";
padding: 4px;
}
.table_pool {
display: flex;
justify-content: center;
height: 36px;
gap: 12px;
align-items: center;
margin: 8px;
}
.table_reserve, .table_front {
display: flex;
justify-content: center;
gap: 24px;
padding: 0 24px;
}
#player1 .table_reserve, #player1 .table_front { align-items: end; }
#player2 .table_reserve, #player2 .table_front { align-items: start; }
#player1 .table_reserve { padding: 24px 24px 0 24px; }
#player2 .table_reserve { padding: 0 24px 24px 24px; }
#player1 .table_reserve, #player1 .table_front {
flex-direction: row-reverse;
}
.table_front {
min-height: 509px;
}
/* RESERVE OPTIONS */
/*
.table_reserve { background-color: #0001; }
*/
/*
.table_reserve { background-color: #f002; }
.table_front { background-color: #0f02; }
.slot { background-color: #00f2; }
*/
/*
.table_reserve { background-color: #0001; }
.player_pool { background-color: #0001; }
#player1 .player_pool { margin: 0 auto 24px auto; border-radius: 0 0 24px 24px; }
#player2 .player_pool { margin: 24px auto 0 auto; border-radius: 24px 24px 0 0; }
*/
/* CARD SLOTS */
.slot {
display: flex;
flex-direction: column;
}
.flip .slot {
flex-direction: column-reverse;
}
.slot_cubes {
height: 87px;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 12px;
}
#player1 .slot_cubes { align-items: start; }
#player2 .slot_cubes { align-items: end; }
/* S37 Inkerman - The Fog */
[data-card="225B"] .slot_sticks { min-height: 12px }
[data-card="225B"] .slot_cubes { height: 51px }
/* S38 Fleurus - Retreat to Nivelles */
[data-card="237A"] .slot_cubes:empty { display: none }
[data-card="237A"] .slot_cubes:not(:empty) ~ .slot_sticks { display: none }
.slot_sticks {
margin: 12px;
min-height: 87px;
display: flex;
align-items: center;
gap: 1px;
}
#player1 .slot_sticks {
justify-content: start;
flex-direction: column-reverse;
}
#player2 .slot_sticks {
justify-content: end;
flex-direction: column;
}
.slot_shift {
min-height: 11px;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
gap: 1px;
margin: 12px;
}
.slot_shift:empty {
display: none;
}
.slot_dice {
display: flex;
height: 36px;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0;
}
.table_reserve .slot_dice {
display: none;
}
/* PIECES */
.card, .card * {
pointer-events: none;
}
.card.action, .card *.action {
pointer-events: auto;
}
.card .number { display: none; }
body.shift .card .number { display: block; }
.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;
}
.stick {
width: 90%;
height: 6px;
border: 2px solid black;
box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
}
.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); }
.hit.stick { background-color: var(--gray); border-color: var(--hi-gray) var(--lo-gray) var(--lo-gray) var(--hi-gray); }
.die {
width: 32px;
height: 32px;
border-width: 2px;
border-style: solid;
background-size: 600% 100%;
background-repeat: no-repeat;
background-image: url(images/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;
}
/* ACTION HIGHLIGHTS */
.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; }
.card.target { box-shadow: 0 0 0px 3px black; }
.action_type.action {
border-color: white;
box-shadow: 0 0 0 2px white;
}
.action_type.action.null {
border-color: black;
box-shadow: 0 0 0 2px black;
}
.retire.action {
box-shadow: 0 0 0 3px white;
background-color: #fff4;
}
</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>
</menu>
</details>
</div>
</header>
<aside>
<div id="roles">
<div class="role" id="role_First">
<div class="role_name"><span id="role1">First</span></div>
<div class="role_stat" id="stat1"></div>
<div class="role_user"></div>
</div>
<div class="role" id="role_Second">
<div class="role_name"><span id="role2">Second</span></div>
<div class="role_stat" id="stat2"></div>
<div class="role_user"></div>
</div>
</div>
<div id="log"></div>
</aside>
<main data-min-zoom="0.5" data-max-zoom="1.125" data-map-height="500">
<div class="table">
<div class="flip" id="player1">
<div id="reserve1" class="table_reserve"></div>
<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="front1" class="table_front"></div>
</div>
<div id="player2">
<div id="front2" class="table_front"></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 id="reserve2" class="table_reserve"></div>
</div>
<div class="table">
</main>
<div id="tooltip"></div>
<footer id="status"></footer>
</body>