Cleaned

js.js

@@ -1,9 +1,9 @@
 document.addEventListener("DOMContentLoaded", function () {
     const astroCircle = document.getElementById("astroCircle");
+    if (!astroCircle) return;
 
     const segmentNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 
-
     const circleSize = astroCircle.offsetWidth;
     const centerX = circleSize / 2;
     const centerY = circleSize / 2;
@@ -11,22 +11,26 @@ document.addEventListener("DOMContentLoaded", function () {
 
     const numberRadius = radius + (circleSize < 400 ? 18 : 28);
     const signRadius = radius * 0.84;
-    const planetRadius = radius * 0.66;
 
+    drawSegments(astroCircle, centerX, centerY, radius, segmentNumbers, signNames, numberRadius, signRadius);
+
+    if (typeof samplePlanets !== "undefined" && Array.isArray(samplePlanets)) {
+        placePlanetsByLongitude(astroCircle, samplePlanets, centerX, centerY, radius);
+    }
+});
+
+function drawSegments(astroCircle, centerX, centerY, radius, segmentNumbers, signNames, numberRadius, signRadius) {
     for (let i = 0; i < 12; i++) {
         const angleDeg = i * 30;
 
-        // segment divider
         const line = document.createElement("div");
         line.classList.add("segment-line");
         line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
         astroCircle.appendChild(line);
 
-        // middle of segment
         const midAngle = angleDeg + 15;
-        const midRad = (midAngle - 90) * Math.PI / 180;
+        const midRad = degToRad(midAngle - 90);
 
-        // outside segment number
         const numberX = centerX + numberRadius * Math.cos(midRad);
         const numberY = centerY + numberRadius * Math.sin(midRad);
 
@@ -37,7 +41,6 @@ document.addEventListener("DOMContentLoaded", function () {
         number.style.top = `${numberY}px`;
         astroCircle.appendChild(number);
 
-        // inside sign label
         const signX = centerX + signRadius * Math.cos(midRad);
         const signY = centerY + signRadius * Math.sin(midRad);
 
@@ -48,44 +51,73 @@ document.addEventListener("DOMContentLoaded", function () {
         sign.style.top = `${signY}px`;
         astroCircle.appendChild(sign);
     }
+}
 
-    if (typeof samplePlanets !== "undefined" && Array.isArray(samplePlanets)) {
-        placeSamplePlanets(astroCircle, samplePlanets, centerX, centerY, planetRadius);
-    }
-});
-
-function placeSamplePlanets(astroCircle, planets, centerX, centerY, planetRadius) {
-    const groupedByHouse = {};
-
-    planets.forEach(planet => {
-        if (!groupedByHouse[planet.house]) {
-            groupedByHouse[planet.house] = [];
-        }
-        groupedByHouse[planet.house].push(planet);
+function placePlanetsByLongitude(astroCircle, planets, centerX, centerY, radius) {
+    const sortedPlanets = [...planets].sort((a, b) => {
+        return (a.longitude || 0) - (b.longitude || 0);
     });
 
-    Object.keys(groupedByHouse).forEach(houseKey => {
-        const houseNumber = parseInt(houseKey, 10);
-        const housePlanets = groupedByHouse[houseNumber];
+    const usedSlots = [];
 
-        const segmentStartAngle = (houseNumber - 1) * 30;
-        const segmentMidAngle = segmentStartAngle + 15;
-        const segmentMidRad = (segmentMidAngle - 90) * Math.PI / 180;
+    sortedPlanets.forEach((planet) => {
+        const longitude = normalizeLongitude(Number(planet.longitude || 0));
 
-        const baseX = centerX + planetRadius * Math.cos(segmentMidRad);
-        const baseY = centerY + planetRadius * Math.sin(segmentMidRad);
+        // 0° Aries starts at top, so subtract 90°
+        const angleRad = degToRad(longitude - 90);
 
-        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;
+        // base position inside circle
+        let ringRadius = radius * 0.67;
 
-            const verticalOffset = index * 24;
-            planetEl.style.left = `${baseX}px`;
-            planetEl.style.top = `${baseY + verticalOffset}px`;
+        // detect nearby planets and move slightly inward/outward
+        let closeCount = 0;
+        for (let i = 0; i < usedSlots.length; i++) {
+            const diff = smallestAngleDifference(longitude, usedSlots[i].longitude);
+            if (diff < 12) {
+                closeCount++;
+            }
+        }
 
-            astroCircle.appendChild(planetEl);
+        // alternate offsets for crowded areas
+        if (closeCount > 0) {
+            const offsetPattern = [0, -18, 18, -32, 32, -44, 44];
+            const offset = offsetPattern[Math.min(closeCount, offsetPattern.length - 1)];
+            ringRadius += offset;
+        }
+
+        const x = centerX + ringRadius * Math.cos(angleRad);
+        const y = centerY + ringRadius * Math.sin(angleRad);
+
+        const planetEl = document.createElement("div");
+        planetEl.classList.add("planet-tag");
+        planetEl.innerText = planet.short;
+        planetEl.title =
+            `${planet.name} | ${planet.sign} | ${planet.degree} | ${planet.nakshatra} | ${longitude.toFixed(2)}°`;
+
+        planetEl.style.left = `${x}px`;
+        planetEl.style.top = `${y}px`;
+
+        astroCircle.appendChild(planetEl);
+
+        usedSlots.push({
+            longitude: longitude,
+            x: x,
+            y: y
         });
     });
+}
+
+function degToRad(deg) {
+    return deg * Math.PI / 180;
+}
+
+function normalizeLongitude(value) {
+    let result = value % 360;
+    if (result < 0) result += 360;
+    return result;
+}
+
+function smallestAngleDifference(a, b) {
+    let diff = Math.abs(a - b) % 360;
+    return diff > 180 ? 360 - diff : diff;
 }