WIP: render radial coord hexes/maps

author: Catalin Mititiuc <webdevcat@proton.me> 2024-06-27 12:48:06 -0700
committer: Catalin Mititiuc <webdevcat@proton.me> 2024-06-27 12:48:06 -0700
commit: c148f4a4f329decec4602a48a8a71a62b429bfb4 (patch)
tree: 5dc552f1bfe34a4369999753b9217d88a10c61e2
parent: 9c0645b481224bcc777cac58eb2c7ea1592e58e1 (diff)
13 files changed, 113 insertions, 215 deletions
diff --git a/esbuild-server.mjs b/esbuild-server.mjs
index c269a52..5f8fd6c 100644
--- a/esbuild-server.mjs
+++ b/esbuild-server.mjs
@@ -222,7 +222,7 @@ const externalSvgToInternal = {
 }
 
 const buildOptions = {
-  entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js'],
+  entryPoints: ['src/index.js', 'src/soldier_record_block.js', 'src/map.js', 'src/radial.js'],
   bundle: true,
   outdir: 'build',
   plugins: [
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 3d532ed..207c8e6 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -15,7 +15,7 @@ text {
 }
 
 use[href="#hex"] {
-  opacity: 0;
+  opacity: 0.5;
   fill: transparent;
   fill-opacity: 0.5;
   stroke-width: 0.5px;
@@ -60,6 +60,10 @@ g.weapon-symbol :not(use[href="#counter-base"]) {
   stroke-width: 0.5px;
 }
 
+/* g.weapon-symbol {
+  r: 5px;
+} */
+
 g.troop-counter-template text {
   fill: white;
   font-size: 12px;
@@ -425,7 +429,7 @@ g[data-y="76"] { --i: 76; }
 
 .building .doors {
   stroke: white;
-  stroke-width: 2.25
+  stroke-width: 2.25px
 }
 
 #test-arcs line, #test-arcs polyline {
diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css
index e4217b7..4ad1903 100644
--- a/public/assets/css/radial.css
+++ b/public/assets/css/radial.css
@@ -21,7 +21,7 @@ text {
 use[href="#hex"] {
   stroke: #666;
   /* fill: wheat; */
-  fill: navajowhite;
+  /* fill: navajowhite; */
   /* fill: url(#asterisk); */
 }
 
@@ -334,6 +334,3 @@ input:checked+label {
   fill: lightgreen;
 }
 
-.furniture {
-  fill: violet;
-}
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 5fa37f8..b5d7b8a 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -173,6 +173,10 @@ polygon.firing-arc[data-allegiance="attacker"] {
   fill: blue;
 }
 
+.weapon-symbol polyline {
+  fill: none;
+}
+
 .soldier-record[data-allegiance="defender"] svg {
   fill: red;
 }
@@ -191,6 +195,14 @@ polygon.firing-arc[data-allegiance="attacker"] {
   stroke-width: 0.5px;
 }
 
+.weapon-symbol {
+  stroke: none;
+}
+
+[href="#counter-base"] {
+  stroke: none;
+}
+
 .soldier-record svg {
   width: 20px;
   height: 20px;
@@ -400,6 +412,30 @@ div#dice {
   animation: roll-out 0.125s linear 1;
 }
 
+.select-elevation {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  margin-right: 10px;
+  background-color: #FFFFFF99;
+  border: 1px solid gray;
+  padding: 2px;
+  font-family: sans-serif;
+  font-size: 10pt;
+}
+
+.select-elevation label {
+  display: block;
+  margin: 2px 0;
+  text-align: center;
+  border: 1px solid transparent;
+  user-select: none;
+}
+
+.select-elevation input {
+  display: none;
+}
+
 @keyframes roll-out {
   0% {
     transform: scaleX(1);
diff --git a/public/assets/images/counters-test.svg b/public/assets/images/counters-test.svg
deleted file mode 100644
index b7d5cd9..0000000
--- a/public/assets/images/counters-test.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <circle id="counter-base" cx="0" cy="0" r="5"/>
-
-    <g id="semi-auto">
-      <line x1="-2" y1="1" x2="2" y2="1"/>
-      <line x1="-2" y1="2" x2="2" y2="2"/>
-    </g>
-
-    <g id="auto">
-      <line x1="-2" y1="0" x2="2" y2="0"/>
-      <line x1="-2" y1="1" x2="2" y2="1"/>
-      <line x1="-2" y1="2" x2="2" y2="2"/>
-    </g>
-  </defs>
-
-  <g id="rifle" class="weapon-symbol">
-
-  </g>
-
-  <g id="smg" class="weapon-symbol">
-  </g>
-
-  <g id="blazer" class="weapon-symbol">
-    <use href="#counter-base"/>
-    <use href="#auto"/>
-    <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
-    <polyline points="-2,-3.5 0,-5 2,-3.5"/>
-  </g>
-</svg>
diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg
index c0c1983..da1a6d8 100644
--- a/public/assets/images/counters.svg
+++ b/public/assets/images/counters.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <circle id="counter-base" style="r: inherit;" cx="0" cy="0" r="5"/>
+    <circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
 
     <g style="r: inherit;" id="number-1">
       <use style="r: inherit;" href="#counter-base"/>
diff --git a/public/radial.html b/public/assets/images/radial.svg
index 9e96d10..946662a 100644
--- a/public/radial.html
+++ b/public/assets/images/radial.svg
@@ -1,29 +1,26 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <link rel="stylesheet" href="assets/css/radial.css">
-</head>
-
-<body>
-  <!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> -->
-  <!-- <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg"> -->
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
   <svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
-      <line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" />
-      <pattern id="asterisk" viewBox="-15 -15 30 30" width="30" height="30" patternUnits="userSpaceOnUse">
-        <rect x="-15" y="-15" width="30" height="30" fill="wheat" />
-        <use y="-15" x="-15" href="#ast-line" />
-        <use y="-15" x="15" href="#ast-line" />
-        <use y="15" x="-15" href="#ast-line" />
-        <use y="15" x="15" href="#ast-line" />
+    <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
+
+    <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
+      <use href="#ast-line"/>
+      <use class="cw-60-deg" href="#ast-line"/>
+      <use class="ccw-60-deg" href="#ast-line"/>
+
+      <use x="-8.66" y="-15" href="#ast-line"/>
+      <use x="-8.66" y="-15" transform="rotate(60 -8.66 -15)" href="#ast-line"/>
+
+      <use x="8.66" y="-15" href="#ast-line"/>
+      <use x="8.66" y="-15" transform="rotate(-60 8.66 -15)" href="#ast-line"/>
 
-        <use y="-15" x="-15" transform="rotate(60, -15, -15)" href="#ast-line" />
-        <use y="15" x="15" transform="rotate(60, 15, 15)" href="#ast-line" />
-        <use y="-15" x="15" transform="rotate(-60, 15, -15)" href="#ast-line" />
-        <use y="15" x="-15" transform="rotate(-60, -15, 15)" href="#ast-line" />
-      </pattern>
+      <use x="-8.66" y="15" href="#ast-line"/>
+      <use x="-8.66" y="15" transform="rotate(-60 -8.66 15)" href="#ast-line"/>
+
+      <use x="8.66" y="15" href="#ast-line"/>
+      <use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
+    </pattern>
 
       <g id="building8" class="building">
         <path id="building8-floor" class="floor"
@@ -150,7 +147,7 @@
       </g>
 
       <g id="terrain" class="terrain">
-        <rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" id="rect3415" />
+        <rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" />
         <g id="terrain-trees">
           <use href="#tree" transform="translate(-27,-45.25)" />
           <use href="#tree" transform="translate(-40.25,-38)" />
@@ -570,25 +567,4 @@
         </g>
       </g>
     </defs>
-
-    <g class="gameboard" data-view-elevation="0"></g>
   </svg>
-
-  <div class="select-elevation">
-    <button>🡅</button>
-    <input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
-    <label for="select-elevation-3">3</label>
-    <input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
-    <label for="select-elevation-2">2</label>
-    <input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
-    <label for="select-elevation-1">1</label>
-    <input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
-    <label for="select-elevation-0">0</label>
-    <input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
-    <label for="select-elevation-basement">-1</label>
-    <button>🡇</button>
-  </div>
-  <script src="radial.js"></script>
-</body>
-
-</html>
diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg
index 3a6045a..6c298b7 100644
--- a/public/assets/images/scenario_template.svg
+++ b/public/assets/images/scenario_template.svg
@@ -1,6 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg">
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
   <style>
     #background {
       stroke: #304b75;
@@ -45,7 +46,7 @@
     <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
   </defs>
 
-  <g class="gameboard">
+  <g class="gameboard" data-view-elevation="0">
     <rect id="background"/>
 
     <rect id="dots" fill="url(#asterisk)"/>
diff --git a/public/index.html b/public/index.html
index 14410e9..4d32ce6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -103,6 +103,21 @@
         <input type="checkbox" data-allegiance="attacker"/>
       </div>
 
+      <div class="select-elevation">
+        <button>🡅</button>
+        <input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
+        <label for="select-elevation-3">3</label>
+        <input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
+        <label for="select-elevation-2">2</label>
+        <input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
+        <label for="select-elevation-1">1</label>
+        <input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
+        <label for="select-elevation-0">0</label>
+        <input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
+        <label for="select-elevation-basement">-1</label>
+        <button>🡇</button>
+      </div>
+
       <div id="dice">
         <button type="button" id="roll-dice">Roll</button>
         <div class="die">
@@ -227,10 +242,6 @@
           <label>
             Load scenario:
             <select>
-              <option value="map4">Test</option>
-              <option value="contour-lines">Contour Lines</option>
-              <option value="pendle">Pendle</option>
-              <option value="10-simplex_t03">10-simplex family polytope graph, in A10 Coxeter plane</option>
             </select>
           </label>
         </p>
diff --git a/src/index.js b/src/index.js
index 6b7e930..6e98028 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,7 +18,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   proneToggle = document.getElementById('toggle-prone-counter'),
   contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
-  fileName = localStorage.getItem('map') || 'scenario-side_show',
+  // fileName = localStorage.getItem('map') || 'scenario-side_show',
+  fileName = localStorage.getItem('map') || 'radial',
   map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
   fileInputEl = document.querySelector('input[type="file"]'),
   dice = document.querySelectorAll('.die'),
@@ -64,6 +65,7 @@ async function buildScenario(req) {
 
   panzoom.start(svg);
   gameboard.start(svg);
+
   recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
 }
 
@@ -206,6 +208,14 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
   });
 });
 
+// document.querySelectorAll('[name="select-elevation"]').forEach(el => {
+//   const gameboard = document.querySelector('.gameboard');
+
+//   el.addEventListener('change', function (e) {
+//     gameboard.dataset.viewElevation = this.value
+//   });
+// });
+
 contentVisToggleEl.addEventListener('input', toggleContentVis);
 contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
 toggleContentVis();
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 132a7dd..092870a 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -180,11 +180,11 @@ export function start(startLoc, units) {
   for (const affiliation in forces) {
     const container = document.querySelector(`#${affiliation}-record`);
     const records = container.querySelector('.records');
-    const name = startLoc?.dataset[`${affiliation}Name`];
+    // const name = startLoc?.dataset[`${affiliation}Name`];
 
-    if (name) {
-      container.querySelector('.name').textContent = name;
-    }
+    // if (name) {
+    //   container.querySelector('.name').textContent = name;
+    // }
     forces[affiliation].forEach(r => records.appendChild(r));
   }
 
diff --git a/src/modules/scenario.js b/src/modules/scenario.js
index 2483bc2..8b466cb 100644
--- a/src/modules/scenario.js
+++ b/src/modules/scenario.js
@@ -1,4 +1,4 @@
-async function loadScript(scenario, svg) {
+async function loadScript(scenario, svg, script) {
   return new Promise((resolve, reject) => {
     const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
 
@@ -11,14 +11,15 @@ async function loadScript(scenario, svg) {
       reject(Error('Script failed to load.'));
     };
 
-    const dataset = scenario.querySelector('script').dataset;
+    const dataset = scenario.querySelector('script')?.dataset || {};
 
     if ('cols' in dataset && 'rows' in dataset) {
       scriptEl.dataset.rows = dataset.rows;
       scriptEl.dataset.cols = dataset.cols;
     }
 
-    scriptEl.setAttributeNS(null, 'href', '../../map.js');
+    // scriptEl.setAttributeNS(null, 'href', '../../map.js');
+    scriptEl.setAttributeNS(null, 'href', `../../${script}.js`);
     svg.append(scriptEl);
   });
 }
@@ -46,6 +47,7 @@ export async function requestResource(url) {
 }
 
 export async function build(svg, request) {
+  const defs = svg.querySelector('defs');
   const gb = svg.querySelector('.gameboard');
   const grid = svg.querySelector('.grid');
 
@@ -67,8 +69,6 @@ export async function build(svg, request) {
   await Promise.all(
     Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`))
   ).then(result => {
-    const defs = svg.querySelector('defs');
-
     Object.keys(refs).forEach((filename, index) => {
       const external = result[index];
 
@@ -98,5 +98,8 @@ export async function build(svg, request) {
     grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true));
   }
 
-  return loadScript(scenario, svg);
+  defs.replaceWith(scenario.querySelector('defs'));
+
+  await loadScript(scenario, svg, 'radial')
+  return loadScript(scenario, svg, 'map');
 }
diff --git a/src/radial.js b/src/radial.js
index a4e8370..a2be440 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -1,7 +1,7 @@
-if (window.IS_DEV) {
-  const source = new EventSource('/esbuild');
-  source.addEventListener('change', () => location.reload());
-}
+// if (window.IS_DEV) {
+//   const source = new EventSource('/esbuild');
+//   source.addEventListener('change', () => location.reload());
+// }
 
 const xmlns = 'http://www.w3.org/2000/svg';
 const svg = document.querySelector('svg');
@@ -94,7 +94,7 @@ function drawHexes(el, list, renderText = false) {
     use.setAttributeNS(null, 'href', '#hex');
     cell.appendChild(use);
 
-    if (renderText) addHexText(q, r, s, t).forEach(txt => cell.appendChild(txt));
+    if (false) addHexText(q, r, s, t).forEach(txt => cell.appendChild(txt));
 
     list.set(key, cell);
     el.appendChild(cell);
@@ -154,62 +154,6 @@ function translateCoords(map, translator) {
   return translated;
 }
 
-document.querySelectorAll('[name="select-elevation"]').forEach(el => {
-  const gameboard = document.querySelector('.gameboard');
-
-  el.addEventListener('change', function (e) {
-    gameboard.dataset.viewElevation = this.value
-  });
-});
-
-// function placeBuilding(buildingSelector, mapsheetSelector) {
-//   const building = svg.querySelector(buildingSelector);
-//   const bld2grid = document.createElementNS(xmlns, 'g');
-//   const bld2origin = { q: 0, r: 0, s: 0 };
-
-//   const bld2map2 = svg.querySelector(`${mapsheetSelector} ${buildingSelector}`);
-//   const [q, r, s] = bld2map2.dataset.placement.split(',').map(n => +n);
-//   const map2bld2place = { q, r, s };
-
-//   bld2hexes = building.querySelector('[data-grid-footprint]').dataset.gridFootprint.split(':').map(coords => {
-//     const [q, r, s] = coords.split(',').map(n => +n);
-//     const { q: tq, r: tr, s: ts } = translateRadialCoords({ q, r, s }, map2bld2place);
-
-//     return [toKey({ q: tq, r: tr, s: ts }), null];
-//   });
-
-//   const bld2screenCoords = radialToScreenCoords(translateRadialCoords(bld2origin, map2bld2place));
-//   const bld2structure = document.createElementNS(xmlns, 'g');
-//   bld2structure.setAttributeNS(null, 'transform', `translate(${bld2screenCoords.x}, ${bld2screenCoords.y})`)
-
-//   building.querySelectorAll('[data-grid-footprint] > *').forEach(el => {
-//     const use = document.createElementNS(xmlns, 'use');
-//     use.setAttributeNS(null, 'href', `#${el.id}`);
-//     el.classList.forEach(className => use.classList.add(className));
-//     bld2structure.appendChild(use);
-//   });
-
-//   drawHexes(bld2grid, new Map(bld2hexes), true);
-
-//   const bld2elvBasement = bld2grid.cloneNode(true);
-//   bld2elvBasement.classList.add('elevation-basement');
-//   bld2map2.appendChild(bld2elvBasement);
-
-//   const bld2elv1 = bld2grid.cloneNode(true);
-//   bld2elv1.classList.add('elevation-0');
-//   bld2map2.appendChild(bld2elv1);
-
-//   const bld2elv2 = bld2grid.cloneNode(true);
-//   bld2elv2.classList.add('elevation-1');
-//   bld2map2.appendChild(bld2elv2);
-
-//   const bld2elvRoof = bld2grid.cloneNode(true);
-//   bld2elvRoof.classList.add('elevation-roof');
-//   bld2map2.appendChild(bld2elvRoof);
-
-//   bld2map2.appendChild(bld2structure);
-// }
-
 const buildingHexes = {};
 
 buildingHexes.bld1 = generateRadialCoords(
@@ -269,62 +213,9 @@ buildingHexes.bld8 = [
   [{ q: -7, r: 4, s: 3 }, { left: 1, top: 1, right: 1, bottom: 1 }]
 ].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map());
 
-const mapsheet1BuildingCoords = [
-  translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })),
-  translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: -s + 14, r: -r - 6, s: -q - 8 })),
-  translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 })),
-  translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: -s - 12, r: -r + 7, s: -q + 5 })),
-  generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 4, top: 5, right: 3, bottom: 5 }),
-];
-
-const mapsheet2BuildingCoords = [
-  translateCoords(buildingHexes.bld1, ({ q, r, s }) => ({ q: q, r: r + 7, s: s - 7 })),
-  translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })),
-  translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: q - 14, r: r + 5, s: s + 9 })),
-  translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: q - 8, r: r + 6, s: s + 2 })),
-  translateCoords(buildingHexes.bld5, ({ q, r, s }) => ({ q: q + 13, r: r - 6, s: s - 7 })),
-  translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: q + 7, r: r - 6, s: s - 1 })),
-  translateCoords(buildingHexes.bld7, ({ q, r, s }) => ({ q: q - 6, r: r - 5, s: s + 11 })),
-];
-
-const mapsheet3BuildingCoords = [
-  translateCoords(buildingHexes.bld1, ({ q, r, s }) => ({ q: q - 2, r: r - 5, s: s + 7 })),
-  translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: -s + 9, r: -r - 6, s: -q - 3 })),
-  translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: -s + 17, r: -r - 7, s: -q - 10 })),
-  translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: q - 9, r: r - 6, s: s + 15 })),
-  translateCoords(buildingHexes.bld5, ({ q, r, s }) => ({ q: q + 6, r: r + 8, s: s - 14 })),
-  translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: -s + 1, r: -r + 6, s: -q - 7 })),
-  translateCoords(buildingHexes.bld7, ({ q, r, s }) => ({ q: q - 12, r: r + 8, s: s + 4 })),
-]
-
-const mapsheet4BuildingCoords = [
-  translateCoords(buildingHexes.bld8, ({ q, r, s }) => ({ q: q + 1, r: r + 1, s: s - 2 })),
-]
-
 const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 }, 'left');
