| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-28 09:22:10 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-28 09:22:10 -0700 |
| commit | 578b42fbcfa15661bbaa36f99e7513cffbd20780 (patch) | |
| tree | d863d33fc51a46ec8abfa42e9ad08f8ffe740d11 | |
| parent | 7364c01efe774b4f48a3f6c32a2648dab028b6b4 (diff) | |
Fix vectorAdd calculation; draw grid hexes after buildings
| -rw-r--r-- | public/assets/css/map.css | 4 | ||||
| -rw-r--r-- | public/assets/images/scenario_template.svg | 2 | ||||
| -rw-r--r-- | src/modules/gameboard.js | 3 | ||||
| -rw-r--r-- | src/radial.js | 28 |
4 files changed, 29 insertions, 8 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css index 38d8f23..af1028e 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -16,7 +16,7 @@ text { use[href="#hex"] { opacity: 0.25; - fill: transparent; + fill: purple; fill-opacity: 0.5; stroke-width: 0.5px; stroke: black; @@ -236,7 +236,7 @@ g[data-y]:nth-child(odd) { transform: scale(var(--scale)); } -[data-x]:hover use[href="#hex"] { +[data-x]:hover use[href="#hex"], [data-q][data-r][data-s][data-t]:hover use[href="#hex"] { opacity: 1; fill: orange; stroke: black; diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg index dc387bb..20798a9 100644 --- a/public/assets/images/scenario_template.svg +++ b/public/assets/images/scenario_template.svg @@ -1,8 +1,8 @@ <?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" /> + <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" /> <style> #background { stroke: #304b75; diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index d9919ec..afb582b 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -23,7 +23,8 @@ function getCellOccupant(cell) { } function getCells(svg) { - return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]'); + // return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]'); + return svg.querySelectorAll('[data-q][data-r][data-s][data-t]'); } function getLockedSightLine(svg) { diff --git a/src/radial.js b/src/radial.js index 6177a65..2c261bf 100644 --- a/src/radial.js +++ b/src/radial.js @@ -88,6 +88,10 @@ function drawHexes(el, list, renderText = false) { const { x, y } = radialToScreenCoords({ q, r, s }); const cell = document.createElementNS(xmlns, 'g'); + cell.dataset.q = q; + cell.dataset.r = r; + cell.dataset.s = s; + cell.dataset.t = t; cell.setAttributeNS(null, 'transform', `translate(${x}, ${y})`); const use = document.createElementNS(xmlns, 'use'); @@ -469,7 +473,6 @@ function drawMapsheet(gameboard, mapsheet, position) { const gridContainer = document.createElementNS(xmlns, 'g'); gridContainer.classList.add('elevation-0'); - container.appendChild(gridContainer); const buildingHexes = drawBuildings(mapsheet.buildings, container, position, document.querySelector(`defs .${mapsheet.id}`)); @@ -492,6 +495,8 @@ function drawMapsheet(gameboard, mapsheet, position) { gridContainer.appendChild(use); }); + container.appendChild(gridContainer); + return new Map([...grid, ...buildingHexes]); // return { id, grid, buildings }; } @@ -505,7 +510,7 @@ const vertMapVect = function(coords) { } function vectorAdd({ q, r, s }, { q: dq, r: dr, s: ds }, scalar) { - return ({ q: q - dq * scalar, r: r + dr * scalar, s: s - ds * scalar }); + return ({ q: q + dq * scalar, r: r + dr * scalar, s: s + ds * scalar }); } function findMult(arr) { @@ -553,9 +558,11 @@ let sheets = []; // sheets = [[mapsheet1]]; // sheets = [[mapsheet2]]; -// sheets = [[mapsheet2], [mapsheet3]]; +// sheets = [[mapsheet2, mapsheet3]]; // sheets = [[mapsheet2], [mapsheet1], [mapsheet3]]; +// drawMapsheet(grid, mapsheet2, vectorAdd({ q: 0, r: 0, s: 0 }, { q: 1, r: -2, s: 1 }, 6)); + sheets = [ [mapsheet2, mapsheet1], [mapsheet3, mapsheet4] @@ -571,6 +578,10 @@ sheets = [ // const map1building2furniture = document.querySelector('defs .mapsheet2 .building2 .furniture'); // document.querySelector('.gameboard .building2 .structure').appendChild(map1building2furniture); +// console.log(mapsheet2); + +let finalGrid = new Map(); + findScalar(findMult(sheets)).forEach(([vscalar, row]) => { const vertMapVect = function(coords) { return vectorAdd(coords, { q: 1, r: -2, s: 1 }, vscalar); @@ -578,13 +589,22 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => { row.forEach(([hscalar, ms]) => { const horzMapVect = function(coords) { - return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar); + return vectorAdd(coords, { q: -1, r: 0, s: 1 }, hscalar); } ms = drawMapsheet(grid, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 }))); + // console.log(ms); + finalGrid = new Map([...finalGrid, ...ms]); }) }); +const origin = document.querySelector('[transform="translate(0, 0)"]'); +// console.log(origin); + +// console.log([...finalGrid.entries()].find(([k, v]) => v === origin)); + +console.log(finalGrid.get('0,0,0,0')); + const circle = document.createElementNS(xmlns, 'circle'); circle.setAttributeNS(null, 'r', 5); circle.setAttributeNS(null, 'fill', 'green'); |
