@@ -399,23 +404,23 @@
var moonRiseArrow = document.getElementById('moon-rise-arrow');
var moonSetArrow = document.getElementById('moon-set-arrow');
- var SUN_ORBIT_RADIUS = 55;
- var MOON_ORBIT_RADIUS = 75;
+ var SUN_ORBIT_RADIUS = 65;
+ var MOON_ORBIT_RADIUS = 88;
// Generate hour marks
for (var i = 0; i < 12; i++) {
var angle = (i * 30) * Math.PI / 180;
- var x1 = 100 + Math.sin(angle) * 85;
- var y1 = 100 - Math.cos(angle) * 85;
- var x2 = 100 + Math.sin(angle) * 90;
- var y2 = 100 - Math.cos(angle) * 90;
+ var x1 = 140 + Math.sin(angle) * 122;
+ var y1 = 140 - Math.cos(angle) * 122;
+ var x2 = 140 + Math.sin(angle) * 128;
+ var y2 = 140 - Math.cos(angle) * 128;
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', '#e6dfd1');
- line.setAttribute('stroke-width', i % 3 === 0 ? 3 : 1);
+ line.setAttribute('stroke-width', i % 3 === 0 ? 4 : 3);
hourMarks.appendChild(line);
}
@@ -475,6 +480,9 @@
return 'Abnehm. Sichel';
}
+ var CENTER_X = 140;
+ var CENTER_Y = 140;
+
function angleForTime(date) {
// 0:00 = bottom, 6:00 = left, 12:00 = top, 18:00 = right
var hours = date.getHours() + date.getMinutes() / 60;
@@ -484,8 +492,8 @@
function pointOnCircle(date, radius) {
var angle = angleForTime(date);
return {
- x: 100 + Math.cos(angle) * radius,
- y: 100 + Math.sin(angle) * radius
+ x: CENTER_X + Math.cos(angle) * radius,
+ y: CENTER_Y + Math.sin(angle) * radius
};
}
@@ -496,7 +504,6 @@
var endA = angleForTime(endDate) * 180 / Math.PI;
var diff = endA - startA;
if (diff < 0) diff += 360;
- // Use shorter arc (largeArc=0) unless the difference exceeds 180
var largeArc = diff > 180 ? 1 : 0;
return 'M ' + sp.x + ' ' + sp.y + ' A ' + radius + ' ' + radius + ' 0 ' + largeArc + ' 1 ' + ep.x + ' ' + ep.y;
}
@@ -510,7 +517,6 @@
return { point: pointOnCircle(now, MOON_ORBIT_RADIUS), isVisible: false };
}
- // Determine if moon is visible (above horizon)
var isVisible;
if (rise <= set) {
isVisible = (now >= rise && now <= set);
@@ -522,16 +528,13 @@
return { point: pointOnCircle(now, MOON_ORBIT_RADIUS), isVisible: false };
}
- // Above horizon - interpolate between moonrise and moonset
var riseAngle = angleForTime(rise);
var setAngle = angleForTime(set);
- // Calculate the angular difference (could be negative if crossing midnight)
var diff = setAngle - riseAngle;
if (diff > Math.PI) diff -= 2 * Math.PI;
if (diff < -Math.PI) diff += 2 * Math.PI;
- // Calculate progress (0 at rise, 1 at set)
var progress;
if (rise <= set) {
progress = (now.getTime() - rise.getTime()) / (set.getTime() - rise.getTime());
@@ -548,8 +551,8 @@
var moonAngle = riseAngle + diff * progress;
return {
point: {
- x: 100 + Math.cos(moonAngle) * MOON_ORBIT_RADIUS,
- y: 100 + Math.sin(moonAngle) * MOON_ORBIT_RADIUS
+ x: CENTER_X + Math.cos(moonAngle) * MOON_ORBIT_RADIUS,
+ y: CENTER_Y + Math.sin(moonAngle) * MOON_ORBIT_RADIUS
},
isVisible: true
};
@@ -563,7 +566,6 @@
icon.innerHTML = '';
var r = 9;
- // Background: dark full circle
var bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
bg.setAttribute('cx', '12'); bg.setAttribute('cy', '12'); bg.setAttribute('r', r);
bg.setAttribute('fill', '#1c1b1f');
@@ -571,28 +573,19 @@
bg.setAttribute('stroke-width', '0.5');
icon.appendChild(bg);
- // Calculate terminator ellipse radius from fraction
- // rx > 0 (crescent): terminator curves into the lit area
- // rx < 0 (gibbous): terminator curves into the dark area
var rx = r * (1 - 2 * fraction);
var path;
if (phase < 0.5) {
- // Waxing: right side lit, left side dark
if (rx > 0) {
- // Crescent
path = 'M 12 3 A 9 9 0 0 0 12 21 A ' + rx + ' 9 0 0 1 12 3 Z';
} else {
- // Gibbous
path = 'M 12 3 A 9 9 0 0 0 12 21 A ' + Math.abs(rx) + ' 9 0 0 0 12 3 Z';
}
} else {
- // Waning: left side lit, right side dark
if (rx > 0) {
- // Crescent
path = 'M 12 3 A 9 9 0 0 1 12 21 A ' + rx + ' 9 0 0 0 12 3 Z';
} else {
- // Gibbous
path = 'M 12 3 A 9 9 0 0 1 12 21 A ' + Math.abs(rx) + ' 9 0 0 1 12 3 Z';
}
}
@@ -604,7 +597,7 @@
}
function renderRpgMoon(phase, fraction) {
- var r = 9;
+ var r = 10;
rpgMoonDark.setAttribute('d', '');
var rx = r * (1 - 2 * fraction);
@@ -612,15 +605,15 @@
var path;
if (phase < 0.5) {
if (rx > 0) {
- path = 'M 0 -9 A 9 9 0 0 0 0 9 A ' + rx + ' 9 0 0 1 0 -9 Z';
+ path = 'M 0 -10 A 10 10 0 0 0 0 10 A ' + rx + ' 10 0 0 1 0 -10 Z';
} else {
- path = 'M 0 -9 A 9 9 0 0 0 0 9 A ' + Math.abs(rx) + ' 9 0 0 0 0 -9 Z';
+ path = 'M 0 -10 A 10 10 0 0 0 0 10 A ' + Math.abs(rx) + ' 10 0 0 0 0 -10 Z';
}
} else {
if (rx > 0) {
- path = 'M 0 -9 A 9 9 0 0 1 0 9 A ' + rx + ' 9 0 0 0 0 -9 Z';
+ path = 'M 0 -10 A 10 10 0 0 1 0 10 A ' + rx + ' 10 0 0 0 0 -10 Z';
} else {
- path = 'M 0 -9 A 9 9 0 0 1 0 9 A ' + Math.abs(rx) + ' 9 0 0 1 0 -9 Z';
+ path = 'M 0 -10 A 10 10 0 0 1 0 10 A ' + Math.abs(rx) + ' 10 0 0 1 0 -10 Z';
}
}
@@ -641,9 +634,9 @@
var minuteAngle = (m + s / 60) * 6;
var secondAngle = s * 6;
- hourHand.setAttribute('transform', 'rotate(' + hourAngle + ' 100 100)');
- minuteHand.setAttribute('transform', 'rotate(' + minuteAngle + ' 100 100)');
- secondHand.setAttribute('transform', 'rotate(' + secondAngle + ' 100 100)');
+ hourHand.setAttribute('transform', 'rotate(' + hourAngle + ' 140 140)');
+ minuteHand.setAttribute('transform', 'rotate(' + minuteAngle + ' 140 140)');
+ secondHand.setAttribute('transform', 'rotate(' + secondAngle + ' 140 140)');
// Sun times
var sunTimes = SunCalc.getTimes(now, PASSAU_LAT, PASSAU_LON);
@@ -739,9 +732,6 @@
var elapsed = (Date.now() - startTime) % CYCLE;
var t = elapsed / CYCLE;
var c = getColor(t);
- if (currentWeatherCode >= 0) {
- c = applyWeatherModifiers(c, currentWeatherCode);
- }
effect.setOptions({
skyColor: c.sky,
cloudColor: c.cloud,
@@ -900,16 +890,21 @@
(dayDate.getMonth() + 1 < 10 ? '0' : '') + (dayDate.getMonth() + 1) + '.';
}
- // Morning (8), Noon (14), Evening (20)
- var slots = [8, 14, 20];
+ // Morning (8), Noon (14), Evening (20), Night (2)
+ var slots = [8, 14, 20, 2];
var slotsHtml = '';
for (var i = 0; i < slots.length; i++) {
var slotDate = new Date(dayDate);
slotDate.setHours(slots[i], 0, 0, 0);
+ if (i === 3 && d > 0) {
+ slotDate.setDate(slotDate.getDate() + 1);
+ } else if (i === 3 && d === 0) {
+ slotDate.setDate(slotDate.getDate() + 1);
+ }
var slotIdx = findHourlyIndex(slotDate, hourly.time);
var slotCode = hourly.weather_code[slotIdx];
var slotTemp = hourly.temperature_2m[slotIdx];
- var slotLabels = ['M', 'Mi', 'A'];
+ var slotLabels = ['M', 'Mi', 'A', 'N'];
slotsHtml += '
' +
'
' + weatherSVG(slotCode) + '
' +
'
' + slotLabels[i] + '
' +