Web Dev Solutions

## Install dev server packages

## Start the dev server

Visit `localhost:8080` to view.

"requires": true,

"packages": {

"": {

"devDependencies": {

"esbuild": "^0.20.2",

"esbuild-server": "^0.3.0"

}

},

"node_modules/@esbuild/linux-x64": {

"version": "0.20.2",

"cpu": [

"x64"

],

"dev": true,

"optional": true,

"os": [

"linux"

"node": ">=12"

}

},

"node_modules/esbuild": {

"version": "0.20.2",

"dev": true,

"hasInstallScript": true,

"bin": {

"esbuild": "bin/esbuild"

},

},

"node_modules/esbuild-server": {

"version": "0.3.0",

"dev": true,

"engines": {

"node": ">=14"

},

"peerDependencies": {

"esbuild": ">=0.17.0"

}

}

}

}

"devDependencies": {

"esbuild": "^0.20.2",

"esbuild-server": "^0.3.0"

}

}

user-select: none;

}

opacity: 1;

fill: teal;

fill-opacity: 0.2;

stroke-width: 0.5px;

}

opacity: 1;

fill: orange;

stroke: orangered;

}

opacity: 0.2;

}

opacity: 1;

stroke: orangered;

fill-opacity: 0.04;

fill: #bacae3;

}

#map2 {

transform-origin: 0px 0px;

transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);

pointer-events: none;

}

fill: inherit;

fill-opacity: inherit;

stroke: inherit;

transform: scale(2);

}

.grid {

--inradius: 8.66px;

--circumradius: 10px;

transform: translate(19px, 31px) scale(4);

}

--translateX: 0;

}

--translateX: calc(var(--inradius));

}

}

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>

<defs>

<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>

<circle id="counter-base" cx="0" cy="0" r="5"/>

</g>

<g class="grid">

</g>

</g>

function isEven(n) {

return n % 2 === 0;

}

function edgePoint(x1, y1, x2, y2, maxX, maxY) {

let pointCoords,

if (xDiff > 0 && yDiff > 0) {

let x = xIntercept(maxY);

}

function evenr_to_axial(x, y) {

}

function axial_to_evenr(q, r) {

}

function axial_distance(q1, r1, q2, r2) {

function offset_distance(x1, y1, x2, y2) {

let { q: q1, r: r1 } = evenr_to_axial(x1, y1),

return axial_distance(q1, r1, q2, r2);

}

}

function axial_to_cube(q, r) {

}

function cube_round(q, r, s) {

rS = Math.round(s);

let q_diff = Math.abs(rQ - q),

if (q_diff > r_diff && q_diff > s_diff) {

rQ = -rR - rS;

rS = -rQ - rR;

}

}

function axial_round(q, r) {

let cube = axial_to_cube(q, r),

}

function lerp(a, b, t) {

function linedraw(x1, y1, x2, y2) {

let axial1 = evenr_to_axial(x1, y1),

for (let i = 0; i <= n; i++) {

let lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i),

results.push([x, y]);

}

return results;

}

window.addEventListener('load', () => {

const svgns = "http://www.w3.org/2000/svg",

const q = s => document.querySelector(s),

const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } =

svg.viewBox.baseVal;

const COLUMN_COUNT = 33,

const FIRING_ARC_SIZE = {

function positionFiringArc(e) {

let activeFiringArc = svg.querySelector('polygon.firing-arc.active');

if (activeFiringArc) {

let activeFiringArcOutline = svg.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`);

let [x2px, y2px] = [

pointerX / width * maxXpx,

let angle = calculateAngle(xDiff, yDiff);

let arcAngle = FIRING_ARC_SIZE[activeFiringArc.dataset.size];

let yDelta = distance * Math.cos(angle) * Math.tan(arcAngle);

let xDelta = distance * Math.sin(angle) * Math.tan(arcAngle);

const grid = svg.querySelector('#grid');

let container = ptGrp,

}

}

}

return container.querySelector(`${selector(troopNumber, allegiance)}:not(.clone)`);

};

return container.querySelector(`${counterPosition(x, y)}:not(.clone)`);

};

this.unSelect();

let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`);

}

};

let selected = container.querySelector(`.${selectedClass}`);

if (selected) {

}

};

return container.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null;

};

let counter, points,

if (counterNodeList.length > 0) {

let counters = Array.from(counterNodeList),

// let ptContainers = counters.map(c => ptGrp.querySelector(position(c.dataset.x, c.dataset.y)));

let current = {

[current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g);

[previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g);

} else {

counter = document.createElementNS(svgns, 'use'),

counter.classList.add('counter', 'selected');

counter.setAttributeNS(null, 'x', point.getAttribute('x'));

counter.setAttributeNS(null, 'y', point.getAttribute('y'));

// container.appendChild(counter);

};

container

.querySelectorAll(dataSelector(troopNumber, troopAllegiance))

.forEach(el => el.remove());

};

container

.querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)

.forEach(el => el.remove());

};

let { troopNumber, troopAllegiance } = el.dataset;

let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));

Counter.removeClones(el);

};

let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;

return !!svg.querySelector(selector);

};

};

let unclipped = svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');

unclipped.forEach(el => {

let { troopNumber, troopAllegiance } = el.dataset,

let isVisible =

document

});

};

let selected = this.getSelected();

if (selected) {

Counter.unSelect();

};

return document.querySelector('.soldier-record.selected');

};

let { troopNumber, troopAllegiance } = el.dataset,

RecordSheet.unSelect();

document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');

};

};

let sl = grid.querySelector('line.sight-line');

let target = grid.querySelector(`use[href="#point"].sight-line-target`);

this.clearHexes();

};

ptGrp.querySelectorAll('use[href="#point"].active').forEach(el => el.classList.remove('active'));

};

let source = ptGrp.querySelector(`g[data-x="${x1}"][data-y="${y1}"]`),

sightLine.classList.add('sight-line');

sightLine.classList.add('active');

this.drawHexes(...coords);

};

this.clearHexes()

info.querySelector('#hex-count').textContent = offset_distance(...coords);

};

};

// POINTS.forEach((row, index) => row.forEach(([x, y]) => {

group.addEventListener('pointerout', e => {

group.classList.remove('hover');

group.addEventListener('click', e => {

let cl = e.target.classList,

// maybe we should start with, "are we clicking on a counter?"

if (sl) {

if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) {

let counterParent = Counter.get(tTn, tTa).parentElement,

sl.setAttributeNS(null, 'x1', x);

sl.setAttributeNS(null, 'y1', y);

SightLine.clear();

} else {

let [x, y] = point.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g),

sl.setAttributeNS(null, 'x1', x);

sl.setAttributeNS(null, 'y1', y);

if (selected) {

let { troopNumber: tn, troopAllegiance: ta } = selected.dataset,

if (counter && (!sl || sl.classList.contains('active'))) {

if (counter.dataset.x !== e.target.dataset.x || counter.dataset.y !== e.target.dataset.y) {

});

// ptGrp.appendChild(document.createTextNode('\n '));

}));

document.querySelectorAll('.soldier-record').forEach(el =>

}));

document.querySelectorAll('.end-turn').forEach(el =>

let dataSelector = `[data-troop-allegiance="${allegiance}"]`,

el.setAttribute('disabled', '');

let selectedSoldier = document.querySelector('.soldier-record.selected');

if (selectedSoldier) {

let existingArcs = svg.querySelectorAll(

`#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`

}

}));

recordSheetVisibility.addEventListener('input', e => {

let divs = document.querySelectorAll('#content div');

clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : '');

}));

let selected = RecordSheet.getSelected();

if (selected) {

}

}

});