From 9d44de5f114cacd915661ef5b2af3e5098fee3b8 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 17 Jul 2024 18:18:23 -0700
Subject: WIP: arrange elements in a circle
---
src/modules/gameboard.js | 44 +++++++++++++++++++++++++++++++++++++-------
1 file changed, 37 insertions(+), 7 deletions(-)
(limited to 'src')
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);
--
cgit v1.2.3