diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 269 |
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()">🐞 Save</div> + <div class="menu_item" onclick="send_restore()">🐞 Restore</div> + <div class="menu_separator"></div> + <div class="menu_item" onclick="send_restart('June 16-18')">⚠ 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> |