91 lines
3.2 KiB
JavaScript
91 lines
3.2 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const astroCircle = document.getElementById("astroCircle");
|
|
|
|
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;
|
|
const radius = circleSize / 2;
|
|
|
|
const numberRadius = radius + (circleSize < 400 ? 18 : 28);
|
|
const signRadius = radius * 0.84;
|
|
const planetRadius = radius * 0.66;
|
|
|
|
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;
|
|
|
|
// outside segment number
|
|
const numberX = centerX + numberRadius * Math.cos(midRad);
|
|
const numberY = centerY + numberRadius * Math.sin(midRad);
|
|
|
|
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);
|
|
|
|
// inside sign label
|
|
const signX = centerX + signRadius * Math.cos(midRad);
|
|
const signY = centerY + signRadius * Math.sin(midRad);
|
|
|
|
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);
|
|
}
|
|
|
|
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);
|
|
});
|
|
|
|
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);
|
|
});
|
|
});
|
|
} |