<!DOCTYPE html> <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>WATERLOO CAMPAIGN 1815</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/charts.html" target="_blank">Charts</a> </menu> </details> <button onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></button> <button onclick="toggle_hexes()"><img src="images/nested-hexagons.svg"></button> </div> </header> <aside> <div id="roles"> <div class="role" id="role_French"> <div class="role_name">French</div> <div class="role_stat"></div> <div class="role_user">-</div> </div> <div class="role" id="role_Coalition"> <div class="role_name">Coalition</div> <div class="role_stat"></div> <div class="role_user">-</div> </div> </div> <div id="log"></div> </aside> <main data-max-zoom="2"> <div id="map"> <div id="board"></div> <div id="tracks"></div> <div id="arrow" class="hide"></div> <div id="labels"> <div class="label river" style="left:828px;top:1530px;transform:rotate(-60deg)">SAMBRE</div> <div class="label river" style="left:1415px;top:1350px;transform:rotate(60deg)">SAMBRE</div> <div class="label river" style="left:1975px;top:1285px;transform:rotate(-30deg)">SAMBRE</div> <div class="label river" style="left:2405px;top:1210px;transform:rotate(-30deg)">MEUSE</div> <div class="label river" style="left:2230px;top:1430px;transform:rotate(60deg)">MEUSE</div> <div class="label caps" style="left:300px;top:1472px">Binche</div> <div class="label caps" style="left:1087px;top:1457px">Charleroi</div> <div class="label caps" style="left:2290px;top:1222px">Namur</div> <div class="label caps" style="left:650px;top:615px">Nivelles</div> <div class="label caps" style="left:122px;top:529px">Braine-<br>le-Comte</div> <div class="label caps" style="left:1476px;top:95px">Wavre</div> <div class="label" style="left:965px;top:1579px">Montigny-<br>le-Tilleul</div> <div class="label" style="left:1096px;top:1589px">Couillet</div> <div class="label" style="left:1217px;top:1594px">Bouffioulx</div> <div class="label" style="left:1017px;top:1538px">Marcinelle</div> <div class="label" style="left:1408px;top:1584px">Presles</div> <div class="label" style="left:1530px;top:1589px">Le Roux</div> <div class="label" style="left:1736px;top:1508px">Fosse</div> <div class="label" style="left:1931px;top:1390px">Floreffe</div> <div class="label" style="left:2084px;top:1334px">Malonne</div> <div class="label" style="left:2328px;top:1482px">Dave</div> <div class="label" style="left:2426px;top:1421px">Nanine</div> <div class="label" style="left:955px;top:1472px">Marchienne-<br>au-Pont</div> <div class="label" style="left:1580px;top:1354px">Auvelois</div> <div class="label" style="left:1677px;top:1349px">Ham-sur-Sambre</div> <div class="label" style="left:79px;top:1548px">Estinnes-<br>au-Mont</div> <div class="label" style="left:119px;top:1467px">Estinnes-<br>au-Val</div> <div class="label" style="left:730px;top:1477px">Fontaine-l'Evêque</div> <div class="label" style="left:588px;top:1487px">Anderlues</div> <div class="label" style="left:353px;top:1293px">Haine-St-Pierre</div> <div class="label" style="left:44px;top:1375px">Bray</div> <div class="label" style="left:129px;top:1258px">Strépy</div> <div class="label" style="left:191px;top:1248px">Trivières</div> <div class="label" style="left:25px;top:1171px">Thieu</div> <div class="label" style="left:441px;top:1385px">Mont-Ste-Aldegonde</div> <div class="label" style="left:260px;top:1115px">Houdeng-Gœgnies</div> <div class="label" style="left:124px;top:1094px">Rœulx</div> <div class="label" style="left:652px;top:1156px">Chapelle-<br>lez-Herlaimont</div> <div class="label" style="left:705px;top:1100px">Gouy-lez-Piéton</div> <div class="label" style="left:1170px;top:1493px">Montigny-<br>sur-Sambre</div> <div class="label" style="left:1262px;top:1462px">Châtelet</div> <div class="label" style="left:1369px;top:1405px">Farcienne</div> <div class="label" style="left:983px;top:1289px">Jumet</div> <div class="label" style="left:1043px;top:1217px">Gosselies</div> <div class="label" style="left:909px;top:1145px">Vieuville</div> <div class="label" style="left:998px;top:1095px">Thuméon</div> <div class="label" style="left:1199px;top:1100px">Heppignies</div> <div class="label" style="left:1282px;top:1181px">Wangenies</div> <div class="label" style="left:1379px;top:1283px">Lambusart</div> <div class="label" style="left:1380px;top:1140px">Fleurus</div> <div class="label" style="left:1189px;top:1028px">Mellet</div> <div class="label" style="left:1477px;top:1181px">Velaine</div> <div class="label" style="left:549px;top:921px">Seneffe</div> <div class="label" style="left:548px;top:788px">Arquesnes</div> <div class="label" style="left:250px;top:860px">Marche-<br>lez-Écaussines</div> <div class="label" style="left:245px;top:733px">Écaussinnes</div> <div class="label" style="left:49px;top:799px">Naast</div> <div class="label" style="left:382px;top:462px">Virginal</div> <div class="label" style="left:187px;top:345px">Rebecq</div> <div class="label" style="left:285px;top:492px">Hennuières</div> <div class="label" style="left:313px;top:177px">Tubize</div> <div class="label" style="left:514px;top:345px">Ittre</div> <div class="label" style="left:514px;top:242px">Braine-le-Château</div> <div class="label" style="left:231px;top:156px">Saintes</div> <div class="label" style="left:362px;top:79px">Halle</div> <div class="label" style="left:728px;top:324px">Ophain</div> <div class="label" style="left:881px;top:238px">Braine-l'Alleud</div> <div class="label" style="left:787px;top:406px">Lillois</div> <div class="label" style="left:906px;top:334px">Hougoumont</div> <div class="label" style="left:999px;top:238px">La Haye<br>Sainte</div> <div class="label" style="left:1042px;top:293px">La Haye</div> <div class="label" style="left:964px;top:110px">Waterloo</div> <div class="label" style="left:989px;top:207px">Mont-St-Jean</div> <div class="label" style="left:1424px;top:1023px">Ligny</div> <div class="label" style="left:1384px;top:972px">Bry</div> <div class="label" style="left:1320px;top:1053px">St-Amand</div> <div class="label" style="left:1276px;top:967px">Wagnelée</div> <div class="label" style="left:1649px;top:1069px">St-Martin</div> <div class="label" style="left:1712px;top:1130px">Onoz</div> <div class="label" style="left:1805px;top:1146px">Spy</div> <div class="label" style="left:1662px;top:1242px">Jemeppe</div> <div class="label" style="left:1894px;top:1283px">Soye</div> <div class="label" style="left:1928px;top:1095px">Temploux</div> <div class="label" style="left:1477px;top:901px">Sombreffe</div> <div class="label" style="left:1643px;top:926px">Corroy-le-Château</div> <div class="label" style="left:944px;top:931px">Rèves</div> <div class="label" style="left:1052px;top:936px">Frasnes</div> <div class="label" style="left:1175px;top:947px">Villers-<br>Perwin</div> <div class="label" style="left:939px;top:722px">Hautain-<br>le-Val</div> <div class="label" style="left:1121px;top:748px">Quatre-Bras</div> <div class="label" style="left:1130px;top:207px">Ohain</div> <div class="label" style="left:1199px;top:222px">Chapelle-<br>St-Lambert</div> <div class="label" style="left:1144px;top:105px">Genval</div> <div class="label" style="left:997px;top:335px">Planchenoit</div> <div class="label" style="left:1121px;top:335px">Maransart</div> <div class="label" style="left:1389px;top:217px">Limal</div> <div class="label" style="left:1424px;top:329px">Ottignies</div> <div class="label" style="left:1106px;top:584px">Genappe</div> <div class="label" style="left:798px;top:569px">Beaulers</div> <div class="label" style="left:1258px;top:569px">Bousseval</div> <div class="label" style="left:2093px;top:1079px">Rhisnes</div> <div class="label" style="left:1810px;top:967px">Bossière</div> <div class="label" style="left:1736px;top:829px">Gembloux</div> <div class="label" style="left:1839px;top:727px">Sauvenière</div> <div class="label" style="left:2045px;top:921px">St-Denis</div> <div class="label" style="left:2195px;top:896px">Warisoulx</div> <div class="label" style="left:2240px;top:824px">Dhuy</div> <div class="label" style="left:1945px;top:687px">Grand-Leez</div> <div class="label" style="left:2191px;top:702px">Liernu</div> <div class="label" style="left:2292px;top:702px">Longchamps</div> <div class="label" style="left:2332px;top:651px">Éghezée</div> <div class="label" style="left:2181px;top:640px">Aische-en-Refail</div> <div class="label" style="left:1321px;top:732px">Villers-<br>la-Ville</div> <div class="label" style="left:1439px;top:722px">Melioreux</div> <div class="label" style="left:1394px;top:758px">Tilly</div> <div class="label" style="left:1571px;top:707px">Gentinnes</div> <div class="label" style="left:1639px;top:671px">Courtil</div> <div class="label" style="left:1716px;top:676px">Ernage</div> <div class="label" style="left:1286px;top:809px">Marbais</div> <div class="label" style="left:1566px;top:543px">Hévillers</div> <div class="label" style="left:1575px;top:472px">Mont-<br>St-Guibert</div> <div class="label" style="left:1633px;top:391px">Corbaix</div> <div class="label" style="left:1732px;top:441px">Nil-St-Martin</div> <div class="label" style="left:1796px;top:523px">Walhain</div> <div class="label" style="left:1859px;top:574px">Sart-lez-Walhain</div> <div class="label" style="left:1819px;top:422px">Tourinnes</div> <div class="label" style="left:1956px;top:472px">Orbais</div> <div class="label" style="left:2070px;top:457px">Thorembais-<br>St-Trond</div> <div class="label" style="left:2073px;top:523px">Perwez</div> <div class="label" style="left:2249px;top:340px">Mont-St-André</div> <div class="label" style="left:2425px;top:365px">Folx-<br>les-Caves</div> <div class="label" style="left:2412px;top:432px">Ramillies</div> <div class="label" style="left:2329px;top:498px">Hottomont</div> <div class="label" style="left:2132px;top:243px">Glimes</div> <div class="label" style="left:2314px;top:49px">Jodoigne</div> <div class="label" style="left:1980px;top:120px">Roux Miroir</div> <div class="label" style="left:1932px;top:161px">Longueville</div> <div class="label" style="left:1879px;top:248px">Chaumont</div> <div class="label" style="left:1633px;top:176px">Dion-le-Mont</div> <div class="label" style="left:1662px;top:309px">Corroy-<br>le Grand</div> </div> <div id="hexes"> <div id="hexes_show_label"></div> </div> <div id="pieces"> <div id="marker_turn" class="marker large y1" style="top:1665px;left:53px"></div> <div id="marker_remain" class="marker large y3 hide" style="top:1857px;left:129px"></div> <div id="marker_french_moves" class="marker large y2 hide" style="top:1857px;left:129px"></div> <div id="marker_prussian_moves" class="marker large y4 hide" style="top:1857px;left:129px"></div> <div id="french_hq_1" class="hide french large y1"></div> <div id="french_hq_2" class="hide french large y2"></div> <div id="french_hq_3" class="hide french large y3"></div> <div id="anglo_hq_1" class="hide anglo large y1"></div> <div id="prussian_hq_1" class="hide prussian large y1"></div> <div id="french_corps_1" class="hide french large y4"></div> <div id="french_corps_2" class="hide french large y5"></div> <div id="french_corps_3" class="hide french large y6"></div> <div id="french_corps_4" class="hide french large y7"></div> <div id="french_corps_5" class="hide french large y8"></div> <div id="french_corps_6" class="hide french large y9"></div> <div id="french_corps_7" class="hide french large y10"></div> <div id="french_corps_8" class="hide french large y11"></div> <div id="anglo_corps_1" class="hide anglo large y2"></div> <div id="anglo_corps_2" class="hide anglo large y3"></div> <div id="anglo_corps_3" class="hide anglo large y4"></div> <div id="anglo_corps_4" class="hide anglo large y5"></div> <div id="anglo_corps_5" class="hide anglo large y6"></div> <div id="prussian_corps_1" class="hide prussian large y2"></div> <div id="prussian_corps_2" class="hide prussian large y3"></div> <div id="prussian_corps_3" class="hide prussian large y4"></div> <div id="prussian_corps_4" class="hide prussian large y5"></div> <div id="prussian_corps_5" class="hide prussian large y6"></div> <div id="french_detachment_1" class="hide french small y1"></div> <div id="french_detachment_2" class="hide french small y2"></div> <div id="french_detachment_3" class="hide french small y3"></div> <div id="french_detachment_4" class="hide french small y4"></div> <div id="french_detachment_5" class="hide french small y5"></div> <div id="french_detachment_6" class="hide french small y6"></div> <div id="anglo_detachment_1" class="hide anglo small y1"></div> <div id="anglo_detachment_2" class="hide anglo small y2"></div> <div id="anglo_detachment_3" class="hide anglo small y3"></div> <div id="anglo_detachment_4" class="hide anglo small y4"></div> <div id="prussian_detachment_1" class="hide prussian small y1"></div> <div id="prussian_detachment_2" class="hide prussian small y2"></div> <div id="prussian_detachment_3" class="hide prussian small y3"></div> <div id="prussian_detachment_4" class="hide prussian small y4"></div> <div id="prussian_detachment_5" class="hide prussian small y5"></div> <div id="prussian_detachment_6" class="hide prussian small y6"></div> </div> </div> </main> <footer id="status"></footer> </body>