💰 React Treasure Hunt Game

Overview

Treasure Hunt is the first project that students create at LEARN. During Jumpstart, treasure hunt is done with HTML, CSS, and JavaScript. While this is a perfectly acceptable tech stack, using React allows for more advanced and dynamic code structures.

As a developer, you are tasked with creating a treasure hunt game. The user will see a game board on the page and be able to select various squares on the board. Hidden behind one square is a treasure that will win the game and hidden behind another square is a bomb that will lose the game. All other squares will reveal a neutral image. The user will be given a particular number of clicks to find the treasure that will win the game.

Learning Objectives

• can create a logic component to handle the gameplay
• can pass data and behavior from a parent component to a nested component with props
• can break down a complex problem to create a desired outcome

Additional Resources

• Render

Process

• Accept the assignment from GitHub classroom
• Clone the newly created repository
• cd into the repository
• Run $ yarn to install the React dependencies
• Create a new branch following the naming instructions described below
• Open the repository in a text editor
• Code!

Useful Commands

• $ yarn start
• control + c (stops the server)
• command + t (opens a new terminal tab)

Troubleshooting Tips

• Is your server running?
• Are your components exported?
• Inspect the page and look for errors in the console tab.
• Always look at the first error message in the list.

---

React Treasure Hunt Game

As a developer, you are tasked with creating a treasure hunt game. The user will see a game board on the page and be able to select various squares on the board. Hidden behind one square is a treasure that will win the game, and hidden behind another square is a bomb that will lose the game. All other squares will reveal a neutral image. The user will be given a particular number of clicks to find the treasure that will win the game.

📚 User Stories

-✅As a user, I can see a page with a three by three grid board game with a question mark in each square.

-branch: game-board
-mapped over array in state to dynamicallt render 9 squares
-styled the board
-passed value of state to square
-styled square

✅ As a user, when I click on one of the question marks, an alert appears with the index position of that question mark in the array.

-added onClick to square div
-created handleClick method to square
-passed the index to square and handleClick
-added handleSquareClick to App.js
-passes handleSqareClick to square to get the index back to App.js(using functional props)

✅ As a user, when I click on one of the question marks, a tree emoji appears instead of the alert. -Made a copy of board using spread operator -updated value of square at particular index to be a tree

✅ As a user, if I select the winning square, the question mark will become a treasure emoji. If I select the losing square, the question mark will become a bomb emoji.

- Made a conditional statement in my handleSquareClick that if clicked on treasureLocation or bombLocation would change from '?' to diamond or bomb.

✅ As a user, I can click on a “Play Again” button that will restart the game.

- Made variable named restartGame and button that change back all boards to '?' and randomize the squares again.

✅ As a user, I can see a counter that shows how many guesses are remaining. The counter starts at five and decrements by one every time I click on a square that is neither the treasure nor the bomb.

-Made a varibale = count that ony had 5 chances in the useState for the user. Added that to the else statement in my conditional that subtracted every click from updatedBoard that would rech 0 if they did not find treasure/bomb.

✅As a user, I can see a message stating that I won the game by selecting the square that contains the treasure.

-Added an alert so if user clicked medal, user would see a pop up saying you win. 

✅ As a user, I can see a message stating that I lost the game by selecting the square that contains the bomb.

-Added an alert so if user clicked bomb, user would see a pop up saying you lose.

✅As a user, I cannot continue to play the game after I win or lose.

-Made varibale = gameOver that equaled false in my state varibales. Attched the gameOver variable to conditonal statements and set them to true if they did click on treasure/bomb or if they ran out of turns. 

✅As a user, I can see a message informing me that I lost the game when I run out of turns (the counter reaches zero).

-Learned and made a nested if statement that if count reached 1 than it would alert the user that they have ran out of turns and game over and can play again 

🏔 Stretch Goals

• Consider how to handle a situation where the bomb and the treasure are at the same index.

👩‍💻 Developer Stretch Goals

• As a developer, I have a well commented application.
• As a developer, I have well written README file with instructions on how to access my repository.
• As a developer, my variables are all named semantically.
• As a developer, I have refactored and efficient code.
• As a developer, I have my application deployed as a live website.