diff --git a/damage_block.css b/damage_block.css deleted file mode 100644 index f050e36..0000000 --- a/damage_block.css +++ /dev/null @@ -1,64 +0,0 @@ -.damage-selector, .damage-effect-indicator, label { - width: 20px; -} - -.damage-selector, .damage-effect-indicator { - height: 30px; -} - -.damage-selector { - margin: 0; - padding: 0; - border: 1px solid black; - display: inline-block; -} - -.damage-effect-indicator { - position: absolute; - margin: 0; - padding: 0; - display: block; - pointer-events: none; - font-family: monospace; -} - -.damage-selector.clear { - background-color: white; -} - -.damage-selector.bruise { - background-color: orange; -} - -.damage-selector.lethal { - background-color: red; -} - -label input[type="radio"] { - position: absolute; - opacity: 0; - margin: 0; - padding: 0; -} - -label { - display: none; - margin: 0 auto; - padding: 0; -} - -label:first-of-type { - display: block; -} - -label:has(input:checked) { - display: none; -} - -label:has(+ label input:checked) { - display: none; -} - -label:has(input:checked) + label { - display: block; -} diff --git a/index.html b/index.html deleted file mode 100644 index a317b49..0000000 --- a/index.html +++ /dev/null @@ -1,388 +0,0 @@ - - - - Infantry Combat Solo Basic - - - - - - - -
-
-
davion
- -
liao
- -
- -
-
- hex -
- - - - - -
-
-
- grid -
- - - - - -
-
-
- map2 -
- - - - - -
-
-
- map3 -
- - - - - -
-
-
- - - - - - - - 1 - 2 - 3 - 4 - 5 - 6 - 7 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Distance: - -
-
- -
- -
- Set firing arc: - - - -
- Prone: - Turn: - - 0 - ◓ - ◒ - -
- -
-
- -

- Davion - - -
- -

-
- 1 - Rifle - 4L - 1-27 - 28-75 -
-
- 2 - Rifle - 4L - 1-27 - 28-75 -
-
- 3 - SMG - 3L - 1-15 - 16-25 -
-
- 4 - SMG - 3L - 1-15 - 16-25 -
-
- 5 - SMG - 3L - 1-15 - 16-25 -
-
- 6 - SMG - 3L - 1-15 - 16-25 -
-
- 7 - Blazer - 4L - 1-17 - 18-105 -
-
-
- -

- Liao - - -
- -

