Merge pull request #528 from Nishitbaria/main

Created Tenzies Game
ssitvit · Jun 17, 2023 · 0a1106a · 0a1106a
2 parents c93e0f0 + 9bb0bdc
commit 0a1106a
Show file tree

Hide file tree

Showing 10 changed files with 277 additions and 9 deletions.
diff --git a/src/Games/Tenzies/App.js b/src/Games/Tenzies/App.js
@@ -0,0 +1,79 @@
+import React from "react";
+import Die from "./Die";
+import { nanoid } from "nanoid";
+import Confetti from "react-confetti";
+import "./style.css";
+export default function App() {
+  const [dice, setDice] = React.useState(allNewDice());
+  const [tenzies, setTenzies] = React.useState(false);
+
+  React.useEffect(() => {
+    const allHeld = dice.every((die) => die.isHeld);
+    const firstValue = dice[0].value;
+    const allSameValue = dice.every((die) => die.value === firstValue);
+    if (allHeld && allSameValue) {
+      setTenzies(true);
+    }
+  }, [dice]);
+
+  function generateNewDie() {
+    return {
+      value: Math.ceil(Math.random() * 6),
+      isHeld: false,
+      id: nanoid(),
+    };
+  }
+
+  function allNewDice() {
+    const newDice = [];
+    for (let i = 0; i < 10; i++) {
+      newDice.push(generateNewDie());
+    }
+    return newDice;
+  }
+
+  function rollDice() {
+    if (!tenzies) {
+      setDice((oldDice) =>
+        oldDice.map((die) => {
+          return die.isHeld ? die : generateNewDie();
+        })
+      );
+    } else {
+      setTenzies(false);
+      setDice(allNewDice());
+    }
+  }
+
+  function holdDice(id) {
+    setDice((oldDice) =>
+      oldDice.map((die) => {
+        return die.id === id ? { ...die, isHeld: !die.isHeld } : die;
+      })
+    );
+  }
+
+  const diceElements = dice.map((die) => (
+    <Die
+      key={die.id}
+      value={die.value}
+      isHeld={die.isHeld}
+      holdDice={() => holdDice(die.id)}
+    />
+  ));
+
+  return (
+    <main>
+      {tenzies && <Confetti />}
+      <h1 className="title">Tenzies</h1>
+      <p className="instructions">
+        Roll until all dice are the same. Click each die to freeze it at its
+        current value between rolls.
+      </p>
+      <div className="dice-container">{diceElements}</div>
+      <button className="roll-dice" onClick={rollDice}>
+        {tenzies ? "New Game" : "Roll"}
+      </button>
+    </main>
+  );
+}
diff --git a/src/Games/Tenzies/Die.js b/src/Games/Tenzies/Die.js
@@ -0,0 +1,16 @@
+import React from "react"
+
+export default function Die(props) {
+    const styles = {
+        backgroundColor: props.isHeld ? "#59E391" : "white"
+    }
+    return (
+        <div 
+            className="die-face" 
+            style={styles}
+            onClick={props.holdDice}
+        >
+            <h2 className="die-num">{props.value}</h2>
+        </div>
+    )
+}
diff --git a/src/Games/Tenzies/README.md b/src/Games/Tenzies/README.md
@@ -0,0 +1,28 @@
+# co82b48eab99c792f6b884857
+
+Quick start:
+
+```
+$ yarn # npm install
+$ yarn build # npm run build
+````
+
+## Development
+
+Run Webpack in watch-mode to continually compile the JavaScript as you work:
+
+```
+$ yarn watch # npm run watch
+```
+
+## About Scrimba
+
+At Scrimba our goal is to create the best possible coding school at the cost of a gym membership! 💜
+If we succeed with this, it will give anyone who wants to become a software developer a realistic shot at succeeding, regardless of where they live and the size of their wallets 🎉
+The Frontend Developer Career Path aims to teach you everything you need to become a Junior Developer, or you could take a deep-dive with one of our advanced courses 🚀
+
+- [Our courses](https://scrimba.com/allcourses)
+- [The Frontend Career Path](https://scrimba.com/learn/frontend)
+- [Become a Scrimba Pro member](https://scrimba.com/pricing)
+
+Happy Coding!
diff --git a/src/Games/Tenzies/index.html b/src/Games/Tenzies/index.html
@@ -0,0 +1,12 @@
+<html>
+    <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com"> 
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+        <link href="https://fonts.googleapis.com/css2?family=Inter&family=Karla:wght@700&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="index.pack.js"></script>
+    </body>
+</html>
diff --git a/src/Games/Tenzies/index.js b/src/Games/Tenzies/index.js
@@ -0,0 +1,5 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import App from "./App"
+
+ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/src/Games/Tenzies/package.json b/src/Games/Tenzies/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "project",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "nanoid": "3.1.28",
+    "react-confetti": "6.0.1"
+  },
+  "devDependencies": {
+    "webpack": "^2.0",
+    "babel-core": "^6.0",
+    "babel-loader": "^7.0",
+    "babel-preset-env": "*",
+    "babel-preset-react": "*"
+  },
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack -w"
+  }
+}
diff --git a/src/Games/Tenzies/style.css b/src/Games/Tenzies/style.css
@@ -0,0 +1,76 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background-color: #0B2434;
+    padding: 20px;
+    font-family: 'Karla', sans-serif;
+}
+
+main {
+    background-color: #F5F5F5;
+    height: 400px;
+    max-width: 800px;
+    border-radius: 5px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.title {
+    font-size: 40px;
+    margin: 0;
+}
+
+.instructions {
+    font-family: 'Inter', sans-serif;
+    font-weight: 400;
+    margin-top: 0;
+    text-align: center;
+}
+
+.dice-container {
+    display: grid;
+    grid-template: auto auto / repeat(5, 1fr);
+    gap: 20px;
+    margin-bottom: 40px;
+}
+
+.die-face {
+    height: 50px;
+    width: 50px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.die-num {
+    font-size: 2rem;
+}
+
+.roll-dice {
+    height: 50px;
+    width: 150px;
+    border: none;
+    border-radius: 6px;
+    background-color: #5035FF;
+    color: white;
+    font-size: 1.2rem;
+    font-family: 'Karla', sans-serif;
+    cursor: pointer;
+}
+
+.roll-dice:focus {
+    outline: none;
+}
+
+.roll-dice:active {
+    box-shadow: inset 5px 5px 10px -3px rgba(0, 0, 0, 0.7);
+}
diff --git a/src/Games/Tenzies/webpack.config.js b/src/Games/Tenzies/webpack.config.js
@@ -0,0 +1,25 @@
+module.exports = {
+  "output": {
+    "filename": "[name].pack.js"
+  },
+  "module": {
+    "rules": [
+      {
+        "use": {
+          "loader": "babel-loader",
+          "options": {
+            "presets": [
+              "babel-preset-env",
+              "babel-preset-react"
+            ]
+          }
+        },
+        "exclude": /node_modules/,
+        "test": /\.js$/
+      }
+    ]
+  },
+  "entry": {
+    "index": "./index"
+  }
+};
diff --git a/src/Homepage/Data/data.js b/src/Homepage/Data/data.js
@@ -91,30 +91,36 @@ export const data1 = [
   {
     serial_number: "15",
     main_heading: "Battle Ships",
-    about: "search and Destroy Enemies ships", 
+    about: "search and Destroy Enemies ships",
     link_game: "/Battle",
   },
   {
     serial_number: "16",
     main_heading: "Drag and Drop",
-    about: "Drag the cards from the middle section and drop them into the similar one.", 
+    about:
+      "Drag the cards from the middle section and drop them into the similar one.",
     link_game: "/DragAndDrop",
   },
   {
     serial_number: "17",
     main_heading: "Let's Play Tic-Tac-Toe with AI",
-    about:
-      "Can you compete with AI...",
+    about: "Can you compete with AI...",
     link_game: "/Tictac",
   },
-    {
+  {
     serial_number: "18",
     main_heading: "Arkanoid",
-    about: "Complete all bricks", 
+    about: "Complete all bricks",
     link_game: "/Arkanoid",
   },
   {
     serial_number: "19",
+    main_heading: "Tenzies",
+    about: "Dies Game When All Number Become same You Won The Game",
+    link_game: "/Tenzies",
+  },
+  {
+    serial_number: "20",
     main_heading: "Let's Play Chess with AI",
     about:
       "Can you compete with AI...",

diff --git a/src/Routes/AllRoutes.js b/src/Routes/AllRoutes.js
@@ -15,13 +15,13 @@ import DiceThrow from "../Games/DiceThrow/main";
 import Wordle from "../Games/Wordle/Wordle";
 import SnakeGame from "../Games/SnakeGame/SnakeGame";
 import Tetris from "../Games/tetris/src/components/Tetris";
-import Battle from "../Games/BattleShip/App"
-import App from "../Games/DragAndDrop/App"
+import Battle from "../Games/BattleShip/App";
+import App from "../Games/DragAndDrop/App";
 import TicTacToeAI from "../Games/TicTactoeAI/app";
 import Arkanoid from "../Games/Arkanoid/App";
+import Tenzies from "../Games/Tenzies/App.js";
 import ChessAI from '../Games/ChessAI/appiz';
 
-
 function AllRoutes() {
   return (
     <Routes>
@@ -45,6 +45,7 @@ function AllRoutes() {
       <Route path="/DragAndDrop" element={<App />} />
       <Route path="/Tictac" element={<TicTacToeAI />} />
       <Route path="/Arkanoid" element={<Arkanoid />} />
+      <Route path="/Tenzies" element={<Tenzies />} />
       <Route path="/Chess" element={<ChessAI />} />
     </Routes>
   );