Tweaks

src/styles.less

@@ -56,20 +56,23 @@ body {
 
       .material {
         font-variation-settings: "FILL" 0, "wght" 700, "opsz" 24;
-        vertical-align: sub;
+        line-height: inherit;
       }
     }
 
-    #hourly {
+    #hourly,
+    #daily {
       display: flex;
-      font-size: .75rem;
-      margin: 1rem 0;
+      font-size: .7rem;
+      justify-content: space-between;
       text-align: center;
     }
 
-    #daily {
-      display: flex;
+    #hourly {
+      margin: 1rem 0;
+    }
 
+    #daily {
       .daily-slot {
         display: flex;
         flex-direction: column;

src/weather.ts

@@ -11,6 +11,7 @@ export default class Weather {
     current: CurrentWeather
     hourly: HourlyWeather[] = []
     daily: DailyWeather[] = []
+    offset: number
 
     constructor(latitude?: number, longitude?: number) {
         this.options = new WeatherOptions(latitude ?? 47.61002138071677, longitude ?? -122.17906310779568)
@@ -36,11 +37,14 @@ export default class Weather {
             const current = response.current()
             const hourly = response.hourly()
             const daily = response.daily()
+            me.offset = response.utcOffsetSeconds()
 
             if (current != null) me.current = new CurrentWeather(current)
             if (hourly != null) me.setHourlyData(hourly)
             if (daily != null) me.setDailyData(daily)
         }
+
+        console.info(`Timezone: ${responses[0].timezone()} ${responses[0].timezoneAbbreviation()}\nTimezone difference to GMT+0: ${me.offset}s`);
     }
 
     private needsUpdate(parameters: any): boolean {
@@ -88,8 +92,9 @@ export default class Weather {
         this.hourly.length = 0
 
         for (let i = 0; i < length; i++) {
+            new Date()
             this.hourly.push({
-                time: new Date(new Date().getTime() + i * 3600000),
+                time: new Date((Number(hourly.time()) + i * hourly.interval()) * 1000),
                 temperature: temperatures[i],
                 precipitation: precipitationTotals[i],
                 precipitationProbability: precipitationProbabilities[i]
@@ -147,8 +152,8 @@ export default class Weather {
         for (const day of this.daily) {
             dailySlots.push(`<div class="daily-slot">
     <span class="date">${day.time.getDate()}</span>
-    <span class="range">${Math.round(day.minTemperature)} - ${Math.round(day.maxTemperature)}</span>
-    <span class="uv ${day.uvRating()}">${Math.round(day.maxUV)}</span>
+    <span class="range">${Math.round(day.minTemperature)}&mdash;${Math.round(day.maxTemperature)}</span>
+    <span class="uv ${day.uvRating()}" title="${day.uvRating()}">${Math.round(day.maxUV)}</span>
     <span class="sunrise">${day.sunrise.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false })}</span>
     <span class="sunset">${day.sunset.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false })}</span>
 </div>`)
@@ -160,13 +165,14 @@ export default class Weather {
         if (!this.hourly) return
 
         const hourlySlots: string[] = []
-        for (let i = 0; i < 12; i++) {
-            const hour = this.hourly[i]
+        const startHour = this.hourly.findIndex(x => x.time.getTime() > (new Date().getTime()) - 3600000)
+        for (let i = 0; i < 10; i++) {
+            const hour = this.hourly[i + startHour]
             hourlySlots.push(`<div class="hourly-slot">
     <span class="hour">${hour.time.getHours()}</span>
     <span class="temp">${Math.round(hour.temperature)}</span>
-    <span class="precipitation">${hour.precipitation}<sup>"</sup></span>
-    <span class="chance">${hour.precipitationProbability}<sup>%</sup></span>
+    <span class="precipitation">${Math.round(hour.precipitation)}<sup>"</sup></span>
+    <span class="chance">${Math.round(hour.precipitationProbability)}<sup>%</sup></span>
 </div>`)
         }
 
@@ -194,7 +200,6 @@ class WeatherOptions {
     "wind_speed_unit" = "mph"
     "temperature_unit" = "fahrenheit"
     "precipitation_unit" = "inch"
-    "forecast_hours": 12
 
     constructor(latitude: number, longitude: number, timezone = "America/Los_Angeles") {
         this.latitude = latitude

www/main.js

@@ -2350,6 +2350,7 @@ var Weather = /** @class */ (function () {
                             current = response.current();
                             hourly = response.hourly();
                             daily = response.daily();
+                            me.offset = response.utcOffsetSeconds();
                             if (current != null)
                                 me.current = new CurrentWeather(current);
                             if (hourly != null)
@@ -2357,6 +2358,7 @@ var Weather = /** @class */ (function () {
                             if (daily != null)
                                 me.setDailyData(daily);
                         }
+                        console.info("Timezone: ".concat(responses[0].timezone(), " ").concat(responses[0].timezoneAbbreviation(), "\nTimezone difference to GMT+0: ").concat(me.offset, "s"));
                         return [2 /*return*/];
                 }
             });
@@ -2403,8 +2405,9 @@ var Weather = /** @class */ (function () {
         var precipitationProbabilities = hourly.variables(2).valuesArray();
         this.hourly.length = 0;
         for (var i = 0; i < length; i++) {
+            new Date();
             this.hourly.push({
-                time: new Date(new Date().getTime() + i * 3600000),
+                time: new Date((Number(hourly.time()) + i * hourly.interval()) * 1000),
                 temperature: temperatures[i],
                 precipitation: precipitationTotals[i],
                 precipitationProbability: precipitationProbabilities[i]
@@ -2451,16 +2454,17 @@ var Weather = /** @class */ (function () {
         var dailySlots = [];
         for (var _i = 0, _a = this.daily; _i < _a.length; _i++) {
             var day = _a[_i];
-            dailySlots.push("<div class=\"daily-slot\">\n    <span class=\"date\">".concat(day.time.getDate(), "</span>\n    <span class=\"range\">").concat(Math.round(day.minTemperature), " - ").concat(Math.round(day.maxTemperature), "</span>\n    <span class=\"uv ").concat(day.uvRating(), "\">").concat(Math.round(day.maxUV), "</span>\n    <span class=\"sunrise\">").concat(day.sunrise.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n    <span class=\"sunset\">").concat(day.sunset.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n</div>"));
+            dailySlots.push("<div class=\"daily-slot\">\n    <span class=\"date\">".concat(day.time.getDate(), "</span>\n    <span class=\"range\">").concat(Math.round(day.minTemperature), "&mdash;").concat(Math.round(day.maxTemperature), "</span>\n    <span class=\"uv ").concat(day.uvRating(), "\" title=\"").concat(day.uvRating(), "\">").concat(Math.round(day.maxUV), "</span>\n    <span class=\"sunrise\">").concat(day.sunrise.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n    <span class=\"sunset\">").concat(day.sunset.toLocaleTimeString("en-US", { timeStyle: "short", hour12: false }), "</span>\n</div>"));
         }
         var daily = document.getElementById("daily");
         daily.innerHTML = dailySlots.join("\r\n");
         if (!this.hourly)
             return;
         var hourlySlots = [];
-        for (var i = 0; i < 12; i++) {
-            var hour = this.hourly[i];
-            hourlySlots.push("<div class=\"hourly-slot\">\n    <span class=\"hour\">".concat(hour.time.getHours(), "</span>\n    <span class=\"temp\">").concat(Math.round(hour.temperature), "</span>\n    <span class=\"precipitation\">").concat(hour.precipitation, "<sup>\"</sup></span>\n    <span class=\"chance\">").concat(hour.precipitationProbability, "<sup>%</sup></span>\n</div>"));
+        var startHour = this.hourly.findIndex(function (x) { return x.time.getTime() > (new Date().getTime()) - 3600000; });
+        for (var i = 0; i < 10; i++) {
+            var hour = this.hourly[i + startHour];
+            hourlySlots.push("<div class=\"hourly-slot\">\n    <span class=\"hour\">".concat(hour.time.getHours(), "</span>\n    <span class=\"temp\">").concat(Math.round(hour.temperature), "</span>\n    <span class=\"precipitation\">").concat(Math.round(hour.precipitation), "<sup>\"</sup></span>\n    <span class=\"chance\">").concat(Math.round(hour.precipitationProbability), "<sup>%</sup></span>\n</div>"));
         }
         var hourly = document.getElementById("hourly");
         hourly.innerHTML = hourlySlots.join("\r\n");

www/styles.css

@@ -57,18 +57,20 @@ body #weather-panel #time {
 html #weather-panel #time .material,
 body #weather-panel #time .material {
   font-variation-settings: "FILL" 0, "wght" 700, "opsz" 24;
-  vertical-align: sub;
+  line-height: inherit;
 }
 html #weather-panel #hourly,
-body #weather-panel #hourly {
-  display: flex;
-  font-size: 0.75rem;
-  margin: 1rem 0;
-  text-align: center;
-}
+body #weather-panel #hourly,
 html #weather-panel #daily,
 body #weather-panel #daily {
   display: flex;
+  font-size: 0.7rem;
+  justify-content: space-between;
+  text-align: center;
+}
+html #weather-panel #hourly,
+body #weather-panel #hourly {
+  margin: 1rem 0;
 }
 html #weather-panel #daily .daily-slot,
 body #weather-panel #daily .daily-slot {