08 - Redux

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "@mui/material": "^6.4.8",
+    "@reduxjs/toolkit": "^2.6.1",
     "devicon": "^2.16.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-redux": "^9.2.0",
     "react-router": "^7.4.0"
   },
   "devDependencies": {

src/components/game/Game.tsx

@@ -1,77 +1,48 @@
-import { useEffect, useState } from 'react'
 import '@/styles/game/index.css'
-import type { Item, OwnedItems } from '@/types'
+import { useEffect } from 'react'
 import { Grid2 as Grid, Card, CardContent, CardHeader } from '@mui/material'
-import { items } from '@/constants/items'
 import { Score, Gitcoin } from '@/components/game/core'
 import { Skills } from '@/components/game/skills'
 import { Store } from '@/components/game/store'
+import { loop } from '@/modules/game'
 
-export function Game() {
-  const [lines, setLines] = useState(0)
-  const [linesPerMillisecond, setLinesPerMillisecond] = useState(0)
+import { useDispatch } from 'react-redux'
 
-  const [ownedItems, setOwnedItems] = useState<OwnedItems>({})
+export function Game() {
+  const dispatch = useDispatch()
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setLines(prev => prev + linesPerMillisecond)
+      dispatch(loop())
     }, 100)
-    return () => clearInterval(interval)
-  }, [linesPerMillisecond])
-
-  useEffect(() => {
-    let count = 0
 
-    Object.keys(ownedItems).forEach((name) => {
-      const item = items.find(element => element.name === name)
-
-      if (item != null) {
-        count += item.linesPerMillisecond * ownedItems[name]
-      }
-    })
-
-    setLinesPerMillisecond(count)
-  }, [ownedItems])
-
-  const handleClick = () => {
-    setLines(lines + 1)
-  }
-
-  const handleBuy = (item: Item) => {
-    setLines(lines - item.price)
-    setOwnedItems({
-      ...ownedItems,
-      [item.name]: (ownedItems[item.name] || 0) + 1,
-    })
-  }
+    return () => clearInterval(interval)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return (
     <>
       <Grid size={3}>
         <Card component="section" className="card">
           <CardContent className="content">
-            <Score
-              lines={Math.ceil(lines)}
-              linesPerSecond={Math.ceil(linesPerMillisecond * 10)}
-            />
-            <Gitcoin onClick={handleClick} />
+            <Score />
+            <Gitcoin />
           </CardContent>
         </Card>
       </Grid>
       <Grid size="grow">
         <Card component="section" className="card">
           <CardHeader title="Skills" />
           <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <Skills skills={ownedItems} />
+            <Skills />
           </CardContent>
         </Card>
       </Grid>
       <Grid size="grow">
         <Card component="section" className="card">
           <CardHeader title="Store" />
           <CardContent>
-            <Store lines={lines} onBuy={handleBuy} />
+            <Store />
           </CardContent>
         </Card>
       </Grid>

src/components/game/core/Gitcoin.tsx

@@ -1,13 +1,14 @@
 import '@/styles/game/core/gitcoin.css'
 import githubIcon from '@/assets/github.svg'
+import { click } from '@/modules/game'
+import { useDispatch } from 'react-redux'
 
-type Props = {
-  onClick: () => void
-}
+export function Gitcoin() {
+  const dispatch = useDispatch()
+  const handleClick = () => dispatch(click())
 
-export function Gitcoin({ onClick }: Props) {
   return (
-    <button className="gitcoin" onClick={onClick} type="button">
+    <button className="gitcoin" onClick={handleClick} type="button">
       <img src={githubIcon} alt="Gitcoin" />
     </button>
   )

src/components/game/core/Score.tsx

@@ -1,16 +1,17 @@
-type Props = {
-  lines: number
-  linesPerSecond: number
-}
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+
+export const Score = () => {
+  const lines = useSelector((state: RootState) => state.game.lines)
+  const linesPerMillisecond = useSelector((state: RootState) => state.game.linesPerMillisecond)
 
-export function Score({ lines, linesPerSecond }: Props) {
   return (
     <>
       <h3 style={{ fontFamily: 'Orbitron' }}>
         {Math.ceil(lines)} lines
       </h3>
       <small>
-        per second: {Math.ceil(linesPerSecond * 10)}
+        per second: {Math.ceil(Math.ceil(linesPerMillisecond * 10) * 10)}
       </small>
     </>
   )

src/components/game/skills/Skills.tsx

@@ -1,16 +1,15 @@
+import { RootState } from '@/store'
+import { useSelector } from 'react-redux'
 import { Section } from './Section'
-import { OwnedItems } from '@/types'
 
-type Props = {
-  skills: OwnedItems
-}
+export const Skills = () => {
+  const skills = useSelector((state: RootState) => state.game.skills)
 
-export const Skills = ({ skills }: Props) => {
   return (
     <>
-      {Object.keys(skills).map((name, key) => (
+      {Object.keys(skills).map(name => (
         <Section
-          key={key}
+          key={name}
           itemName={name}
           number={skills[name]}
         />

src/components/game/store/Store.tsx

@@ -2,21 +2,23 @@ import { Item as ItemType } from '@/types'
 import { Item } from './Item.tsx'
 import { items } from '@/constants/items.ts'
 import { Grid2 as Grid } from '@mui/material'
+import { buyItem } from '@/modules/game.ts'
+import { RootState } from '@/store.ts'
+import { useSelector, useDispatch } from 'react-redux'
 
-type Props = {
-  lines: number
-  onBuy: (item: ItemType) => void
-}
+export function Store() {
+  const lines = useSelector((state: RootState) => state.game.lines)
+  const dispatch = useDispatch()
+  const handleBuy = (item: ItemType) => dispatch(buyItem(item))
 
-export function Store({ lines, onBuy }: Props) {
   return (
     <Grid container component="ul" spacing={2} display="flex" flexDirection="column">
       {items.map((item, key) => (
         <Item
           key={key}
           item={item}
           lines={lines}
-          onBuy={onBuy}
+          onBuy={handleBuy}
         />
       ))}
     </Grid>