| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-17 18:18:23 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-17 19:03:27 -0700 |
| commit | 9d44de5f114cacd915661ef5b2af3e5098fee3b8 (patch) | |
| tree | f50ce43c6469e60e958167ec0daa4bedd3206325 | |
| parent | e2f6fbe291c10d4ae2a512ea1fb91cbc787fafa6 (diff) | |
WIP: arrange elements in a circle
| -rw-r--r-- | public/assets/css/map.css | 14 | ||||
| -rw-r--r-- | src/modules/gameboard.js | 44 |
2 files changed, 51 insertions, 7 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css index f8f926d..cd7ea6a 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -455,3 +455,17 @@ text.elevation { pointer-events: none; fill: black; } + +.radial-icon { + transition: cx 0.25s, cy 0.25s; +} + +[data-q][data-r][data-s][data-t] .radial-icon { + cx: calc(var(--cx) / 20); + cy: calc(var(--cy) / 20) +} + +[data-q][data-r][data-s][data-t]:hover .radial-icon { + cx: var(--cx); + cy: var(--cy); +} diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 538ff92..ae03364 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -398,23 +398,53 @@ export function start(el) { arcs.append(leftArc); mech.append(arcs); - //const cell = getCell(-4, 6, -2, 0); + const cell = getCell(2, 0, -2, 0); //cell.append(mask); //cell.append(mech); - //const pt = document.createElementNS(svgns, 'circle'); - //pt.setAttributeNS(null, 'r', 3); - //pt.setAttributeNS(null, 'fill', 'lime'); - //pt.setAttributeNS(null, 'fill-opacity', 0.5); + const icons = Array(4).fill(null); + const length = 10; + + const gravity = 1; + const lateralForce = gravity; + const rads = Math.atan(lateralForce / gravity); + const mult = icons.length % 2 ? index => Math.ceil(index / 2) : index => Math.floor(index / 2) + 0.5; + const iconBestFitCount = 8; + const divider = icons.length > iconBestFitCount ? iconBestFitCount / icons.length : 1; + + function getRandomIntInclusive(min, max) { + const minCeiled = Math.ceil(min); + const maxFloored = Math.floor(max); + return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive + } + + icons.forEach((color, index) => { + const theta = rads * (index % 2 ? -1 : 1) * mult(index) * divider; + const cx = length * Math.sin(theta); + const cy = length * Math.cos(theta); + + const randomColor = `rgb(${getRandomIntInclusive(0, 200)}, ${getRandomIntInclusive(0, 200)}, ${getRandomIntInclusive(0, 200)})`; + const pt = document.createElementNS(svgns, 'circle'); + pt.classList.add('radial-icon'); + pt.setAttributeNS(null, 'r', 3); + pt.setAttributeNS(null, 'fill', randomColor); + //pt.setAttributeNS(null, 'fill-opacity', 0.5); + pt.setAttributeNS(null, 'style', `--cx: ${cx}px; --cy: ${cy}px`); + //pt.style.cx = `--cx: ${cx}px`; + //pt.style.cy = `--cy: ${cy}px`; + //pt.setAttributeNS(null, 'cx', cx); + //pt.setAttributeNS(null, 'cy', cy); + + cell.append(pt); + }); //const mechTemplate = document.createElementNS(svgns, 'use'); //mechTemplate.setAttributeNS(null, 'href', '#fallen-mech-template'); //mechTemplate.setAttribute('href', '#standing-mech-template'); //mechTemplate.setAttributeNS(null, 'href', '#vehicle-template'); - //cell.append(pt); //cell.append(mechTemplate); - //console.log(cell); + console.log(cell); /////////// Observable.subscribe('select', select); |