My-Tenzies Project

Table of Contents

• Why this project?
• Project Description
• Screenshot and Link Reference
• How to Install and Run the Project?
• The Learning Process

Why this project?

Learning development practically via game projects is important because it engages learners, applies theoretical knowledge to real-world scenarios, fosters problem-solving and project management skills, encourages collaboration and teamwork, integrates multiple disciplines, promotes creativity and innovation, facilitates feedback and iteration, builds portfolios, and, most importantly, makes learning enjoyable and rewarding. Through game development, learners gain hands-on experience, develop practical skills, and enhance their employability while having fun and exploring their creative potential.

Project Description:

This is a Tenzies game built with React JS. The game's objective is to roll a set of dice until all dice show the same number, at which point the player has achieved "Tenzies" and wins the game.

The main components of the game are:

1. Dice : These are the clickable elements that represent each of the 10 dice in the game. Each die has a randomly assigned number between 1 and 6, and players can "hold" a die by clicking on it, freezing its value in place.
2. Die : This is a reusable component that simulates the appearance of a physical die. It is used to create the 10 dice instances in the game.
3. Footer : This is a separate component that likely contains the game's credits or any additional information.

The game allows players to roll a set of dice until they achieve the same number on all of them. The player can freeze the desired values by clicking on a die to "hold" its value. Once the player has achieved "Tenzies" (all dice showing the same number), they win the game.

After the first win, the best time is stored in the local storage so that users can come back and challenge their previous records.

Screenshot and link reference:

References:

• React Icons
• React Confetti

How to Install and Run the Project?

To install and run the project, follow the steps below:

1. Clone the repository : You can clone the repository by running the following command in your terminal:

git clone git@github.com:emadnahed/my-tenzies.git

2. Navigate to the project directory** : Once you have cloned the repository, navigate to the project directory by running the following command:

cd project-name

3. Install dependencies : This project requires several dependencies to be installed. To install them, run the following command:

npm install

The Learning Process:

The learning process for this project likely involves understanding the following concepts:

• React.js : The project is built using React.js, a JavaScript library for building user interfaces. Familiarity with React's component-based architecture, state management, and lifecycle methods is required.
• JavaScript Fundamentals : Core JavaScript concepts like variables, arrays, objects, functions, loops, and conditional statements are used throughout the code.
• Functional Programming : The code contains various functional programming concepts, such as pure functions and the use of map, filter, and reduce.
• Local Storage : The project uses the browser's localStorage to save and retrieve the best rolls and best time records.
• Third-party Libraries : The code uses external libraries like nanoid for generating unique IDs and react-confetti for rendering confetti on the screen when the user wins the game.
• Game Logic : Understanding the game rules and logic is essential for following the code. The goal is to roll a set of dice until all dice have the same value.
• Timer Implementation : The project includes a count-up timer to track the time taken to complete the game. Familiarity with JavaScript's setInterval and useEffect hooks is necessary to understand how the timer is implemented.
• Scoreboard : The code displays the best rolls and best time records on the scoreboard. Implementing this feature requires the use of React components and conditional rendering based on the stored records.

Here's an example of a high-level outline of what the learning process might look like:

1. React.js Components : Familiarize yourself with the components used in the project, such as App, Footer, Die, and Scoreboard. Understand how they are structured, how they interact with each other, and how they use state and props.
2. Game Logic : Understand the game rules and how the code implements the game logic with the dice state, tenzies state, and helper functions like allNewDice, generateNewDie, and holdDice.
3. State Management : Study how the code manages state using useState and useEffect hooks. Learn how the different states, like dice, tenzies, rolls, and bestRolls, interact with each other and how they are updated based on user interactions.
4. Game Updates : Understand how the game updates the UI based on user interactions and the game's state. See how functions like rollDice, updateRolls, and resetGame are called during the game's progression.
5. Timer Implementation : Investigate how the timer is implemented using setInterval, useEffect, and useState. Understand how the timer updates and displays the elapsed time in the desired format.
6. Scoreboard : Learn how the code displays the best rolls and best time records on the scoreboard. Familiarize yourself with the Scoreboard component and how it uses bestRolls and bestTime states to display the records.
7. Local Storage : See how the code uses localStorage to store and retrieve the best rolls and best time records. Learn how to use JavaScript's localStorage API to save and retrieve data from the browser.
8. Third-party Libraries : Understand how the code uses third-party libraries like nanoid and react-confetti to generate unique IDs and render confetti on the screen.

By studying the code and understanding the concepts mentioned above, you can learn from this project and improve your skills in React.js, JavaScript, and game development.