Add village names as HTML text.

4 files changed, 189 insertions, 92 deletions

diff --git a/play.css b/play.css
index cdf7f1e..a813b9f 100644
--- a/play.css
+++ b/play.css
@@ -84,76 +84,18 @@ main {
 	position: absolute;
 	text-align: center;
 	font-family: "Source Serif SmText";
-	//font-weight: bold;
 	font-size: 10px;
+	width: 70px;
 	line-height: 1em;
 	color: black;
-	text-shadow:
-		-1px -1px 1px white,
-		1px -1px 1px white,
-		1px 1px 1px white,
-		-1px 1px 1px white,
-		0 0 6px white
-		;
+	text-shadow: 0 0 2px white;
 }
 
-#label_3002,
-#label_1217,
-#label_1204,
-#label_1737,
-#label_3925,
-#label_2911
-{
+.label.caps {
 	font-size: 14px;
 	font-variant: small-caps;
 }
 
-#label_1015,
-#label_1018,
-#label_1021,
-#label_1024,
-#label_1100,
-#label_1201,
-#label_1239,
-#label_1401,
-#label_1407,
-#label_1830,
-#label_1928,
-#label_2035,
-#label_2123,
-#label_2223,
-#label_2327,
-#label_2537,
-#label_2715,
-#label_3013,
-#label_3031,
-#label_3206,
-#label_3226,
-#label_3231,
-#label_3233,
-#label_3441,
-#label_3719,
-#label_3723,
-#label_3803
-{
-	margin-top: -10px
-}
-
-#label_1800,
-#label_2324,
-#label_2500,
-#label_3327,
-#label_3708
-{
-	margin-top: -30px;
-}
-
-#label_1118
-{
-	margin-top: -15px;
-	margin-left: 10px;
-}
-
 .hex {
 	box-sizing: border-box;
 	position: absolute;
@@ -188,32 +130,6 @@ main {
 	background-color: #f006;
 }
 
-.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;
diff --git a/play.html b/play.html
index 01691a8..49ed1c0 100644
--- a/play.html
+++ b/play.html
@@ -58,6 +58,156 @@
 <div id="board"></div>
 <div id="tracks"></div>
 <div id="arrow" class="hide"></div>
+<div id="labels">
+
+<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">Fosses</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">Auveloix</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'Évê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">Foulz</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>
 <div id="pieces">
 
diff --git a/play.js b/play.js
index 9a5b1c1..75e92d2 100644
--- a/play.js
+++ b/play.js
@@ -30,11 +30,11 @@ function find_piece(name) {
 for (let info of data.reinforcements)
 	info.list = info.list.map(name => find_piece(name))
 
-let yoff = 1555
-let xoff = 36
-let hex_dx = 58.67
-let hex_dy = 68
-let hex_r = 56 >> 1
+const yoff = 1555
+const xoff = 36
+const hex_dx = 58.67
+const hex_dy = 68
+const hex_r = 56 >> 1
 
 function set_has(set, item) {
 	if (!set)
diff --git a/tools/labels.js b/tools/labels.js
new file mode 100644
index 0000000..c739825
--- /dev/null
+++ b/tools/labels.js
@@ -0,0 +1,31 @@
+const data = require('../data.js')
+
+const yoff = 1555
+const xoff = 36
+const hex_dx = 58.67
+const hex_dy = 68
+const hex_r = 56 >> 1
+
+const CAPS = [ 1204, 1217, 1737, 2911, 3002, 3925 ]
+
+var hex_x = []
+var hex_y = []
+
+for (let row = 0; row < data.map.rows; ++row) {
+	for (let col = 0; col < data.map.cols; ++col) {
+		let hex_id = 1000 + 100 * row + col
+		hex_x[hex_id] = Math.floor(xoff + hex_dx * (col + (row & 1) * 0.5 + 0.5))
+		hex_y[hex_id] = Math.floor(yoff - hex_dy * 3 / 4 * row + hex_dy/2)
+	}
+}
+
+for (let hex in data.map.names) {
+	hex = hex | 0
+	let name = data.map.names[hex]
+	let x = hex_x[hex] - 35
+	let y = hex_y[hex]
+	if (CAPS.includes(hex))
+		console.log(`<div class="label caps" style="left:${x}px;top:${y}px">${name}</div>`)
+	else
+		console.log(`<div class="label" style="left:${x}px;top:${y}px">${name}</div>`)
+}