now showing night shots at appropriate times

This commit is contained in:
2026-01-09 19:06:33 -07:00
parent e003cb2fb1
commit aaca102b32
2 changed files with 26 additions and 16 deletions

View File

@@ -104,14 +104,8 @@ const sunPosition = computed(() => {
const isDaytime = t >= 0 && t <= 1;
if (!isDaytime) {
// Nighttime: position sun below horizon
// Before sunrise: position on left side below horizon
// After sunset: position on right side below horizon
if (currentHour < sunriseHour) {
return { cx: 20, cy: 85 };
} else {
return { cx: 180, cy: 85 };
}
// Nighttime: show moon at top of arc
return { cx: 100, cy: 10, isNight: true };
}
// Quadratic bezier curve: M 10 70 Q 100 -10 190 70
@@ -127,7 +121,7 @@ const sunPosition = computed(() => {
const cx = oneMinusT * oneMinusT * p0.x + 2 * oneMinusT * t * p1.x + t * t * p2.x;
const cy = oneMinusT * oneMinusT * p0.y + 2 * oneMinusT * t * p1.y + t * t * p2.y;
return { cx: Math.round(cx), cy: Math.round(cy) };
return { cx: Math.round(cx), cy: Math.round(cy), isNight: false };
});
const formattedSunrise = computed(() => {
@@ -269,14 +263,23 @@ const formattedSunset = computed(() => {
stroke-width="2"
stroke-dasharray="4 4"
/>
<!-- Sun position indicator -->
<!-- Sun position indicator (daytime) -->
<circle
v-if="!sunPosition.isNight"
:cx="sunPosition.cx"
:cy="sunPosition.cy"
r="8"
fill="rgb(250, 204, 21)"
class="drop-shadow-lg transition-all duration-1000"
/>
<!-- Moon indicator (nighttime) -->
<g v-else :transform="`translate(${sunPosition.cx - 8}, ${sunPosition.cy - 8})`" class="transition-all duration-1000">
<path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8c1.1 0 2.1-.2 3-.6-1.8-1.1-3-3.1-3-5.4s1.2-4.3 3-5.4C10.1.2 9.1 0 8 0z"
fill="rgb(226, 232, 240)"
class="drop-shadow-lg"
/>
</g>
</svg>
</div>
<div class="flex justify-between text-xs text-white/40">