.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true
-}
-

package-lock.json

@@ -24,7 +24,6 @@
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.4",
         "@wyw-in-js/vite": "^0.6.0",
-        "prettier": "3.5.3",
         "typescript": "^5.8.3",
         "vite": "^6.0.1"
       }
@@ -1629,22 +1628,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/prettier": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
-      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",

package.json

@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "type-check": "tsc --noEmit",
-    "preview": "vite preview",
+    "preview": "vite preview"
-    "lint": "prettier --write src/"
   },
   "dependencies": {
     "@linaria/core": "^6.3.0",
@@ -27,7 +26,6 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "@wyw-in-js/vite": "^0.6.0",
-    "prettier": "3.5.3",
     "typescript": "^5.8.3",
     "vite": "^6.0.1"
   }

src/App.tsx

@@ -1,60 +1,25 @@
-import React, { useEffect } from 'react'
+import React from 'react';
-import {
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/CustomTabs';
-  Tabs,
+import { useGameTick } from './hooks/useGameTick';
-  TabsContent,
+import Field from './components/Field';
-  TabsList,
+import Warehouse from './components/Warehouse';
-  TabsTrigger,
+import Market from './components/Market';
-} from './components/CustomTabs'
+import { ActionCooldown } from './components/ActionCooldown';
-import { useGameTick } from './hooks/useGameTick'
-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 { hasSaveInSlot } from './utils/saveSystem'
 
 const appContainerStyle: React.CSSProperties = {
   maxWidth: '1200px',
   margin: '0 auto',
-  padding: '2rem',
+  padding: '2rem'
-}
+};
 
 const tabsListStyles: React.CSSProperties = {
   display: 'grid',
   width: '100%',
-  gridTemplateColumns: 'repeat(4, 1fr)',
+  gridTemplateColumns: 'repeat(4, 1fr)'
-}
+};
 
 function App() {
-  useGameTick()
+  useGameTick();
-  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)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [saveToSlot, loadFromSlot])
 
   return (
     <div>
@@ -65,9 +30,7 @@ function App() {
             <TabsTrigger value="fields">Fields</TabsTrigger>
             <TabsTrigger value="warehouse">Warehouse</TabsTrigger>
             <TabsTrigger value="market">Market</TabsTrigger>
-            <TabsTrigger value="temple" disabled>
+            <TabsTrigger value="temple" disabled>Temple</TabsTrigger>
-              Temple
-            </TabsTrigger>
           </TabsList>
           <TabsContent value="fields">
             <Field />
@@ -81,7 +44,7 @@ function App() {
         </Tabs>
       </div>
     </div>
-  )
+  );
 }
 
 export default App

src/components/ActionCooldown.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
-import { styled } from '@linaria/react'
+import { styled } from '@linaria/react';
 
-import { useGameStore } from '../store/useGameStore'
+import { useGameStore } from '../store/useGameStore';
 
 const CooldownContainer = styled.div`
   position: relative;
@@ -9,51 +9,51 @@ const CooldownContainer = styled.div`
   width: 100%;
   background-color: #e5e7eb;
   overflow: hidden;
