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 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 @@ - + diff --git a/public/radial.html b/public/assets/images/radial.svg similarity index 95% rename from public/radial.html rename to public/assets/images/radial.svg index 9e96d10..946662a 100644 --- a/public/radial.html +++ b/public/assets/images/radial.svg @@ -1,29 +1,26 @@ - - - - - - - - - - + - - - - - - - + - - - - - + + + + + + + + + + + + + + + + + - + @@ -570,25 +567,4 @@ - - - -
- - - - - - - - - - - - -
- - - - 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 @@ +
+ + + + + + + + + + + + +
+
@@ -227,10 +242,6 @@

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 }))); }) });