Web Dev Solutions

Catalin Mititiuc

From a70c2617d51054acb261103580b3197e51cb35ce Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sat, 13 Jul 2024 11:46:33 -0700 Subject: Remove hard-coded map data --- public/assets/images/mapsheets.svg | 1 - src/radial.js | 288 ------------------------------------- 2 files changed, 289 deletions(-) diff --git a/public/assets/images/mapsheets.svg b/public/assets/images/mapsheets.svg index 3f62c5f..e143fd4 100644 --- a/public/assets/images/mapsheets.svg +++ b/public/assets/images/mapsheets.svg @@ -275,7 +275,6 @@ 2 - diff --git a/src/radial.js b/src/radial.js index 547c0ea..b459ad0 100644 --- a/src/radial.js +++ b/src/radial.js @@ -153,235 +153,6 @@ function translateCoords(map, translator) { return translated; } -const buildingHexes = {}; - -buildingHexes.bld1 = generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 2, top: 4, right: 3, bottom: 5 }, - 'left' -); - -buildingHexes.bld2 = [ - [{ q: 0, r: 0, s: 0 }, { left: 3, top: 5, right: 3, bottom: 5 }, 'both'], - [{ q: 3, r: 0, s: -3 }, { left: 1, top: 2, right: 1, bottom: 4 }, 'right'], - [{ q: -3, r: 0, s: 3 }, { left: 1, top: 2, right: 1, bottom: 4 }, 'left'], -].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map()); - -buildingHexes.bld3 = generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 2, top: 3, right: 2, bottom: 4 } -); - -buildingHexes.bld4 = generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 2, top: 4, right: 3, bottom: 5 }, - 'left' -); - -buildingHexes.bld5 = generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 5, top: 3, right: 4, bottom: 2 } -); - -buildingHexes.bld6 = generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 1, top: 5, right: 2, bottom: 4 } -); - -buildingHexes.bld7 = [ - [{ q: 0, r: 0, s: 0 }, { left: 7, top: 4, right: 7, bottom: 3 }, 'left'], - [{ q: 1, r: -4, s: 3 }, { left: 5, top: 1, right: 6, bottom: 1 }], - [{ q: 5, r: 3, s: -8 }, { left: 1, top: 1, right: 2, bottom: 1 }], - [{ q: -4, r: 3, s: 1 }, { left: 3, top: 1, right: 4, bottom: 1 }], -].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map()); - -buildingHexes.bld8 = [ - [{ q: 0, r: 0, s: 0 }, { left: 6, top: 7, right: 6, bottom: 4 }, 'both'], - [{ q: 5, r: 2, s: -7 }, { left: 1, top: 2, right: 1, bottom: 2 }], - [{ q: 1, r: 5, s: -6 }, { left: 4, top: 2, right: 4, bottom: 2 }, 'both'], - [{ q: -2, r: 4, s: -2 }, { left: 1, top: 1, right: 1, bottom: 1 }], - [{ q: 7, r: -7, s: 0 }, { left: 2, top: 1, right: 2, bottom: 1 }], - [{ q: -2, r: -7, s: 9 }, { left: 2, top: 1, right: 2, bottom: 1 }], - [{ q: -3, r: -6, s: 9 }, { left: 1, top: 1, right: 1, bottom: 2 }, 'left'], - [{ q: -7, r: 3, s: 4 }, { left: 1, top: 3, right: 2, bottom: 3 }, 'right'], - [{ 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 mapsheetHexCoords = generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 17, top: 13, right: 17, bottom: 14 }, - 'left' -); - -const mapsheet1 = { - id: 'mapsheet1', - grid: new Map(mapsheetHexCoords), - buildings: [ - { - type: 'building2', - elevationLevels: range(0, 1), - grid: buildingHexes.bld2, - position: ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 }) - }, - { - type: 'building3', - elevationLevels: range(-1, 2), - grid: new Map(buildingHexes.bld3), - position: ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 }) - }, - { - type: 'building4', - elevationLevels: range(0, 1), - grid: generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 2, top: 4, right: 3, bottom: 5 }, - 'right' - ), - position: ({ q, r, s }) => ({ - q: q + 15, - r: r - 7, - s: s - 8, - transform: (x, y) => `translate(${x + horzSpacing}, ${y})` - }) - }, - { - type: 'building6', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld6), - position: rotate180({ q: -13, r: 7, s: 6 }) - }, - ], - features: [ - { - type: 'terrain', - grid: generateRadialCoords( - new Map(), - { q: 0, r: 0, s: 0 }, - { left: 3, top: 5, right: 3, bottom: 5 } - ), - position: ({ q, r, s }) => ({ q, r, s }) - } - ] -}; - -const mapsheet2 = { - id: 'mapsheet2', - grid: new Map(mapsheetHexCoords), - buildings: [ - { - type: 'building1', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld1), - position: ({ q, r, s }) => ({ q: q + 1, r: r + 6, s: s - 7 }) - }, - { - type: 'building2', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld2), - position: ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 }) - }, - { - type: 'building3', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld3), - position: ({ q, r, s }) => ({ q: q - 14, r: r + 5, s: s + 9 }) - }, - { - type: 'building4', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld4), - position: ({ q, r, s }) => ({ q: q - 8, r: r + 6, s: s + 2 }) - }, - { - type: 'building5', - elevationLevels: range(-1, 3), - grid: new Map(buildingHexes.bld5), - position: ({ q, r, s }) => ({ q: q + 13, r: r - 6, s: s - 7 }) - }, - { - type: 'building6', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld6), - position: ({ q, r, s }) => ({ q: q + 7, r: r - 6, s: s - 1 }) - }, - { - type: 'building7', - elevationLevels: range(-1, 3), - grid: new Map(buildingHexes.bld7), - position: ({ q, r, s }) => ({ q: q - 6, r: r - 5, s: s + 11 }), - }, - ] -}; - -const mapsheet3 = { - id: 'mapsheet3', - grid: new Map(mapsheetHexCoords), - buildings: [ - { - type: 'building1', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld1), - position: ({ q, r, s }) => ({ q: q - 1, r: r - 6, s: s + 7 }) - }, - { - type: 'building2', - elevationLevels: range(-1, 3), - grid: new Map(buildingHexes.bld2), - position: rotate180({ q: 9, r: -6, s: -3 }) - }, - { - type: 'building3', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld3), - position: rotate180({ q: 17, r: -7, s: -10 }) - }, - { - type: 'building4', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld4), - position: rotate180({ q: -10, r: -5, s: 15 }) - }, - { - type: 'building5', - elevationLevels: range(-1, 2), - grid: new Map(buildingHexes.bld5), - position: ({ q, r, s }) => ({ q: q + 6, r: r + 8, s: s - 14 }) - }, - { - type: 'building6', - elevationLevels: range(0, 1), - grid: new Map(buildingHexes.bld6), - position: rotate180({ q: 0, r: 6, s: -6 }) - }, - { - type: 'building7', - elevationLevels: range(-1, 2), - grid: new Map(buildingHexes.bld7), - position: ({ q, r, s }) => ({ q: q - 12, r: r + 8, s: s + 4 }) - }, - ] -}; - -const mapsheet4 = { - id: 'mapsheet4', - grid: new Map(mapsheetHexCoords), - buildings: [ - { - type: 'building8', - elevationLevels: range(0, 2), - grid: buildingHexes.bld8, - position: ({ q, r, s }) => ({ q: q + 1, r: r + 1, s: s - 2 }) - }, - ] -} - function range(start, stop, step = 1) { return Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step); } @@ -589,11 +360,6 @@ function findScalar(arr, width, height) { }); } -const mapsheets = [mapsheet1, mapsheet2, mapsheet3, mapsheet4].reduce((acc, ms) => { - acc[ms.id] = ms; - return acc; -}, {}); - let sheets = []; const mapsheetsContainer = document.querySelector('.grid .mapsheets'); @@ -660,41 +426,9 @@ sheets = msGrps.map(msG => { }); }); -// sheets = [] - const scenarioMapsheets = document.querySelectorAll('.grid [class^="mapsheet"]'); - -// sheets = [...scenarioMapsheets].reduce((acc, m) => { -// const [mapName] = m.classList; -// if (mapsheets[mapName]) { -// acc.push([mapsheets[mapName]]); -// m.remove(); -// } -// return acc; -// }, []); - -//scenarioMapsheets.forEach(el => el.remove()); document.querySelectorAll('use[href^="#building"]').forEach(el => el.remove()); -// sheets = [[mapsheet1]]; -// sheets = [[mapsheet2]]; -// 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] -// ]; - -// drawBuildings([{ -// type: 'building2', -// elevationLevels: range(-1, 2), -// grid: new Map(buildingHexes.bld2), -// position: coords => coords -// }], grid, { q: 0, r: 0, s: 0 }); - let finalGrid = new Map(); findScalar(findMult(sheets), +width + 1, +height).forEach(([vscalar, row]) => { @@ -719,19 +453,6 @@ function addGroup(container, className) { return g; } -// const { left, right, top, bottom } = document.currentScript.dataset; -// -// if (left && right && top && bottom) { -// const map = generateRadialCoords( -// new Map(), -// { q: 0, r: 0, s: 0 }, -// { left: +left, top: +top, right: +right, bottom: +bottom }, -// 'both' -// ); -// -// drawHexes(addGroup(grid, 'elevation-0'), map); -// } - function toRect({ left, right, top, bottom }) { return { left: +left, right: +right, top: +top, bottom: +bottom }; } @@ -740,12 +461,3 @@ function toRad({ q, r, s }) { return { q: +q, r: +r, s: +s }; } -// const mapsheetEls = document.querySelectorAll('.grid .mapsheet'); - -// drawHexes(addGroup(grid, 'elevation-0'), translateCoords(generateRadialCoords( -// new Map(), -// { q: 5, r: -4, s: -1 }, -// { left: 2, top: 4, right: 3, bottom: 5 } -// , 'both' -// ), ({ q, r, s }) => ({ q, r, s })), true); -// ), ({ q, r, s }) => ({ q: -r, r: -s, s: -q })), true); -- cgit v1.2.3