rolling and holding the dice

alidarcan · alidarcan · commit 2c0c57cec639 · 2024-04-12T18:41:51.000+02:00
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/images/dice.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://fonts.googleapis.com/css2?family=Inter&family=Karla:wght@700&display=swap" rel="stylesheet">
     <title>Tenzies Game</title>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "nanoid": "^5.0.7",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/App.css b/src/App.css
@@ -41,7 +41,6 @@ p {
 .box,
 h2 {
   border-radius: 3.81px;
-  background-color: #FFFFFF;
   color: #2B283A;
   width: 35.84px;
   height: 35.84px;
@@ -79,4 +78,11 @@ button {
 button:hover {
   background-color: #4630d3;
   cursor: pointer;
+}
+button:focus{
+  outline: none;
+}
+
+button:active {
+  box-shadow: inset 5px 5px 10px -3px rgba(0, 0, 0, 0.7);
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,30 +1,73 @@
-import React from 'react'
-import Dice from './components/dice'
-import './App.css'
+import React from "react";
+import Dice from "./components/dice";
+import "./App.css";
+import { nanoid } from "nanoid";
 
-function App() {
+export default function App() {
+  const [dices, setDices] = React.useState(allNewDice());
+
+  function generateNewDice() {
+    return {
+      value: Math.floor(Math.random() * 6 + 1),
+      isHeld: false,
+      id: nanoid(),
+    };
+  }
+  function rollDice() {
+    setDices((prevDices) =>
+      prevDices.map((dice) => {
+        return !dice.isHeld ? generateNewDice() : dice;
+      })
+    );
+  }
+
+  function holdDice(id) {
+    setDices((prevDices) => {
+      return prevDices.map((dice) => {
+        return dice.id === id ? { ...dice, isHeld: !dice.isHeld } : dice;
+      });
+    });
+  }
+
+  function allNewDice() {
+    let newDice = [];
+    for (let i = 0; i < 10; i++) {
+      newDice.push(generateNewDice());
+    }
+    return newDice;
+  }
+  const diceElements = dices.map((dice) => (
+    <Dice
+      value={dice.value}
+      key={dice.id}
+      isHeld={dice.isHeld}
+      holdDice={() => holdDice(dice.id)}
+    />
+  ));
 
   return (
     <main>
       <h1>Tenzies</h1>
       <div className="description">
-        <p>Roll until all dice are the same. Click each die to freeze it at its current value between rolls.</p>
+        <p>
+          Roll until all dice are the same. Click each die to freeze it at its
+          current value between rolls.
+        </p>
       </div>
       <div className="boxes">
-        <Dice value="1"/>
-        <Dice value="2"/>
-        <Dice value="3"/>
-        <Dice value="4"/>
-        <Dice value="5"/>
-        <Dice value="6"/>
-        <Dice value="1"/>
-        <Dice value="1"/>
-        <Dice value="1"/>
-        <Dice value="1"/>
+        {diceElements}
+        {/* <Dice value={1} />
+        <Dice value={2} />
+        <Dice value={3} />
+        <Dice value={4} />
+        <Dice value={5} />
+        <Dice value={6} />
+        <Dice value={1} />
+        <Dice value={1} />
+        <Dice value={1} />
+        <Dice value={1} /> */}
       </div>
-      <button>Roll</button>
+      <button onClick={rollDice}>Roll</button>
     </main>
-  )
+  );
 }
-
-export default App
diff --git a/src/components/dice.jsx b/src/components/dice.jsx
@@ -1,7 +1,17 @@
-export default function Dice(props){
-    return(
-        <div className="box">
-            <h2>{props.value}</h2>
-        </div>
-    )
-}
+import PropTypes from "prop-types";
+export default function Dice(props) {
+  const styles = {
+    backgroundColor: props.isHeld ? "#59E391" : "#FFFFFF",
+  };
+  
+  return (
+    <div style={styles} className="box" onClick={props.holdDice}>
+      <h2>{props.value}</h2>
+    </div>
+  );
+}
+Dice.propTypes = {
+  value: PropTypes.number,
+  isHeld: PropTypes.any,
+  holdDice: PropTypes.func,
+};
diff --git a/src/images/dice.png b/src/images/dice.png
