Web Dev Solutions

<div id="map-container">

<div id="toggle-firing-arc-vis">

</div>

<div class="map-placeholder">

<div id="content">

<input type="checkbox" class="visible"/>

<div>

Turn:

<span id="turn-count" data-update="0">

<span name="count">0</span>

<span class="inning-top">◓</span>

<span class="inning-bottom">◒</span>

</span>

</div>

<div id="record-sheet">

<!-- <img class="logo" src="logo-davion.png" /> -->

<p>

End Movement

</button>

End Turn

</button>

<br>

<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>

17th Kestral Mechanized Infantry -->

</p>

<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>

<span slot="primary-weapon-type">Rifle</span>

<span slot="primary-weapon-damage">4L</span>

<span slot="primary-weapon-damage">4L</span>

<span slot="primary-weapon-range-short">1-17</span>

<span slot="primary-weapon-range-long">18-105</span>

</div>

<!-- <img class="logo" src="logo-liao.png" /> -->

<p>

End Movement

</button>

End Turn

</button>

<br>

<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>

Aldebaran Home Guard -->

</p>

<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>

<span slot="primary-weapon-type">Rifle</span>

<span slot="primary-weapon-damage">4L</span>

<span slot="primary-weapon-range-short">1-27</span>

<span slot="primary-weapon-range-long">28-75</span>

<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>

<span slot="primary-weapon-type">Rifle</span>

<span slot="primary-weapon-damage">4L</span>

<span slot="primary-weapon-damage">4L</span>

<span slot="primary-weapon-range-short">1-17</span>

<span slot="primary-weapon-range-long">18-105</span>

</div>

</div>

</div>

<script src="index.js"></script>

</body>

</html>

stroke: black;

}

use[href="#hex"].active {

opacity: 0.2;

fill: teal;

fill-opacity: 0.04;

}

polyline.move-trace {

stroke: white;

stroke-dasharray: 2;

}

#background {

r: inherit;

}

g.troop-counter-template text {

fill: white;

font-size: 12px;

opacity: 0.5;

}

fill: rgb(255, 126, 126);

}

fill: rgb(130, 190, 130);

}

user-select: none;

}

fill: red;

}

fill: green;

}

stroke-opacity: inherit;

}

r: 5px;

}

}

}

}

fill: red;

}

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

}

/* Inradius and circumradius values come from the hexagon */

.grid, g.start-locations {

--inradius: 8.66px;

transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));

}

g[data-y="0"] { --i: 0; }

g[data-y="1"] { --i: 1; }

g[data-y="2"] { --i: 2; }

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

<svg viewBox="-18 -150 2320 3360" xmlns="http://www.w3.org/2000/svg">

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

<defs>

<!-- <g id="hex">

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

<g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>

<g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>

<image id="counter-prone" href="counter_prone.jpg" width="10"/>

<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>

<image id="numbers" href="rendered_numbers.png" width="182" height="22"/>

<g id="shapes"/>

<g id="lines"/>

</g>

</g>

</g>

</g>

<g class="grid">

<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">

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

<style>

#image-maps image {

transform: none;

}

</style>

<defs>

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

<g id="shapes"/>

<g id="lines"/>

</g>

</g>

</g>

<g class="grid"/>

</g>

<script href="map.js" data-cols="33" data-rows="77"></script>

<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">

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

<style>

#image-maps image {

transform: translate(-10px, 0px);

}

</style>

<defs>

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

<g id="shapes"/>

<g id="lines"/>

</g>

</g>

</g>

<g class="grid"/>

</g>

<script href="map.js" data-cols="33" data-rows="25"></script>

}

connectedCallback() {

this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());

}

},

background-color: gray;

}

#record-sheet > div {

/* padding: 0 2px; */

overflow-y: auto;

r: 7px;

}

g#points use.clone {

stroke: white;

stroke-width: 0.5px;

stroke-dasharray: 1;

}

fill: rgb(255, 126, 126);

}

fill: rgb(130, 190, 130);

}

text.counter, #troop-counter text {

font-size: 12px;

font-weight: bold;

user-select: none;

}

fill: red;

}

fill: green;

}

background-color: white;

}

fill: green;

}

fill: red;

}

font-family: monospace;

}

fill: red;

}

fill: green;

}

display: none;

}

@media (width >= 1800px) {

#record-sheet {

flex-direction: row;

const svg = this.contentDocument.querySelector('svg');

panzoom.start(svg);

gameboard.start(svg);

});

gameboard.setDistanceCallback((count = '-') => {

gameboard.setProneFlagCallback(checked => proneToggle.checked = checked);

gameboard.setSelectCallback(data => recordSheet.select(data));

document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {

recordSheet.endMove();

gameboard.endMove();

const gb = svg.querySelector('.gameboard');

const bg = svg.querySelector('#background');

const imageMaps = svg.querySelector('#image-maps');

if ('cols' in dataset && 'rows' in dataset) {

const cellTemplate = svg.querySelector('#hex');

createCells(grid, dataset, cellTemplate.id);

}

svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));

function setElAttrs(el, attrs) {

},

firingArcVisibility = {

},

clippedFiringArcRadius = 25;

return svg.querySelectorAll(`.counter${dataSelector(counter)}`);

}

export function getCounter(svg, selected) {

return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);

}

import * as sightLine from './game/sight_line.js';

import * as soldier from './game/soldier.js';

function getCellContents(cell) {

return cell.querySelectorAll('*:not(use[href="#hex"])');

}

return svg.querySelector('line.sight-line:not(.active)');

}

}

function getActiveSightLine(svg) {

distanceCallback && distanceCallback(hexes.length - 1);

}

export function setDistanceCallback(callback) {

distanceCallback = callback;

} else if (toPlace && !state.occupant) {

soldier.place(svg, toPlace, cell);

placing.push(toPlace);

} else if (toPlace && state.occupant) {

if (toPlace === state.occupant) {

if ('previous' in toPlace.dataset) {

toPlace = state.occupant;

soldier.removeClones(svg, toPlace);

soldier.getTrace(svg, toPlace).remove();

} else {

const index = getGridIndex(state.occupant),

trace = soldier.getTrace(svg, toPlace),

});

cell.addEventListener('pointerover', () => {

let selected = getSelected();

if (selected) {

isOnBoard = selected.parentElement.hasAttribute('data-x'),

sourceCell = selected.parentElement;

export function unSelect() {

const selected = getSelected();

unSelect();

}