summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-11-22 01:55:38 +0100
committerTor Andersson <tor@ccxvii.net>2024-01-08 16:36:47 +0100
commitb2c68b84481e4393fd13d78184318bbe22ff427c (patch)
tree214a3baf9e01ea171d69331355b72ab360753eda /play.html
parent95b90a9b4c21d6fd0805177d5193a8a62fa217ad (diff)
downloadtable-battles-b2c68b84481e4393fd13d78184318bbe22ff427c.tar.gz
lotsa stuff
Diffstat (limited to 'play.html')
-rw-r--r--play.html324
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>