05 - Hooks

src/Checkbox.jsx

@@ -1,28 +1,15 @@
-import React from "react";
-
-/**
- * @note This is a basic checkbox component without onClick event handling.
- * 💡 Please check the console for warning messages.
- */
-class Checkbox extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      check: false,
-    };
-  }
-
-  render() {
-    const { name, label } = this.props;
-
-    return (
-      <div>
-        <input name={name} type="checkbox" checked={this.state.check} />
-        <label htmlFor={name}>{label}</label>
-      </div>
-    );
-  }
+function Checkbox({ name, label, checked, onChange }) {
+  return (
+    <div>
+      <input
+        name={name}
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+      />
+      <label htmlFor={name}>{label}</label>
+    </div>
+  );
 }
 
 export default Checkbox;

src/ParentComponent.jsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import Checkbox from "./Checkbox";
+
+function ParentComponent() {
+  const [hasAcceptedTerms, setHasAcceptedTerms] = useState(false);
+
+  const handleAcceptTerms = () => {
+    setHasAcceptedTerms(!hasAcceptedTerms);
+  };
+
+  return (
+    <Checkbox
+      name="acceptedTerms"
+      label="This is a checkbox"
+      onChange={handleAcceptTerms}
+      checked={hasAcceptedTerms}
+    />
+  );
+}
+
+export default ParentComponent;

src/components/Game.css

@@ -1,6 +1,12 @@
 .game {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 2rem 20rem;
+}
+
+.game .left {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 40%;
 }

src/components/Game.jsx

@@ -1,29 +1,64 @@
-import React from "react";
+import { useEffect, useState } from "react";
 import "./Game.css";
+import items from "../items.json";
 import { Gitcoin } from "./Gitcoin";
+import { Office } from "./Office";
 import { Score } from "./Score";
+import { Store } from "./Store";
 
-export class Game extends React.Component {
-  constructor(props) {
-    super(props);
+export function Game() {
+  const [lines, setLines] = useState(0);
+  const [linesPerMillisecond, setLinesPerMillisecond] = useState(0);
+  const [ownedItems, setOwnedItems] = useState({});
 
-    this.state = {
-      lines: 0,
-    };
-  }
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setLines(lines + linesPerMillisecond);
+    }, 100);
 
-  handleClick() {
-    this.setState({
-      lines: this.state.lines + 1,
+    return () => clearInterval(interval);
+  }, [lines, linesPerMillisecond]);
+
+  useEffect(() => {
+    let count = 0;
+
+    for (const name of Object.keys(ownedItems)) {
+      const item = items.find((element) => element.name === name);
+      count += item.linesPerMillisecond * ownedItems[name];
+    }
+
+    setLinesPerMillisecond(count);
+  }, [ownedItems]);
+
+  const handleClick = () => {
+    setLines(lines + 1);
+  };
+
+  const handleBuy = (item) => {
+    setLines(lines - item.price);
+    setOwnedItems({
+      ...ownedItems,
+      [item.name]: (ownedItems[item.name] || 0) + 1,
     });
-  }
-
-  render() {
-    return (
-      <main className="game">
-        <Score lines={this.state.lines} />
-        <Gitcoin onClick={this.handleClick.bind(this)} />
-      </main>
-    );
-  }
+  };
+
+  return (
+    <main className="game">
+      <section className="left">
+        <Score
+          lines={Math.ceil(lines)}
+          linesPerSecond={Math.ceil(linesPerMillisecond * 10)}
+        />
+        <Gitcoin onClick={handleClick} />
+      </section>
+
+      <section className="center">
+        <Office items={ownedItems} />
+      </section>
+
+      <section className="right">
+        <Store lines={lines} onBuy={handleBuy} />
+      </section>
+    </main>
+  );
 }

src/components/Gitcoin.css

@@ -6,8 +6,32 @@
   background: transparent;
   outline: none;
   cursor: pointer;
+
+  & > img {
+    width: 100%;
+    border-radius: 100%;
+    animation: bounce-up 0.2s;
+  }
+
+  &:active > img {
+    animation: bounce-down 0.2s;
+  }
 }
 
-.gitcoin > img {
-  width: 100%;
+@keyframes bounce-up {
+  0% {
+    transform: scale(0.9)
+  }
+  100% {
+    transform: scale(1)
+  }
 }
+
+@keyframes bounce-down {
+  0% {
+    transform: scale(1)
+  }
+  100% {
+    transform: scale(0.9)
+  }
+}

src/components/Gitcoin.jsx

@@ -1,15 +1,10 @@
-import React from "react";
 import "./Gitcoin.css";
-import githubIcon from "../assets/github.svg";
+import githubIcon from "@/assets/github.svg";
 
-export class Gitcoin extends React.Component {
-  render() {
-    const { onClick } = this.props;
-
-    return (
-      <button className="gitcoin" onClick={onClick} type="button">
-        <img src={githubIcon} alt="Gitcoin" />
-      </button>
-    );
-  }
+export function Gitcoin({ onClick }) {
+  return (
+    <button className="gitcoin" onClick={onClick} type="button">
+      <img src={githubIcon} alt="Gitcoin" />
+    </button>
+  );
 }

src/components/Office.jsx

@@ -0,0 +1,16 @@
+export function Office({ items }) {
+  return (
+    <>
+      <h2>Office</h2>
+      <ul>
+        {Object.keys(items).map((name) => (
+          <li key={name}>
+            <span>
+              {items[name]} {name}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

src/components/Score.jsx

@@ -1,9 +1,8 @@
-import React from "react";
-
-export class Score extends React.Component {
-  render() {
-    const { lines } = this.props;
-
-    return <h3>{lines} lines</h3>;
-  }
+export function Score({ lines, linesPerSecond }) {
+  return (
+    <>
+      <h3 style={{ fontFamily: "Orbitron" }}>{lines} lines</h3>
+      <small>per second: {linesPerSecond}</small>
+    </>
+  );
 }

src/components/Store.css

@@ -0,0 +1,11 @@
+.item {
+  display: flex;
+  width: 15rem;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.item > span,
+.item > button {
+  margin-bottom: 0.5rem;
+}

src/components/Store.jsx

@@ -0,0 +1,27 @@
+import "./Store.css";
+import items from "@/items.json";
+
+export function Store({ lines, onBuy }) {
+  const canBuy = (item) => {
+    return lines >= item.price;
+  };
+
+  return (
+    <ul>
+      {items.map((item) => (
+        <li key={item.name} className="item">
+          <span>
+            {item.name} - {item.price}
+          </span>
+          <button
+            onClick={() => onBuy(item)}
+            disabled={!canBuy(item)}
+            type="button"
+          >
+            Buy
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}