src/components/Field.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { useGameStore } from '../store/useGameStore'
 import { CROPS } from '../constants'
-import { FieldTool, PlotState } from '../types'
 
 const fieldContainerStyle: React.CSSProperties = {
   display: 'flex',
@@ -17,24 +16,6 @@ const titleStyle: React.CSSProperties = {
   textAlign: 'center',
 }
 
-const toolbarStyle: React.CSSProperties = {
-  display: 'flex',
-  gap: '0.5rem',
-  marginBottom: '1rem',
-  justifyContent: 'center',
-}
-
-const getToolButtonStyle = (active: boolean): React.CSSProperties => ({
-  padding: '0.5rem 1rem',
-  borderRadius: '0.25rem',
-  border: '1px solid #ccc',
-  backgroundColor: active ? '#4ade80' : '#f3f4f6',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '0.5rem',
-})
-
 const cropSelectionContainerStyle: React.CSSProperties = {
   display: 'flex',
   flexWrap: 'wrap',
@@ -58,6 +39,13 @@ const getCropButtonStyle = (active: boolean): React.CSSProperties => ({
   cursor: 'pointer',
 })
 
+const actionsContainerStyle: React.CSSProperties = {
+  display: 'flex',
+  gap: '0.5rem',
+  marginBottom: '1rem',
+  justifyContent: 'center',
+}
+
 const speedSelectorContainerStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
@@ -87,6 +75,15 @@ const getSpeedButtonStyle = (active: boolean): React.CSSProperties => ({
   cursor: 'pointer',
 })
 
+const getActionButtonStyle = (disabled: boolean): React.CSSProperties => ({
+  padding: '0.5rem 1rem',
+  borderRadius: '0.25rem',
+  fontWeight: 'bold',
+  color: 'white',
+  backgroundColor: disabled ? '#9ca3af' : '#22c55e',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+})
+
 const getFieldGridStyle = (size: number): React.CSSProperties => ({
   display: 'grid',
   gridTemplateColumns: `repeat(${size}, 1fr)`,
@@ -122,13 +119,13 @@ const getMoistureIndicatorStyle = (level: number): React.CSSProperties => ({
 
 const getMaturityProgressContainerStyle = (): React.CSSProperties => ({
   position: 'absolute',
-  bottom: '10px',
+  bottom: '10px', // Moved up from the bottom to separate from moisture indicator
   left: 0,
   width: '100%',
-  height: '10px',
-  backgroundColor: 'rgba(0, 0, 0, 0.3)',
-  zIndex: 5,
-  border: '1px solid #000',
+  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
 })
 
 const getMaturityProgressBarStyle = (
@@ -139,117 +136,13 @@ const getMaturityProgressBarStyle = (
   bottom: 0,
   left: 0,
   width: `${Math.min((progress / total) * 100, 100)}%`,
-  height: '10px',
-  backgroundColor: '#ff5722',
+  height: '10px', // Increased height to match container
+  backgroundColor: '#ff5722', // Brighter orange color for better visibility
   transition: 'width 0.3s',
-  zIndex: 6,
-  boxShadow: '0 0 3px rgba(0, 0, 0, 0.5)',
+  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
 })
 
-const modalOverlayStyle: React.CSSProperties = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  zIndex: 1000,
-}
-
-const modalContentStyle: React.CSSProperties = {
-  backgroundColor: 'white',
-  padding: '2rem',
-  borderRadius: '0.5rem',
-  maxWidth: '400px',
-  width: '90%',
-  position: 'relative',
-}
-
-const modalCloseButtonStyle: React.CSSProperties = {
-  position: 'absolute',
-  top: '0.5rem',
-  right: '0.5rem',
-  padding: '0.5rem',
-  border: 'none',
-  background: 'none',
-  cursor: 'pointer',
-  fontSize: '1.5rem',
-}
-
-const plotInfoStyle: React.CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem',
-}
-
-const plotInfoItemStyle: React.CSSProperties = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0.5rem',
-  backgroundColor: '#f3f4f6',
-  borderRadius: '0.25rem',
-}
-
-interface PlotInfoModalProps {
-  plot: PlotState
-  onClose: () => void
-}
-
-const PlotInfoModal: React.FC<PlotInfoModalProps> = ({ plot, onClose }) => {
-  const formatPercentage = (value: number) => `${Math.round(value * 100)}%`
-
-  return (
-    <div style={modalOverlayStyle} onClick={onClose}>
-      <div style={modalContentStyle} onClick={(e) => e.stopPropagation()}>
-        <button style={modalCloseButtonStyle} onClick={onClose}>
-          ×
-        </button>
-        <h3 style={{ marginTop: 0 }}>Plot Information</h3>
-        <div style={plotInfoStyle}>
-          <div style={plotInfoItemStyle}>
-            <span>Current Crop:</span>
-            <span>
-              {plot.current
-                ? `${CROPS[plot.current.cropId].name}${
-                    plot.current.mature ? ' (Mature)' : ''
-                  }`
-                : 'None'}
-            </span>
-          </div>
-          <div style={plotInfoItemStyle}>
-            <span>Intended Crop:</span>
-            <span>
-              {plot.intended ? CROPS[plot.intended].name : 'None'}
-            </span>
-          </div>
-          <div style={plotInfoItemStyle}>
-            <span>Water Level:</span>
-            <span>{formatPercentage(plot.moisture)}</span>
-          </div>
-          <div style={plotInfoItemStyle}>
-            <span>Fertility Level:</span>
-            <span>{formatPercentage(plot.fertility)}</span>
-          </div>
-          {plot.current && !plot.current.mature && (
-            <div style={plotInfoItemStyle}>
-              <span>Growth Progress:</span>
-              <span>
-                {formatPercentage(
-                  plot.current.progress / CROPS[plot.current.cropId].growthTicks,
-                )}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
 const FieldComponent: React.FC = () => {
   const {
     plots,
@@ -264,63 +157,21 @@ const FieldComponent: React.FC = () => {
   } = useGameStore()
 
   const [selectedCrop, setSelectedCrop] = useState<string | null>(null)
-  const [selectedTool, setSelectedTool] = useState<FieldTool>('mark')
-  const [inspectedPlot, setInspectedPlot] = useState<{
-    plot: PlotState
-    row: number
-    col: number
-  } | null>(null)
 
   const handlePlotClick = (row: number, col: number) => {
-    if (actionCooldown > 0) return
-
-    switch (selectedTool) {
-      case 'mark':
-        if (selectedCrop) {
-          assignCrop(row, col, selectedCrop)
-        }
-        break
-      case 'plant':
-        plant(row, col)
-        break
-      case 'water':
-        water(row, col)
-        break
-      case 'harvest':
-        harvest(row, col)
-        break
-      case 'inspect':
-        setInspectedPlot({ plot: plots[row][col], row, col })
-        break
+    if (selectedCrop) {
+      assignCrop(row, col, selectedCrop)
     }
   }
 
-  const getBgColor = (
-    hasCrop: boolean,
-    isMature: boolean,
-    fertility: number,
-  ) => {
+  const getBgColor = (hasCrop: boolean, isMature: boolean) => {
     if (isMature) return '#22c55e'
     if (hasCrop) return '#86efac'
-
-    // For empty plots, show fertility level through color
-    // Convert fertility (0-1) to a color between light grey-brown and dark brown
-    const r = Math.floor(146 + (73 - 146) * fertility) // 146 to 73
-    const g = Math.floor(131 + (47 - 131) * fertility) // 131 to 47
-    const b = Math.floor(120 + (23 - 120) * fertility) // 120 to 23
-    return `rgb(${r}, ${g}, ${b})`
+    return '#92400e'
   }
 
   const availableSpeeds = [1, 2, 4, 8, 16, 32, 64]
 
-  const tools: { id: FieldTool; label: string; icon: string }[] = [
-    { id: 'mark', label: 'Mark', icon: '🎯' },
-    { id: 'plant', label: 'Plant', icon: '🌱' },
-    { id: 'water', label: 'Water', icon: '💧' },
-    { id: 'harvest', label: 'Harvest', icon: '✂️' },
-    { id: 'inspect', label: 'Inspect', icon: '🔍' },
-  ]
-
   return (
     <div style={fieldContainerStyle}>
       <h2 style={titleStyle}>Fields</h2>
@@ -340,40 +191,49 @@ const FieldComponent: React.FC = () => {
         </div>
       </div>
 
-      <div style={toolbarStyle}>
-        {tools.map((tool) => (
+      <div style={cropSelectionContainerStyle}>
+        <p style={cropSelectionLabelStyle}>Select a crop to plant:</p>
+        {Object.values(CROPS).map((crop) => (
           <button
-            key={tool.id}
-            style={getToolButtonStyle(selectedTool === tool.id)}
-            onClick={() => setSelectedTool(tool.id)}
+            key={crop.id}
+            style={getCropButtonStyle(selectedCrop === crop.id)}
+            onClick={() => setSelectedCrop(crop.id)}
           >
-            <span>{tool.icon}</span>
-            <span>{tool.label}</span>
+            {crop.name}
           </button>
         ))}
       </div>
 
-      {selectedTool === 'mark' && (
-        <div style={cropSelectionContainerStyle}>
-          <p style={cropSelectionLabelStyle}>Select a crop to mark:</p>
-          {Object.values(CROPS).map((crop) => (
-            <button
-              key={crop.id}
-              style={getCropButtonStyle(selectedCrop === crop.id)}
-              onClick={() => setSelectedCrop(crop.id)}
-            >
-              {crop.name}
-            </button>
-          ))}
-        </div>
-      )}
+      <div style={actionsContainerStyle}>
+        <button
+          style={getActionButtonStyle(actionCooldown > 0)}
+          onClick={plant}
+          disabled={actionCooldown > 0}
+        >
+          Plant Crop
+        </button>
+        <button
+          style={getActionButtonStyle(actionCooldown > 0)}
+          onClick={water}
+          disabled={actionCooldown > 0}
+        >
+          Water Crop
+        </button>
+        <button
+          style={getActionButtonStyle(actionCooldown > 0)}
+          onClick={harvest}
+          disabled={actionCooldown > 0}
+        >
+          Harvest Crop
+        </button>
+      </div>
 
       <div style={getFieldGridStyle(fieldSize)}>
         {plots.slice(0, fieldSize).map((row, rowIndex) =>
           row.slice(0, fieldSize).map((plot, colIndex) => {
             const hasCrop = !!plot.current
             const isMature = !!plot.current?.mature
-            const bgColor = getBgColor(hasCrop, isMature, plot.fertility)
+            const bgColor = getBgColor(hasCrop, isMature)
 
             return (
               <div
@@ -406,13 +266,6 @@ const FieldComponent: React.FC = () => {
           }),
         )}
       </div>
-
-      {inspectedPlot && (
-        <PlotInfoModal
-          plot={inspectedPlot.plot}
-          onClose={() => setInspectedPlot(null)}
-        />
-      )}
     </div>
   )
 }

src/components/FloatingMessages.tsx

@@ -1,9 +1,4 @@
-import React, {
-  useEffect,
-  useState,
-  useImperativeHandle,
-  forwardRef,
-} from 'react'
+import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react'
 
 interface Message {
   id: string
@@ -25,12 +20,12 @@ const FloatingMessages = forwardRef<FloatingMessagesHandle>((_, ref) => {
         text,
         position,
       }
-      setMessages((prev) => [...prev, newMessage])
-    },
+      setMessages(prev => [...prev, newMessage])
+    }
   }))
 
   const handleAnimationEnd = (messageId: string) => {
-    setMessages((prev) => prev.filter((msg) => msg.id !== messageId))
+    setMessages(prev => prev.filter(msg => msg.id !== messageId))
   }
 
   return (
@@ -57,7 +52,7 @@ const FloatingMessages = forwardRef<FloatingMessagesHandle>((_, ref) => {
           }
         `}
       </style>
-      {messages.map((message) => (
+      {messages.map(message => (
         <div
           key={message.id}
           className="floating-message"

src/components/Market.tsx

@@ -86,7 +86,7 @@ const MarketComponent: React.FC = () => {
 
     floatingMessagesRef.current?.addMessage(
       `+1 ${item.emoji} ${item.name}`,
-      position,
+      position
     )
   }
 
@@ -107,7 +107,7 @@ const MarketComponent: React.FC = () => {
 
     floatingMessagesRef.current?.addMessage(
       `-1 ${item.emoji} ${item.name}`,
-      position,
+      position
     )
   }
 

src/constants/index.ts

@@ -21,7 +21,6 @@ export const CROPS: CropDefinitions = {
     waterPerTick: 1 / 20,
     yield: 1,
     yieldType: 'celery',
-    fertilityDepletion: 0.1,
   },
   corn: {
     id: 'corn',
@@ -30,7 +29,6 @@ export const CROPS: CropDefinitions = {
     waterPerTick: 1 / 40,
     yield: 5,
     yieldType: 'corn',
-    fertilityDepletion: 0.3,
   },
 }
 

src/store/useGameStore.ts

@@ -10,7 +10,7 @@ import {
   COOLDOWN_DURATION,
   MARKET_ITEMS,
 } from '../constants'
-import { GameState, PlotState, FieldTool } from '../types'
+import { GameState, PlotState } from '../types'
 
 const initializeField = (size: number): PlotState[][] => {
   return Array(size)
@@ -20,7 +20,6 @@ const initializeField = (size: number): PlotState[][] => {
         .fill(0)
         .map(() => ({
           moisture: 0,
-          fertility: 1,
         })),
     )
 }
@@ -55,9 +54,9 @@ export const hasSaveInSlot = (slot: number): boolean => {
 
 export const useGameStore = create<
   GameState & {
-    plant: (row: number, col: number) => void
-    water: (row: number, col: number) => void
-    harvest: (row: number, col: number) => void
+    plant: () => void
+    water: () => void
+    harvest: () => void
     tick: () => void
     assignCrop: (row: number, col: number, cropId: string) => void
     upgradeField: () => void
@@ -87,77 +86,101 @@ export const useGameStore = create<
     )
   },
 
-  plant: (row, col) => {
+  plant: () => {
     const { plots, inventory, actionCooldown } = get()
 
     if (actionCooldown > 0) {
       return
     }
 
-    const plot = plots[row][col]
-    if (plot.intended && !plot.current) {
-      const seedId = `${plot.intended}_seed`
+    for (let row = 0; row < plots.length; row++) {
+      for (let col = 0; col < plots[row].length; col++) {
+        const plot = plots[row][col]
 
-      if (inventory[seedId] && inventory[seedId] > 0) {
-        set(
-          produce((state) => {
-            state.plots[row][col].current = {
-              cropId: plot.intended!,
-              progress: 0,
-              mature: false,
-            }
+        if (plot.intended && !plot.current) {
+          const seedId = `${plot.intended}_seed`
 
-            state.inventory[seedId] = state.inventory[seedId] - 1
-            state.actionCooldown = COOLDOWN_DURATION
-          }),
-        )
+          if (inventory[seedId] && inventory[seedId] > 0) {
+            set(
+              produce((state) => {
+                state.plots[row][col].current = {
+                  cropId: plot.intended!,
+                  progress: 0,
+                  mature: false,
+                }
+
+                state.inventory[seedId] = state.inventory[seedId] - 1
+                state.actionCooldown = COOLDOWN_DURATION
+              }),
+            )
+            return
+          }
+        }
       }
     }
   },
 
-  water: (row, col) => {
+  water: () => {
     const { plots, actionCooldown } = get()
 
     if (actionCooldown > 0) {
       return
     }
 
-    const plot = plots[row][col]
-    if (plot.current && plot.moisture < 1) {
+    let driestRow = -1
+    let driestCol = -1
+    let lowestMoisture = 1
+
+    for (let row = 0; row < plots.length; row++) {
+      for (let col = 0; col < plots[row].length; col++) {
+        if (
+          plots[row][col].current &&
+          plots[row][col].moisture < lowestMoisture
+        ) {
+          lowestMoisture = plots[row][col].moisture
+          driestRow = row
+          driestCol = col
+        }
+      }
+    }
+
+    if (driestRow >= 0 && driestCol >= 0) {
       set(
         produce((state) => {
-          state.plots[row][col].moisture = 1
+          state.plots[driestRow][driestCol].moisture = 1
           state.actionCooldown = COOLDOWN_DURATION
         }),
       )
     }
   },
 
-  harvest: (row, col) => {
+  harvest: () => {
     const { plots, actionCooldown } = get()
 
     if (actionCooldown > 0) {
       return
     }
 
-    const plot = plots[row][col]
-    if (plot.current && plot.current.mature) {
-      const crop = CROPS[plot.current.cropId]
-      const yieldItem = crop.yieldType
-      const yieldAmount = crop.yield
+    for (let row = 0; row < plots.length; row++) {
+      for (let col = 0; col < plots[row].length; col++) {
+        const plot = plots[row][col]
 
-      set(
-        produce((state) => {
-          state.plots[row][col].current = undefined
-          state.inventory[yieldItem] =
-            (state.inventory[yieldItem] || 0) + yieldAmount
-          state.plots[row][col].fertility = Math.max(
-            0,
-            state.plots[row][col].fertility - crop.fertilityDepletion,
+        if (plot.current && plot.current.mature) {
+          const crop = CROPS[plot.current.cropId]
+          const yieldItem = crop.yieldType
+          const yieldAmount = crop.yield
+
+          set(
+            produce((state) => {
+              state.plots[row][col].current = undefined
+              state.inventory[yieldItem] =
+                (state.inventory[yieldItem] || 0) + yieldAmount
+              state.actionCooldown = COOLDOWN_DURATION
+            }),
           )
-          state.actionCooldown = COOLDOWN_DURATION
-        }),
-      )
+          return
+        }
+      }
     }
   },
 
@@ -167,14 +190,6 @@ export const useGameStore = create<
         // Update plots
         state.plots.forEach((row: PlotState[], rowIndex: number) => {
           row.forEach((plot: PlotState, colIndex: number) => {
-            // Regenerate fertility every 100 ticks
-            if (state.tickCount % 100 === 0 && plot.fertility < 1) {
-              state.plots[rowIndex][colIndex].fertility = Math.min(
-                1,
-                plot.fertility + 0.1,
-              )
-            }
-
             if (!plot.current || plot.current.mature) {
               return
             }
@@ -182,15 +197,8 @@ export const useGameStore = create<
             const crop = CROPS[plot.current.cropId]
             const waterNeeded = crop.waterPerTick
 
-            // Only grow if fertility is above 0.2
-            if (plot.moisture >= waterNeeded && plot.fertility >= 0.2) {
-              let growthRate = 1
-              // Half growth rate if fertility is between 0.2 and 0.5
-              if (plot.fertility < 0.5) {
-                growthRate = 0.5
-              }
-
-              const newProgress = plot.current.progress + growthRate
+            if (plot.moisture >= waterNeeded) {
+              const newProgress = plot.current.progress + 1
               const mature = newProgress >= crop.growthTicks
 
               state.plots[rowIndex][colIndex].moisture =
@@ -249,7 +257,7 @@ export const useGameStore = create<
     const { cash } = get()
     const item = MARKET_ITEMS[itemId]
 
-    if (!item || item.buyPrice === null || item.buyPrice === undefined) {
+    if (!item || item.buyPrice === null) {
       return
     }
 
@@ -259,7 +267,7 @@ export const useGameStore = create<
 
     set(
       produce((state) => {
-        state.cash -= item.buyPrice!
+        state.cash -= item.buyPrice
         state.inventory[itemId] = (state.inventory[itemId] || 0) + 1
       }),
     )

src/store/useSaveSystem.ts

@@ -1,5 +1,5 @@
-import { useEffect } from 'react'
-import { hasSaveInSlot, useGameStore } from './useGameStore'
+import { useEffect } from "react"
+import { hasSaveInSlot, useGameStore } from "./useGameStore"
 
 export const useSaveSystem = () => {
   const { saveToSlot, loadFromSlot } = useGameStore()
@@ -31,6 +31,7 @@ export const useSaveSystem = () => {
       }
     }
 
+
     window.addEventListener('keydown', handleKeyDown)
     const interval = setInterval(() => {
       saveToSlot(0)

src/types/index.ts

@@ -5,7 +5,6 @@ export interface Crop {
   waterPerTick: number
   yield: number
   yieldType: string
-  fertilityDepletion: number
 }
 
 export interface CropDefinitions {
@@ -20,7 +19,6 @@ export interface PlotState {
     mature: boolean
   }
   moisture: number
-  fertility: number
 }
 
 export interface InventoryItem {
@@ -28,8 +26,6 @@ export interface InventoryItem {
   count: number
 }
 
-export type FieldTool = 'mark' | 'plant' | 'water' | 'harvest' | 'inspect'
-
 export interface GameState {
   cash: number
   inventory: Record<string, number>