check version update daily

Author: globalworming

src/components/AchievementPanel.tsx

@@ -3,6 +3,8 @@ import { Trophy, X, RotateCcw, Lock, Check, Sparkles } from "lucide-react";
 import type { GameStats } from "@/hooks/useAchievements";
 import type { AchievementDef } from "@/data/achievements";
 import { AchievementModal } from "./AchievementModal";
+import { Hint } from "./Hint";
+import { useVersionCheck } from "@/hooks/useVersionCheck";
 import { cn } from "@/lib/utils";
 
 interface AchievementPanelProps {
@@ -39,6 +41,7 @@ export const AchievementPanel = ({
   const [debugClicks, setDebugClicks] = useState(0);
   const showDebug = debugClicks >= 5;
   const [selectedAchievement, setSelectedAchievement] = useState<{ def: AchievementDef; unlocked: boolean } | null>(null);
+  const { hasUpdate, latestVersion } = useVersionCheck();
 
   return (
     <>
@@ -204,8 +207,12 @@ export const AchievementPanel = ({
                 onReset();
               }
             }}
-            className="mt-4 w-full flex items-center justify-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive hover:bg-destructive/20 transition-colors shrink-0"
+            className="mt-4 w-full relative flex items-center justify-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive hover:bg-destructive/20 transition-colors shrink-0"
           >
+            {hasUpdate && (
+                <Hint>new version {latestVersion}, click to update</Hint>
+            )}
+
             <RotateCcw className="w-4 h-4" />
             Reset Progress
           </button>

src/components/D100Roller.tsx

@@ -11,13 +11,15 @@ import { Hint } from "./Hint";
 import { useAchievements } from "@/hooks/useAchievements";
 import { useRollAnimation } from "@/hooks/useRollAnimation";
 import type { AchievementDef } from "@/data/achievements";
+import { useVersionCheck } from "@/hooks/useVersionCheck";
 
 export const D100Roller = () => {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [achievementPanelOpen, setAchievementPanelOpen] = useState(false);
   const [modifiers, setModifiers] = useState<Modifier[]>(DEFAULT_MODIFIERS);
   const [skills, setSkills] = useState<Skill[]>(DEFAULT_SKILLS);
   const [selectedAchievement, setSelectedAchievement] = useState<AchievementDef | null>(null);
+  const { clearVersion } = useVersionCheck();
 
   const { stats, recordRoll, resetGame, setTotalRolls, unlockAchievement, unlockedDefs, unlockedDefsSorted, availableDefs, totalAchievementCount, latestUnlockedDef } = useAchievements();
 
@@ -26,8 +28,9 @@ export const D100Roller = () => {
     resetGame();
     setModifiers(DEFAULT_MODIFIERS.map(m => ({ ...m, active: false })));
     setSkills(DEFAULT_SKILLS.map(s => ({ ...s, active: false })));
+    clearVersion();
     window.location.reload();
-  }, [resetGame]);
+  }, [resetGame, clearVersion]);
 
   // Handle skill trigger animations
   const handleSkillsTriggered = useCallback((triggeredIds: Set<string>) => {

src/hooks/useAchievements.ts

@@ -22,7 +22,7 @@ const DEFAULT_ACHIEVEMENTS: Achievement[] = ACHIEVEMENT_DEFS.map(def => ({
   unlockedAt: undefined,
 }));
 
-const STORAGE_KEY = "d100-game-state";
+const STORAGE_KEY = "dioo-game-state";
 
 interface StoredState {
   achievements: Achievement[];

src/hooks/useVersionCheck.ts

@@ -0,0 +1,125 @@
+import { useState, useEffect, useRef } from "react";
+
+const VERSION_STORAGE_KEY = "dioo-version";
+const LAST_CHECK_KEY = "dioo-version-last-check";
+const GITHUB_TAGS_URL = "https://api.github.com/repos/globalworming/dioo/tags";
+const CHECK_INTERVAL_MS = 60 * 60 * 1000; // 1 hour interval to check if day changed
+
+interface VersionState {
+  currentVersion: string | null;
+  latestVersion: string | null;
+  hasUpdate: boolean;
+  loading: boolean;
+}
+
+const getDateString = (date: Date) => date.toISOString().split("T")[0];
+
+const shouldCheckToday = () => {
+  const lastCheck = localStorage.getItem(LAST_CHECK_KEY);
+  const today = getDateString(new Date());
+  return lastCheck !== today;
+};
+
+export const useVersionCheck = () => {
+  const [state, setState] = useState<VersionState>({
+    currentVersion: null,
+    latestVersion: null,
+    hasUpdate: false,
+    loading: true,
+  });
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    const checkVersion = async () => {
+      // Skip if already checked today
+      if (!shouldCheckToday()) {
+        const storedVersion = localStorage.getItem(VERSION_STORAGE_KEY);
+        setState({
+          currentVersion: storedVersion,
+          latestVersion: storedVersion,
+          hasUpdate: false,
+          loading: false,
+        });
+        return;
+      }
+
+      try {
+        const storedVersion = localStorage.getItem(VERSION_STORAGE_KEY);
+
+        const response = await fetch(GITHUB_TAGS_URL, {
+          headers: { Accept: "application/vnd.github+json" },
+        });
+
+        if (!response.ok) {
+          setState(prev => ({ ...prev, loading: false }));
+          return;
+        }
+
+        const tags = await response.json();
+        const latestTag = tags[0]?.name ?? null;
+
+        if (!latestTag) {
+          setState(prev => ({ ...prev, loading: false }));
+          return;
+        }
+
+        // Mark today as checked
+        localStorage.setItem(LAST_CHECK_KEY, getDateString(new Date()));
+
+        // If no stored version, store the latest and don't show update
+        if (!storedVersion) {
+          localStorage.setItem(VERSION_STORAGE_KEY, latestTag);
+          setState({
+            currentVersion: latestTag,
+            latestVersion: latestTag,
+            hasUpdate: false,
+            loading: false,
+          });
+          return;
+        }
+
+        // Compare versions
+        const hasUpdate = storedVersion !== latestTag;
+
+        setState({
+          currentVersion: storedVersion,
+          latestVersion: latestTag,
+          hasUpdate,
+          loading: false,
+        });
+      } catch (error) {
+        console.error("Failed to check version:", error);
+        setState(prev => ({ ...prev, loading: false }));
+      }
+    };
+
+    // Initial check
+    checkVersion();
+
+    // Set up interval to check if day changed
+    intervalRef.current = setInterval(() => {
+      if (shouldCheckToday()) {
+        checkVersion();
+      }
+    }, CHECK_INTERVAL_MS);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  const updateVersion = () => {
+    if (state.latestVersion) {
+      localStorage.setItem(VERSION_STORAGE_KEY, state.latestVersion);
+      window.location.reload();
+    }
+  };
+
+  const clearVersion = () => {
+    localStorage.removeItem(VERSION_STORAGE_KEY);
+  };
+
+  return { ...state, updateVersion, clearVersion };
+};