| 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-06-17 08:29:41 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-17 08:29:41 -0700 |
| commit | 93bea8e4b169d657f6144e9333df0f8564705a9b (patch) | |
| tree | a3ea617d2db0903b5354a72b5910f27bf4873d41 /src/radial.js | |
| parent | 0a30f7c7efe31f84f7ac33435a6c5c52ac14579d (diff) | |
Group text and use elements
Diffstat (limited to 'src/radial.js')
| -rw-r--r-- | src/radial.js | 28 |
1 files changed, 17 insertions, 11 deletions
diff --git a/src/radial.js b/src/radial.js index 98ae53d..3db0f82 100644 --- a/src/radial.js +++ b/src/radial.js @@ -45,6 +45,10 @@ function generateRadialCoords({ q, r, s }, radius) { return list; } +function sameSigns(a, b) { + return a > -1 && b > -1 || a < 0 && b < 0; +} + const hex = { inradius: 8.66, circumradius: 10, @@ -53,7 +57,7 @@ const hex = { const horzSpacing = hex.inradius; const vertSpacing = hex.circumradius * 3 / 2; -const list = generateRadialCoords({ q: 0, r: 0, s: 0 }, 5); +const list = generateRadialCoords({ q: 0, r: 0, s: 0 }, 2); const svg = document.querySelector('svg'); const xmlns = 'http://www.w3.org/2000/svg'; @@ -64,7 +68,7 @@ list.forEach(key => { if (q === s) x = 0; - else if (q > -1 && s > -1 || q < 0 && s < 0) + else if (sameSigns(q, s)) x = Math.abs(q - s); else x = Math.abs(q) + Math.abs(s); @@ -72,25 +76,27 @@ list.forEach(key => { x = (q > s ? -1 : 1) * x * horzSpacing; y = r * vertSpacing; + const g = document.createElementNS(xmlns, 'g'); + g.setAttributeNS(null, 'transform', `translate(${x}, ${y})`); + const use = document.createElementNS(xmlns, 'use'); use.setAttributeNS(null, 'href', '#hex'); - use.setAttributeNS(null, 'x', x); - use.setAttributeNS(null, 'y', y); const qText = document.createElementNS(xmlns, 'text'); qText.textContent = q; - qText.setAttributeNS(null, 'x', x - 3); - qText.setAttributeNS(null, 'y', y - 3); + qText.setAttributeNS(null, 'x', -3); + qText.setAttributeNS(null, 'y', -3); const rText = document.createElementNS(xmlns, 'text'); rText.textContent = r; - rText.setAttributeNS(null, 'x', x + 5); - rText.setAttributeNS(null, 'y', y + 1.5); + rText.setAttributeNS(null, 'x', 5); + rText.setAttributeNS(null, 'y', 1.5); const sText = document.createElementNS(xmlns, 'text'); sText.textContent = s; - sText.setAttributeNS(null, 'x', x - 3); - sText.setAttributeNS(null, 'y', y + 5); + sText.setAttributeNS(null, 'x', -3); + sText.setAttributeNS(null, 'y', + 5); - [use, qText, rText, sText].forEach(el => svg.appendChild(el)); + [use, qText, rText, sText].forEach(el => g.appendChild(el)); + svg.appendChild(g); }); |