+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..4cab6bc
--- /dev/null
+++ b/index.js
@@ -0,0 +1,91 @@
+var rect = document.querySelector('rect#map');
+var toFixed = n => Number.parseFloat(n).toFixed(2);
+
+rect.addEventListener('mousemove', e => {
+ var rect = e.target.getBoundingClientRect();
+ var x = e.clientX - rect.left; // x position within the element
+ var y = e.clientY - rect.top; // y position within the element
+
+ console.log(
+ 'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
+ 'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
+ );
+});
+
+document.querySelectorAll('.soldier-record').forEach(el =>
+ el.addEventListener('click', e => {
+ // console.log(e.target.dataset.troopNumber);
+
+ if (e.target.classList.contains('selected')) {
+ e.target.classList.remove('selected');
+ } else {
+ document.querySelectorAll('.soldier-record.selected').forEach(el =>
+ el.classList.remove('selected')
+ );
+ e.target.classList.add('selected');
+ }
+ })
+);
+
+var svgns = "http://www.w3.org/2000/svg",
+ svg = document.querySelector('svg');
+
+var columnCount = 33,
+ rowCount = 25,
+ pointDistanceInInches = 1.005;
+
+var isEven = n => n % 2 === 0;
+
+var columns = [...Array(columnCount).keys()],
+ rows = [...Array(rowCount).keys()],
+ columnCoords = columns.map(x => x * pointDistanceInInches),
+ rowCoords = rows.map(y => y * pointDistanceInInches),
+ pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y]));
+
+var xOffset = 0.25,
+ yOffset = 0.45;
+ calcY = Math.sqrt(3) * pointDistanceInInches / 2,
+ alternatingOffset = pointDistanceInInches / 2;
+
+pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
+ var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0),
+ cy = calcY * y + yOffset,
+ point = document.createElementNS(svgns, 'use');
+
+ point.setAttributeNS(null, 'href', `#point`);
+ point.setAttributeNS(null, 'x', `${cx}in`);
+ point.setAttributeNS(null, 'y', `${cy}in`);
+
+ point.addEventListener('click', e => {
+ let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+ if (selectedSoldier) {
+ let counter = document.createElementNS(svgns, 'circle');
+ let text = document.createElementNS(svgns, 'text');
+
+ counter.setAttributeNS(null, 'cx', `${cx}in`);
+ counter.setAttributeNS(null, 'cy', `${cy}in`);
+ counter.setAttributeNS(null, 'r', '0.25in');
+ counter.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
+ counter.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
+ counter.classList.add('counter');
+
+ text.setAttributeNS(null, 'text-anchor', 'middle');
+ text.setAttributeNS(null, 'x', `${cx}in`);
+ text.setAttributeNS(null, 'y', `${cy + 0.25}in`);
+ text.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
+ text.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
+ text.textContent = `${selectedSoldier.dataset.troopNumber}`;
+ text.classList.add('counter');
+
+ document.querySelectorAll(
+ `.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
+ ).forEach(el => el.remove());
+
+ svg.appendChild(counter);
+ svg.appendChild(text);
+ }
+ });
+
+ svg.appendChild(point);
+}));
\ No newline at end of file
diff --git a/logo-davion.png b/logo-davion.png
new file mode 100644
index 0000000..c4f8b5f
Binary files /dev/null and b/logo-davion.png differ
diff --git a/logo-liao.png b/logo-liao.png
new file mode 100644
index 0000000..e441313
Binary files /dev/null and b/logo-liao.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d9b9a62
--- /dev/null
+++ b/style.css
@@ -0,0 +1,88 @@
+svg {
+ background-color: darkgray;
+}
+
+body {
+ margin: 0;
+}
+
+circle#point {
+ fill: black;
+ opacity: 0;
+}
+
+circle.counter[data-troop-allegiance="liao"] {
+ fill: green;
+}
+
+circle.counter[data-troop-allegiance="davion"] {
+ fill: red;
+}
+
+text.counter {
+ font-size: 80;
+ font-weight: bold;
+ stroke: black;
+ fill: white;
+ stroke-width: 2px;
+ font-family: sans-serif;
+}
+
+rect#map {
+ fill: none;
+ opacity: 0.33;
+}
+
+image#img1 {
+ transform: scale(3.41) rotate(-0.15deg);
+ /* opacity: 0.33; */
+}
+
+image#img2 {
+ transform: scale(1.39, 1.407) rotate(0.07deg);
+ /* opacity: 0.33; */
+}
+
+.wall {
+ fill: none;
+ stroke: red;
+ stroke-width: 7px;
+ opacity: 0.7;
+}
+
+#hex {
+ opacity: 0.2;
+ /* stroke: black;
+ stroke-opacity: 0.2; */
+ transform: scale(0.26) translate(-2in, -2in);
+}
+
+#asterisk {
+ font-size: 30;
+}
+
+#record-sheet {
+ display: flex;
+ justify-content: space-around;
+}
+
+#record-sheet > div {
+ flex-basis: 100%;
+ padding: 0 2px;
+}
+
+#record-sheet > div div {
+ border: 1px solid black;
+ margin: 2px 0;
+ padding: 2px;
+}
+
+img.logo {
+ width: 100px;
+ margin: 0 auto;
+ display: block;
+}
+
+div.soldier-record.selected {
+ background-color: goldenrod;
+}
\ No newline at end of file
--
cgit v1.2.3
+
+
+
+ Davion
+ 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion
+ 17th Kestral Mechanized Infantry
+
+ Troop Number: 1
+ Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75
+ HG: 4 +
+ + Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75
+ HG: 4 +
+ Troop Number: 2
+ Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25
+ HG: 4 +
+ + Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25
+ HG: 4 +
+ Troop Number: 3
+ Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105
+ HG: 4 +
+ + Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105
+ HG: 4 +
+
+
+
+ Liao
+ 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion
+ Aldebaran Home Guard
+
+ Troop Number: 1
+ Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75
+ HG: 4 +
+ + Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75
+ HG: 4 +
+ Troop Number: 2
+ Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25
+ HG: 4 +
+ + Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25
+ HG: 4 +
+ Troop Number: 3
+ Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105
+ HG: 4 +
+ + Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105
+ HG: 4 +