-
-const mapsheet1hexCoords = new Map(mapsheetHexCoords);
-const mapsheet2hexCoords = new Map(mapsheetHexCoords);
-const mapsheet3hexCoords = new Map(mapsheetHexCoords);
-const mapsheet4hexCoords = new Map(mapsheetHexCoords);
-
-mapsheet1BuildingCoords.forEach(building => {
-  for ([coords, v] of building) mapsheet1hexCoords.delete(coords);
-});
-
-mapsheet2BuildingCoords.forEach(building => {
-  for ([coords, v] of building) mapsheet2hexCoords.delete(coords);
-});
-
-mapsheet3BuildingCoords.forEach(building => {
-  for ([coords, v] of building) mapsheet3hexCoords.delete(coords);
-});
-
-mapsheet4BuildingCoords.forEach(building => {
-  for ([coords, v] of building) mapsheet4hexCoords.delete(coords);
-});
-
 const gameboard = svg.querySelector('.gameboard');
+const grid = svg.querySelector('.grid');
 
 const mapsheet1 = {
   id: 'mapsheet1',
@@ -666,7 +557,7 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
       return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar);
     }
 
-    ms = drawMapsheet(gameboard, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
+    ms = drawMapsheet(grid, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
   })
 });
author	Catalin Mititiuc <webdevcat@proton.me>	2024-06-27 12:48:06 -0700
committer	Catalin Mititiuc <webdevcat@proton.me>	2024-06-27 12:48:06 -0700
commit	c148f4a4f329decec4602a48a8a71a62b429bfb4 (patch)
tree	5dc552f1bfe34a4369999753b9217d88a10c61e2
parent	9c0645b481224bcc777cac58eb2c7ea1592e58e1 (diff)