feat: support 30 min streak offsets (@large-r0dent)

frontend/src/html/popups.html

@@ -1060,7 +1060,7 @@
       <br />
       <span class="red">You can only do this once!</span>
     </div>
-    <input type="number" min="-11" max="12" value="0" />
+    <input type="number" min="-11" max="12" value="0" step="0.5" />
     <div class="preview"></div>
     <button>set</button>
   </div>

frontend/src/ts/modals/streak-hour-offset.ts

@@ -10,7 +10,7 @@ import { Snapshot } from "../constants/default-snapshot";
 
 export function show(): void {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, {
+    Notifications.add("You are offline :(", 0, {
       duration: 2,
     });
     return;
@@ -24,7 +24,7 @@ export function show(): void {
         modalEl.querySelector(".preview")?.remove();
         modalEl.querySelector("button")?.remove();
         (modalEl.querySelector(".text") as HTMLElement).textContent =
-          "You have already set your streak hour offset.";
+          "You have already set your streak time offset.";
       } else {
         (modalEl.querySelector("input") as HTMLInputElement).value = "0";
         updatePreview();
@@ -34,26 +34,24 @@ export function show(): void {
 }
 
 function updatePreview(): void {
-  const inputValue = parseInt(
+  const inputValue = parseFloat(
+    // parse float to support fractional stuff
     modal.getModal().querySelector("input")?.value as string,
-    10,
   );
 
   const preview = modal.getModal().querySelector(".preview") as HTMLElement;
 
   const date = new Date();
-  date.setUTCHours(0);
-  date.setUTCMinutes(0);
-  date.setUTCSeconds(0);
-  date.setUTCMilliseconds(0);
+  date.setUTCHours(0, 0, 0, 0);
 
   const newDate = new Date();
-  newDate.setUTCHours(0);
-  newDate.setUTCMinutes(0);
-  newDate.setUTCSeconds(0);
-  newDate.setUTCMilliseconds(0);
+  newDate.setUTCHours(0, 0, 0, 0);
 
-  newDate.setHours(newDate.getHours() - -1 * inputValue); //idk why, but it only works when i subtract (so i have to negate inputValue)
+  const hours = Math.floor(inputValue);
+  const minutes = (inputValue % 1) * 60;
+
+  newDate.setUTCHours(newDate.getUTCHours() + hours);
+  newDate.setUTCMinutes(newDate.getUTCMinutes() + minutes);
 
   preview.innerHTML = `
     <div class="row"><div>Current local reset time:</div><div>${date.toLocaleTimeString()}</div></div>
@@ -66,18 +64,21 @@ function hide(): void {
 }
 
 async function apply(): Promise<void> {
-  const value = parseInt(
+  const value = parseFloat(
+    // parse float again
     modal.getModal().querySelector("input")?.value as string,
-    10,
   );
 
   if (isNaN(value)) {
     Notifications.add("Streak hour offset must be a number", 0);
     return;
   }
 
-  if (value < -11 || value > 12) {
-    Notifications.add("Streak hour offset must be between -11 and 12", 0);
+  if (value < -11 || value > 12 || (value % 1 !== 0 && value % 1 !== 0.5)) {
+    Notifications.add(
+      "Streak offset must be between -11 and 12. Times ending in .5 can be used for 30-minute increments.",
+      0,
+    );
     return;
   }
 
@@ -87,11 +88,13 @@ async function apply(): Promise<void> {
     body: { hourOffset: value },
   });
   Loader.hide();
+
   if (response.status !== 200) {
     Notifications.add("Failed to set streak hour offset", -1, { response });
   } else {
     Notifications.add("Streak hour offset set", 1);
     const snap = getSnapshot() as Snapshot;
+
     snap.streakHourOffset = value;
     setSnapshot(snap);
     hide();