Names Fix

js.js

@@ -1,47 +1,91 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
+    const astroCircle = document.getElementById("astroCircle");
 
-            const astroCircle = document.getElementById("astroCircle");
+    const segmentNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 
-            const labels = [
-                "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
-            ];
 
-            const circleSize = astroCircle.offsetWidth;
-            const centerX = circleSize / 2;
-            const centerY = circleSize / 2;
+    const circleSize = astroCircle.offsetWidth;
+    const centerX = circleSize / 2;
+    const centerY = circleSize / 2;
+    const radius = circleSize / 2;
 
-            const radius = circleSize / 2;
+    const numberRadius = radius + (circleSize < 400 ? 18 : 28);
+    const signRadius = radius * 0.84;
+    const planetRadius = radius * 0.66;
 
-            // numbers will be placed OUTSIDE the circle
-            const numberRadius = radius + 25;
+    for (let i = 0; i < 12; i++) {
+        const angleDeg = i * 30;
 
-            for (let i = 0; i < 12; i++) {
+        // segment divider
+        const line = document.createElement("div");
+        line.classList.add("segment-line");
+        line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
+        astroCircle.appendChild(line);
 
-                const angleDeg = i * 30;
-                const angleRad = (angleDeg - 90) * Math.PI / 180;
+        // middle of segment
+        const midAngle = angleDeg + 15;
+        const midRad = (midAngle - 90) * Math.PI / 180;
 
-                // draw segment divider
-                const line = document.createElement("div");
-                line.classList.add("segment-line");
-                line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
-                astroCircle.appendChild(line);
+        // outside segment number
+        const numberX = centerX + numberRadius * Math.cos(midRad);
+        const numberY = centerY + numberRadius * Math.sin(midRad);
 
-                // place number in center of segment
-                const midAngle = angleDeg + 15;
-                const midRad = (midAngle - 90) * Math.PI / 180;
+        const number = document.createElement("div");
+        number.classList.add("segment-number");
+        number.innerText = segmentNumbers[i];
+        number.style.left = `${numberX}px`;
+        number.style.top = `${numberY}px`;
+        astroCircle.appendChild(number);
 
-                const x = centerX + numberRadius * Math.cos(midRad);
-                const y = centerY + numberRadius * Math.sin(midRad);
+        // inside sign label
+        const signX = centerX + signRadius * Math.cos(midRad);
+        const signY = centerY + signRadius * Math.sin(midRad);
 
-                const number = document.createElement("div");
-                number.classList.add("segment-number");
-                number.innerText = labels[i];
+        const sign = document.createElement("div");
+        sign.classList.add("sign-label");
+        sign.innerText = signNames[i];
+        sign.style.left = `${signX}px`;
+        sign.style.top = `${signY}px`;
+        astroCircle.appendChild(sign);
+    }
 
-                number.style.left = `${x}px`;
-                number.style.top = `${y}px`;
+    if (typeof samplePlanets !== "undefined" && Array.isArray(samplePlanets)) {
+        placeSamplePlanets(astroCircle, samplePlanets, centerX, centerY, planetRadius);
+    }
+});
 
-                astroCircle.appendChild(number);
+function placeSamplePlanets(astroCircle, planets, centerX, centerY, planetRadius) {
+    const groupedByHouse = {};
 
-            }
+    planets.forEach(planet => {
+        if (!groupedByHouse[planet.house]) {
+            groupedByHouse[planet.house] = [];
+        }
+        groupedByHouse[planet.house].push(planet);
+    });
 
-        });
+    Object.keys(groupedByHouse).forEach(houseKey => {
+        const houseNumber = parseInt(houseKey, 10);
+        const housePlanets = groupedByHouse[houseNumber];
+
+        const segmentStartAngle = (houseNumber - 1) * 30;
+        const segmentMidAngle = segmentStartAngle + 15;
+        const segmentMidRad = (segmentMidAngle - 90) * Math.PI / 180;
+
+        const baseX = centerX + planetRadius * Math.cos(segmentMidRad);
+        const baseY = centerY + planetRadius * Math.sin(segmentMidRad);
+
+        housePlanets.forEach((planet, index) => {
+            const planetEl = document.createElement("div");
+            planetEl.classList.add("planet-tag");
+            planetEl.innerText = planet.short;
+            planetEl.title = planet.name + " | Segment " + planet.house + " | " + planet.sign;
+
+            const verticalOffset = index * 24;
+            planetEl.style.left = `${baseX}px`;
+            planetEl.style.top = `${baseY + verticalOffset}px`;
+
+            astroCircle.appendChild(planetEl);
+        });
+    });
+}