summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-07-30 02:30:26 +0200
committerTor Andersson <tor@ccxvii.net>2023-10-01 16:11:21 +0200
commit9f03172473165c0a905f31d9698b3fe8cef4b341 (patch)
treeeb1df12bbfd607ba6d658771696d0fc5ab696579 /play.html
parent792f835c67395727bea00620726e39917234e8de (diff)
downloadwaterloo-campaign-1815-9f03172473165c0a905f31d9698b3fe8cef4b341.tar.gz
Setup.
Diffstat (limited to 'play.html')
-rw-r--r--play.html269
1 files changed, 269 insertions, 0 deletions
diff --git a/play.html b/play.html
new file mode 100644
index 0000000..7b7feba
--- /dev/null
+++ b/play.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+<meta charset="utf-8">
+<title>WATERLOO CAMPAIGN 1815</title>
+<link rel="icon" href="favicon.png">
+<link rel="stylesheet" href="/fonts/fonts.css">
+<link rel="stylesheet" href="/common/play.css">
+<link rel="stylesheet" href="/common/columbia.css">
+<script defer src="/common/play.js"></script>
+<script defer src="play.js"></script>
+</head>
+<style>
+
+main {
+ background-color: dimgray;
+}
+
+#mapwrap {
+ margin: 0 auto;
+ width: 2550px;
+ height: 1650px;
+ box-shadow: 0 0 8px #0008;
+}
+
+#map {
+ width: 2550px;
+ height: 1650px;
+ background-color: white;
+ background-image: url(map75.png);
+ background-size: 2550px 1650px;
+}
+
+#hexes, #pieces { position: absolute }
+
+.hex {
+ box-sizing: border-box;
+ position: absolute;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ width: 62px;
+ height: 62px;
+}
+
+.hex:hover {
+ border-color: #0008;
+}
+
+.hex.town { background-color: #F006; }
+.hex.stream { background-color: #00F6; }
+.hex.town.stream { background-color: #F0F6; }
+
+.hex.action {
+ border: 4px solid #fff6;
+}
+
+.hexside {
+ position: absolute;
+ display: none;
+ transform-origin: 0 0;
+ width: 58px;
+ height: 4px;
+}
+
+.hexside.s1 { transform: rotate(-60deg) }
+.hexside.s2 { transform: rotate(-120deg) }
+
+.hexside.road {
+ display: block;
+ background-color: brown;
+}
+
+.hexside.river {
+ display: block;
+ background-color: blue;
+}
+
+.hexside.road.river {
+ display: block;
+ background-color: green;
+}
+
+.large {
+ position: absolute;
+ background-size: 84px auto;
+ width: 42px;
+ height: 42px;
+ border-radius: 6px;
+}
+
+.small {
+ position: absolute;
+ background-size: 68px auto;
+ width: 34px;
+ height: 34px;
+ border-radius: 3px;
+}
+
+.large, .small {
+ border-width: 2px;
+ border-style: solid;
+ box-shadow: 0 0 0 1px #444, 0 0 4px #0008;
+}
+
+.large.french, .small.french { border-color: hsl(199,85%,90%) hsl(199,75%,70%) hsl(199,75%,70%) hsl(199,85%,90%) }
+.large.anglo, .small.anglo { border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%) }
+.large.prussian, .small.prussian { border-color: hsl(202,10%,70%) hsl(202,10%,50%) hsl(202,10%,50%) hsl(202,10%,70%) }
+
+.large.french { background-image: url(sheet_french1_75.png) }
+.large.anglo { background-image: url(sheet_anglo1_75.png) }
+.large.prussian { background-image: url(sheet_prussian1_75.png) }
+.small.french { background-image: url(sheet_french2_75.png) }
+.small.anglo { background-image: url(sheet_anglo2_75.png) }
+.small.prussian { background-image: url(sheet_prussian2_75.png) }
+
+@media (min-resolution:97dpi) {
+.large.french { background-image: url(sheet_french1_150.png) }
+.large.anglo { background-image: url(sheet_anglo1_150.png) }
+.large.prussian { background-image: url(sheet_prussian1_150.png) }
+.small.french { background-image: url(sheet_french2_150.png) }
+.small.anglo { background-image: url(sheet_anglo2_150.png) }
+.small.prussian { background-image: url(sheet_prussian2_150.png) }
+}
+
+.large.y1 { background-position: -0px -0px }
+.large.y2 { background-position: -0px -42px }
+.large.y3 { background-position: -0px -84px }
+.large.y4 { background-position: -0px -126px }
+.large.y5 { background-position: -0px -168px }
+.large.y6 { background-position: -0px -210px }
+.large.y7 { background-position: -0px -252px }
+.large.y8 { background-position: -0px -294px }
+.large.y9 { background-position: -0px -336px }
+.large.y10 { background-position: -0px -378px }
+.large.y11 { background-position: -0px -420px }
+
+.large.flip.y1 { background-position: -42px -0px }
+.large.flip.y2 { background-position: -42px -42px }
+.large.flip.y3 { background-position: -42px -84px }
+.large.flip.y4 { background-position: -42px -126px }
+.large.flip.y5 { background-position: -42px -168px }
+.large.flip.y6 { background-position: -42px -210px }
+.large.flip.y7 { background-position: -42px -252px }
+.large.flip.y8 { background-position: -42px -294px }
+.large.flip.y9 { background-position: -42px -336px }
+.large.flip.y10 { background-position: -42px -378px }
+.large.flip.y11 { background-position: -42px -420px }
+
+.small.y1 { background-position: 0px 0px }
+.small.y2 { background-position: 0px -34px }
+.small.y3 { background-position: 0px -68px }
+.small.y4 { background-position: 0px -102px }
+.small.y5 { background-position: 0px -136px }
+.small.y6 { background-position: 0px -170px }
+
+.small.flip.y1 { background-position: -34px -0px }
+.small.flip.y2 { background-position: -34px -34px }
+.small.flip.y3 { background-position: -34px -68px }
+.small.flip.y4 { background-position: -34px -102px }
+.small.flip.y5 { background-position: -34px -136px }
+.small.flip.y6 { background-position: -34px -170px }
+
+</style>
+<body>
+
+<header>
+ <div id="toolbar">
+ <div class="menu">
+ <div class="menu_title"><img src="/images/cog.svg"></div>
+ <div class="menu_popup">
+ <a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
+ <a class="menu_item" href="info/charts.html" target="_blank">Charts</a>
+ <div class="resign menu_separator"></div>
+ <div class="resign menu_item" onclick="confirm_resign()">Resign</div>
+ <div class="menu_separator"></div>
+ <div class="menu_item" onclick="send_save()">&#x1F41E; Save</div>
+ <div class="menu_item" onclick="send_restore()">&#x1F41E; Restore</div>
+ <div class="menu_separator"></div>
+ <div class="menu_item" onclick="send_restart('June 16-18')">&#x26a0; Restart</div>
+ </div>
+ </div>
+ <div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></div>
+ <div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
+ <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
+ </div>
+ <div id="prompt"></div>
+ <div id="actions"></div>
+</header>
+
+<aside>
+ <div id="roles">
+ <div class="role" id="role_French">
+ <div class="role_name">
+ French
+ <div class="role_user">-</div>
+ </div>
+ </div>
+ <div class="role" id="role_Coalition">
+ <div class="role_name">
+ Coalition
+ <div class="role_user">-</div>
+ </div>
+ </div>
+ <div id="turn_info">June 15</div>
+ </div>
+ <div id="log"></div>
+</aside>
+
+<main>
+<div id="mapwrap">
+<div id="map">
+<div id="hexes"></div>
+<div id="pieces">
+
+<div id="french_hq_1" class="french large y1"></div>
+<div id="french_hq_2" class="french large y2"></div>
+<div id="french_hq_3" class="french large y3"></div>
+<div id="anglo_hq_1" class="anglo large y1"></div>
+<div id="prussian_hq_1" class="prussian large y1"></div>
+
+<div id="french_corps_1" class="french large y4"></div>
+<div id="french_corps_2" class="french large y5"></div>
+<div id="french_corps_3" class="french large y6"></div>
+<div id="french_corps_4" class="french large y7"></div>
+<div id="french_corps_5" class="french large y8"></div>
+<div id="french_corps_6" class="french large y9"></div>
+<div id="french_corps_7" class="french large y10"></div>
+<div id="french_corps_8" class="french large y11"></div>
+
+<div id="anglo_corps_1" class="anglo large y2"></div>
+<div id="anglo_corps_2" class="anglo large y3"></div>
+<div id="anglo_corps_3" class="anglo large y4"></div>
+<div id="anglo_corps_4" class="anglo large y5"></div>
+<div id="anglo_corps_5" class="anglo large y6"></div>
+
+<div id="prussian_corps_1" class="prussian large y2"></div>
+<div id="prussian_corps_2" class="prussian large y3"></div>
+<div id="prussian_corps_3" class="prussian large y4"></div>
+<div id="prussian_corps_4" class="prussian large y5"></div>
+<div id="prussian_corps_5" class="prussian large y6"></div>
+
+<div id="french_detachment_1" class="french small y1"></div>
+<div id="french_detachment_2" class="french small y2"></div>
+<div id="french_detachment_3" class="french small y3"></div>
+<div id="french_detachment_4" class="french small y4"></div>
+<div id="french_detachment_5" class="french small y5"></div>
+<div id="french_detachment_6" class="french small y6"></div>
+
+<div id="anglo_detachment_1" class="anglo small y1"></div>
+<div id="anglo_detachment_2" class="anglo small y2"></div>
+<div id="anglo_detachment_3" class="anglo small y3"></div>
+<div id="anglo_detachment_4" class="anglo small y4"></div>
+
+<div id="prussian_detachment_1" class="prussian small y1"></div>
+<div id="prussian_detachment_2" class="prussian small y2"></div>
+<div id="prussian_detachment_3" class="prussian small y3"></div>
+<div id="prussian_detachment_4" class="prussian small y4"></div>
+<div id="prussian_detachment_5" class="prussian small y5"></div>
+<div id="prussian_detachment_6" class="prussian small y6"></div>
+
+</div>
+</div>
+</div>
+</main>
+
+<footer id="status"></footer>
+
+</body>