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
---
public/assets/css/map.css | 14 ++++++++++++++
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);
--
cgit v1.2.3