<!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>ALGERIA</title>
<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 }
#role_FLN .role_name { background-color: #C1E1C1;}
#role_Government .role_name { background-color: #BCDDFF;}
.role.active span { text-decoration: underline; }
.role_ap_text { color: #555; float: right; margin-right: 4px; }
.role_ap { float: right; margin-right: 8px;}
.role_psl_text { color: #555; float: right; margin-right: 4px;}
.role_psl { float: right; }
#log { background-color: whitesmoke; }
#log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; margin: 8px 0; text-align: center; }
#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
#log > .i { padding-left: 20px; }
#mapwrap {
width: 1500px;
height: 1101px;
/* width: 2705px;
height: 1985px; */
box-shadow: 0px 1px 10px #0008;
}
#map {
width: 1500px;
height: 1101px;
background-size: 1500px 1101px;
background-position: center;
background-image: url(map.svg);
}
/* #map div {
position: absolute;
transition-property: top, left;
transition-duration: 1s;
transition-timing-function: ease;
} */
/* SPACES */
.space{position:absolute;box-sizing:border-box;border:4px solid transparent}
.space.loc{border-radius:50%}
.space.action{border-color:lemonchiffon;}
.space.loc.action{border-color:lemonchiffon;}
.space.selected{border-color:yellow;}
.space.tip { border-color: white; }
.stack {
display: grid;
grid-gap: 0.1rem;
grid-template-columns: repeat(auto-fill, 2px);
transition: grid-template-columns 0.5s;
}
.stack:hover {
grid-template-columns: repeat(8, 36px);
}
.stack.m:hover {
grid-template-columns: repeat(8, 34px);
}
.stack.s:hover {
grid-template-columns: repeat(8, 24px);
}
.stack:hover div {
z-index: 100;
}
#tracker div {
box-sizing: border-box;
}
/* COUNTERS */
/* #map .counter {
position: absolute;
} */
.counter {
background-size: 1000%;
background-repeat: no-repeat;
border-style: solid;
/* transition: top 200ms, left 200ms, transform 200ms; */
}
.counter {
width: 39px;
height: 39px;
border-width: 2px;
border-radius: 8px;
background-image: url(counters.svg?v=6);
}
.counter.m {
width: 42px;
height: 42px;
border-width: 4px;
}
.counter.s {
width: 26px;
height: 26px;
border-width: 1px;
}
/* #mapwrap.fit .counter {
background-image: url(counters-simple.svg);
} */
.counter.action {
box-shadow: 0 0 0 2px grey;
}
.counter.selected {
box-shadow: 0 0 0 2px yellow;
}
.counter.turn_now{background-position:0% 0%}
.counter.fln_psl{background-position:11.11111111111111% 0%}
.counter.fln_ap{background-position:22.22222222222222% 0%}
.counter.gov_psl{background-position:33.33333333333333% 0%}
.counter.fln_control{background-position:44.44444444444444% 0%}
.counter.gov_control{background-position:55.55555555555556% 0%}
.counter.oas_active{background-position:66.66666666666666% 0%}
.counter.remote{background-position:77.77777777777777% 0%}
.counter.terror{background-position:88.88888888888889% 0%}
.counter.air_avail{background-position:0% 11.11111111111111%}
.counter.air_max{background-position:11.11111111111111% 11.11111111111111%}
.counter.helo_avail{background-position:22.22222222222222% 11.11111111111111%}
.counter.helo_max{background-position:33.33333333333333% 11.11111111111111%}
.counter.naval_pts{background-position:44.44444444444444% 11.11111111111111%}
.counter.border_zone{background-position:55.55555555555556% 11.11111111111111%}
.counter.border_zone_inactive{background-position:66.66666666666666% 11.11111111111111%}
.counter.fr_xx_2{background-position:0% 22.22222222222222%}
.counter.fr_xx_4{background-position:11.11111111111111% 22.22222222222222%}
.counter.fr_xx_9{background-position:22.22222222222222% 22.22222222222222%}
.counter.fr_xx_12{background-position:33.33333333333333% 22.22222222222222%}
.counter.fr_xx_13{background-position:44.44444444444444% 22.22222222222222%}
.counter.fr_xx_14{background-position:55.55555555555556% 22.22222222222222%}
.counter.fr_xx_19{background-position:66.66666666666666% 22.22222222222222%}
.counter.fr_xx_20{background-position:77.77777777777777% 22.22222222222222%}
.counter.fr_xx_21{background-position:88.88888888888889% 22.22222222222222%}
.counter.fr_xx_29{background-position:100% 22.22222222222222%}
.counter.fr_xx_27{background-position:0% 33.33333333333333%}
.counter.fr_xx_5{background-position:11.11111111111111% 33.33333333333333%}
.counter.fr_xx_7{background-position:22.22222222222222% 33.33333333333333%}
.counter.fr_xx_dispersed{background-position:33.33333333333333% 33.33333333333333%}
.counter.fr_x{background-position:44.44444444444444% 33.33333333333333%}
.counter.fr_x_airmobile{background-position:55.55555555555556% 33.33333333333333%}
.counter.fr_elite_x_para{background-position:0% 44.44444444444444%}
.counter.fr_elite_x_inf{background-position:11.11111111111111% 44.44444444444444%}
.counter.fr_elite_x_marine{background-position:22.22222222222222% 44.44444444444444%}
.counter.fr_elite_x_airmobile{background-position:33.33333333333333% 44.44444444444444%}
.counter.alg_x{background-position:44.44444444444444% 44.44444444444444%}
.counter.alg_x_airmobile{background-position:55.55555555555556% 44.44444444444444%}
.counter.alg_police{background-position:66.66666666666666% 44.44444444444444%}
/* .counter.alg_neut{background-position:77.77777777777777% 44.44444444444444%} */
.counter.fln_failek{background-position:0% 55.55555555555556%}
.counter.fln_band{background-position:11.11111111111111% 55.55555555555556%}
.counter.fln_cadre{background-position:22.22222222222222% 55.55555555555556%}
.counter.fln_front{background-position:33.33333333333333% 55.55555555555556%}
/* .counter.neut{background-position:44.44444444444444% 55.55555555555556%} */
.counter.neutralized {
background-color: rgba(255,255,255,0.6);
background-blend-mode: lighten;
border-color:grey;
}
.panel {
max-width: 900px;
margin: 36px auto;
background-color: #555;
}
.panel_header {
background-color: #444;
color: white;
user-select: none;
font-weight: bold;
text-align: center;
padding: 3px 1em;
}
.panel_body {
display: flex;
justify-content: start;
flex-wrap: wrap;
padding: 20px;
gap: 14px;
}
</style>
</head>
<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 of Play</a>
<a class="menu_item" href="info/charts.html" target="_blank">Charts & Tables</a>
<div class="resign menu_separator"></div>
<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
</div>
</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_FLN">
<div class="role_name"><span>FLN</span>
<div class="role_psl"></div>
<div class="role_psl_text">PSL</div>
<div class="role_ap"></div>
<div class="role_ap_text">AP</div>
<div class="role_user">-</div>
</div>
</div>
<div class="role" id="role_Government">
<div class="role_name"><span>Government</span>
<div class="role_psl"></div>
<div class="role_psl_text">PSL</div>
<div class="role_user">-</div>
</div>
</div>
</div>
<div id="log"></div>
</aside>
<main>
<div id="mapwrap" class="">
<div id="map">
<!-- scale 1.80333333333333333333 -->
<div id="tracker"></div>
<div id="drm"></div>
<div id="areas"></div>
<div id="area_markers"></div>
<div id="boxes"></div>
<div id="markers">
<div id="turn_now" class="counter turn_now"></div>
<div id="fln_psl" class="counter fln_psl"></div>
<div id="fln_ap" class="counter fln_ap"></div>
<div id="gov_psl" class="counter gov_psl"></div>
<div id="air_avail" class="counter air_avail"></div>
<div id="air_max" class="counter air_max"></div>
<div id="helo_avail" class="counter helo_avail"></div>
<div id="helo_max" class="counter helo_max"></div>
<div id="naval" class="counter naval_pts"></div>
<div id="border_zone" class="counter border_zone"></div>
</div>
<div id="units"></div>
</div>
</div>
<div id="gov_supply_panel" class="panel">
<div id="gov_supply_header" class="panel_header">Government Available Forces</div>
<div id="gov_supply" class="panel_body">
</div>
</div>
<div id="fln_supply_panel" class="panel">
<div id="fln_supply_header" class="panel_header">FLN Available Forces</div>
<div id="fln_supply" class="panel_body">
</div>
</div>
<div id="eliminated_panel" class="panel">
<div id="eliminated_header" class="panel_header">Eliminated</div>
<div id="eliminated" class="panel_body">
</div>
</div>
</main>
<footer id="status"></footer>
</body>