-`
+`;
 
 const ProgressBar = styled.div<{ progress: string }>`
   height: 100%;
   background-color: #3b82f6;
-  width: ${(props) => props.progress};
+  width: ${props => props.progress};
-`
+`;
 
 export const ActionCooldown = () => {
-  const { actionCooldown, setActionCooldown } = useGameStore()
+  const { actionCooldown, setActionCooldown } = useGameStore();
-  const [progress, setProgress] = useState(0)
+  const [progress, setProgress] = useState(0);
 
   useEffect(() => {
     if (actionCooldown <= 0) {
-      setProgress(0)
+      setProgress(0);
-      return
+      return;
     }
 
-    const startTime = Date.now()
+    const startTime = Date.now();
-    const duration = actionCooldown
+    const duration = actionCooldown;
     
     const updateProgress = () => {
-      const elapsed = Date.now() - startTime
+      const elapsed = Date.now() - startTime;
-      const newProgress = Math.min(100, (elapsed / duration) * 100)
+      const newProgress = Math.min(100, (elapsed / duration) * 100);
       
       if (newProgress >= 100) {
-        setProgress(0)
+        setProgress(0);
-        setActionCooldown(0)
+        setActionCooldown(0);
-        return
+        return;
       }
 
-      setProgress(newProgress)
+      setProgress(newProgress);
-      requestAnimationFrame(updateProgress)
+      requestAnimationFrame(updateProgress);
-    }
+    };
 
-    const animationFrame = requestAnimationFrame(updateProgress)
+    const animationFrame = requestAnimationFrame(updateProgress);
 
     return () => {
-      cancelAnimationFrame(animationFrame)
+      cancelAnimationFrame(animationFrame);
-    }
+    };
-  }, [actionCooldown, setActionCooldown])
+  }, [actionCooldown, setActionCooldown]);
 
   return (
     <CooldownContainer>
       <ProgressBar progress={`${progress}%`} />
     </CooldownContainer>
-  )
+  );
-}
+};

src/components/CustomTabs.tsx

@@ -1,35 +1,35 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
 export interface TabProps {
-  value: string
+  value: string;
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export interface TabsProps {
-  defaultValue: string
+  defaultValue: string;
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export interface TabsListProps {
-  children: React.ReactNode
+  children: React.ReactNode;
-  style?: React.CSSProperties
+  style?: React.CSSProperties;
 }
 
 export interface TabsContentProps {
-  value: string
+  value: string;
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export interface TabsTriggerProps {
-  value: string
+  value: string;
-  children: React.ReactNode
+  children: React.ReactNode;
-  disabled?: boolean
+  disabled?: boolean;
-  onClick?: () => void
+  onClick?: () => void;
 }
 
 const tabsContainerStyle: React.CSSProperties = {
-  width: '100%',
+  width: '100%'
-}
+};
 
 const tabsListContainerStyle: React.CSSProperties = {
   display: 'inline-flex',
@@ -39,13 +39,10 @@ const tabsListContainerStyle: React.CSSProperties = {
   borderRadius: '0.5rem',
   backgroundColor: '#f4f4f5',
   padding: '0.25rem',
-  color: '#71717a',
+  color: '#71717a'
-}
+};
 
-const getTabButtonStyle = (
+const getTabButtonStyle = (active: boolean, disabled: boolean): React.CSSProperties => ({
-  active: boolean,
-  disabled: boolean,
-): React.CSSProperties => ({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -60,51 +57,51 @@ const getTabButtonStyle = (
   boxShadow: active ? '0 1px 3px rgba(0, 0, 0, 0.1)' : 'none',
   opacity: disabled ? 0.5 : 1,
   cursor: disabled ? 'not-allowed' : 'pointer',
-  border: 'none',
+  border: 'none'
-})
+});
 
 const tabContentStyle: React.CSSProperties = {
   marginTop: '0.5rem',
-  outline: 'none',
+  outline: 'none'
-}
+};
 
 const TabsContext = React.createContext<{
-  value: string
+  value: string;
-  setValue: (value: string) => void
+  setValue: (value: string) => void;
 }>({
   value: '',
   setValue: () => {},
-})
+});
 
 export const Tabs: React.FC<TabsProps> = ({ defaultValue, children }) => {
-  const [value, setValue] = useState(defaultValue)
+  const [value, setValue] = useState(defaultValue);
 
   return (
     <TabsContext.Provider value={{ value, setValue }}>
       <div style={tabsContainerStyle}>{children}</div>
     </TabsContext.Provider>
-  )
+  );
-}
+};
 
 export const TabsList: React.FC<TabsListProps> = ({ children, style }) => {
-  return <div style={{ ...tabsListContainerStyle, ...style }}>{children}</div>
+  return <div style={{...tabsListContainerStyle, ...style}}>{children}</div>;
-}
+};
 
 export const TabsTrigger: React.FC<TabsTriggerProps> = ({ 
   value, 
   children, 
   disabled = false,
-  onClick,
+  onClick
 }) => {
-  const { value: selectedValue, setValue } = React.useContext(TabsContext)
+  const { value: selectedValue, setValue } = React.useContext(TabsContext);
-  const active = selectedValue === value
+  const active = selectedValue === value;
 
   const handleClick = () => {
     if (!disabled) {
-      setValue(value)
+      setValue(value);
-      if (onClick) onClick()
+      if (onClick) onClick();
-    }
     }
+  };
 
   return (
     <button 
@@ -115,16 +112,13 @@ export const TabsTrigger: React.FC<TabsTriggerProps> = ({
     >
       {children}
     </button>
-  )
+  );
-}
+};
 
-export const TabsContent: React.FC<TabsContentProps> = ({
+export const TabsContent: React.FC<TabsContentProps> = ({ value, children }) => {
-  value,
+  const { value: selectedValue } = React.useContext(TabsContext);
-  children,
-}) => {
-  const { value: selectedValue } = React.useContext(TabsContext)
   
-  if (selectedValue !== value) return null
+  if (selectedValue !== value) return null;
   
-  return <div style={tabContentStyle}>{children}</div>
+  return <div style={tabContentStyle}>{children}</div>;
-}
+};

src/components/Field.tsx

@@ -1,50 +1,50 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
-import { useGameStore } from '../store/useGameStore'
+import { useGameStore } from '../store/useGameStore';
-import { CROPS } from '../constants'
+import { CROPS } from '../constants';
 
 const fieldContainerStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   gap: '1rem',
-  padding: '1rem',
+  padding: '1rem'
-}
+};
 
 const titleStyle: React.CSSProperties = {
   fontSize: '1.5rem',
   fontWeight: 'bold',
   marginBottom: '1rem',
-  textAlign: 'center',
+  textAlign: 'center'
-}
+};
 
 const cropSelectionContainerStyle: React.CSSProperties = {
   display: 'flex',
   flexWrap: 'wrap',
   gap: '0.5rem',
   marginBottom: '1rem',
-  justifyContent: 'center',
+  justifyContent: 'center'
-}
+};
 
 const cropSelectionLabelStyle: React.CSSProperties = {
   width: '100%',
   textAlign: 'center',
   fontWeight: 500,
-  marginBottom: '0.5rem',
+  marginBottom: '0.5rem'
-}
+};
 
 const getCropButtonStyle = (active: boolean): React.CSSProperties => ({
   padding: '0.5rem 1rem',
   borderRadius: '0.25rem',
   border: '1px solid #ccc',
   backgroundColor: active ? '#4ade80' : '#f3f4f6',
-  cursor: 'pointer',
+  cursor: 'pointer'
-})
+});
 
 const actionsContainerStyle: React.CSSProperties = {
   display: 'flex',
   gap: '0.5rem',
   marginBottom: '1rem',
-  justifyContent: 'center',
+  justifyContent: 'center'
-}
+};
 
 const speedSelectorContainerStyle: React.CSSProperties = {
   display: 'flex',
@@ -54,26 +54,26 @@ const speedSelectorContainerStyle: React.CSSProperties = {
   padding: '0.5rem',
   backgroundColor: '#f9fafb',
   borderRadius: '0.5rem',
-  border: '1px solid #e5e7eb',
+  border: '1px solid #e5e7eb'
-}
+};
 
 const speedSelectorLabelStyle: React.CSSProperties = {
   fontWeight: 500,
-  marginBottom: '0.5rem',
+  marginBottom: '0.5rem'
-}
+};
 
 const speedButtonsContainerStyle: React.CSSProperties = {
   display: 'flex',
-  gap: '0.5rem',
+  gap: '0.5rem'
-}
+};
 
 const getSpeedButtonStyle = (active: boolean): React.CSSProperties => ({
   padding: '0.5rem 1rem',
   borderRadius: '0.25rem',
   border: '1px solid #ccc',
   backgroundColor: active ? '#4ade80' : '#f3f4f6',
-  cursor: 'pointer',
+  cursor: 'pointer'
-})
+});
 
 const getActionButtonStyle = (disabled: boolean): React.CSSProperties => ({
   padding: '0.5rem 1rem',
@@ -81,8 +81,8 @@ const getActionButtonStyle = (disabled: boolean): React.CSSProperties => ({
   fontWeight: 'bold',
   color: 'white',
   backgroundColor: disabled ? '#9ca3af' : '#22c55e',
-  cursor: disabled ? 'not-allowed' : 'pointer',
+  cursor: disabled ? 'not-allowed' : 'pointer'
-})
+});
 
 const getFieldGridStyle = (size: number): React.CSSProperties => ({
   display: 'grid',
@@ -91,8 +91,8 @@ const getFieldGridStyle = (size: number): React.CSSProperties => ({
   gap: '0.5rem',
   width: '100%',
   maxWidth: '600px',
-  margin: '0 auto',
+  margin: '0 auto'
-})
+});
 
 const getPlotStyle = (bgColor: string): React.CSSProperties => ({
   border: '1px solid #78350f',
@@ -103,8 +103,8 @@ const getPlotStyle = (bgColor: string): React.CSSProperties => ({
   justifyContent: 'center',
   position: 'relative',
   cursor: 'pointer',
-  backgroundColor: bgColor,
+  backgroundColor: bgColor
-})
+});
 
 const getMoistureIndicatorStyle = (level: number): React.CSSProperties => ({
   position: 'absolute',
@@ -114,8 +114,8 @@ const getMoistureIndicatorStyle = (level: number): React.CSSProperties => ({
   height: `${Math.min(level * 100, 100)}%`,
   backgroundColor: 'rgba(147, 197, 253, 0.3)',
   transition: 'height 0.3s',
-  zIndex: 1,
+  zIndex: 1
-})
+});
 
 const getMaturityProgressContainerStyle = (): React.CSSProperties => ({
   position: 'absolute',
@@ -125,13 +125,10 @@ const getMaturityProgressContainerStyle = (): React.CSSProperties => ({
   height: '10px',  // Increased height for better visibility
   backgroundColor: 'rgba(0, 0, 0, 0.3)',  // Darker background for better contrast
   zIndex: 5,  // Increased z-index to ensure it's above other elements
-  border: '1px solid #000', // Added border for better visibility
+  border: '1px solid #000'  // Added border for better visibility
-})
+});
 
-const getMaturityProgressBarStyle = (
+const getMaturityProgressBarStyle = (progress: number, total: number): React.CSSProperties => ({
-  progress: number,
-  total: number,
-): React.CSSProperties => ({
   position: 'absolute',
   bottom: 0,
   left: 0,
@@ -140,8 +137,8 @@ const getMaturityProgressBarStyle = (
   backgroundColor: '#ff5722',  // Brighter orange color for better visibility
   transition: 'width 0.3s',
   zIndex: 6,  // Increased z-index to ensure it's above the container
-  boxShadow: '0 0 3px rgba(0, 0, 0, 0.5)', // Added shadow for better visibility
+  boxShadow: '0 0 3px rgba(0, 0, 0, 0.5)'  // Added shadow for better visibility
-})
+});
 
 const FieldComponent: React.FC = () => {
   const { 
@@ -153,22 +150,22 @@ const FieldComponent: React.FC = () => {
     assignCrop,
     gameSpeed,
     setGameSpeed,
-    actionCooldown,
+    actionCooldown
-  } = useGameStore()
+  } = useGameStore();
 
-  const [selectedCrop, setSelectedCrop] = useState<string | null>(null)
+  const [selectedCrop, setSelectedCrop] = useState<string | null>(null);
 
   const handlePlotClick = (row: number, col: number) => {
     if (selectedCrop) {
-      assignCrop(row, col, selectedCrop)
+      assignCrop(row, col, selectedCrop);
-    }
     }
+  };
 
   const getBgColor = (hasCrop: boolean, isMature: boolean) => {
-    if (isMature) return '#22c55e'
+    if (isMature) return "#22c55e";
-    if (hasCrop) return '#86efac'
+    if (hasCrop) return "#86efac";
-    return '#92400e'
+    return "#92400e";
-  }
+  };
 
   const availableSpeeds = [1, 2, 4, 8, 16, 32, 64]
 
@@ -179,7 +176,7 @@ const FieldComponent: React.FC = () => {
       <div style={speedSelectorContainerStyle}>
         <p style={speedSelectorLabelStyle}>Game Speed:</p>
         <div style={speedButtonsContainerStyle}>
-          {availableSpeeds.map((speed) => (
+          {availableSpeeds.map(speed => (
             <button
               style={getSpeedButtonStyle(gameSpeed === speed)}
               onClick={() => setGameSpeed(speed)}
@@ -193,7 +190,7 @@ const FieldComponent: React.FC = () => {
       
       <div style={cropSelectionContainerStyle}>
         <p style={cropSelectionLabelStyle}>Select a crop to plant:</p>
-        {Object.values(CROPS).map((crop) => (
+        {Object.values(CROPS).map(crop => (
           <button
             key={crop.id}
             style={getCropButtonStyle(selectedCrop === crop.id)}
@@ -231,9 +228,9 @@ const FieldComponent: React.FC = () => {
       <div style={getFieldGridStyle(fieldSize)}>
         {plots.slice(0, fieldSize).map((row, rowIndex) => 
           row.slice(0, fieldSize).map((plot, colIndex) => {
-            const hasCrop = !!plot.current
+            const hasCrop = !!plot.current;
-            const isMature = !!plot.current?.mature
+            const isMature = !!(plot.current?.mature);
-            const bgColor = getBgColor(hasCrop, isMature)
+            const bgColor = getBgColor(hasCrop, isMature);
             
             return (
               <div 
@@ -241,33 +238,21 @@ const FieldComponent: React.FC = () => {
                 style={getPlotStyle(bgColor)}
                 onClick={() => handlePlotClick(rowIndex, colIndex)}
               >
-                {plot.intended && !plot.current && (
+                {plot.intended && !plot.current && <div>🌱 {CROPS[plot.intended]?.name}</div>}
-                  <div>🌱 {CROPS[plot.intended]?.name}</div>
+                {plot.current && <div>{plot.current.mature ? '🌿' : '🌱'} {CROPS[plot.current.cropId]?.name}</div>}
-                )}
-                {plot.current && (
-                  <div>
-                    {plot.current.mature ? '🌿' : '🌱'}{' '}
-                    {CROPS[plot.current.cropId]?.name}
-                  </div>
-                )}
                 <div style={getMoistureIndicatorStyle(plot.moisture)} />
                 {plot.current && !plot.current.mature && (
                   <div style={getMaturityProgressContainerStyle()}>
-                    <div
+                    <div style={getMaturityProgressBarStyle(plot.current.progress, CROPS[plot.current.cropId].growthTicks)} />
-                      style={getMaturityProgressBarStyle(
-                        plot.current.progress,
-                        CROPS[plot.current.cropId].growthTicks,
-                      )}
-                    />
                   </div>
                 )}
               </div>
-            )
+            );
-          }),
+          })
         )}
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default FieldComponent
+export default FieldComponent;

src/components/FloatingMessage.tsx

@@ -1,59 +1,53 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
 
 interface FloatingMessageProps {
-  message: string
+  message: string;
-  startPosition: { x: number; y: number }
+  startPosition: { x: number, y: number };
-  onComplete: () => void
+  onComplete: () => void;
 }
 
-const FloatingMessage: React.FC<FloatingMessageProps> = ({
+const FloatingMessage: React.FC<FloatingMessageProps> = ({ message, startPosition, onComplete }) => {
-  message,
+  const [position, setPosition] = useState({ y: startPosition.y });
-  startPosition,
+  const [opacity, setOpacity] = useState(1);
-  onComplete,
-}) => {
-  const [position, setPosition] = useState({ y: startPosition.y })
-  const [opacity, setOpacity] = useState(1)
   
   useEffect(() => {
-    const startTime = Date.now()
+    const startTime = Date.now();
-    const duration = 1000 // 1 second animation
+    const duration = 1000; // 1 second animation
     
     const animate = () => {
-      const elapsed = Date.now() - startTime
+      const elapsed = Date.now() - startTime;
-      const progress = Math.min(elapsed / duration, 1)
+      const progress = Math.min(elapsed / duration, 1);
       
-      setPosition({ y: startPosition.y - progress * 50 })
+      setPosition({ y: startPosition.y - progress * 50 });
-      setOpacity(1 - progress)
+      setOpacity(1 - progress);
       
       if (progress < 1) {
-        requestAnimationFrame(animate)
+        requestAnimationFrame(animate);
       } else {
-        onComplete()
+        onComplete();
-      }
       }
+    };
     
-    const animationFrame = requestAnimationFrame(animate)
+    const animationFrame = requestAnimationFrame(animate);
     
     return () => {
-      cancelAnimationFrame(animationFrame)
+      cancelAnimationFrame(animationFrame);
-    }
+    };
-  }, [startPosition, onComplete])
+  }, [startPosition, onComplete]);
   
   return (
-    <div
+    <div style={{
-      style={{
       position: 'absolute',
       left: startPosition.x,
       top: position.y,
       opacity,
       fontWeight: 'bold',
       pointerEvents: 'none',
-        zIndex: 100,
+      zIndex: 100
-      }}
+    }}>
-    >
       {message}
     </div>
-  )
+  );
-}
+};
 
-export default FloatingMessage
+export default FloatingMessage;

src/components/Market.tsx

@@ -1,19 +1,19 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
-import { useGameStore } from '../store/useGameStore'
+import { useGameStore } from '../store/useGameStore';
-import { MARKET_ITEMS } from '../constants'
+import { MARKET_ITEMS } from '../constants';
-import FloatingMessage from './FloatingMessage'
+import FloatingMessage from './FloatingMessage';
-import { styled } from '@linaria/react'
+import { styled } from '@linaria/react';
 
 const MarketContainer = styled.div`
   padding: 1rem;
