Refactor save system lightly, add autosave.

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import {
   Tabs,
   TabsContent,
@@ -10,8 +10,7 @@ import Field from './components/Field'
 import Warehouse from './components/Warehouse'
 import Market from './components/Market'
 import { ActionCooldown } from './components/ActionCooldown'
-import { useGameStore } from './store/useGameStore'
+import { useSaveSystem } from './store/useSaveSystem'
-import { hasSaveInSlot } from './utils/saveSystem'
 
 const appContainerStyle: React.CSSProperties = {
   maxWidth: '1200px',
@@ -27,34 +26,7 @@ const tabsListStyles: React.CSSProperties = {
 
 function App() {
   useGameTick()
-  const { saveToSlot, loadFromSlot } = useGameStore()
+  useSaveSystem()
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const slot =
-        {
-          '1': 1,
-          '2': 2,
-          '3': 3,
-          '!': 1,
-          '@': 2,
-          '#': 3,
-        }[e.key] ?? null
-
-      if (slot !== null) {
-        if (e.shiftKey) {
-          saveToSlot(slot)
-          console.log(`Game saved to slot ${slot}`)
-        } else if (hasSaveInSlot(slot)) {
-          loadFromSlot(slot)
-          console.log(`Game loaded from slot ${slot}`)
-        }
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [saveToSlot, loadFromSlot])
 
   return (
     <div>

src/store/useGameStore.ts

@@ -11,7 +11,6 @@ import {
   MARKET_ITEMS,
 } from '../constants'
 import { GameState, PlotState } from '../types'
-import { saveGame, loadGame } from '../utils/saveSystem'
 
 const initializeField = (size: number): PlotState[][] => {
   return Array(size)
@@ -25,6 +24,34 @@ const initializeField = (size: number): PlotState[][] => {
     )
 }
 
+const SAVE_SLOT_PREFIX = 'dionysian_idle_save_'
+
+const saveGame = (slot: number, state: GameState) => {
+  try {
+    const saveData = JSON.stringify(state)
+    localStorage.setItem(`${SAVE_SLOT_PREFIX}${slot}`, saveData)
+    return true
+  } catch (error) {
+    console.error('Failed to save game:', error)
+    return false
+  }
+}
+
+const loadGame = (slot: number): GameState | null => {
+  try {
+    const saveData = localStorage.getItem(`${SAVE_SLOT_PREFIX}${slot}`)
+    if (!saveData) return null
+    return JSON.parse(saveData)
+  } catch (error) {
+    console.error('Failed to load game:', error)
+    return null
+  }
+}
+
+export const hasSaveInSlot = (slot: number): boolean => {
+  return !!localStorage.getItem(`${SAVE_SLOT_PREFIX}${slot}`)
+}
+
 export const useGameStore = create<
   GameState & {
     plant: () => void

src/store/useSaveSystem.ts

@@ -0,0 +1,48 @@
+import { useEffect } from "react"
+import { hasSaveInSlot, useGameStore } from "./useGameStore"
+
+export const useSaveSystem = () => {
+  const { saveToSlot, loadFromSlot } = useGameStore()
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const slot =
+        {
+          '1': 1,
+          '2': 2,
+          '3': 3,
+          '!': 1,
+          '@': 2,
+          '#': 3,
+        }[e.key] ?? null
+
+      if (slot !== null) {
+        if (e.shiftKey) {
+          saveToSlot(slot)
+          console.log(`Game saved to slot ${slot}`)
+        } else if (hasSaveInSlot(slot)) {
+          loadFromSlot(slot)
+          console.log(`Game loaded from slot ${slot}`)
+        }
+      }
+    }
+
+
+    window.addEventListener('keydown', handleKeyDown)
+    const interval = setInterval(() => {
+      saveToSlot(0)
+    }, 30000)
+
+    console.log('Initalized save system')
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      clearInterval(interval)
+    }
+  }, [saveToSlot, loadFromSlot])
+
+  // When starting the game, load from the autosave slot
+  useEffect(() => {
+    loadFromSlot(0)
+  }, [])
+}

src/utils/saveSystem.ts

@@ -1,29 +0,0 @@
-import { GameState } from '../types'
-
-const SAVE_SLOT_PREFIX = 'dionysian_idle_save_'
-
-export const saveGame = (slot: number, state: GameState) => {
-  try {
-    const saveData = JSON.stringify(state)
-    localStorage.setItem(`${SAVE_SLOT_PREFIX}${slot}`, saveData)
-    return true
-  } catch (error) {
-    console.error('Failed to save game:', error)
-    return false
-  }
-}
-
-export const loadGame = (slot: number): GameState | null => {
-  try {
-    const saveData = localStorage.getItem(`${SAVE_SLOT_PREFIX}${slot}`)
-    if (!saveData) return null
-    return JSON.parse(saveData)
-  } catch (error) {
-    console.error('Failed to load game:', error)
-    return null
-  }
-}
-
-export const hasSaveInSlot = (slot: number): boolean => {
-  return !!localStorage.getItem(`${SAVE_SLOT_PREFIX}${slot}`)
-}