<!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="data.js"></script>
<script defer src="play.js"></script>
</head>
<style>
main {
background-color: dimgray;
}
#mapwrap {
margin: 0 auto;
width: 2550px;
height: 1900px;
}
#map {
position: absolute;
width: 2550px;
height: 1900px;
}
#board, #tracks, #hexes, #pieces {
position: absolute;
}
#board {
top: 0px;
left: 0px;
width: 2550px;
height: 1650px;
background-color: #803a3b;
background-image: url(map75.png);
background-size: 2550px 1650px;
box-shadow: 0 0 8px #0008;
}
#tracks {
top: 1650px;
left: 0px;
width: 600px;
height: 250px;
background-color: #d0c5b1;
background-size: 600px 250px;
background-image: url(tracks75.png);
box-shadow: 0 0 8px #0008;
}
#hexes, #pieces { position: absolute }
.hex {
box-sizing: border-box;
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
}
.hex.town { background-color: #F006; }
.hex.stream { background-color: #00F6; }
.hex.town.stream { background-color: #F0F6; }
.hex.action {
border: 4px solid #fff6;
background-color: #fff2;
box-shadow: 0 0 3px #0008;
z-index: 100;
}
.hex.action.stop {
background-color: #f002;
}
.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;
}
.small {
position: absolute;
background-size: 68px auto;
width: 34px;
height: 34px;
}
.large, .small {
transition-property: top, left;
transition-duration: 500ms;
transition-timing-function: ease;
border-width: 2px;
border-style: solid;
box-shadow: 0 0 0 1px #444, 0 0 4px #0008;
}
.large.action, .small.action {
box-shadow: 0 0 0 1px #444, 0 0 0 4px white;
}
.large.selected, .small.selected {
box-shadow: 0 0 0 1px #444, 0 0 0 4px yellow;
}
.large.target, .small.target {
box-shadow: 0 0 0 1px #444, 0 0 0 4px red;
}
.marker { border-color: hsl(199,65%,85%) hsl(199,55%,50%) hsl(199,55%,50%) hsl(199,65%,85%) }
.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) }
.large.marker { background-image: url(sheet_misc_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) }
.large.marker { background-image: url(sheet_misc_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>
</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="board"></div>
<div id="tracks"></div>
<div id="hexes"></div>
<div id="pieces">
<div id="marker_turn" class="marker large y1" style="top:1660px;left:25px"></div>
<div id="marker_remain" class="marker large y3" style="top:1837px;left:109px"></div>
<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>