Art Heist

Steal the art. Leave no trace.

Collaborators - The Gallery Bandits

• Hayan Butt (GitHub: HayanButt)
• Katie Bamford (GitHub: klb545)
• Kelly Wong (GitHub: KKLW97)
• Isabel Galwey (GitHub: IsabelG96)
• Stella Annor (GitHub: StellaA30)

Project description

As a team, The Gallery Bandits, created a Back End RESTful API to serve a Front End Game Application. We decided to create an RPG/trivia game where you play as the thief and you can successfully steal art when you answer art trivia questions correctly.

Wireframe

For the wireframe we decided on a multi page application using React Router. There is a navbar for the drop-down list of users, which enables switching between users. There is also a welcome message that changes with the selected user.

Landing Page & React Router

The LandingContainer.js is our parent page and every other page within the application is a child of this page.

If you want to learn more about React Router please click on this link: https://www.w3schools.com/react/react_router.asp

Game Page

This is where the user will play the game, and the majority of the game logic takes place.

It contains:

• The map container which displays the user interface, including the gallery map, the thief, the artworks around the gallery and their respective questions from the external API, and the obstacles (security guard and lasers). It contains the functions which move the thief around the gallery, and its interactions with other components.
• The painting list container which keeps track of the stolen paintings' data and their value
• Modals for the game instructions, the current question, winning a game, and losing a game
• The penalty list of 'alarms' which will increase as the player answers questions incorrectly
• Laser and security guard components who interact with the thief without actually changing the game score or penalty.
• Forfeit game option, a button which allows the player to end their game with their current score and without stealing all the paintings.

The arrow keys can be used to move the thief around the map. When the thief comes into proximity with a painting, the player can choose to answer the question associated with that painting.

Answering the question calls the handleClick function which updates the game score and/or penalty.

After every guess, the checkGameStatus function checks whether the player has reached the 0 paintings (win) or 3 lives (lose), and updates the game status accordingly.

External API - trivia questions

We used an external API for our trivia questions. (link to: https://opentdb.com/api_config.php)

HTML entities decode

The external API would return questions and answers with HTML entities so we needed to decode them. We navigated the issue by installing the html-entities package from npm. (https://www.npmjs.com/package/html-entities)

UseSound

We used the useSound React Hook for our game's soundtrack. (https://www.npmjs.com/package/use-sound)

Context & UseContext Hooks

We utilised context and useContext to minimise prop drilling and we can just pass through the active user down to the game page.

Components Diagram

Tech Stack

• React
• JSX
• HTML
• CSS
• Visual Studio Code

Set Up

Ensure the following are installed on your machine:

• Visual Studio Code
• Intellij IDEA (JDK 17)
• PostgreSQL
• Postico
• Postman

Back End Api link: https://github.com/IsabelG96/capstone_backend Front End link: https://github.com/KKLW97/capstone_front_end

Clone the API repository from GitHub.

Scroll to the top of this page and click on the green Code button.

Ensure SSH is selected and copy the link provided. In your terminal, perform the following command:

git clone git@github.com:IsabelG96/capstone_backend.git

Create a new PostgreSQL database named 'Capstone_Backend' anywhere in your terminal.

 createdb Capstone_Backend 

Via Intellij IDEA, run the CapstoneBackendApplication and make sure the API is running on port 8080.

Clone the Capstone Front End repository from GitHub.

Scroll to the top of this page and click on the green Code button.

Ensure SSH is selected and copy the link provided.

In your terminal, perform the following command:

git clone git@github.com:KKLW97/capstone_front_end.git

Via terminal ensure you're in the correct folder for the Capstone Front End and type

npm i

to install the node modules. After it is installed, type

npm start

to start the app up on localhost:3000

MVP and Extensions

MVP

• Endpoints from our API met in our React app
• Integrate external API supplying trivia questions
• Map and sprite functioning when moving with arrow keys
• Leaderboard for every user and individual user

Extensions

• Penalty function - you get a question wrong, you get a penalty, three penalties and you lose the game
• Guard NPC travelling the map
• Music, sound effects

Possible Extensions

• Full responsiveness - game is made for PC only at the moment, can be made mobile friendly
• Multiple game modes - easy, medium, hard. The higher the difficulty the harder the questions
• Different levels - design more maps increasing in difficulty eg. more guards, more lasers
• More questions - Instead of using external API with limited questions, data load our own questions
• Settings menu - instructions, volume control