-
- 1 - Rifle - 4L - 1-27 - 28-75 -
-
- 2 - Rifle - 4L - 1-27 - 28-75 -
-
- 3 - SMG - 3L - 1-15 - 16-25 -
-
- 4 - SMG - 3L - 1-15 - 16-25 -
-
- 5 - SMG - 3L - 1-15 - 16-25 -
-
- 6 - SMG - 3L - 1-15 - 16-25 -
-
- 7 - Blazer - 4L - 1-17 - 18-105 -
-
-
-
- - - - - \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index 2b13004..0000000 --- a/index.js +++ /dev/null @@ -1,1171 +0,0 @@ -function isEven(n) { - return n % 2 === 0; -} - -function radToDeg(radians) { - return radians * 180 / Math.PI; -} - -function calculateAngle(xDiff, yDiff) { - yDiff = -yDiff; - let angle = Math.abs(Math.atan(yDiff / xDiff)); - - if (xDiff < 0 && yDiff > 0) { - angle = Math.PI - angle; - } else if (xDiff < 0 && yDiff < 0) { - angle = Math.PI + angle; - } else if (xDiff > 0 && yDiff < 0) { - angle = 2 * Math.PI - angle; - } - - return angle; -} - -function edgePoint(x1, y1, x2, y2, maxX, maxY) { - let pointCoords, - xDiff = x2 - x1, - yDiff = y2 - y1, - xIntercept = y => (y - y1) * xDiff / yDiff + x1, - yIntercept = x => (x - x1) * yDiff / xDiff + y1; - - if (xDiff > 0 && yDiff > 0) { - let x = xIntercept(maxY); - - pointCoords = x <= maxX ? [x, maxY] : [maxX, yIntercept(maxX)]; - } else if (xDiff > 0 && yDiff < 0) { - let y = yIntercept(maxX); - - pointCoords = y >= 0 ? [maxX, y] : [xIntercept(0), 0]; - } else if (xDiff < 0 && yDiff < 0) { - let x = xIntercept(0); - - pointCoords = x >= 0 ? [x, 0] : [0, yIntercept(0)]; - } else { - let y = yIntercept(0); - - pointCoords = y <= maxY ? [0, y] : [xIntercept(maxY), maxY]; - } - - return pointCoords; -} - -let getPointCoords = (x, y) => { - let point = document.querySelector(`[data-x="${x}"][data-y="${y}"]`); - - return [point.x.baseVal.value, point.y.baseVal.value] -}; - -function positionFiringArc(e) { - let activeFiringArc = document.querySelector('polygon.firing-arc.active'); - - // TODO: handle exactly horizontal and vertical lines - - if (activeFiringArc) { - let activeFiringArcOutline = document.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`); - board = document.getElementById('image-maps'), - { width, height } = board.getBBox(), - pt = new DOMPoint(e.clientX, e.clientY), - { x: pointerX, y: pointerY } = pt.matrixTransform(board.getScreenCTM().inverse()), - [maxXpx, maxYpx] = [width, height], - {x: x1px, y: y1px} = activeFiringArc.points[0]; - - let [x2px, y2px] = [ - pointerX / width * maxXpx, - pointerY / height * maxYpx - ]; - - let xDiff = x2px - x1px; - let yDiff = y2px - y1px; - let angle = calculateAngle(xDiff, yDiff); - - let arcAngle = FIRING_ARC_SIZE[activeFiringArc.dataset.size]; - let distance = Math.sqrt((x2px - x1px)**2 + (y2px - y1px)**2); - let yDelta = distance * Math.cos(angle) * Math.tan(arcAngle); - let xDelta = distance * Math.sin(angle) * Math.tan(arcAngle); - - let [newY1, newX1] = [y2px + yDelta, x2px + xDelta]; - let [newY2, newX2] = [y2px - yDelta, x2px - xDelta]; - - [newX1, newY1] = edgePoint(x1px, y1px, newX1, newY1, maxXpx, maxYpx); - [newX2, newY2] = edgePoint(x1px, y1px, newX2, newY2, maxXpx, maxYpx); - - let oppositeEdgeConditions = [ - newX1 == 0 && newX2 == maxXpx, - newX2 == 0 && newX1 == maxXpx, - newY1 == 0 && newY2 == maxYpx, - newY2 == 0 && newY1 == maxYpx - ] - - let orthogonalEdgeConditions = [ - (newX1 == 0 || newX1 == maxXpx) && (newY2 == 0 || newY2 == maxYpx), - (newX2 == 0 || newX2 == maxXpx) && (newY1 == 0 || newY1 == maxYpx), - ] - - let points; - - if (oppositeEdgeConditions.some(e => e)) { - let cornerPoints; - - if (xDiff > 0 && yDiff > 0) { - if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) { - cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]]; - } else { - cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]]; - } - } else if (xDiff > 0 && yDiff < 0) { - if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) { - cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]]; - } else { - cornerPoints = [[0, 0], [maxXpx, 0]]; - } - - } else if (xDiff < 0 && yDiff > 0) { - if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) { - cornerPoints = [[0, maxYpx], [0, 0]]; - } else { - cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]]; - } - - } else { - if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) { - cornerPoints = [[0, maxYpx], [0, 0]]; - } else { - cornerPoints = [[0, 0], [maxXpx, 0]]; - } - - } - points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`; - } else if (orthogonalEdgeConditions.some(e => e)) { - let cornerPoints = []; - let cp1, cp2; - - if (newX1 == 0 || newX1 == maxXpx) { - cp1 = [newX1, yDiff > 0 ? maxYpx : 0]; - } else { - cp1 = [xDiff > 0 ? maxXpx : 0, newY1]; - } - - if (newX2 == 0 || newX2 == maxXpx) { - cp2 = [newX2, yDiff > 0 ? maxYpx : 0]; - } else { - cp2 = [xDiff > 0 ? maxXpx : 0, newY2]; - } - - if (cp1[0] == cp2[0] && cp1[1] == cp2[1]) { - cornerPoints.push(cp1); - } else { - cornerPoints.push(cp1); - cornerPoints.push([xDiff > 0 ? maxXpx : 0, yDiff > 0 ? maxYpx : 0]) - cornerPoints.push(cp2); - } - - points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`; - } else { - points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`; - } - - activeFiringArcOutline.setAttributeNS(null, 'points', points); - activeFiringArc.setAttributeNS(null, 'points', points); - } -} - -function evenr_to_axial(x, y) { - return {q: x - (y + (y & 1)) / 2, r: y}; -} - -function axial_to_evenr(q, r) { - return {x: q + (r + (r & 1)) / 2, y: r}; -} - -function axial_distance(q1, r1, q2, r2) { - return (Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2; -} - -function offset_distance(x1, y1, x2, y2) { - let { q: q1, r: r1 } = evenr_to_axial(x1, y1), - { q: q2, r: r2 } = evenr_to_axial(x2, y2); - - return axial_distance(q1, r1, q2, r2); -} - -function cube_to_axial(q, r, s) { - return { q: q, r: r }; -} - -function axial_to_cube(q, r) { - return { q: q, r: r, s: -q - r}; -} - -function cube_round(q, r, s) { - rQ = Math.round(q); - rR = Math.round(r); - rS = Math.round(s); - - let q_diff = Math.abs(rQ - q), - r_diff = Math.abs(rR - r), - s_diff = Math.abs(rS - s); - - if (q_diff > r_diff && q_diff > s_diff) { - rQ = -rR - rS; - } else if (r_diff > s_diff) { - rR = -rQ - rS; - } else { - rS = -rQ - rR; - } - - return {q: rQ, r: rR, s: rS}; -} - -function axial_round(q, r) { - let cube = axial_to_cube(q, r), - round = cube_round(cube.q, cube.r, cube.s), - axial = cube_to_axial(round.q, round.r, round.s); - - return {q: axial.q, r: axial.r}; -} - -function lerp(a, b, t) { - return a + (b - a) * t; -} - -function axial_lerp(q1, r1, q2, r2, t) { - return { q: lerp(q1, q2, t), r: lerp(r1, r2, t) }; -} - -function linedraw(x1, y1, x2, y2) { - let axial1 = evenr_to_axial(x1, y1), - axial2 = evenr_to_axial(x2, y2), - n = offset_distance(x1, y1, x2, y2), - results = []; - - for (let i = 0; i <= n; i++) { - let lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i), - round = axial_round(lerp.q, lerp.r), - { x, y } = axial_to_evenr(round.q, round.r); - - results.push([x, y]); - } - - return results; -} - -const svgns = "http://www.w3.org/2000/svg", - svg = document.querySelector('svg'), - hex = document.getElementById('point'), - ptGrp = document.getElementById('points'), - cntrGrp = document.getElementById('counters'), - settingsPanel = document.getElementById('panel'), - recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible'); - -const q = s => document.querySelector(s), - qA = s => document.querySelectorAll(s); - -const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } = - svg.viewBox.baseVal; - -const COLUMN_COUNT = 33, - ROW_COUNT = 51, -// const COLUMN_COUNT = 20, -// ROW_COUNT = 20, - HORZ_POINT_DISTANCE = 1.005, - VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2, - ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2, - CIRCUMRADIUS = Math.max(...[...new Set(Object.values(hex.points).flatMap(({x, y}) => [x, y]))]), - INRADIUS = CIRCUMRADIUS * Math.sqrt(3) / 2, - [COLUMNS, ROWS] = [COLUMN_COUNT, ROW_COUNT].map(n => [...Array(n).keys()]), - POINTS = ROWS.map(y => COLUMNS.map(x => [x, y])); - -const FIRING_ARC_SIZE = { - 'small': Math.atan(HORZ_POINT_DISTANCE / (6 * VERT_POINT_DISTANCE)), - 'medium': Math.atan((HORZ_POINT_DISTANCE / 2) / VERT_POINT_DISTANCE), - 'large': Math.atan((21 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE)) - } - -let prevVb = localStorage.getItem('viewBox'); - -if (prevVb) { - svg.setAttributeNS(null, 'viewBox', prevVb); -} - -let info = document.getElementById('status'); - -Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => { -// [].forEach(fieldset => { - const identityMtx = [1, 0, 0, 1, 0, 0]; - const target = document.getElementById(fieldset.name); - const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx; - const inputs = fieldset.querySelectorAll('input'); - - if (transform) { - const [a, b, c, d, e, f] = transform.map(n => parseFloat(n)); - - // a c e - // b d f - - const scaleX = Math.sqrt(a**2 + c**2); - const scaleY = Math.sqrt(b**2 + d**2); - - let values = { - scaleX: Math.round(scaleX * 1000) / 1000, - scaleY: Math.round(scaleY * 1000) / 1000, - translateX: e, - translateY: f, - rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10 - } - - inputs.forEach(input => input.value = values[input.name]); - } - - inputs.forEach(input => { - input.addEventListener('pointerenter', e => e.target.focus()); - - input.addEventListener('input', e => { - let { translateX, translateY, rotate, scaleX, scaleY } = - Object.values(inputs).reduce((acc, input) => { - acc[input.name] = input.value; - return acc; - }, {}); - - let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`; - target.style.transform = transform; - }); - - input.addEventListener('pointerleave', () => document.activeElement.blur()); - }); -}); - -function ptGrpToSvgPt(x, y) { - let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g), - mtx = new DOMMatrix(transProp || ''), - pt = new DOMPoint(x, y), - svgP = pt.matrixTransform(mtx); - - return svgP; -} - -const grid = document.getElementById('grid'); - -const Counter = new function() { - let container = ptGrp, - selectedClass = 'selected', - - dataSelector = function(troopNumber, allegiance) { - return `[data-troop-number="${troopNumber}"][data-troop-allegiance="${allegiance}"]`; - }, - - selector = function(troopNumber, allegiance) { - return `use.counter${dataSelector(troopNumber, allegiance)}`; - }, - - position = function(x, y) { - return `g[data-x="${x}"][data-y="${y}"]`; - }, - - counterPosition = function(x, y) { - return `use.counter[data-x="${x}"][data-x="${y}"]`; - }, - - traceSelector = function(troopNumber, allegiance) { - return `polyline.move-trace${dataSelector(troopNumber, allegiance)}`; - }, - - clickClone = function() { - let { troopNumber, troopAllegiance, x, y } = this.dataset, - [xAttr, yAttr] = this.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g); - - if (Counter.isSelected(troopNumber, troopAllegiance)) { - let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)), - points = trace.getAttribute('points').split(' '); - - if (`${xAttr},${yAttr}` == points.at(0)) { - let counter = Counter.get(troopNumber, troopAllegiance); - counter.setAttributeNS(null, 'x', 0); - counter.setAttributeNS(null, 'y', 0); - counter.dataset.x = x; - counter.dataset.y = y; - container.querySelector(`g[data-x="${x}"][data-y="${y}"]`).appendChild(counter); - - Counter.removeClones(this); - trace.remove(); - } else { - points = points.filter(p => p != `${xAttr},${yAttr}`).join(' '); - - trace.setAttributeNS(null, 'points', points); - } - - this.remove(); - } - }, - - pointerOver = function() { - let { troopNumber, troopAllegiance } = this.dataset; - cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`); - - if (cp) { - cp.style.display = 'none'; - } - }, - - pointerOut = function() { - let { troopNumber, troopAllegiance } = this.dataset; - cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`); - - if (cp) { - let isVisible = - document - .getElementById('toggle-firing-arc-vis') - .querySelector(`input[data-allegiance="${troopAllegiance}"]`) - .checked; - - cp.style.display = isVisible ? 'none' : ''; - } - }, - - click = function() { - if (this.classList.contains(selectedClass)) { - let { troopNumber, troopAllegiance } = this.dataset, - trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)); - - if (trace) { - let points = trace.getAttribute('points').split(' '), - [xAttr, yAttr] = points.at(-2).split(','), - clone = container.querySelector(`g[transform="translate(${xAttr} ${yAttr})"] ${dataSelector(troopNumber, troopAllegiance)}.clone`); - - points.pop(); - - if (points.length >= 2) { - trace.setAttributeNS(null, 'points', points.join(' ')); - } else { - trace.remove(); - } - - this.setAttributeNS(null, 'x', clone.getAttribute('x')); - this.setAttributeNS(null, 'y', clone.getAttribute('y')); - this.dataset.x = clone.dataset.x; - this.dataset.y = clone.dataset.y; - - container.querySelector(`g[data-x="${this.dataset.x}"][data-y="${this.dataset.y}"]`).appendChild(this); - - clone.remove(); - } - } - }, - - dblClick = function() { - if (this.classList.contains(selectedClass)) { - let { troopNumber, troopAllegiance } = this.dataset, - trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)); - - if (!trace) { - Counter.remove(this); - document.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove()); - } - } - }; - - this.get = function(troopNumber, allegiance) { - return container.querySelector(`${selector(troopNumber, allegiance)}:not(.clone)`); - }; - - this.getAt = function(x, y) { - return container.querySelector(`${counterPosition(x, y)}:not(.clone)`); - }; - - this.select = function({ dataset: { troopNumber, troopAllegiance }}) { - this.unSelect(); - - let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`); - - if (counter) { - counter.classList.add(selectedClass); - } - }; - - this.unSelect = function() { - let selected = container.querySelector(`.${selectedClass}`); - - if (selected) { - let { troopNumber, troopAllegiance } = selected.dataset; - - selected.classList.remove(selectedClass); - selected.removeAttribute('style'); - - container - .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`) - .forEach(el => el.removeAttribute('style')); - } - }; - - this.isSelected = function(troopNumber, allegiance) { - return container.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null; - }; - - this.place = function({ dataset: { troopNumber, troopAllegiance }}, point) { - let counter, points, - counterNodeList = container.querySelectorAll(selector(troopNumber, troopAllegiance)); - - if (counterNodeList.length > 0) { - let counters = Array.from(counterNodeList), - original = counters.find(el => !el.classList.contains('clone')), - trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)); - - // let ptContainers = counters.map(c => ptGrp.querySelector(position(c.dataset.x, c.dataset.y))); - - let current = { - x: point.dataset.x, - y: point.dataset.y, - // xAttr: point.getAttribute('x'), - // yAttr: point.getAttribute('y'), - transform: container.querySelector(position(point.dataset.x, point.dataset.y)).getAttribute('transform') - }, - previous = { - x: original.dataset.x, - y: original.dataset.y, - // xAttr: original.getAttribute('x'), - // yAttr: original.getAttribute('y'), - transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform') - }; - - [current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g); - [previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g); - - counter = original.cloneNode(); - counter.setAttributeNS(null, 'x', 0); - counter.setAttributeNS(null, 'y', 0); - counter.dataset.x = previous.x; - counter.dataset.y = previous.y; - counter.classList.remove(selectedClass); - counter.classList.add('clone'); - - original.setAttributeNS(null, 'x', 0); - original.setAttributeNS(null, 'y', 0); - original.dataset.x = current.x; - original.dataset.y = current.y; - - container.querySelector(`g[data-x="${current.x}"][data-y="${current.y}"]`).appendChild(original); - - if (!trace) { - trace = document.createElementNS(svgns, 'polyline'); - points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`; - - trace.dataset.troopNumber = troopNumber; - trace.dataset.troopAllegiance = troopAllegiance; - trace.classList.add('move-trace'); - - grid.prepend(trace) - // container.prepend(trace); - } else { - points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`; - } - - trace.setAttributeNS(null, 'points', points); - counter.addEventListener('click', clickClone); - } else { - counter = document.createElementNS(svgns, 'use'), - - counter.setAttributeNS(null, 'href', `#${troopAllegiance}-${troopNumber}`); - counter.classList.add('counter', 'selected'); - counter.setAttributeNS(null, 'x', point.getAttribute('x')); - counter.setAttributeNS(null, 'y', point.getAttribute('y')); - counter.dataset.troopNumber = troopNumber; - counter.dataset.troopAllegiance = troopAllegiance; - counter.dataset.x = point.dataset.x; - counter.dataset.y = point.dataset.y; - counter.style.pointerEvents = 'auto'; - - counter.addEventListener('pointerover', pointerOver); - counter.addEventListener('pointerout', pointerOut); - counter.addEventListener('click', click); - counter.addEventListener('dblclick', dblClick); - } - - container.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`).appendChild(counter); - - // container.appendChild(counter); - }; - - this.remove = function({ dataset: { troopNumber, troopAllegiance }}) { - container - .querySelectorAll(dataSelector(troopNumber, troopAllegiance)) - .forEach(el => el.remove()); - }; - - this.removeClones = function({ dataset: { troopNumber, troopAllegiance }}) { - container - .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`) - .forEach(el => el.remove()); - }; - - this.endMove = function(el) { - let { troopNumber, troopAllegiance } = el.dataset; - let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)); - - if (trace) { - trace.remove(); - } - - Counter.removeClones(el); - }; - - this.hasProne = function(troopNumber, troopAllegiance) { - let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`; - - return !!document.querySelector(selector); - }; -}; - -const RecordSheet = new function() { - let clipUnclippedFiringArcs = function() { - let unclipped = document.querySelectorAll('#firing-arcs polygon:not([clip-path])'); - - unclipped.forEach(el => { - let { troopNumber, troopAllegiance } = el.dataset, - clipPathId = `clip-path-${troopAllegiance}-${troopNumber}`; - - let isVisible = - document - .getElementById('toggle-firing-arc-vis') - .querySelector(`input[data-allegiance="${troopAllegiance}"]`) - .checked; - - if (isVisible) { - document.getElementById(clipPathId).style.display = 'none'; - } - - el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`); - }); - }; - - this.unSelect = function() { - let selected = this.getSelected(); - - if (selected) { - selected.classList.remove('selected'); - document.getElementById('toggle-prone-counter').checked = false; - } - - clipUnclippedFiringArcs(); - Counter.unSelect(); - }; - - this.getSelected = function() { - return document.querySelector('.soldier-record.selected'); - }; - - this.select = function(el) { - let { troopNumber, troopAllegiance } = el.dataset, - proneStatus = Counter.hasProne(troopNumber, troopAllegiance); - - RecordSheet.unSelect(); - document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected'); - document.getElementById('toggle-prone-counter').checked = proneStatus; - existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`); - existingArcs.forEach(el => el.removeAttribute('clip-path')); - }; -}; - -const SightLine = new function() { - this.clear = function() { - let sl = grid.querySelector('line.sight-line'); - let target = grid.querySelector(`use[href="#point"].sight-line-target`); - - if (sl) { - sl.remove(); - } - - if (target) { - target.classList.remove('sight-line-target'); - } - - this.clearHexes(); - }; - - this.clearHexes = function() { - ptGrp.querySelectorAll('use[href="#point"].active').forEach(el => el.classList.remove('active')); - }; - - this.draw = function(x1, y1, x2, y2) { - let source = ptGrp.querySelector(`g[data-x="${x1}"][data-y="${y1}"]`), - target = ptGrp.querySelector(`g[data-x="${x2}"][data-y="${y2}"]`), - - [slX1, slY1] = source.getAttribute('transform').match(/-?\d+\.?\d*/g), - [slX2, slY2] = target.getAttribute('transform').match(/-?\d+\.?\d*/g), - - sightLine = document.createElementNS(svgns, 'line'); - - sightLine.classList.add('sight-line'); - sightLine.classList.add('active'); - sightLine.setAttributeNS(null, 'x1', slX1); - sightLine.setAttributeNS(null, 'y1', slY1); - sightLine.setAttributeNS(null, 'x2', slX2); - sightLine.setAttributeNS(null, 'y2', slY2); - - grid.appendChild(sightLine); - - let coords = [x1, y1, x2, y2]; - this.drawHexes(...coords); - }; - - this.drawHexes = function(...coords) { - this.clearHexes() - - info.querySelector('#hex-count').textContent = offset_distance(...coords); - info.style.display = 'block'; - - let lineCoords = linedraw(...coords); - lineCoords.shift(); - let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', '); - - ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active')); - }; -} - -POINTS.forEach((row, index) => row.forEach(([x, y]) => { - var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0), - cy = y * 3 / 2 * CIRCUMRADIUS, - point = document.createElementNS(svgns, 'use'), - group = document.createElementNS(svgns, 'g'); - - cx = parseFloat(cx.toFixed(1)); - cy = parseFloat(cy.toFixed(1)); - - point.setAttributeNS(null, 'href', `#point`); - // point.setAttributeNS(null, 'x', cx); - // point.setAttributeNS(null, 'y', cy); - - point.setAttributeNS(null, 'x', 0); - point.setAttributeNS(null, 'y', 0); - - point.dataset.x = x; - point.dataset.y = y; - - group.setAttributeNS(null, 'transform', `translate(${cx} ${cy})`); - group.dataset.x = x; - group.dataset.y = y; - - group.appendChild(point); - - group.addEventListener('pointerout', e => { - group.classList.remove('hover'); - }); - - group.addEventListener('click', e => { - let cl = e.target.classList, - sl = grid.querySelector('line.sight-line'), - targetIsSomeOtherUnitCounter = cl.contains('counter') && !cl.contains('clone'), - selected = RecordSheet.getSelected(); - - // maybe we should start with, "are we clicking on a counter?" - - - if (sl) { - let { troopNumber: sTn, troopAllegiance: sTa} = selected.dataset, - { troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset, - sightLineInLockedPosition = !sl.classList.contains('active'), - targetIsCounterOrCloneOfSelected = cl.contains('counter') && sTn == tTn && sTa == tTa; - - if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) { - let counterParent = Counter.get(tTn, tTa).parentElement, - [x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g), - target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`), - { x: x1, y: y1 } = counterParent.dataset, - { x: x2, y: y2 } = target.dataset; - - sl.setAttributeNS(null, 'x1', x); - sl.setAttributeNS(null, 'y1', y); - - SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n))); - } else if (targetIsCounterOrCloneOfSelected || targetIsSomeOtherUnitCounter) { - if (targetIsSomeOtherUnitCounter) { - RecordSheet.select(e.target); - Counter.select(e.target); - } - - SightLine.clear(); - } - } else if (targetIsSomeOtherUnitCounter) { - RecordSheet.select(e.target); - Counter.select(e.target); - } - }); - - point.addEventListener('click', e => { - let selectedSoldier = document.querySelector('.soldier-record.selected'); - let existingOccupant = - svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`); - - if (selectedSoldier && !existingOccupant) { - let sl = svg.querySelector('.sight-line'); - - Counter.place(selectedSoldier, point); - - if (sl) { - if (sl.classList.contains('active')) { - SightLine.clear(); - } else { - let [x, y] = point.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g), - target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`), - { x: x1, y: y1 } = point.dataset, - { x: x2, y: y2 } = target.dataset; - - sl.setAttributeNS(null, 'x1', x); - sl.setAttributeNS(null, 'y1', y); - - SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n))); - } - } - } - }); - - group.addEventListener('contextmenu', e => { - e.preventDefault(); - - let sl = svg.querySelector('.sight-line'); - - if (sl) { - sl.classList.toggle('active'); - - if (sl.classList.contains('active')) { - SightLine.clear(); - } else { - group.querySelector(`use[href="#point"]`).classList.add('sight-line-target'); - } - - group.dispatchEvent(new MouseEvent('pointerover')); - } - }); - - group.addEventListener('pointerover', e => { - group.classList.add('hover'); - - let selected = RecordSheet.getSelected(); - - if (selected) { - let { troopNumber: tn, troopAllegiance: ta } = selected.dataset, - counter = Counter.get(tn, ta), - sl = document.querySelector('line.sight-line'); - - if (counter && (!sl || sl.classList.contains('active'))) { - if (counter.dataset.x !== e.target.dataset.x || counter.dataset.y !== e.target.dataset.y) { - let coords = [ - counter.dataset.x, - counter.dataset.y, - e.target.dataset.x, - e.target.dataset.y - ].map(n => parseInt(n)); - - SightLine.draw(...coords); - } - } - } - }); - - group.addEventListener('pointerout', e => { - let sl = svg.querySelector('.sight-line.active'); - - if (sl && sl.classList.contains('active')) { - SightLine.clear(); - } - }); - - ptGrp.appendChild(group); -})); - -document.querySelectorAll('.soldier-record').forEach(el => - el.addEventListener('click', e => { - if (el.classList.contains('selected')) { - el.classList.remove('selected'); - RecordSheet.unSelect(); - Counter.unSelect(); - } else { - RecordSheet.select(el); - Counter.select(el); - } - - SightLine.clear(); - }) -); - -// document.querySelector('#grid').addEventListener('click', e => { -// let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`), -// sl = svg.querySelector('.sight-line'); - -// if (sl) { -// sl.classList.add('active'); -// point.dispatchEvent(new MouseEvent('mouseout')); -// point.dispatchEvent(new MouseEvent('pointerover')); -// } -// }); - -document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => { - let selected = RecordSheet.getSelected(); - - if (selected) { - Counter.endMove(selected); - RecordSheet.unSelect(); - selected.classList.toggle('movement-ended'); - } -})); - -document.querySelectorAll('.end-turn').forEach(el => - el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => { - let dataSelector = `[data-troop-allegiance="${allegiance}"]`, - records = Array.from(qA(`.soldier-record${dataSelector}`)), - turnCounter = document.getElementById('turn-count'), - { textContent: count, dataset: { update }} = turnCounter; - - el.setAttribute('disabled', ''); - - document - .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`) - .removeAttribute('disabled'); - - if (update == '1') { - turnCounter.children.namedItem('count').textContent++ - turnCounter.dataset.update = '0'; - } else { - turnCounter.dataset.update = '1'; - } - - qA(`#firing-arcs ${dataSelector}`).forEach(el => el.remove()); - - records - .sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber) - .forEach(el => el.classList.remove('movement-ended')); - - RecordSheet.select(records.at(0)); - Counter.select(records.at(0)); - }) -); - -document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => { - let selectedSoldier = document.querySelector('.soldier-record.selected'); - - if (selectedSoldier) { - let {troopNumber, troopAllegiance} = selectedSoldier.dataset, - counter = Counter.get(troopNumber, troopAllegiance); - - let existingArcs = document.querySelectorAll( - `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]` - ); - - existingArcs.forEach(el => el.remove()); - - if (counter) { - let arcLayer = document.getElementById('shapes'); - let outlineLayer = document.getElementById('lines'); - let arcContainer = document.getElementById('firing-arcs'); - - let [x, y] = counter.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g); - - let grid = document.getElementById('grid'); - const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g); - const pt = new DOMPoint(x, y); - const mtx = new DOMMatrix(transform); - let tPt = pt.matrixTransform(mtx); - - let pivotPoint = [tPt.x, tPt.y]; - let firingArc = document.createElementNS(svgns, 'polygon'); - let firingArcOutline = document.createElementNS(svgns, 'polygon'); - - firingArc.classList.add('firing-arc', 'active'); - firingArc.dataset.troopNumber = troopNumber; - firingArc.dataset.troopAllegiance = troopAllegiance; - firingArc.dataset.size = e.target.dataset.size; - firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`); - - firingArcOutline.dataset.troopNumber = troopNumber; - firingArcOutline.dataset.troopAllegiance = troopAllegiance; - firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`); - - let clipShape = document.createElementNS(svgns, 'circle'); - clipShape.setAttributeNS(null, 'cx', tPt.x); - clipShape.setAttributeNS(null, 'cy', tPt.y); - clipShape.setAttributeNS(null, 'r', 100); - - let clipPath = document.createElementNS(svgns, 'clipPath'); - clipPath.setAttributeNS(null, 'id', `clip-path-${troopAllegiance}-${troopNumber}`); - clipPath.dataset.troopNumber = troopNumber; - clipPath.dataset.troopAllegiance = troopAllegiance; - clipPath.appendChild(clipShape); - - arcContainer.appendChild(clipPath); - arcLayer.appendChild(firingArc); - outlineLayer.appendChild(firingArcOutline); - - let firingArcPlacementListener = e => { - document.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active')); - ptGrp.removeAttribute('style'); - svg.removeEventListener('mousemove', positionFiringArc); - firingArc.removeEventListener('click', firingArcPlacementListener); - firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement); - }; - - let cancelFiringArcPlacement = e => { - e.preventDefault(); - - firingArc.removeEventListener('click', firingArcPlacementListener); - firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement); - - let existingArcs = document.querySelectorAll( - `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]` - ); - - existingArcs.forEach(el => el.remove()); - - ptGrp.removeAttribute('style'); - svg.removeEventListener('mousemove', positionFiringArc); - }; - - ptGrp.style.pointerEvents = 'none'; - svg.addEventListener('mousemove', positionFiringArc); - firingArc.addEventListener('click', firingArcPlacementListener); - firingArc.addEventListener('contextmenu', cancelFiringArcPlacement); - } - } -})); - -svg.addEventListener('wheel', e => { - e.preventDefault(); - - const pt = new DOMPoint(e.clientX, e.clientY), - svgP = pt.matrixTransform(svg.getScreenCTM().inverse()); - - let { x, y, width, height } = svg.viewBox.baseVal, - - widthDelta = width * 0.25, - heightDelta = height * 0.25, - - xChange = (svgP.x - x) / width * widthDelta, - yChange = (svgP.y - y) / height * heightDelta, - - widthChange = (1 - ((svgP.x - x) / width)) * widthDelta, - heightChange = (1 - ((svgP.y - y) / height)) * heightDelta, - - newX = parseInt(e.deltaY < 0 ? x + xChange : x - xChange), - newWidth = parseInt(e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange), - - newY = parseInt(e.deltaY < 0 ? y + yChange : y - yChange), - newHeight = parseInt(e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange); - - let vb = `${newX} ${newY} ${newWidth} ${newHeight}` - - // TODO attribute change event? - localStorage.setItem('viewBox', vb); - svg.setAttributeNS(null, 'viewBox', vb); -}); - -svg.addEventListener('pointerdown', e => { - e.preventDefault(); - - const minPanDistanceThreshold = 5; - - let dist, ctm, - pan = false, - { x, y, width, height } = svg.viewBox.baseVal, - startPt = new DOMPoint(e.clientX, e.clientY), - movePt = new DOMPoint(); - - function pointerMove(e) { - movePt.x = e.clientX; - movePt.y = e.clientY; - - if (!pan) { - dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2); - - if (dist >= minPanDistanceThreshold) { - pan = true; - svg.setPointerCapture(e.pointerId); - startPt.x = e.clientX; - startPt.y = e.clientY; - } - } - - if (pan) { - ctm = svg.getScreenCTM().inverse(); - - const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)), - moveX = parseInt(svgStartPt.x - svgMovePt.x + x), - moveY = parseInt(svgStartPt.y - svgMovePt.y + y); - - let vb = `${moveX} ${moveY} ${width} ${height}`; - - localStorage.setItem('viewBox', vb); - svg.setAttributeNS(null, 'viewBox', vb); - } - } - - function pointerUp(e) { - svg.removeEventListener('pointermove', pointerMove); - svg.removeEventListener('pointerup', pointerUp); - } - - svg.addEventListener('pointermove', pointerMove); - svg.addEventListener('pointerup', pointerUp); -}); - -recordSheetVisibility.addEventListener('input', e => { - let divs = document.querySelectorAll('#content div'); - - divs.forEach(d => { - if (recordSheetVisibility.checked) { - d.style.display = d.id == 'record-sheet' ? 'flex' : 'block'; - } else { - d.style.display = 'none'; - } - }); -}); - -document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => { - let clipPaths = svg.querySelectorAll(`clipPath[data-troop-allegiance="${el.dataset.allegiance}"]`); - - clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : ''); -})); - -document.getElementById('toggle-prone-counter').addEventListener('input', function(e) { - let selected = RecordSheet.getSelected(); - - if (selected) { - let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`); - - if (this.checked) { - let counter = document.createElementNS(svgns, 'use'); - counter.setAttributeNS(null, 'href', '#counter-prone'); - template.appendChild(counter); - } else { - template.querySelector('[href="#counter-prone"]').remove(); - } - } -}); - -(function debug() { - function drawLine(x1, y1, x2, y2) { - let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`); - let end = ptGrp.querySelector(`[data-x="${x2}"][data-y="${y2}"]`); - let [startX, startY] = [start.x.baseVal.value, start.y.baseVal.value]; - let [endX, endY] = [end.x.baseVal.value, end.y.baseVal.value]; - - let startP = new DOMPoint(startX, startY); - let endP = new DOMPoint(endX, endY); - - let tStart = startP.matrixTransform(mtx); - let tEnd = endP.matrixTransform(mtx); - - let line = document.createElementNS(svgns, 'line'); - line.setAttributeNS(null, 'x1', tStart.x); - line.setAttributeNS(null, 'y1', tStart.y); - line.setAttributeNS(null, 'x2', tEnd.x); - line.setAttributeNS(null, 'y2', tEnd.y); - line.classList.add('debug'); - - line.setAttributeNS(null, 'stroke', 'gold'); - line.setAttributeNS(null, 'stroke-width', 2); - svg.appendChild(line); - - return line; - } - - let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g), - mtx = new DOMMatrix(transProp || ''), - circR = (new DOMPoint(0, 3 * CIRCUMRADIUS / 2)).matrixTransform(mtx).y * 2 / 3; -})(); \ No newline at end of file diff --git a/soldier_record_block.css b/soldier_record_block.css deleted file mode 100644 index 47bf583..0000000 --- a/soldier_record_block.css +++ /dev/null @@ -1,35 +0,0 @@ -span { - font-size: smaller; - font-family: monospace; - margin-right: 1em; -} - -.physical-status-track { - text-align: center; -} - -.physical-status-track span { - margin: 0; - padding: 0; - display: inline-block; - vertical-align: middle; -} - -.physical-status-track span[slot="block-number"] { - font-family: serif; - font-size: unset; -} - -ul { - margin: 0; - padding: 0; -} - -ul li { - display: inline; - margin-left: 1em; -} - -p { - margin: 0; -} diff --git a/style.css b/style.css deleted file mode 100644 index 088cde4..0000000 --- a/style.css +++ /dev/null @@ -1,437 +0,0 @@ -body { - margin: 0; - display: flex; - overflow: hidden; -} - -#map-container { - flex-basis: 100%; - position: relative; - max-height: 100vh; -} - -svg { - background-color: darkgray; - width: 100%; - height: 100%; -} - -svg image { - image-rendering: pixelated; -} - -svg image.map-scans { - image-rendering: auto; -} - -svg text { - user-select: none; -} - -div#status { - position: absolute; - bottom: 0; - right: 0; - margin: 3px; - display: none; - user-select: none; -} - -#hex-counter { - padding: 2px; - background-color: rgba(255, 255, 255, 0.5); - border-radius: 2px; -} - -#hex-count { - font-family: monospace; -} - -div#content { - display: flex; - /* display: none; */ - border-left: 1px solid gray; - flex-basis: 0; - /* overflow: scroll; */ - max-height: 100vh; - flex-direction: column; - /* padding: 2px; */ - position: relative; -} - -#content > div:first-of-type { - padding: 2px; - border-bottom: 1px solid gray; -} - -#content #buttons { - line-height: 1.5em; -} - -#content input[type="checkbox"].visible { - position: absolute; - right: 0; -} - -#record-sheet { - /* max-height: 100%; */ - overflow-y: auto; - display: flex; - flex-direction: column; - /* display: none; */ - background-color: gray; -} - -#record-sheet > div { - /* padding: 0 2px; */ - overflow-y: auto; - /* border: 1px solid black; */ -} - -#record-sheet > div > p { - margin: 0; - margin-top: 0px; - margin-bottom: 1px; - padding: 6px 2px; - background-color: lightgray; -} - -#record-sheet > div > div { - /* border: 1px solid black; */ - margin-bottom: 1px; - padding: 6px 4px; - /* border-radius: 4px; */ -} - -#record-sheet > div:last-of-type { - margin-top: 2px; -} - -#record-sheet > div > div:last-of-type { - margin-bottom: 0; -} - -svg > defs > #point { - fill: inherit; - fill-opacity: inherit; - stroke: inherit; - stroke-width: inherit; - stroke-opacity: inherit; -} - -use[href="#point"] { - opacity: 0; - fill: teal; - fill-opacity: 0.2; - stroke: black; - stroke-width: 0.5px; -} - -use[href="#point"]:hover, use[href="#point"].hover { - opacity: 1; - fill: orange; -} - -use[href="#point"].active { - opacity: 0.2; -} - -use[href="#point"].sight-line-target { - opacity: 1; - stroke: orangered; - /* stroke-width: 1px; */ - fill-opacity: 0.04; -} - -polyline.move-trace { - stroke: gray; - stroke-dasharray: 2; - fill: none; -} - -g#grid { - transform: translate(19px, 31px) scale(4); -} - -#background { - fill: #bacae3; -} - -#map2 { - transform-origin: 0px 0px; - transform: translate(-0.9px, -2.4px) scale(0.999, 1.007); -} - -#map3 { - transform-origin: 0px 0px; - /* transform: translateY(1518px); */ - transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002); -} - -#panel { - display: none; - position: absolute; - right: 0; - background-color: white; - border: 1px solid black; - padding: 2px; -} - -#panel fieldset label { - display: block; - text-align: right; -} - -#toggle-firing-arc-vis { - position: absolute; - right: 0; - padding-top: 20px; -} - -#toggle-firing-arc-vis div { - margin-top: 10px; - writing-mode: vertical-lr; - transform: rotate(180deg); -} - -#counter-base { - r: inherit; -} - -g.troop-counter-template, g.troop-counter-template use { - r: inherit; -} - -g.troop-counter, g.troop-counter use { - r: inherit; -} - -g.troop-counter-template text { - fill: white; - font-size: 12px; - font-weight: bold; - font-family: monospace; - cursor: default; - text-anchor: middle; - pointer-events: none; - user-select: none; - transform: translateY(4px); - stroke: none; -} - -g.troop-counter [href="#counter-prone"] { - transform: translate(-5px, 6px); -} - -g#points g use.counter { - r: 5px; -} - -g#points g.hover use[href="#point"] { - opacity: 1; - fill: orange; -} - -g#points g.hover use.counter { - r: 7px; -} - -g#points g.hover use.counter:not(.clone) { - /* stroke: orange; */ - /* stroke-width: 2px; */ -} - -g#points use.counter[data-troop-allegiance="davion"] { - fill: red; -} - -g#points use.counter[data-troop-allegiance="liao"] { - fill: green; -} - -g#points use.clone { - stroke: white; - stroke-width: 0.5px; - stroke-dasharray: 1; -} - -g#points use[data-troop-allegiance="davion"].clone { - fill: rgb(255, 126, 126); -} - -g#points use[data-troop-allegiance="liao"].clone { - fill: rgb(130, 190, 130); -} - - -/* ======================================================= */ - -/* g#counters { - pointer-events: none; -} */ - -/* g#counters use { - r: 5px; -} - -g#counters use:hover { - stroke: orange; - stroke-width: 2px; - r: 8px; -} */ - -/* g#counters use[data-troop-allegiance="davion"] { - fill: red; -} - -g#counters use[data-troop-allegiance="liao"] { - fill: green; -} */ - -/* g#counters use.clone { - stroke: white; - stroke-width: 0.5px; - stroke-dasharray: 1; -} - -g#counters use[data-troop-allegiance="davion"].clone { - fill: rgb(255, 126, 126); -} - -g#counters use[data-troop-allegiance="liao"].clone { - fill: rgb(130, 190, 130); -} */ - -text.counter, #troop-counter text { - font-size: 12px; - font-weight: bold; - /* stroke: black; */ - fill: white; - /* stroke-width: 0.5px; */ - font-family: sans-serif; - cursor: default; - text-anchor: middle; - /* transform: translateY(25%); */ - transform: translateY(4px); - pointer-events: none; - user-select: none; -} - -polygon.firing-arc[data-troop-allegiance="davion"] { - fill: red; -} - -polygon.firing-arc[data-troop-allegiance="liao"] { - fill: green; -} - -#shapes { - opacity: 0.1; -} - -#shapes polygon { - stroke: none; -} - -#lines polygon { - fill: none; - stroke: black; -} - -button.set-firing-arc img { - vertical-align: middle; - pointer-events: none; -} - -.sight-line { - stroke: orangered; - stroke-width: 0.5px; - pointer-events: none; -} - -.soldier-record { - display: inline-block; - position: relative; - white-space: nowrap; - background-color: white; -} - -.soldier-record [slot="troop-number"] { - color: white; - font-weight: bold; - border-radius: 10px; - padding: 0 4px; -} - -.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] { - background-color: red; -} - -.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] { - background-color: green; -} - -.soldier-record.selected { - background-color: khaki; -} - -.soldier-record.movement-ended { - background-color: none; - opacity: 0.5; -} - -.wall { - fill: none; - stroke: red; - stroke-width: 7px; - opacity: 0.7; -} - -#asterisk { - font-size: 30; -} - -img.logo { - width: 100px; - margin: 0 auto; - display: block; -} - -#turn-count[data-update="0"] span.inning-bottom { - display: none; -} - -#turn-count[data-update="1"] span.inning-top { - display: none; -} - -@media (width >= 1800px) { - #record-sheet { - flex-direction: row; - /* gap: 2px; */ - } - - #record-sheet > div > p { - margin-top: 0; - } - - #record-sheet > div { - /* max-height: unset; */ - overflow-y: unset; - height: min-content; - } - - #record-sheet div:last-of-type { - margin-top: 0; - } - - #record-sheet > div:first-of-type > div { - /* margin-left: 1px; */ - margin-right: 1px; - } - - #record-sheet > div:last-of-type > div { - margin-left: 1px; - /* margin-right: 1px; */ - } -} \ No newline at end of file