<!DOCTYPE html>
<!-- vim:set nowrap: -->
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta charset="utf-8">
<title>ROMMEL</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/common/play.css">
<script defer src="/common/play.js"></script>
<script defer src="data.js"></script>
<script defer src="play.js"></script>
<style>
main { background-color: dimgray; }
#roles { background-color: silver; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#role_Axis .role_name { background-color: darkseagreen; }
#role_Allied .role_name { background-color: tan; }
#turn_info { background-color: gainsboro; }
.role_supply { float: right; }
#log { background-color: ghostwhite; }
#log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h3 { background-color: lavender; padding-top:2px; padding-bottom:2px; text-align: center; }
#log > .i { padding-left: 20px; }
#log > .ii { padding-left: 32px; }
#log > div > .i { padding-left: 12px; }
.action {
cursor: pointer;
}
#log {
font-variant-numeric: tabular-nums;
}
/* CARDS */
.hand {
margin: 24px;
display: flex;
flex-wrap: wrap;
justify-content: center;
min-height: 170px;
max-width: 2672px;
gap: 20px;
}
.card {
background-size: cover;
background-repeat: no-repeat;
background-color: ivory;
width: 124px;
height: 170px;
border-radius: 8px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
transition: 100ms;
}
.card.real {
background-image: url(card_real.svg);
}
.card.dummy {
background-image: url(card_dummy.svg);
}
.card.action:hover {
transform: scale(1.1);
}
/* BATTLE DIALOG */
#battle { background-color: #d6c4a9; background: url(texture_clear.png); }
#battle_header { background-color: brown; color: gold }
#battle_hits { background-color: #c4ab8b; }
#battle_buttons { background-color: #c4ab8b; }
#battle_message { background-color: #d6c4a9; }
#battle {
position: fixed;
min-width: 524px; /* 6 blocks wide */
left: 12px;
top: 56px;
z-index: 100;
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
border: 1px solid black;
user-select: none;
}
#battle_header {
cursor: move;
padding: 2px 8px;
line-height: 24px;
min-height: 24px;
text-align: center;
font-weight: bold;
border-bottom: 1px solid black;
}
#battle_message {
padding: 2px 8px;
line-height: 24px;
min-height: 24px;
text-align: center;
border-top: 1px solid black;
}
#battle_hits {
padding: 4px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
border-bottom: 1px solid black;
}
#battle_hits .hits_text {
width: 24px;
}
#battle_hits .hits_icon {
display: block;
vertical-align: middle
}
.battle_line {
margin: 24px;
min-height: 60px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
#battle_buttons {
padding: 12px;
min-height: 28px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
border-top: 1px solid black;
}
/* PURSUIT FIRE DIALOG */
#pursuit { background-color: #d6c4a9; background: url(texture_mountain.png); }
#pursuit_header { background-color: brown; color: gold }
#pursuit_hits { background-color: #c4ab8b; }
#pursuit_buttons { background-color: #c4ab8b; }
#pursuit_message { background-color: #d6c4a9; }
#pursuit {
position: fixed;
min-width: 524px; /* 6 blocks wide */
left: 12px;
top: 56px;
z-index: 100;
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
border: 1px solid black;
user-select: none;
}
#pursuit_header {
cursor: move;
padding: 2px 8px;
line-height: 24px;
min-height: 24px;
text-align: center;
font-weight: bold;
border-bottom: 1px solid black;
}
#pursuit_hits {
padding: 4px;
text-align: center;
border-bottom: 1px solid black;
}
#pursuit_message {
padding: 2px 8px;
line-height: 24px;
min-height: 24px;
text-align: center;
border-top: 1px solid black;
}
#pursuit_buttons {
padding: 12px;
min-height: 28px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
border-top: 1px solid black;
}
/* TABLES */
table { border-collapse: collapse; font-size: 12px; user-select: none; }
td.blank { background-color: transparent; border: none }
td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; }
td { min-width: 16px; }
th { background-color: #222; color: oldlace; }
td { background-color: oldlace; }
table .required_target { background-color: #b8d9ca }
table .must_fire_first { background-color: #f7dc68 }
table .only_unsupported { background-color: #f0b0af }
td span { padding: 0 4px }
td img { vertical-align: middle }
/* MAP */
#mapwrap {
width: 2672px;
height: 960px;
box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
}
#map {
background-repeat: no-repeat;
width: 2672px;
height: 960px;
overflow: clip;
}
#mapsvg {
display: block;
position: absolute;
user-select: none;
}
#calendar {
user-select: none;
position: absolute;
display: flex;
top: 24px;
left: 1840px;
gap: 9px;
}
#calendar2 {
display: flex;
user-select: none;
position: absolute;
top: 24px;
left: 1840px;
gap: 9px;
}
.month {
visibility: hidden;
width: 68px;
height: 68px;
background-color: #fee0bf;
background-color: wheat;
color: black;
font-size: 40px;
line-height: 68px;
font-weight: bold;
text-align: center;
border: 2px solid #231f20;
color: #231f20;
}
.month.show {
visibility: visible;
}
.month.now {
background-color: tan;
}
/* MAP */
svg .fortress {
fill: indianred;
stroke: saddlebrown;
}
svg .fortress.axis {
fill: seagreen;
stroke: darkgreen;
}
svg .side {
stroke-linecap: round;
stroke-width: 4;
}
svg .hex {
stroke-width: 2;
}
svg .hex.exit {
fill: black;
fill-opacity: 0.125;
}
svg .hex.refit.action {
stroke: lightskyblue;
}
svg .hex.action {
stroke: ivory;
stroke-dasharray: 2 2;
stroke-dashoffset: 1;
}
svg .hex.action.forced_march {
stroke: crimson;
}
svg .hex.selected {
stroke: yellow;
stroke-dasharray: none;
}
svg .hex.tip {
stroke: yellow;
stroke-width: 3;
stroke-dasharray: 4 4;
}
/* HEX CONTROL */
svg .side.axis_control {
stroke: seagreen;
stroke-dasharray: 54 100;
stroke-dashoffset: -8;
}
svg .side.allied_control {
stroke: firebrick;
stroke-dasharray: 54 100;
stroke-dashoffset: -8;
}
body.Allied svg .side.axis_control { stroke: black; }
body.Allied svg .side.allied_control { stroke: none; }
body.Axis svg .side.axis_control { stroke: none; }
body.Axis svg .side.allied_control { stroke: black; }
/* SUPPLY LINES */
svg .hex.axis_supply {
fill: seagreen;
fill-opacity: 0.4;
}
svg .hex.allied_supply {
fill: firebrick;
fill-opacity: 0.4;
}
svg .hex.axis_supply.allied_supply {
fill: darkgoldenrod;
fill-opacity: 0.4;
}
svg #lines line {
pointer-events: none;
stroke: none;
stroke-width: 6px;
stroke-linecap: round;
}
svg #lines line.axis_supply {
stroke: darkslategray;
stroke-opacity: 0.6;
}
svg #lines line.allied_supply {
stroke: darkred;
stroke-opacity: 0.6;
}
svg #lines line.axis_supply.allied_supply {
stroke: darkorange;
stroke-opacity: 0.6;
}
/* UNITS */
.minefield {
position: absolute;
pointer-events: none;
width: 48px;
height: 48px;
background-image: url(minefield.svg);
opacity: 0.5;
}
#map .unit {
position: absolute;
}
.unit {
width: 51px;
height: 51px;
border-width: 4px;
}
.unit.m {
width: 42px;
height: 42px;
border-width: 4px;
}
.unit.s {
width: 34px;
height: 34px;
border-width: 3px;
}
.unit {
background-size: 1000%;
background-repeat: no-repeat;
border-style: solid;
transition: top 200ms, left 200ms, transform 200ms;
}
.unit.revealed {
background-image: url(units.svg);
}
#mapwrap.fit .unit.revealed {
background-image: url(units-simple.svg);
}
.unit.axis {
background-color: #9aa880;
border-color: #899572;
box-shadow: 0 0 2px 1px #2d292c80;
}
.unit.allied {
background-color: #cebc9a;
border-color: #b7a889;
box-shadow: 0 0 2px 1px #5c3a1e80;
}
/*
.unit.axis {
background-color: gray;
border-color: dimgray;
box-shadow: 0 0 2px 1px #2226;
}
.unit.allied {
background-color: indianred;
border-color: brown;
background-color: #a85;
border-color: #642;
box-shadow: 0 0 2px 1px #4116;
}
*/
.unit.axis.revealed {
background-color: #abba8e;
}
.unit.axis.italian.revealed {
background-color: #f9e3b3;
}
.unit.allied.revealed {
background-color: #e4d1ab;
}
.unit.action {
box-shadow: 0 0 0 2px white;
}
.unit.action.hit {
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}
.unit.selected {
box-shadow: 0 0 0 2px yellow;
}
.unit.moved {
//border-color: black;
//background-color: silver;
filter: grayscale(50%)
}
.unit.disrupted {
border-color: #222;
}
.unit.disrupted:not(.revealed) {
background-image: url(disrupted.svg);
background-size: 75%;
background-position: center;
}
.unit.unsupplied {
border-color: royalblue;
}
.unit.unsupplied:not(.revealed) {
background-image: url(unsupplied.svg);
background-size: 75%;
background-position: center;
}
.unit.disrupted.unsupplied {
border-color: #222 royalblue;
}
.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 {
border-color: royalblue #222;
}
.unit.disrupted.unsupplied:not(.revealed) {
background-image: url(unsupplied.svg), url(disrupted.svg);
background-size: 50%, 50%;
background-position: 0% 90%, 90% 10%;
}
.unit.r0 { transform: rotate(0deg); }
.unit.r1 { transform: rotate(-90deg); }
.unit.r2 { transform: rotate(-180deg); }
.unit.r3 { transform: rotate(-270deg); }
.unit.r0.hit1 { transform: rotate(-15deg); }
.unit.r1.hit1 { transform: rotate(-105deg); }
.unit.r2.hit1 { transform: rotate(-195deg); }
.unit.r3.hit1 { transform: rotate(-285deg); }
.unit.r0.hit2 { transform: rotate(-30deg); }
.unit.r1.hit2 { transform: rotate(-120deg); }
.unit.r2.hit2 { transform: rotate(-210deg); }
.unit.r3.hit2 { transform: rotate(-300deg); }
.unit.r0.hit3 { transform: rotate(-45deg); }
.unit.r1.hit3 { transform: rotate(-135deg); }
.unit.r2.hit3 { transform: rotate(-225deg); }
.unit.r3.hit3 { transform: rotate(-315deg); }
.unit.u0{background-position:0% 0%}
.unit.u1{background-position:11.11111111111111% 0%}
.unit.u2{background-position:22.22222222222222% 0%}
.unit.u3{background-position:33.33333333333333% 0%}
.unit.u4{background-position:44.44444444444444% 0%}
.unit.u5{background-position:55.55555555555556% 0%}
.unit.u6{background-position:66.66666666666666% 0%}
.unit.u7{background-position:77.77777777777777% 0%}
.unit.u8{background-position:88.88888888888889% 0%}
.unit.u9{background-position:100% 0%}
.unit.u10{background-position:0% 11.11111111111111%}
.unit.u11{background-position:11.11111111111111% 11.11111111111111%}
.unit.u12{background-position:22.22222222222222% 11.11111111111111%}
.unit.u13{background-position:33.33333333333333% 11.11111111111111%}
.unit.u14{background-position:44.44444444444444% 11.11111111111111%}
.unit.u15{background-position:55.55555555555556% 11.11111111111111%}
.unit.u16{background-position:66.66666666666666% 11.11111111111111%}
.unit.u17{background-position:77.77777777777777% 11.11111111111111%}
.unit.u18{background-position:88.88888888888889% 11.11111111111111%}
.unit.u19{background-position:100% 11.11111111111111%}
.unit.u20{background-position:0% 22.22222222222222%}
.unit.u21{background-position:11.11111111111111% 22.22222222222222%}
.unit.u22{background-position:22.22222222222222% 22.22222222222222%}
.unit.u23{background-position:33.33333333333333% 22.22222222222222%}
.unit.u24{background-position:44.44444444444444% 22.22222222222222%}
.unit.u25{background-position:55.55555555555556% 22.22222222222222%}
.unit.u26{background-position:66.66666666666666% 22.22222222222222%}
.unit.u27{background-position:77.77777777777777% 22.22222222222222%}
.unit.u28{background-position:88.88888888888889% 22.22222222222222%}
.unit.u29{background-position:100% 22.22222222222222%}
.unit.u30{background-position:0% 33.33333333333333%}
.unit.u31{background-position:11.11111111111111% 33.33333333333333%}
.unit.u32{background-position:22.22222222222222% 33.33333333333333%}
.unit.u33{background-position:33.33333333333333% 33.33333333333333%}
.unit.u34{background-position:44.44444444444444% 33.33333333333333%}
.unit.u35{background-position:55.55555555555556% 33.33333333333333%}
.unit.u36{background-position:66.66666666666666% 33.33333333333333%}
.unit.u37{background-position:77.77777777777777% 33.33333333333333%}
.unit.u38{background-position:88.88888888888889% 33.33333333333333%}
.unit.u39{background-position:100% 33.33333333333333%}
.unit.u40{background-position:0% 44.44444444444444%}
.unit.u41{background-position:11.11111111111111% 44.44444444444444%}
.unit.u42{background-position:22.22222222222222% 44.44444444444444%}
.unit.u43{background-position:33.33333333333333% 44.44444444444444%}
.unit.u44{background-position:44.44444444444444% 44.44444444444444%}
.unit.u45{background-position:55.55555555555556% 44.44444444444444%}
.unit.u46{background-position:66.66666666666666% 44.44444444444444%}
.unit.u47{background-position:77.77777777777777% 44.44444444444444%}
.unit.u48{background-position:88.88888888888889% 44.44444444444444%}
.unit.u49{background-position:100% 44.44444444444444%}
.unit.u50{background-position:0% 55.55555555555556%}
.unit.u51{background-position:11.11111111111111% 55.55555555555556%}
.unit.u52{background-position:22.22222222222222% 55.55555555555556%}
.unit.u53{background-position:33.33333333333333% 55.55555555555556%}
.unit.u54{background-position:44.44444444444444% 55.55555555555556%}
.unit.u55{background-position:55.55555555555556% 55.55555555555556%}
.unit.u56{background-position:66.66666666666666% 55.55555555555556%}
.unit.u57{background-position:77.77777777777777% 55.55555555555556%}
.unit.u58{background-position:88.88888888888889% 55.55555555555556%}
.unit.u59{background-position:100% 55.55555555555556%}
.unit.u60{background-position:0% 66.66666666666666%}
.unit.u61{background-position:11.11111111111111% 66.66666666666666%}
.unit.u62{background-position:22.22222222222222% 66.66666666666666%}
.unit.u63{background-position:33.33333333333333% 66.66666666666666%}
.unit.u64{background-position:44.44444444444444% 66.66666666666666%}
.unit.u65{background-position:55.55555555555556% 66.66666666666666%}
.unit.u66{background-position:66.66666666666666% 66.66666666666666%}
.unit.u67{background-position:77.77777777777777% 66.66666666666666%}
.unit.u68{background-position:88.88888888888889% 66.66666666666666%}
.unit.u69{background-position:100% 66.66666666666666%}
.unit.u70{background-position:0% 77.77777777777777%}
.unit.u71{background-position:11.11111111111111% 77.77777777777777%}
.unit.u72{background-position:22.22222222222222% 77.77777777777777%}
.unit.u73{background-position:33.33333333333333% 77.77777777777777%}
.unit.u74{background-position:44.44444444444444% 77.77777777777777%}
.unit.u75{background-position:55.55555555555556% 77.77777777777777%}
.unit.u76{background-position:66.66666666666666% 77.77777777777777%}
.unit.u77{background-position:77.77777777777777% 77.77777777777777%}
.unit.u78{background-position:88.88888888888889% 77.77777777777777%}
.unit.u79{background-position:100% 77.77777777777777%}
.unit.u80{background-position:0% 88.88888888888889%}
.unit.u81{background-position:11.11111111111111% 88.88888888888889%}
.unit.u82{background-position:22.22222222222222% 88.88888888888889%}
.unit.u83{background-position:33.33333333333333% 88.88888888888889%}
.unit.u84{background-position:44.44444444444444% 88.88888888888889%}
.unit.u85{background-position:55.55555555555556% 88.88888888888889%}
.unit.u86{background-position:66.66666666666666% 88.88888888888889%}
.unit.u87{background-position:77.77777777777777% 88.88888888888889%}
.unit.u88{background-position:88.88888888888889% 88.88888888888889%}
.unit.u89{background-position:100% 88.88888888888889%}
.unit.u90{background-position:0% 100%}
.unit.u91{background-position:11.11111111111111% 100%}
.unit.u92{background-position:22.22222222222222% 100%}
.unit.u93{background-position:33.33333333333333% 100%}
</style>
</head>
<body>
<div id="battle" class="hide">
<div id="battle_header"></div>
<div id="battle_hits">
<img class="hits_icon" src="icons/armor.svg">
<div class="hits_text" id="hits_armor">0</div>
<img class="hits_icon" src="icons/infantry.svg">
<div class="hits_text" id="hits_infantry">0</div>
<img class="hits_icon" src="icons/motorized_antitank_old.svg">
<div class="hits_text" id="hits_antitank">0</div>
<img class="hits_icon" src="icons/artillery.svg">
<div class="hits_text" id="hits_artillery">0</div>
</div>
<div class="battle_line" id="battle_line_1"></div>
<div class="battle_line" id="battle_line_2"></div>
<div class="battle_line" id="battle_line_3"></div>
<div class="battle_line" id="battle_line_4"></div>
<div id="battle_buttons">
<button id="battle_armor_button" onclick="send_action('armor')">Armor</button>
<button id="battle_infantry_button" onclick="send_action('infantry')">Infantry</button>
<button id="battle_antitank_button" onclick="send_action('antitank')">Anti-tank</button>
<button id="battle_artillery_button" onclick="send_action('artillery')">Artillery</button>
<button id="battle_end_hits_button" onclick="send_action('end_hits')">Done</button>
<button id="battle_end_fire_button" onclick="send_action('end_fire')">Done</button>
</div>
<div id="battle_message"></div>
</div>
<div id="pursuit" class="hide">
<div id="pursuit_header">Pursuit Fire: $NAME</div>
<div id="pursuit_hits">0 hits</div>
<div class="battle_line" id="pursuit_line_1"></div>
<div class="battle_line" id="pursuit_line_2"></div>
<div id="pursuit_buttons">
<button id="pursuit_end_hits_button" onclick="send_action('end_hits')">Done</button>
<button id="pursuit_end_fire_button" onclick="send_action('end_fire')">End fire</button>
</div>
<div id="pursuit_message"></div>
</div>
<header>
<div id="toolbar">
<div class="menu">
<div class="menu_title"><img src="/images/cog.svg"></div>
<div class="menu_popup">
<div class="menu_item" onclick="window.open('info/rules.html', '_blank')">Rules</div>
<div class="menu_item" onclick="window.open('info/units.html', '_blank')">Units</div>
<div class="resign menu_separator"></div>
<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
<div class="debug menu_separator"></div>
<div class="debug menu_item" onclick="send_save()">🐞 Save</div>
<div class="debug menu_item" onclick="send_restore()">🐞 Restore</div>
<div class="debug menu_item" onclick="send_restart('1940')">⚠ Restart 1940</div>
<div class="debug menu_item" onclick="send_restart('1941')">⚠ Restart 1941</div>
<div class="debug menu_item" onclick="send_restart('1942')">⚠ Restart 1942</div>
<div class="debug menu_item" onclick="send_restart('Crusader')">⚠ Restart Crusader</div>
<div class="debug menu_item" onclick="send_restart('Battleaxe')">⚠ Restart Battleaxe</div>
<div class="debug menu_item" onclick="send_restart('Gazala')">⚠ Restart Gazala</div>
<div class="debug menu_item" onclick="send_restart('Pursuit to Alamein')">⚠ Restart Alamein</div>
<div class="debug menu_item" onclick="send_restart('1941-42')">⚠ Restart 1941-42</div>
</div>
</div>
<div class="icon_button" onclick="toggle_supply()"><img src="/images/oil-drum.svg"></div>
<div class="icon_button" onclick="toggle_units()"><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_Axis">
<div class="role_name">
Axis
<div class="role_supply" id="axis_supply">0</div>
<div class="role_user">-</div>
</div>
</div>
<div class="role" id="role_Allied">
<div class="role_name">
Allied
<div class="role_supply" id="allied_supply">0</div>
<div class="role_user">-</div>
</div>
</div>
<div id="turn_info">1940</div>
</div>
<div id="log"></div>
</aside>
<main>
<div id="mapwrap">
<div id="map">
<!-- BEGIN INSERT MAP FILE -->
<svg id="mapsvg" xmlns="http://www.w3.org/2000/svg" width="2672" height="984">
<path fill="#5d8ec1" d="M0 0h2672v988H0z"/>
<path fill="#d6c4a9" d="M551 30c-35 15-67 40-107 45-34 12-59 39-92 52-44 24-82 58-121 89-25 18-49 40-64 67-12 27-33 52-33 81 6 51 16 98 41 144 15 24 15 53 26 78 0 43-32 72-61 99-45 26-90 70-144 63-25-14-15 15-17 31v238h2728V212c-28 3-48 16-78 13-18 27-45 12-60 31-17-3-47 24-71 30-32 19-72 24-106 3-29-18-64-8-95-18-30 5-61 11-93 19-24 4-39-34-64-5-32 19-67-16-77-22-27 15-56-7-79-9-33 4-67 11-100 17-35 0-70-3-104-8-36-12-75-8-109 6-24 9-49 13-73 23-27 5-101 22-96-19 7-34-30-38-30-68 3-27-28-32-48-30-31-18-47 0-76-1-21-3-56 4-81-6-24-6-39 20-65 10-21-3-51 6-68-5-13-7-7-18-36-13-9-1-24 3-31 0-23-9-51-12-74 0-28 3-55 22-81 4-35-13 2 44-24 7-18 2-26-25-43-26-14 11-30-7-27-25 11 14 11-15-2-19 4-22-6-33-30-29-27-4-49-16-72-18-30-11-70-19-93-18-26 16-46 2-70-6Zm330 118c-7 5 13 8 0 0z"/>
<path fill="#aeae7b" d="M557 40c-34 11-63 40-102 38-30 8-52 38-83 49-13 11 1 27-4 39 25 22 6 59-21 72 4 37-22 59-28 90-17 10-51 43-9 37 23-21 62 10 79-3 8-28 44 30 52-6 17-17 49-15 56-42 29-16 66-3 95 6 25 33 26-24 36-39 2-26 56-67 67-31 25 11 53 6 76-8 30-17 40-55 26-84-1-22-17-53-46-48-2-18-18-18-18-36-23 5-39-10-49 0-17-13-46-19-70-27-10 4-36 43-31 13 25-15-16-20-26-20Zm92 24c11 0 2 3-6-1z"/>
<path fill="#939874" d="M120 734c-21 21 6 53 20 22 6-11-7-30-20-22zM235 743c-20 11-34 25-52 6-23 2-9 49 15 34 18 11 32-13 43-26 2-4 0-16-6-14ZM52 778c-5 29 4 60-4 92 19 2 37 10 57 17 15-4 40 5 46-14l31-22c18-11-24-19-28-1-25 22-51 16-77-1 7-21-6-45-8-65-9 6-11-2-17-6ZM415 840c-4 23 34 28 44 44 17 6 31-2 18-18-15 0-12-25-29-18-13 0-22-3-33-8Z"/>
<path fill="#c4ab8b" d="M2429 528c-37 4-68 31-101 3-38-4-76 20-99 48-25 3-40 8-42 35-24 26-70 27-101 27-36 27-17 70-19 105-17 11-34 13-53 23-1 22-12 46-4 68-16 35-57 25-73 58-2 18 11 35 6 55 19 20 44 29 68 38h160c28-9 3-42 32-50-21-35 51-54 5-80-2-29-4-58 30-68 29-21-30-34-45-45-12-23-6-33 16-47 11-29 56-6 58-46 13-27 56-13 53-43 2-30 29-34 51-48 24 3 52 24 68 0 27-20 46 13 59 17 36-41-45-46-69-50z"/>
</svg>
<!-- END INSERT MAP FILE -->
<div id="calendar">
<div class="month" id="month1">1</div>
<div class="month" id="month2">2</div>
<div class="month" id="month3">3</div>
<div class="month" id="month4">4</div>
<div class="month" id="month5">5</div>
<div class="month" id="month6">6</div>
<div class="month" id="month7">7</div>
<div class="month" id="month8">8</div>
<div class="month" id="month9">9</div>
<div class="month" id="month10">10</div>
</div>
<div id="calendar2">
<div class="month" id="month11">11</div>
<div class="month" id="month12">12</div>
<div class="month" id="month13">13</div>
<div class="month" id="month14">14</div>
<div class="month" id="month15">15</div>
<div class="month" id="month16">16</div>
<div class="month" id="month17">17</div>
<div class="month" id="month18">18</div>
<div class="month" id="month19">19</div>
<div class="month" id="month20">20</div>
</div>
<div id="minefields"></div>
<div id="units"></div>
<div style="position:absolute;bottom:20px;right:24px;display:flex;gap:20px;align-items:end;pointer-events:none">
<table>
<tr><th colspan="2">ROAD BONUS
<tr><td>Highway<td>+4
<tr><td>Track<td>+2
<tr><td>Trail<td>+1
</table>
<table>
<tr><th colspan="2">SUPPLY RANGE
<tr><td>Highway<td>∞
<tr><td>Track<td>3
<tr><td>Trail<td>2
<tr><td>No Road<td>1
</table>
<table>
<tr><th colspan="2">UNIT SPEED
<tr><td>
<img src="icons/recon.svg">
<td>4
<tr><td>
<img src="icons/armor.svg">
<img src="icons/mobile_antitank.svg">
<img src="icons/mechanized_infantry.svg">
<img src="icons/self_propelled_artillery.svg">
<td>3
<tr><td>
<img src="icons/motorized_infantry.svg">
<img src="icons/motorized_antitank_old.svg">
<td>2
<tr><td>
<img src="icons/infantry.svg">
<img src="icons/paratroopers.svg">
<img src="icons/artillery.svg">
<td>1
</table>
<table>
<tr><th colspan="2">HEXSIDE LIMIT
<tr><td>Mountain<br>Ridge<br>Marsh<td>0
<tr><td>Pass<td>1
<tr><td>Clear<td>2
</table>
<table>
<tr><th colspan="3">TURN OPTIONS
<tr><td>◐<td>Basic<td>MC
<tr><td>◐◐<td>Offensive<td>MMC
<tr><td>◐◐<td>Assault<td>MC*
<tr><td>◐◐◐<td>Blitz<td>MC+MC
<tr><td>No Cost<td>Pass<td>W
</table>
<table>
<tr><td class="blank" colspan="2"><th colspan="4">TARGET UNIT
<tr>
<td class="blank" colspan="2">
<td><img src="icons/armor.svg">
<td><img src="icons/infantry.svg">
<td><img src="icons/motorized_antitank_old.svg">
<td><img src="icons/artillery.svg">
<tr><th rowspan="4" style="writing-mode:vertical-lr;min-width:20px">FIRING UNIT
<td><img src="icons/armor.svg">
<td class="required_target">(SF)
<td>DF
<td>SF
<td class="only_unsupported">[TF]
<tr>
<td><img src="icons/infantry.svg">
<td>SF
<td class="required_target">(SF)
<td>SF
<td class="only_unsupported">[TF]
<tr>
<td><img src="icons/motorized_antitank_old.svg">
<td>DF
<td>SF
<td>SF
<td class="only_unsupported">[TF]
<tr>
<td><img src="icons/artillery.svg">
<td class="must_fire_first">SF*
<td class="must_fire_first">DF*
<td class="must_fire_first">DF*
<td class="must_fire_first">SF*
<!--
<tr><td colspan="6">
<span class="must_fire_first">(Must fire first)</span><br>
<span class="required_target">[Required target]</span><br>
<span class="only_unsupported">Only if unsupported*</span>
-->
</table>
<table>
<tr><th colspan="2">BP COSTS PER CV
<tr><td>
<img src="icons/armor.svg">
<img src="icons/motorized_antitank_old.svg">
<img src="icons/artillery.svg">
<td>3
<tr><td>
<img src="icons/motorized_infantry.svg">
<img src="icons/mechanized_infantry.svg">
<td>2
<tr><td>
<img src="icons/infantry.svg">
<td>1
<tr><td colspan="2"><i>Elite Units cost double</i>
<tr><td>Minefields<td>15
<tr><td>Supply Card<td>10
</table>
</div>
</div>
</div>
<div id="hand" class="hand">
</div>
</main>
<footer id="status"></footer>
</body>