sun position is now matching the arc at the time of loading the page

resources/js/pages/Weather.vue

@@ -88,6 +88,59 @@ function parseWindSpeed(windSpeed: string | null): number {
     const match = windSpeed.match(/(\d+)/);
     return match ? parseInt(match[1]) : 0;
 }
+
+// Sunrise/sunset times (in hours, 24h format)
+const sunriseHour = 6.75; // 6:45 AM
+const sunsetHour = 17.5; // 5:30 PM
+
+const sunPosition = computed(() => {
+    const now = new Date();
+    const currentHour = now.getHours() + now.getMinutes() / 60;
+
+    // Calculate progress through daylight hours (0 = sunrise, 1 = sunset)
+    let t = (currentHour - sunriseHour) / (sunsetHour - sunriseHour);
+
+    // Clamp t between 0 and 1 for daytime, outside for night
+    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 };
+        }
+    }
+
+    // Quadratic bezier curve: M 10 70 Q 100 -10 190 70
+    // Start point (P0): (10, 70)
+    // Control point (P1): (100, -10)
+    // End point (P2): (190, 70)
+    const p0 = { x: 10, y: 70 };
+    const p1 = { x: 100, y: -10 };
+    const p2 = { x: 190, y: 70 };
+
+    // Quadratic bezier formula: B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
+    const oneMinusT = 1 - t;
+    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) };
+});
+
+const formattedSunrise = computed(() => {
+    const hours = Math.floor(sunriseHour);
+    const minutes = Math.round((sunriseHour - hours) * 60);
+    return `${hours}:${minutes.toString().padStart(2, '0')} AM`;
+});
+
+const formattedSunset = computed(() => {
+    const hours = Math.floor(sunsetHour) - 12;
+    const minutes = Math.round((sunsetHour - Math.floor(sunsetHour)) * 60);
+    return `${hours}:${minutes.toString().padStart(2, '0')} PM`;
+});
 </script>
 
 <template>
@@ -218,17 +271,17 @@ function parseWindSpeed(windSpeed: string | null): number {
                                     />
                                     <!-- Sun position indicator -->
                                     <circle
-                                        :cx="current.isDaytime ? 100 : 30"
-                                        :cy="current.isDaytime ? 20 : 60"
+                                        :cx="sunPosition.cx"
+                                        :cy="sunPosition.cy"
                                         r="8"
                                         fill="rgb(250, 204, 21)"
-                                        class="drop-shadow-lg"
+                                        class="drop-shadow-lg transition-all duration-1000"
                                     />
                                 </svg>
                             </div>
                             <div class="flex justify-between text-xs text-white/40">
-                                <span>6:45 AM</span>
-                                <span>5:30 PM</span>
+                                <span>{{ formattedSunrise }}</span>
+                                <span>{{ formattedSunset }}</span>
                             </div>
                         </div>
                     </div>