<!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>ROMMEL</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="play.css">
<script defer src="/common/client.js"></script>
<script defer src="data.js"></script>
<script defer src="play.js"></script>
</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><a href="info/units.html" target="_blank">Units</a>
</menu>
</details>
<button onclick="toggle_supply()"><img src="/images/oil-drum.svg"></button>
<button onclick="toggle_units()"><img src="/images/earth-africa-europe.svg"></button>
</div>
</header>
<aside>
<div id="roles">
<div class="role" id="role_Axis">
<div class="role_name">Axis</div>
<div class="role_stat" id="axis_supply">0</div>
<div class="role_user">-</div>
</div>
<div class="role" id="role_Allied">
<div class="role_name">Allied</div>
<div class="role_stat" id="allied_supply">0</div>
<div class="role_user">-</div>
</div>
</div>
<div id="log"></div>
</aside>
<main data-min-zoom="1" data-max-zoom="2">
<details id="battle" class="hide">
<summary id="battle_header"></summary>
<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>
</details>
<details id="pursuit" class="hide">
<summary id="pursuit_header">Pursuit Fire: $NAME</summary>
<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>
</details>
<div id="mapwrap">
<div id="map">
<!-- BEGIN INSERT MAP FILE -->
<svg id="mapsvg" xmlns="http://www.w3.org/2000/svg" width="2672" height="984">
<style>
.hex.axis_control { fill: url(#axis_control_16) }
.hex.allied_control { fill: url(#allied_control_16) }
</style>
<defs>
<path id="land_path" d="M551 30c-4 1-10 0-12 5-5 0-9 3-13 6-4 5-9 9-15 11-5 3-10 7-16 7-8 1-13 6-20 9-5 2-11 2-17 3l-14 4-15 6c-4 1-8 4-11 7l-11 6c-5 2-8 5-11 9s-9 4-13 8-9 5-15 8c-5 3-12 3-16 8-5 4-12 6-17 9-7 3-10 10-17 12l-12 9c-5 4-10 9-16 12l-11 8c-12 6-20 17-29 25l-14 10c-2 4-7 4-10 7-4 2-8 3-11 8-2 4-8 6-10 11l-12 11c-2 4-7 6-10 10-6 4-7 12-11 17l-11 17-7 14c-4 5-1 11-5 16-6 10-16 18-17 30 0 8 4 14 7 20 3 10 0 21 0 32s0 25 8 34c4 5 10 9 9 16-2 6-1 13 1 18 5 11 13 20 17 32l14 33c2 8 4 16 4 25 1 6 3 13 7 17 5 8 1 17-1 25l-5 19c-2 7-7 14-11 20-4 4-10 5-13 10-4 6-8 12-14 16-7 7-13 14-21 20-6 4-13 8-18 13-10 8-23 10-34 17-7 3-13 7-18 13-8 7-21 6-30 11-5 3-10 7-16 7-6 2-11-1-16-2l-23-5v273h2728V212l-27 4c-1 8-10 4-15 7-10 2-19 0-29 1-4 0-10 1-13 5-4 7-9 16-19 16-5 1-8-2-9-6-5 1-5 8-10 8-4 1-10 0-11 3 3-1 4 3 1 3-3 1-11 6-8-1l-13 7c-4 3-9 4-13 6-3 5-9 4-14 7-5 4-11 7-18 9l-19 8c-6 2-13 6-18 10-9-2-17 4-26 5-18 0-35-6-51-14l-22-10c-5 0-10-3-16-2-5 1-9 1-13-1-5-3-11-4-16-2-6 2-11 1-16 0s-11 0-15-4c-5-4-13-4-18 1l-14 7c-5 3-11 6-17 3-5-5-12-3-18 0-6 2-12 4-19 4-4 3-9 6-15 6-5 1-11-1-13-7-4-3-6-8-9-11-5-3-10 0-14 2-5 2-11 0-14 5-3 4-9 4-14 5-5-1-10-2-14 1-5 2-11 5-16 2-4-3-7-6-12-5-6 1-11-2-14-7s-10-9-6-15c1-6-6-3-7 1-4 5-10 7-16 6-9 0-19 2-26-4-2-5-6-10-12-8l-22 3c0-5-5-8-10-7s-9 5-15 5c-5 1-11 3-17 2l-14 2c-5-2-11 0-15 3-6 4-12 3-18 4l-18 3c-11 1-22-1-33-2-8-1-16-4-24-1-10 1-19-4-29-4l-20-3-18-5c-8-3-17 0-25-1-8-2-15 3-22 2-11-1-20 7-30 9l-15 4c-4 4-10 5-16 6l-23 5c-4 2-9 3-13 6l-14 4c-7 2-15 4-22 4-6 0-12 2-17 3-9 2-18-1-27-1s-19 0-26-6c-3-2-2-6-6-6 7-2-2-9 2-13-2-3-2-7-3-11v-12c-3-2 2-5-1-8-1-7-9-9-15-11-4-1-9-5-9-10-3-5-2-10-2-16l-2-15c-3-3-5-8-9-10l-14-4c-5-3-10 1-15 0-6 2-10-3-15-4-7-1-14 1-19-3-4-3-7-6-12-6-6-1-5 10-12 7-3 1-4 8-6 3-3-2-6 1-8 1s-4 2-6 1c-4 2-9-5-11 1-1-4-4-6-8-4-3 2-7 0-10 0-4 5-7-1-11 2-9 2-17-2-25-1-6 2-10-2-14-5-5-3-11 4-14-3-4-1-9 0-13 3-4 0-5 6-10 7-3-1-4 1-4 4-4 0-8-5-11 0-3 1-6-3-6 1-3-2-10 1-15-2-5-1-11-2-17-1-4 2-9 1-14 2l-20-1-14-2c0-2-6 0-3-3h-2l-3-2c-4 3-12-6-4-6 3 2 5-3 1-4-3-2-6-2-9-2s-5 3-8 1c-4 2-7-2-11 0-2 2-3 1-4-1-3 0-3 4-6 1-2-3-3 2-6-1-1 3-3 1-5 2 0 1-3 2-3 0-1-3-6 4-4-1-1-3-2 0-3 0-4-4-8-2-12-3h-2c-2-4-7-3-11-4s-7-2-11-1-7-2-10 0l-12 2c-5 0-8 4-13 5-3 0-4 2-7 1h-1c-6 3-12 3-17 5-2 2-6 1-8 2-3 3-9-1-13 3-3 1-5-2-7 2-3 0-7 3-10 1-3 0-4-3-8-4-4-2-10-2-13-5l-11 1c-3 0-8-3-9 2l6 7c-3 4 9 11 1 12-6 0-8-7-9-11-1-7-8-4-11-3l-10-11-6-6c1-2-2-4-4-5-3 0-6-4-9-2-2 1-3 0-4-2 0-4-5 2-9 0-4-1-1 1-1 4-2 0-9-4-4-3 0-2-7-1-8-4-3-3-5-6-6-10s2-9-2-11c-1-3 6-3 4 1 0 1 3 4 5 3v-4c-4-3 4-1 2-4-3-2 1-7-2-9-2 0-4 0-2-2-4 1-4-5-7-6-3-3-1-8-4-13 2-2 5-3 3-7 2-2-1-6-3-6h-1c-1 2 0-2-3-1-4 1-8-4-11-2-3 0-3 3-6 0-3 1-7-1-10-1-5 0-9-2-13-3-4 0-7-2-11-3-3-3-7-5-11-2-4 0-7-3-11-4-3-1-8 1-7-4-3 2-4-3-6 0-6 2-10-2-14-5-5 2-12 1-15-4-6-1-11-5-18-6-4-1-7 2-11 0-6 2-11 3-17 2-3-1-9 0-10-5 2-6-5-8-9-6-4 4-9 7-15 8l-10 4-13 1c-4 0-10 0-13-3 0-5-5-7-9-6-5 2-9 1-12-3l-5-2zm330 118c-6 0 2 7 4 6-1-2 0-6-4-6z" />
<clipPath id="land_clip">
<use href="#land_path"/>
</clipPath>
<pattern id="axis_control_12" width="12" height="12" patternUnits="userSpaceOnUse">
<path stroke="forestgreen" stroke-opacity="0.4" stroke-width="4" stroke-linecap="butt"
d="M-12,-12l24,24M0,-12l24,24M-12,0l24,24"/>
</pattern>
<pattern id="allied_control_12" width="12" height="12" patternUnits="userSpaceOnUse">
<path stroke="firebrick" stroke-opacity="0.4" stroke-width="4" stroke-linecap="butt"
d="M-12,24l24,-24M0,24l24,-24M-12,12l24,-24"
/>
</pattern>
<pattern id="axis_control_16" width="16" height="16" patternUnits="userSpaceOnUse">
<path stroke="forestgreen" stroke-opacity="0.4" stroke-width="5" stroke-linecap="butt"
d="M-16,-16l32,32M0,-16l32,32M-16,0l32,32"/>
</pattern>
<pattern id="allied_control_16" width="16" height="16" patternUnits="userSpaceOnUse">
<path stroke="firebrick" stroke-opacity="0.4" stroke-width="5" stroke-linecap="butt"
d="M-16,32l32,-32M0,32l32,-32M-16,16l32,-32"
/>
</pattern>
</defs>
<path id="grid" clip-path="url(#land_clip)"
stroke="#000"
stroke-width="2"
stroke-opacity="0.125"
x-stroke-dasharray="20 30 99"
/>
<g id="fortresses" fill="#642" stroke="darkgoldenrod" stroke-width="3" stroke-linejoin="round">
<path class="fortress" id="fortress_benghazi" d="M170 295l-8.974-15.543 8.974-15.544h17.95l8.973 15.544-8.973 15.543z" />
<path class="fortress" id="fortress_tobruk" d="M1095 181l-8.974-15.543 8.974-15.544h17.95l8.973 15.544-8.973 15.543z" />
<path class="fortress" id="fortress_bardia" d="M1458 223l-8.975-15.543 8.975-15.543h17.95l8.972 15.543-8.972 15.543z" />
</g>
<g font-family="Source Sans" font-weight="bold" fill="cornsilk">
<text text-anchor="middle" font-size="20" x="179" y="286">2</text>
<text text-anchor="middle" font-size="20" x="1104" y="172">5</text>
<text text-anchor="middle" font-size="20" x="1467" y="214">2</text>
</g>
<g id="hexes" fill="transparent" stroke="transparent"></g>
<g id="sides"></g>
<g id="lines"></g>
</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">
<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" title="Recon">
<td>4
<tr><td>
<img src="icons/armor.svg" title="Armor">
<img src="icons/mobile_antitank.svg" title="Mobile Anti-tank">
<img src="icons/mechanized_infantry.svg" title="Mechanized Infantry">
<img src="icons/self_propelled_artillery.svg" title="Self-propelled Artillery">
<td>3
<tr><td>
<img src="icons/motorized_infantry.svg" title="Motorized Infantry">
<img src="icons/motorized_antitank_old.svg" title="Motorized Anti-tank">
<td>2
<tr><td>
<img src="icons/infantry.svg" title="Infantry">
<img src="icons/paratroopers.svg" title="Paratroopers">
<img src="icons/artillery.svg" title="Artillery">
<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><td class="blank" colspan="2"><th colspan="4">TARGET UNIT
<tr>
<td class="blank" colspan="2">
<td><img src="icons/armor.svg" title="Armor">
<td><img src="icons/infantry.svg" title="Infantry">
<td><img src="icons/motorized_antitank_old.svg" title="Anti-tank">
<td><img src="icons/artillery.svg" title="Artillery">
<tr><th rowspan="4" style="writing-mode:vertical-lr;min-width:20px">FIRING UNIT
<td><img src="icons/armor.svg" title="Armor">
<td class="required_target" title="Required target">(SF)
<td>DF
<td>SF
<td class="only_unsupported" title="Only if unsupported">[TF]
<tr>
<td><img src="icons/infantry.svg" title="Infantry">
<td>SF
<td class="required_target" title="Required target">(SF)
<td>DF
<td class="only_unsupported" title="Only if unsupported">[TF]
<tr>
<td><img src="icons/motorized_antitank_old.svg" title="Anti-tank">
<td>DF
<td>SF
<td>SF
<td class="only_unsupported" title="Only if unsupported">[TF]
<tr title="Must fire first">
<td><img src="icons/artillery.svg" title="Artillery">
<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" title="Armor">
<img src="icons/motorized_antitank_old.svg" title="Anti-tank">
<img src="icons/artillery.svg" title="Artillery">
<td>3
<tr><td>
<img src="icons/motorized_infantry.svg" title="Motorized Infantry">
<img src="icons/mechanized_infantry.svg" title="Mechanized Infantry">
<td>2
<tr><td>
<img src="icons/infantry.svg" title="Unmotorized Infantry">
<td>1
<!--
<tr><td colspan="2"><i>Elite Units cost double</i>
-->
<tr><td>Minefields<td>15
<tr><td>Supply Card<td>10
</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>
</div>
</div>
</div>
<div id="hand" class="hand"></div>
</main>
<footer id="status"></footer>
</body>