feat: designed and reorganization

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "devicon": "^2.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",

src/components/App.css

@@ -0,0 +1,4 @@
+a {
+    color: inherit;
+    text-decoration: none;
+}

src/components/App.tsx

@@ -1,25 +1,28 @@
-// App.tsx
-
 import {
-    createBrowserRouter,
-    RouterProvider
+  createBrowserRouter,
+  RouterProvider
 } from 'react-router-dom'
 import { Game } from './Game'
 import { Home } from './Home'
+import './App.css'
+import { CssBaseline } from '@material-ui/core'
 
 const router = createBrowserRouter([
-    {
-        path: '/',
-        element: <Home />
-    },
-    {
-        path: '/gitclicker',
-        element: <Game />
-    }
+  {
+    path: '/',
+    element: <Home />
+  },
+  {
+    path: '/gitclicker',
+    element: <Game />
+  }
 ])
 
 export default function App() {
-    return (
-        <RouterProvider router={router} />
-    )
+  return (
+    <>
+      <CssBaseline />
+      <RouterProvider router={router} />
+    </>
+  )
 }

src/components/Game/Game.css

@@ -0,0 +1,32 @@
+.game {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.game .left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 5rem;
+    margin: 4rem 2rem;
+}
+
+.game .center {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    padding: 2rem 5rem;
+    margin: 4rem 0;
+}
+
+.game .right {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: flex-start;
+    padding: 2rem 2rem;
+    margin: 4rem 2rem;
+}

src/components/Game/Game.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import './Game.css'
+import { Paper } from '@material-ui/core'
+import { Gitcoin } from '../Gitcoin'
+import { Score } from '../Score'
+import { Store } from '../Store'
+import items from '../../items.ts'
+import { Item, OwnedItems } from '../../type'
+import { Navbar } from '../layout/Navbar'
+import { Skills } from '../Skills'
+
+export function Game() {
+  const [lines, setLines] = useState(0)
+  const [linesPerMillisecond, setLinesPerMillisecond] = useState(0)
+
+  const [ownedItems, setOwnedItems] = useState<OwnedItems>({})
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setLines(lines + linesPerMillisecond)
+    }, 100)
+
+    return () => clearInterval(interval)
+  }, [lines, 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 (
+    <>
+      <Navbar />
+      <main className="game">
+        <Paper elevation={3} className="left">
+          <Score
+            lines={Math.ceil(lines)}
+            linesPerSecond={Math.ceil(linesPerMillisecond * 10)}
+          />
+          <Gitcoin onClick={handleClick} />
+        </Paper>
+
+        <Paper elevation={3} className="center">
+          <Skills skills={ownedItems} />
+        </Paper>
+
+        <Paper elevation={3} className="right">
+          <Store
+            lines={Math.ceil(lines)}
+            onBuy={handleBuy}
+          />
+        </Paper>
+      </main>
+    </>
+  )
+}

src/components/Game/index.ts

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

src/components/Gitcoin.css → src/components/Gitcoin/Gitcoin.css

@@ -11,6 +11,7 @@
     width: 100%;
     border-radius: 100%;
     animation: bounce-up 0.2s;
+    cursor: pointer;
 }
 
 .gitcoin:active > img {

src/components/Gitcoin.tsx → src/components/Gitcoin/Gitcoin.tsx

@@ -1,7 +1,5 @@
-// ./src/components/Gitcoin.tsx
-
 import './Gitcoin.css'
-import githubIcon from '../assets/github.svg'
+import githubIcon from '../../assets/github.svg'
 
 type Props = {
     onClick: () => void;
@@ -10,10 +8,10 @@ type Props = {
 export function Gitcoin({ onClick }: Props) {
     return (
         <button
-        className="gitcoin"
-        onClick={onClick}
+            className="gitcoin"
+            onClick={onClick}
         >
             <img src={githubIcon} alt="Gitcoin" />
         </button>
-    );
+    )
 }

src/components/Gitcoin/index.ts

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

src/components/Home.tsx

@@ -1,13 +1,50 @@
-// ./src/components/Home.tsx
-
+import Button from '@material-ui/core/Button'
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
+import { makeStyles } from '@material-ui/core/styles'
+import Container from '@material-ui/core/Container'
+import { Navbar } from './layout/Navbar'
 import { Link } from 'react-router-dom'
 
+const useStyles = makeStyles((theme) => ({
+  heroContent: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(8, 0, 6),
+  },
+  heroButtons: {
+    marginTop: theme.spacing(4),
+  },
+}))
+
 export function Home() {
-  return (
-    <div>
-      <h1 className="main-title">Welcome to gitclicker!</h1>
+  const classes = useStyles()
 
-      <Link to="/gitclicker">Start a new Game</Link>
-    </div>
+  return (
+    <>
+      <Navbar />
+      <main>
+        <div className={classes.heroContent}>
+          <Container maxWidth="sm">
+            <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
+              Gitclicker
+            </Typography>
+            <Typography variant="h5" align="center" color="textSecondary" paragraph>
+              Dogs have boundless enthusiasm but no sense of shame. I should have a dog as a life coach.
+            </Typography>
+            <div className={classes.heroButtons}>
+              <Grid container spacing={2} justifyContent="center">
+                <Grid item>
+                  <Link to="/gitclicker">
+                    <Button variant="contained" color="primary">
+                      Play
+                    </Button>
+                  </Link>
+                </Grid>
+              </Grid>
+            </div>
+          </Container>
+        </div>
+      </main>
+    </>
   )
 }