-`
+`;
 
 const Title = styled.h2`
   font-size: 1.5rem;
   font-weight: bold;
   margin-bottom: 1rem;
   text-align: center;
-`
+`;
 
 const CashDisplay = styled.div`
   text-align: center;
@@ -21,126 +21,115 @@ const CashDisplay = styled.div`
   padding: 1rem;
   background-color: #dcfce7;
   border-radius: 0.375rem;
-`
+`;
 
 const CashAmount = styled.h3`
   font-size: 1.25rem;
   font-weight: 500;
-`
+`;
 
 const SectionTitle = styled.h3`
   font-size: 1.25rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
   margin-top: 1.5rem;
-`
+`;
 
 const MarketTable = styled.table`
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 0.5rem;
-`
+`;
 
 const MarketItemRow = styled.tr`
   background-color: #f3f4f6;
   border-radius: 0.5rem;
-`
+`;
 
 const MarketItemCell = styled.td`
   padding: 0.75rem;
   text-align: center;
-`
+`;
 
 const TableHeader = styled.th`
   padding: 0.75rem;
   text-align: center;
-`
+`;
 
 const ItemIcon = styled.span`
   font-size: 1.5rem;
   margin-right: 0.5rem;
-`
+`;
 
 const ActionButton = styled.button<{ disabled?: boolean }>`
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
-  background-color: ${(props) => (props.disabled ? '#9ca3af' : '#3b82f6')};
+  background-color: ${props => props.disabled ? '#9ca3af' : '#3b82f6'};
   color: white;
   font-weight: bold;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   border: none;
-`
+`;
 
 interface FloatingMessageData {
-  id: string
+  id: string;
-  message: string
+  message: string;
-  position: { x: number; y: number }
+  position: { x: number, y: number };
 }
 
 const MarketComponent: React.FC = () => {
-  const { inventory, cash, buyItem, sellItem } = useGameStore()
+  const { inventory, cash, buyItem, sellItem } = useGameStore();
-  const [floatingMessages, setFloatingMessages] = useState<
+  const [floatingMessages, setFloatingMessages] = useState<FloatingMessageData[]>([]);
-    FloatingMessageData[]
-  >([])
 
   const handleBuy = (itemId: string, e: React.MouseEvent) => {
-    const item = MARKET_ITEMS[itemId]
+    const item = MARKET_ITEMS[itemId];
-    if (!item || item.buyPrice === null || cash < item.buyPrice) return
+    if (!item || item.buyPrice === null || cash < item.buyPrice) return;
     
-    buyItem(itemId)
+    buyItem(itemId);
     
-    const rect = (e.target as HTMLElement).getBoundingClientRect()
+    const rect = (e.target as HTMLElement).getBoundingClientRect();
-    const position = { x: rect.left + rect.width / 2, y: rect.top }
+    const position = { x: rect.left + rect.width / 2, y: rect.top };
     
     setFloatingMessages([
       ...floatingMessages,
       {
         id: `buy-${itemId}-${Date.now()}`,
         message: `+1 ${item.emoji} ${item.name}`,
-        position,
+        position
-      },
-    ])
       }
+    ]);
+  };
 
   const handleSell = (itemId: string, e: React.MouseEvent) => {
-    const item = MARKET_ITEMS[itemId]
+    const item = MARKET_ITEMS[itemId];
-    if (
+    if (!item || item.sellPrice === null || !inventory[itemId] || inventory[itemId] <= 0) return;
-      !item ||
-      item.sellPrice === null ||
-      !inventory[itemId] ||
-      inventory[itemId] <= 0
-    )
-      return
     
-    sellItem(itemId)
+    sellItem(itemId);
     
-    const rect = (e.target as HTMLElement).getBoundingClientRect()
+    const rect = (e.target as HTMLElement).getBoundingClientRect();
-    const position = { x: rect.left + rect.width / 2, y: rect.top }
+    const position = { x: rect.left + rect.width / 2, y: rect.top };
     
     setFloatingMessages([
       ...floatingMessages,
       {
         id: `sell-${itemId}-${Date.now()}`,
         message: `-1 ${item.emoji} ${item.name}`,
-        position,
+        position
-      },
-    ])
       }
+    ]);
+  };
 
   const removeFloatingMessage = (messageId: string) => {
-    setFloatingMessages(floatingMessages.filter((msg) => msg.id !== messageId))
+    setFloatingMessages(floatingMessages.filter(msg => msg.id !== messageId));
-  }
+  };
 
   const sellableItems = Object.entries(MARKET_ITEMS)
-    .filter(
+    .filter(([_, item]) => item.sellPrice !== null && inventory[item.id] && inventory[item.id] > 0)
-      ([_, item]) =>
+    .map(([_, item]) => item);
-        item.sellPrice !== null && inventory[item.id] && inventory[item.id] > 0,
-    )
-    .map(([_, item]) => item)
 
   const buyableItems = Object.entries(MARKET_ITEMS)
     .filter(([_, item]) => item.buyPrice !== null)
-    .map(([_, item]) => item)
+    .map(([_, item]) => item);
 
   return (
     <MarketContainer>
@@ -163,7 +152,7 @@ const MarketComponent: React.FC = () => {
               </tr>
             </thead>
             <tbody>
-              {sellableItems.map((item) => (
+              {sellableItems.map(item => (
                 <MarketItemRow key={`sell-${item.id}`}>
                   <MarketItemCell>
                     <ItemIcon>{item.emoji}</ItemIcon>
@@ -196,7 +185,7 @@ const MarketComponent: React.FC = () => {
           </tr>
         </thead>
         <tbody>
-          {buyableItems.map((item) => (
+          {buyableItems.map(item => (
             <MarketItemRow key={`buy-${item.id}`}>
               <MarketItemCell>
                 <ItemIcon>{item.emoji}</ItemIcon>
@@ -216,7 +205,7 @@ const MarketComponent: React.FC = () => {
         </tbody>
       </MarketTable>
       
-      {floatingMessages.map((msg) => (
+      {floatingMessages.map(msg => (
         <FloatingMessage
           key={msg.id}
           message={msg.message}
@@ -225,7 +214,7 @@ const MarketComponent: React.FC = () => {
         />
       ))}
     </MarketContainer>
-  )
+  );
-}
+};
 
-export default MarketComponent
+export default MarketComponent;

src/components/Warehouse.tsx

@@ -1,47 +1,47 @@
-import React from 'react'
+import React from 'react';
-import { useGameStore } from '../store/useGameStore'
+import { useGameStore } from '../store/useGameStore';
-import { CROPS } from '../constants'
+import { CROPS } from '../constants';
 
 const warehouseContainerStyle: React.CSSProperties = {
-  padding: '1rem',
+  padding: '1rem'
-}
+};
 
 const titleStyle: React.CSSProperties = {
   fontSize: '1.5rem',
   fontWeight: 'bold',
   marginBottom: '1rem',
-  textAlign: 'center',
+  textAlign: 'center'
-}
+};
 
 const cashDisplayStyle: React.CSSProperties = {
   textAlign: 'center',
   marginBottom: '1.5rem',
   padding: '1rem',
   backgroundColor: '#dcfce7',
-  borderRadius: '0.375rem',
+  borderRadius: '0.375rem'
-}
+};
 
 const cashAmountStyle: React.CSSProperties = {
   fontSize: '1.25rem',
-  fontWeight: 500,
+  fontWeight: 500
-}
+};
 
 const inventoryTitleStyle: React.CSSProperties = {
   fontSize: '1.25rem',
   fontWeight: 500,
-  marginBottom: '0.5rem',
+  marginBottom: '0.5rem'
-}
+};
 
 const getInventoryGridStyle = (): React.CSSProperties => {
   const style: React.CSSProperties = {
     display: 'grid',
     gridTemplateColumns: 'repeat(2, 1fr)',
     gap: '1rem',
-    marginTop: '1rem',
+    marginTop: '1rem'
-  }
+  };
 
-  return style
+  return style;
-}
+};
 
 const inventoryItemStyle: React.CSSProperties = {
   backgroundColor: '#f3f4f6',
@@ -51,43 +51,43 @@ const inventoryItemStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  textAlign: 'center',
+  textAlign: 'center'
-}
+};
 
 const itemIconStyle: React.CSSProperties = {
   fontSize: '1.5rem',
-  marginBottom: '0.5rem',
+  marginBottom: '0.5rem'
-}
+};
 
 const itemNameStyle: React.CSSProperties = {
   fontWeight: 500,
-  marginBottom: '0.25rem',
+  marginBottom: '0.25rem'
-}
+};
 
 const formatItemName = (id: string) => {
   if (id.endsWith('_seed')) {
-    const cropId = id.replace('_seed', '')
+    const cropId = id.replace('_seed', '');
-    return `${CROPS[cropId]?.name || cropId} Seeds`
+    return `${CROPS[cropId]?.name || cropId} Seeds`;
   }
   
-  return CROPS[id]?.name || id
+  return CROPS[id]?.name || id;
-}
+};
 
 const getItemIcon = (id: string) => {
   if (id.endsWith('_seed')) {
-    return '🌰'
+    return '🌰';
   }
   
   const cropIcons: Record<string, string> = {
     celery: '🥬',
     corn: '🌽',
-  }
+  };
   
-  return cropIcons[id] || '📦'
+  return cropIcons[id] || '📦';
-}
+};
 
 const WarehouseComponent: React.FC = () => {
-  const { inventory, cash } = useGameStore()
+  const { inventory, cash } = useGameStore();
 
   return (
     <div style={warehouseContainerStyle}>
@@ -100,19 +100,18 @@ const WarehouseComponent: React.FC = () => {
       <h3 style={inventoryTitleStyle}>Inventory:</h3>
       
       <div style={getInventoryGridStyle()}>
-        {Object.entries(inventory).map(
+        {Object.entries(inventory).map(([id, count]) => (
-          ([id, count]) =>
           count > 0 && (
             <div key={id} style={inventoryItemStyle}>
               <div style={itemIconStyle}>{getItemIcon(id)}</div>
               <h4 style={itemNameStyle}>{formatItemName(id)}</h4>
               <p>Quantity: {count}</p>
             </div>
-            ),
-        )}
-      </div>
-    </div>
           )
-}
+        ))}
+      </div>
+    </div>
+  );
+};
 
-export default WarehouseComponent
+export default WarehouseComponent;

src/constants/index.ts

@@ -1,70 +1,50 @@
-import { CropDefinitions } from '../types'
+import { CropDefinitions } from '../types';
 
-export const INITIAL_CASH = 50
+export const INITIAL_CASH = 50;
-export const INITIAL_FIELD_SIZE = 4
+export const INITIAL_FIELD_SIZE = 4;
-export const COOLDOWN_DURATION = 2000 // 2 seconds in milliseconds
+export const COOLDOWN_DURATION = 2000; // 2 seconds in milliseconds
-export const TICK_INTERVAL = 12000 // 12 seconds in milliseconds
+export const TICK_INTERVAL = 12000; // 12 seconds in milliseconds
 export const GAME_SPEEDS = {
-  NORMAL: 1,
+  NORMAL: 1, FAST: 5, SUPER_FAST: 10
-  FAST: 5,
+};
-  SUPER_FAST: 10,
+export const INITIAL_GAME_SPEED = GAME_SPEEDS.NORMAL;
-}
-export const INITIAL_GAME_SPEED = GAME_SPEEDS.NORMAL
 
-export const FIELD_UPGRADE_COSTS = [100, 1000, 10000, 100000]
+export const FIELD_UPGRADE_COSTS = [100, 1000, 10000, 100000];
 
 export const CROPS: CropDefinitions = {
   celery: {
     id: 'celery',
     name: 'Celery',
     growthTicks: 36,
-    waterPerTick: 1 / 20,
+    waterPerTick: 1/20,
     yield: 1,
-    yieldType: 'celery',
+    yieldType: 'celery'
   },
   corn: {
     id: 'corn',
     name: 'Corn',
     growthTicks: 120,
-    waterPerTick: 1 / 40,
+    waterPerTick: 1/40,
     yield: 5,
-    yieldType: 'corn',
+    yieldType: 'corn'
-  },
+  }
-}
+};
 
 export const INITIAL_INVENTORY = {
-  celery_seed: 8,
+  'celery_seed': 8
-}
+};
 
 export interface MarketItem {
-  id: string
+  id: string;
-  name: string
+  name: string;
-  emoji: string
+  emoji: string;
-  buyPrice: number | null // null means not buyable
+  buyPrice: number | null;  // null means not buyable
-  sellPrice: number | null // null means not sellable
+  sellPrice: number | null; // null means not sellable
 }
 
 export const MARKET_ITEMS: Record<string, MarketItem> = {
-  celery_seed: {
+  'celery_seed': { id: 'celery_seed', name: 'Celery Seeds', emoji: '🌰', buyPrice: 1, sellPrice: null },
-    id: 'celery_seed',
+  'corn_seed': { id: 'corn_seed', name: 'Corn Seeds', emoji: '🌰', buyPrice: 5, sellPrice: null },
-    name: 'Celery Seeds',
+  'celery': { id: 'celery', name: 'Celery', emoji: '🥬', buyPrice: null, sellPrice: 5 },
-    emoji: '🌰',
+  'corn': { id: 'corn', name: 'Corn', emoji: '🌽', buyPrice: null, sellPrice: 8 },
-    buyPrice: 1,
+};
-    sellPrice: null,
-  },
-  corn_seed: {
-    id: 'corn_seed',
-    name: 'Corn Seeds',
-    emoji: '🌰',
-    buyPrice: 5,
-    sellPrice: null,
-  },
-  celery: {
-    id: 'celery',
-    name: 'Celery',
-    emoji: '🥬',
-    buyPrice: null,
-    sellPrice: 5,
-  },
-  corn: { id: 'corn', name: 'Corn', emoji: '🌽', buyPrice: null, sellPrice: 8 },
-}

src/hooks/useGameTick.ts

@@ -3,8 +3,8 @@ import { useGameStore } from '../store/useGameStore'
 import { TICK_INTERVAL } from '../constants'
 
 export const useGameTick = () => {
-  const tick = useGameStore((state) => state.tick)
+  const tick = useGameStore(state => state.tick)
-  const gameSpeed = useGameStore((state) => state.gameSpeed)
+  const gameSpeed = useGameStore(state => state.gameSpeed)
   const intervalRef = useRef<number | null>(null)
 
   useEffect(() => {
@@ -12,7 +12,7 @@ export const useGameTick = () => {
       clearInterval(intervalRef.current)
     }
     
-    const adjustedInterval = TICK_INTERVAL / gameSpeed
+    const adjustedInterval = TICK_INTERVAL / gameSpeed;
     intervalRef.current = window.setInterval(() => {
       tick()
     }, adjustedInterval)
@@ -23,4 +23,4 @@ export const useGameTick = () => {
       }
     }
   }, [tick, gameSpeed])
-}
+};

src/index.css

@@ -24,9 +24,7 @@ git /* Base styles */
 
 /* Global styles */
 body {
-  font-family:
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -35,3 +33,4 @@ body {
 * {
   box-sizing: inherit;
 }
+

src/store/useGameStore.ts

@@ -1,5 +1,5 @@
-import { create } from 'zustand'
+import { create } from 'zustand';
-import { produce } from 'immer'
+import { produce } from 'immer';
 import { 
   INITIAL_CASH, 
   INITIAL_FIELD_SIZE, 
@@ -8,39 +8,30 @@ import {
   CROPS,
   INITIAL_GAME_SPEED,
   COOLDOWN_DURATION,
-  MARKET_ITEMS,
+  MARKET_ITEMS
-} from '../constants'
+} from '../constants';
-import { GameState, PlotState } from '../types'
+import { GameState, PlotState } from '../types';
-import { saveGame, loadGame } from '../utils/saveSystem'
 
 const initializeField = (size: number): PlotState[][] => {
-  return Array(size)
+  return Array(size).fill(0).map(() => 
-    .fill(0)
+    Array(size).fill(0).map(() => ({
-    .map(() =>
+      moisture: 0
-      Array(size)
+    }))
-        .fill(0)
+  );
-        .map(() => ({
+};
-          moisture: 0,
-        })),
-    )
-}
 
-export const useGameStore = create<
+export const useGameStore = create<GameState & {
-  GameState & {
+  plant: () => void;
-    plant: () => void
+  water: () => void;
-    water: () => void
+  harvest: () => void;
-    harvest: () => void
+  tick: () => void;
-    tick: () => void
+  assignCrop: (row: number, col: number, cropId: string) => void;
-    assignCrop: (row: number, col: number, cropId: string) => void
+  upgradeField: () => void;
-    upgradeField: () => void
+  setGameSpeed: (speed: number) => void;
-    setGameSpeed: (speed: number) => void
+  setActionCooldown: (cooldown: number) => void;
-    setActionCooldown: (cooldown: number) => void
+  buyItem: (itemId: string) => void;
-    buyItem: (itemId: string) => void
+  sellItem: (itemId: string) => void;
-    sellItem: (itemId: string) => void
+}>((set, get) => ({
-    saveToSlot: (slot: number) => void
-    loadFromSlot: (slot: number) => void
-  }
->((set, get) => ({
   cash: INITIAL_CASH,
   inventory: INITIAL_INVENTORY,
   fieldSize: INITIAL_FIELD_SIZE,
@@ -49,44 +40,39 @@ export const useGameStore = create<
   plots: initializeField(INITIAL_FIELD_SIZE),
   gameSpeed: INITIAL_GAME_SPEED,
   actionCooldown: 0,
-  tickCount: 0,
 
   assignCrop: (row, col, cropId) => {
-    set(
+    set(produce(state => {
-      produce((state) => {
+      state.plots[row][col].intended = cropId;
-        state.plots[row][col].intended = cropId
+    }));
-      }),
-    )
   },
 
   plant: () => {
-    const { plots, inventory, actionCooldown } = get()
+    const { plots, inventory, actionCooldown } = get();
     
     if (actionCooldown > 0) {
-      return
+      return;
     }
     
     for (let row = 0; row < plots.length; row++) {
       for (let col = 0; col < plots[row].length; col++) {
-        const plot = plots[row][col]
+        const plot = plots[row][col];
         
         if (plot.intended && !plot.current) {
-          const seedId = `${plot.intended}_seed`
+          const seedId = `${plot.intended}_seed`;
           
           if (inventory[seedId] && inventory[seedId] > 0) {
-            set(
+            set(produce(state => {
-              produce((state) => {
               state.plots[row][col].current = {
                 cropId: plot.intended!,
                 progress: 0,
-                  mature: false,
+                mature: false
-                }
+              };
               
-                state.inventory[seedId] = state.inventory[seedId] - 1
+              state.inventory[seedId] = state.inventory[seedId] - 1;
-                state.actionCooldown = COOLDOWN_DURATION
+              state.actionCooldown = COOLDOWN_DURATION;
-              }),
+            }));
-            )
+            return;
-            return
           }
         }
       }
@@ -94,203 +80,153 @@ export const useGameStore = create<
   },
 
   water: () => {
-    const { plots, actionCooldown } = get()
+    const { plots, actionCooldown } = get();
     
     if (actionCooldown > 0) {
-      return
+      return;
     }
     
-    let driestRow = -1
+    let driestRow = -1;
-    let driestCol = -1
+    let driestCol = -1;
-    let lowestMoisture = 1
+    let lowestMoisture = 1;
     
     for (let row = 0; row < plots.length; row++) {
       for (let col = 0; col < plots[row].length; col++) {
-        if (
+        if (plots[row][col].current && plots[row][col].moisture < lowestMoisture) {
-          plots[row][col].current &&
+          lowestMoisture = plots[row][col].moisture;
-          plots[row][col].moisture < lowestMoisture
+          driestRow = row;
-        ) {
+          driestCol = col;
-          lowestMoisture = plots[row][col].moisture
-          driestRow = row
-          driestCol = col
         }
       }
     }
     
     if (driestRow >= 0 && driestCol >= 0) {
-      set(
+      set(produce(state => {
-        produce((state) => {
+        state.plots[driestRow][driestCol].moisture = 1;
-          state.plots[driestRow][driestCol].moisture = 1
+        state.actionCooldown = COOLDOWN_DURATION;
-          state.actionCooldown = COOLDOWN_DURATION
+      }));
-        }),
-      )
     }
   },
 
   harvest: () => {
-    const { plots, actionCooldown } = get()
+    const { plots, actionCooldown } = get();
     
     if (actionCooldown > 0) {
-      return
+      return;
     }
     
     for (let row = 0; row < plots.length; row++) {
       for (let col = 0; col < plots[row].length; col++) {
-        const plot = plots[row][col]
+        const plot = plots[row][col];
         
         if (plot.current && plot.current.mature) {
-          const crop = CROPS[plot.current.cropId]
+          const crop = CROPS[plot.current.cropId];
-          const yieldItem = crop.yieldType
+          const yieldItem = crop.yieldType;
-          const yieldAmount = crop.yield
+          const yieldAmount = crop.yield;
           
-          set(
+          set(produce(state => {
-            produce((state) => {
+            state.plots[row][col].current = undefined;
-              state.plots[row][col].current = undefined
+            state.inventory[yieldItem] = (state.inventory[yieldItem] || 0) + yieldAmount;
-              state.inventory[yieldItem] =
+            state.actionCooldown = COOLDOWN_DURATION;
-                (state.inventory[yieldItem] || 0) + yieldAmount
+          }));
-              state.actionCooldown = COOLDOWN_DURATION
+          return;
-            }),
-          )
-          return
         }
       }
     }
   },
 
   tick: () => {
-    set(
+    set(produce(state => {
-      produce((state) => {
+      // Update cooldown
+      if (state.actionCooldown > 0) {
+        state.actionCooldown = Math.max(0, state.actionCooldown - (COOLDOWN_DURATION / 20));
+      }
+      
       // Update plots
       state.plots.forEach((row: PlotState[], rowIndex: number) => {
         row.forEach((plot: PlotState, colIndex: number) => {
           if (!plot.current || plot.current.mature) {
-              return
+            return;
           }
           
-            const crop = CROPS[plot.current.cropId]
+          const crop = CROPS[plot.current.cropId];
-            const waterNeeded = crop.waterPerTick
+          const waterNeeded = crop.waterPerTick;
           
           if (plot.moisture >= waterNeeded) {
-              const newProgress = plot.current.progress + 1
+            const newProgress = plot.current.progress + 1;
-              const mature = newProgress >= crop.growthTicks
+            const mature = newProgress >= crop.growthTicks;
             
-              state.plots[rowIndex][colIndex].moisture =
+            state.plots[rowIndex][colIndex].moisture = plot.moisture - waterNeeded;
-                plot.moisture - waterNeeded
+            state.plots[rowIndex][colIndex].current.progress = newProgress;
-              state.plots[rowIndex][colIndex].current.progress = newProgress
+            state.plots[rowIndex][colIndex].current.mature = mature;
-              state.plots[rowIndex][colIndex].current.mature = mature
           }
-          })
+        });
-        })
+      });
-
+    }));
-        state.tickCount = state.tickCount + 1
-      }),
-    )
   },
 
   upgradeField: () => {
-    set(
+    set(produce(state => {
-      produce((state) => {
       if (state.fieldSize >= state.maxFieldSize) {
-          return
+        return;
       }
       
-        const upgradeIndex = state.fieldSize - INITIAL_FIELD_SIZE
+      const upgradeIndex = state.fieldSize - INITIAL_FIELD_SIZE;
-        const cost = state.fieldUpgradeCosts[upgradeIndex]
+      const cost = state.fieldUpgradeCosts[upgradeIndex];
       
       if (state.cash < cost) {
-          return
+        return;
       }
       
-        const newSize = state.fieldSize + 1
+      const newSize = state.fieldSize + 1;
       
-        state.cash = state.cash - cost
+      state.cash = state.cash - cost;
-        state.fieldSize = newSize
+      state.fieldSize = newSize;
-        state.plots = initializeField(newSize)
+      state.plots = initializeField(newSize);
-      }),
+    }));
-    )
   },
   
   setGameSpeed: (speed) => {
-    set(
+    set(produce(state => {
-      produce((state) => {
+      state.gameSpeed = speed;
-        state.gameSpeed = speed
+    }));
-      }),
-    )
   },
 
   setActionCooldown: (cooldown) => {
-    set(
+    set(produce(state => {
-      produce((state) => {
+      state.actionCooldown = cooldown;
-        state.actionCooldown = cooldown
+    }));
-      }),
-    )
   },
 
   buyItem: (itemId) => {
-    const { cash } = get()
+    const { cash } = get();
-    const item = MARKET_ITEMS[itemId]
+    const item = MARKET_ITEMS[itemId];
 
     if (!item || item.buyPrice === null) {
-      return
+      return;
     }
 
     if (cash < item.buyPrice) {
-      return
+      return;
     }
 
-    set(
+    set(produce(state => {
-      produce((state) => {
+      state.cash -= item.buyPrice;
-        state.cash -= item.buyPrice
+      state.inventory[itemId] = (state.inventory[itemId] || 0) + 1;
-        state.inventory[itemId] = (state.inventory[itemId] || 0) + 1
+    }));
-      }),
-    )
   },
 
   sellItem: (itemId) => {
-    const { inventory } = get()
+    const { inventory } = get();
-    const item = MARKET_ITEMS[itemId]
+    const item = MARKET_ITEMS[itemId];
 
-    if (
+    if (!item || item.sellPrice === null || !inventory[itemId] || inventory[itemId] <= 0) {
-      !item ||
+      return;
-      item.sellPrice === null ||
-      !inventory[itemId] ||
-      inventory[itemId] <= 0
-    ) {
-      return
     }
 
-    set(
+    set(produce(state => {
-      produce((state) => {
+      state.cash += item.sellPrice;
-        state.cash += item.sellPrice
+      state.inventory[itemId] -= 1;
-        state.inventory[itemId] -= 1
+    }));
-      }),
-    )
-  },
-
-  saveToSlot: (slot: number) => {
-    const state = get()
-    const {
-      plant,
-      water,
-      harvest,
-      tick,
-      assignCrop,
-      upgradeField,
-      setGameSpeed,
-      setActionCooldown,
-      buyItem,
-      sellItem,
-      saveToSlot,
-      loadFromSlot,
-      ...gameState
-    } = state
-    saveGame(slot, gameState)
-  },
-
-  loadFromSlot: (slot: number) => {
-    const savedState = loadGame(slot)
-    if (savedState) {
-      set(savedState)
   }
-  },
+}));
-}))

src/types/index.ts

@@ -1,48 +1,48 @@
 export interface Crop {
-  id: string
+  id: string;
-  name: string
+  name: string;
-  growthTicks: number
+  growthTicks: number;
-  waterPerTick: number
+  waterPerTick: number;
-  yield: number
+  yield: number;
-  yieldType: string
+  yieldType: string;
 }
 
 export interface CropDefinitions {
-  [key: string]: Crop
+  [key: string]: Crop;
 }
 
 export interface PlotState {
-  intended?: string
+  intended?: string;
   current?: {
-    cropId: string
+    cropId: string;
-    progress: number
+    progress: number;
-    mature: boolean
+    mature: boolean;
-  }
+  };
-  moisture: number
+  moisture: number;
 }
 
 export interface InventoryItem {
-  id: string
+  id: string;
-  count: number
+  count: number;
 }
 
 export interface GameState {
-  cash: number
+  cash: number;
-  inventory: Record<string, number>
+  inventory: Record<string, number>;
-  fieldSize: number
+  fieldSize: number;
-  maxFieldSize: number
+  maxFieldSize: number;
-  fieldUpgradeCosts: number[]
+  fieldUpgradeCosts: number[];
-  plots: PlotState[][]
+  plots: PlotState[][];
-  gameSpeed: number
+  gameSpeed: number;
-  actionCooldown: number
+  actionCooldown: number;
 }
 
 export interface MarketTransaction {
-  itemId: string
+  itemId: string;
-  amount: number
+  amount: number;
-  type: 'buy' | 'sell'
+  type: 'buy' | 'sell';
   position: {
-    x: number
+    x: number;
-    y: number
+    y: number;
-  }
+  };
 }

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}`)
-}