| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-21 10:18:44 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-21 10:36:18 -0700 |
| commit | eb5ffc8cb55b652fb5eb89679634ce9622e987e0 (patch) | |
| tree | b3ce1ea7ee1c0f1074225b943824da4fcb3c352e /index.js | |
| parent | e6fcfb4ac90df3e3d9f6079c9db69808e78fbcd6 (diff) | |
Clean up a bit
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 174 |
1 files changed, 89 insertions, 85 deletions
@@ -1,90 +1,112 @@ -var rect = document.querySelector('rect#map'); +var isEven = n => n % 2 === 0; var toFixed = n => Number.parseFloat(n).toFixed(2); var radToDeg = radians => radians * 180 / Math.PI; +let getPointCoords = (x, y) => { + let point = document.querySelector(`[data-x="${x}"][data-y="${y}"]`); + + return [point.x.baseVal.value, point.y.baseVal.value] +}; + var svgns = "http://www.w3.org/2000/svg", - svg = document.querySelector('svg'); + svg = document.querySelector('svg'), + rect = document.querySelector('rect#map'); + +var columnCount = 33, + rowCount = 25, + pointDistanceInInches = 1.005; + +var columns = [...Array(columnCount).keys()], + rows = [...Array(rowCount).keys()], + points = rows.map(y => columns.map(x => [x, y])); + +var xOffset = 0.25, + yOffset = 0.45; + calcY = Math.sqrt(3) * pointDistanceInInches / 2, + alternatingOffset = pointDistanceInInches / 2; rect.addEventListener('mousemove', e => { var rect = e.target.getBoundingClientRect(); - var x = e.clientX - rect.left; // x position within the element - var y = e.clientY - rect.top; // y position within the element + var x = e.clientX - rect.left; + var y = e.clientY - rect.top; + let [maxX, maxY] = [e.target.width, e.target.height].map(v => v.baseVal.valueInSpecifiedUnits); - // console.log( - // 'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"', - // 'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"' - // ); + // console.log('x', `${toFixed(x / rect.width * maxX)}"`, 'y', `${toFixed(y / rect.height * maxY)}"`); let aim = document.querySelector('.firing-arc.active'); if (aim) { - aim.setAttributeNS(null, 'x2', `${x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits}in`); - aim.setAttributeNS(null, 'y2', `${y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits}in`); - - let w = aim.x2.baseVal.value - aim.x1.baseVal.value; - let h = -(aim.y2.baseVal.value - aim.y1.baseVal.value); - let angle = radToDeg(Math.atan(h / w)); - - if (w < 0 && h > 0) { - angle = 180 - Math.abs(angle); - } else if (w < 0 && h < 0) { - angle = 180 + Math.abs(angle); - } else if (w > 0 && h < 0) { - angle = 360 - Math.abs(angle); - } - - console.log(`${toFixed(angle)}\u00B0`); + let xIntercept = y => (y - y1) * (x2 - x1) / (y2 - y1) + x1; + let yIntercept = x => (x - x1) * (y2 - y1) / (x2 - x1) + y1; + let newX, newY; - let [x1, y1, x2, y2] = [aim.x1, aim.y1, aim.x2, aim.y2].map(v => v.baseVal.valueInSpecifiedUnits); - let [width, height] = [e.target.width, e.target.height].map(v => v.baseVal.valueInSpecifiedUnits); + let [x1, y1] = [aim.x1, aim.y1].map(v => v.baseVal.valueInSpecifiedUnits); + let [x2, y2] = [x / rect.width * maxX, y / rect.height * maxY]; - console.log(`(${x2 - x1}, ${y2 - y1})`); + // TODO: handle horizontal and vertical lines if (x2 - x1 > 0 && y2 - y1 > 0) { - let yWhenXisMax = (width - x1) * (y2 - y1) / (x2 - x1) + y1; - let xWhenYisMax = (height - y1) * (x2 - x1) / (y2 - y1) + x1; + let yWhenXisMax = yIntercept(maxX); + let xWhenYisMax = xIntercept(maxY); - if (xWhenYisMax <= width) { - aim.setAttributeNS(null, 'x2', `${xWhenYisMax}in`); - aim.setAttributeNS(null, 'y2', `${height}in`); + if (xWhenYisMax <= maxX) { + newX = xWhenYisMax; + newY = maxY; } else { - aim.setAttributeNS(null, 'x2', `${width}in`); - aim.setAttributeNS(null, 'y2', `${yWhenXisMax}in`); + newX = maxX; + newY = yWhenXisMax; } } else if (x2 - x1 > 0 && y2 - y1 < 0) { - let yWhenXisMax = (width - x1) * (y2 - y1) / (x2 - x1) + y1; - let xWhenYisZero = (0 - y1) * (x2 - x1) / (y2 - y1) + x1; + let yWhenXisMax = yIntercept(maxX); + let xWhenYisZero = xIntercept(0); - if (xWhenYisZero <= width) { - aim.setAttributeNS(null, 'x2', `${xWhenYisZero}in`); - aim.setAttributeNS(null, 'y2', `0`); + if (xWhenYisZero <= maxX) { + newX = xWhenYisZero; + newY = 0; } else { - aim.setAttributeNS(null, 'x2', `${width}in`); - aim.setAttributeNS(null, 'y2', `${yWhenXisMax}in`); + newX = maxX; + newY = yWhenXisMax; } } else if (x2 - x1 < 0 && y2 - y1 < 0) { - let yWhenXisZero = (0 - x1) * (y2 - y1) / (x2 - x1) + y1; - let xWhenYisZero = (0 - y1) * (x2 - x1) / (y2 - y1) + x1; + let yWhenXisZero = yIntercept(0); + let xWhenYisZero = xIntercept(0); if (yWhenXisZero >= 0) { - aim.setAttributeNS(null, 'x2', `0`); - aim.setAttributeNS(null, 'y2', `${yWhenXisZero}in`); + newX = 0; + newY = yWhenXisZero; } else { - aim.setAttributeNS(null, 'x2', `${xWhenYisZero}in`); - aim.setAttributeNS(null, 'y2', `0`); + newX = xWhenYisZero; + newY = 0; } } else { - let yWhenXisZero = (0 - x1) * (y2 - y1) / (x2 - x1) + y1; - let xWhenYisMax = (height - y1) * (x2 - x1) / (y2 - y1) + x1; + let yWhenXisZero = yIntercept(0); + let xWhenYisMax = xIntercept(maxY); - if (yWhenXisZero <= height) { - aim.setAttributeNS(null, 'x2', `0`); - aim.setAttributeNS(null, 'y2', `${yWhenXisZero}in`); + if (yWhenXisZero <= maxY) { + newX = 0; + newY = yWhenXisZero; } else { - aim.setAttributeNS(null, 'x2', `${xWhenYisMax}in`); - aim.setAttributeNS(null, 'y2', `${height}in`); + newX = xWhenYisMax; + newY = maxY; } } + + aim.setAttributeNS(null, 'x2', `${newX}in`); + aim.setAttributeNS(null, 'y2', `${newY}in`); + + let width = aim.x2.baseVal.value - aim.x1.baseVal.value; + let height = -(aim.y2.baseVal.value - aim.y1.baseVal.value); + let angle = Math.abs(radToDeg(Math.atan(height / width))); + + if (width < 0 && height > 0) { + angle = 180 - angle; + } else if (width < 0 && height < 0) { + angle = 180 + angle; + } else if (width > 0 && height < 0) { + angle = 360 - angle; + } + + console.log(`${toFixed(angle)}\u00B0`); } }); @@ -139,21 +161,6 @@ document.querySelector('#set-firing-arc').addEventListener('click', e => { } }); -var columnCount = 33, - rowCount = 25, - pointDistanceInInches = 1.005; - -var isEven = n => n % 2 === 0; - -var columns = [...Array(columnCount).keys()], - rows = [...Array(rowCount).keys()], - points = rows.map(y => columns.map(x => [x, y])); - -var xOffset = 0.25, - yOffset = 0.45; - calcY = Math.sqrt(3) * pointDistanceInInches / 2, - alternatingOffset = pointDistanceInInches / 2; - points.forEach((row, index) => row.forEach(([x, y]) => { var cx = x * pointDistanceInInches + xOffset + (isEven(index) ? alternatingOffset : 0), cy = y * pointDistanceInInches * calcY + yOffset, @@ -199,19 +206,12 @@ points.forEach((row, index) => row.forEach(([x, y]) => { svg.appendChild(point); })); -let getPointCoords = (x, y) => { - let point = document.querySelector(`[data-x="${x}"][data-y="${y}"]`); - - return [point.x.baseVal.value, point.y.baseVal.value] -}; +let smlArc = document.createElementNS(svgns, 'polygon'); +smlArc.setAttributeNS(null, 'id', 'small-arc'); +let smlArcPoints = `${getPointCoords(1, 24)} ${getPointCoords(1, 21)} ${getPointCoords(2, 21)}`; +smlArc.setAttributeNS(null, 'points', smlArcPoints); - -let smallArc = document.createElementNS(svgns, 'polygon'); -smallArc.setAttributeNS(null, 'id', 'small-arc'); -let smallArcPoints = `${getPointCoords(1, 24)} ${getPointCoords(1, 21)} ${getPointCoords(2, 21)}`; -smallArc.setAttributeNS(null, 'points', smallArcPoints); - -svg.appendChild(smallArc); +svg.appendChild(smlArc); let medArc = document.createElementNS(svgns, 'polygon'); medArc.setAttributeNS(null, 'id', 'med-arc'); @@ -227,7 +227,11 @@ lrgArc.setAttributeNS(null, 'points', lrgArcPoints); svg.appendChild(lrgArc); -arc = document.querySelector('#med-arc'); -let [ox, oy] = getPointCoords(4, 24); -arc.style.transformOrigin = `${ox}px ${oy}px`; -arc.style.transform = 'rotate(90deg)';
\ No newline at end of file +// arc = document.querySelector('#med-arc'); +// let [ox, oy] = getPointCoords(4, 24); +// arc.style.transformOrigin = `${ox}px ${oy}px`; +// arc.style.transform = 'rotate(90deg)'; + +var smlArcAngle = radToDeg((Math.atan(pointDistanceInInches / (6 * calcY)) * 2)); +var medArcAngle = radToDeg((Math.atan((3 * pointDistanceInInches) / (6 * calcY)) * 2)); +var lrgArcAngle = radToDeg((Math.atan((21 * pointDistanceInInches) / (6 * calcY)) * 2));
\ No newline at end of file |