WIP: arrange elements in a circle

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);
+}

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');
+  const icons = Array(4).fill(null);
-  //pt.setAttributeNS(null, 'r', 3);
+  const length = 10;
-  //pt.setAttributeNS(null, 'fill', 'lime');
+
+  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);