Design

eslint.config.js

@@ -25,6 +25,30 @@ export default tseslint.config(
       ],
     },
   },
-  stylistic.configs.recommended,
+  {
+    plugins: {
+      '@stylistic': stylistic,
+    },
+    rules: {
+      ...stylistic.configs.recommended.rules,
+      '@stylistic/jsx-one-expression-per-line': ['error', { allow: 'non-jsx' }],
+    },
+  },
+  {
+    files: ['**/*.test.ts?(x)'],
+    languageOptions: {
+      globals: {
+        ...vitest.environments.env.globals,
+      },
+    },
+    plugins: {
+      vitest,
+      'testing-library': testingLibrary,
+    },
+    rules: {
+      ...vitest.configs.recommended.rules,
+      ...testingLibrary.configs['flat/react'].rules,
+    },
+  },
   { ignores: ['dist'] },
 )

package.json

@@ -11,6 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mui/material": "^6.4.8",
+    "devicon": "^2.16.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.4.0"

src/App.tsx

@@ -1,13 +1,16 @@
 import { BrowserRouter, Routes, Route } from 'react-router'
-import { Game } from '@/components/Game'
-import Home from '@/components/Home'
+import Home from '@/pages/Home'
+import { Navbar } from '@/components/layout/Navbar'
+import GitClicker from '@/pages/GitClicker'
 
 export default function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route index element={<Home />} />
-        <Route path="gitclicker" element={<Game />} />
+        <Route path="/" element={<Navbar />}>
+          <Route index element={<Home />} />
+          <Route path="gitclicker" element={<GitClicker />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   )

src/components/game/Game.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react'
+import '@/styles/game/index.css'
+import type { Item, OwnedItems } from '@/types'
+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'
+
+export function Game() {
+  const [lines, setLines] = useState(0)
+  const [linesPerMillisecond, setLinesPerMillisecond] = useState(0)
+
+  const [ownedItems, setOwnedItems] = useState<OwnedItems>({})
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setLines(prev => prev + linesPerMillisecond)
+    }, 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 (
+    <>
+      <Grid size={3}>
+        <Card component="section" className="card">
+          <CardContent className="content">
+            <Score
+              lines={Math.ceil(lines)}
+              linesPerSecond={Math.ceil(linesPerMillisecond * 10)}
+            />
+            <Gitcoin onClick={handleClick} />
+          </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} />
+          </CardContent>
+        </Card>
+      </Grid>
+      <Grid size="grow">
+        <Card component="section" className="card">
+          <CardHeader title="Store" />
+          <CardContent>
+            <Store lines={lines} onBuy={handleBuy} />
+          </CardContent>
+        </Card>
+      </Grid>
+    </>
+  )
+}

src/components/Gitcoin.tsx → src/components/game/core/Gitcoin.tsx

@@ -1,4 +1,4 @@
-import './Gitcoin.css'
+import '@/styles/game/core/gitcoin.css'
 import githubIcon from '@/assets/github.svg'
 
 type Props = {

src/components/Score.tsx → src/components/game/core/Score.tsx

@@ -7,13 +7,10 @@ export function Score({ lines, linesPerSecond }: Props) {
   return (
     <>
       <h3 style={{ fontFamily: 'Orbitron' }}>
-        {lines}
-        {' '}
-        lines
+        {Math.ceil(lines)} lines
       </h3>
       <small>
-        per second:
-        {linesPerSecond}
+        per second: {Math.ceil(linesPerSecond * 10)}
       </small>
     </>
   )

src/components/game/core/index.ts

@@ -0,0 +1,2 @@
+export { Gitcoin } from './Gitcoin'
+export { Score } from './Score'

src/components/game/index.ts

@@ -0,0 +1 @@
+export { Game } from './Game'

src/components/game/skills/Section.tsx

@@ -0,0 +1,36 @@
+import { items } from '@/constants/items'
+import { Box, Grid2 as Grid, Typography } from '@mui/material'
+
+type Props = {
+  itemName: string
+  number: number
+}
+
+export const Section = ({ itemName, number }: Props) => {
+  const item = items.find(element => element.name === itemName)
+
+  if (item == null) {
+    return null
+  }
+
+  return (
+    <Box component="section">
+      <Typography variant="subtitle2" marginBottom={1}>{item.name}</Typography>
+      <Grid container component="ul" gap={1}>
+        {Array.from({ length: number }).map((_, index) => (
+          <li
+            key={index}
+          >
+            <img
+              src={item.icon}
+              alt={item.name}
+              style={{
+                width: '2rem',
+              }}
+            />
+          </li>
+        ))}
+      </Grid>
+    </Box>
+  )
+}