Added Tenzies Games (reactplay#841)

* Added Tenzies Games

It's Roll dice game Where all Dice should be same, Click each die to freeze it at its current value between rolls.

* [Added] All Instruction for tenzies game are added to readme file & [Update] Style Class name

I have added all about my game tenzies into readme file, also add Implementation on it.

Style class name changed.

package.json

@@ -34,6 +34,7 @@
  "p5": "^1.5.0",
  "react": "^18.0.0",
  "react-codemirror2": "^7.2.1",
+ "react-confetti": "^6.1.0",
  "react-dom": "^18.0.0",
  "react-error-boundary": "^3.1.4",
  "react-helmet": "^6.1.0",

src/plays/tenzies-game/Components/Dice.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Dice = (props) => {
+ const styles = {
+ backgroundColor: props.isHeld ? '#59E391' : 'white'
+ };
+
+ return (
+ <div className="tenzies_dice" style={styles} onClick={props.toggle}>
+ <h2 className="tenzies_die_num"> {props.value} </h2>
+ </div>
+ );
+};
+
+export default Dice;

src/plays/tenzies-game/Components/Main.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import Dice from './Dice';
+import Confetti from 'react-confetti';
+const Main = () => {
+ const [dices, setDices] = React.useState(diceValues());
+ const [tenzies, setTenzies] = React.useState(false);
+
+ React.useEffect(() => {
+ const allHeld = dices.every((die) => die.isHeld);
+ const firstValue = dices[0].value;
+ const allSameValue = dices.every((die) => die.value === firstValue);
+ if (allHeld && allSameValue) {
+ setTenzies(true);
+ }
+ }, [dices]);
+
+ function diceValues(oldValue) {
+ let elArr = [];
+ for (let i = 0; i < 10; i++) {
+ if (oldValue) {
+ if (!oldValue[i].isHeld) {
+ elArr.push({
+ value: Math.floor(Math.random() * 6) + 1,
+ isHeld: false
+ });
+ } else {
+ elArr.push(oldValue[i]);
+ }
+ } else {
+ elArr.push({
+ value: Math.floor(Math.random() * 6) + 1,
+ isHeld: false
+ });
+ }
+ }
+
+ return elArr;
+ }
+
+ function rollDice() {
+ setDices(diceValues(dices));
+ if (tenzies) {
+ setDices(diceValues());
+ setTenzies(false);
+ }
+ }
+
+ function toggle(id) {
+ setDices((prevDices) => {
+ let newDice = prevDices.map((prevDice, index) => {
+ if (index != id) {
+ return { ...prevDice };
+ } else {
+ return { ...prevDice, isHeld: !prevDice.isHeld };
+ }
+ });
+
+ return newDice;
+ });
+ }
+
+ const diceEl = dices.map((diceObj, index) => {
+ return (
+ <Dice
+ isHeld={diceObj.isHeld}
+ key={index}
+ toggle={() => toggle(index)}
+ value={diceObj.value}
+ />
+ );
+ });
+
+ return (
+ <div className="tenzies_main">
+ {tenzies && <Confetti style={{ position: 'fixed' }} />}
+ <h1 className="tenzies_title">Tenzies</h1>
+ <p className="tenzies_instructions">
+ Roll until all dice are the same. Click each die to freeze it at its current value between
+ rolls.
+ </p>
+ <div className="tenzies_dice_container">{diceEl}</div>
+ <button className="tenzies_roll_btn" onClick={rollDice}>
+ {tenzies ? 'New Game' : 'Roll'}
+ </button>
+ </div>
+ );
+};
+
+export default Main;

src/plays/tenzies-game/Readme.md

@@ -0,0 +1,45 @@
+<p align="center">
+ <img src="https://i.postimg.cc/WbLRF7LP/Screenshot-2022-12-22-110350.jpg" /> 
+</p>
+
+# Tenzies Game
+
+Tenzies is a dice roll game where you have to roll the dice until all dice are the same. You can click each die to freeze it at its current value, then you can roll other dice to match the same number on the frozen dice. If all frozen dices are same number then you win the game. 
+
+## Play Demographic
+
+- Language: React.js
+- Level: Beginner
+
+## Creator Information
+
+- User: AbhiPatel10
+- Gihub Link: https://github.com/AbhiPatel10
+- LinkedIn: https://www.linkedin.com/in/abhipatel001/
+- Twitter: https://twitter.com/AbhiPatel0001
+
+## Implementation Details
+
+- The implementation is quite simple. In this project, I use simple react concepts like `useState`, `useEffect`, `onClick` etc...
+
+- There are basically two main components:
+
+ - `Dice`: As the name suggests it is 10 dice box components that shows the number Between `1` to `6`.
+ - `Main`: It is responsible for rendering dice components and handle all function Which is use to run the Game.
+
+
+- `Main` component is used to render `Dice` component in the card format.
+
+- When we click on roll button `onClick={rollDice}` It generate random number Between `1` to `6` using `Math.random()`.
+
+- I use `toggle` function to Freeze the dice.
+
+- I use `react-confetti` library to celebrate win.
+
+## Consideration
+
+First of all thanks for wanting to contribute! To start contributing to this play, please go through the [Contribution guidelines of ReactPlay](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md).
+
+## Resources
+
+Thank you so much for taking the time to read this. If you like this play, please do share about it and tag me [@AbhiPatel0001](https://twitter.com/AbhiPatel0001) and [@ReactPlayIO](https://twitter.com/ReactPlayIO). Also, star the [react-play repository](https://github.com/reactplay/react-play), it gives me and all the [contributors](https://github.com/reactplay/react-play#contributors-) a boost in confidence 🤩.

src/plays/tenzies-game/TenziesGame.js

@@ -0,0 +1,23 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import Main from './Components/Main';
+
+// WARNING: Do not change the entry componenet name
+function TenziesGame(props) {
+ // Your Code Start below.
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <Main />
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default TenziesGame;

src/plays/tenzies-game/styles.css

@@ -0,0 +1,59 @@
+.tenzies_main {
+ width: 45vw;
+ height: 100%;
+ background-color: #f5f5f5;
+ margin: 0px auto;
+ border-radius: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+.tenzies_dice_container {
+ /* width: 100%; */
+
+ display: grid;
+ grid-template: auto auto / repeat(5, 1fr);
+ gap: 20px;
+ margin-bottom: 35px;
+}
+.tenzies_dice {
+ height: 60px;
+ width: 60px;
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
+ display: flex;
+ align-items: center;
+ justify-content: center; 
+ border-radius: 10px;
+ cursor: pointer;
+ background-color: white;
+}
+.tenzies_die_num {
+ font-size: 2rem;
+}
+.tenzies_roll_btn {
+ 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;
+}
+.tenzies_roll_btn:active {
+ box-shadow: inset 5px 5px 10px -3px rgba(0, 0, 0, 0.7);
+}
+.tenzies_title {
+ font-size: 40px;
+ margin-bottom: 10px;
+}
+
+.tenzies_instructions {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ margin-top: 0;
+ text-align: center;
+ margin-bottom: 30px;
+}