sopra-fs21-group-24 / client

Geography game for guessing locations after being shown satellite imagery.

MAPGUESSЯ

Introduction

We created a game similair to GeoGuessr. The players will be randomly shown a satellite picture from a popular city around the world. At the beginning of the game the map won't be visible and there are some clouds over the map. The goal of the player is to brush away as little as possible of the clouds to recognize the place he is located in. The player will give his answer by placing a pin on a map that is displayed on the lower left side of the screen. The scoring will be based on points. Depending on the game mode points are computed by time, accuracy of guess and amount of clouds brushed away.

Check out a deployed instance of the game here: sopra-fs21-group-24-client.herokuapp.com

Associated Back End repository can be found here: Server Repository

Data & Reports regarding the project: Data Repository

• Technologies
• High-level components
  • Authentication
  • Launch
  • Home
  • Lobby
  • Game
• Launch & Deployment
• Illustrations
• Roadmap
  • Question Type Selection Module
  • Tinting of Satellite Image
• Authors and acknowledgment
• License

Technologies

Our geography-game is a node application running React JS with Javascript. For our UI components we used semantic react. The remaining dependencies are rather small and serve just very niche purposes that accelerated our dev process (Playing Sounds/ Alerts / Animations).

High-level components

Besides the general react project structure our application can be split into 5 different parts:

• Authentication
• Launch
• Home
• Lobby
• Game

Authentication

Authentication contains login and register components used to facilitate the entire login/register process for our application and they are implemented on the Launch Screen.

Code: Authentication Module

Launch

The Launch Screen is the first page a user lands on when navigating to our app. It displays a nice background video and allows the user to register or login.

Code: Launch Module

Home

The home screen has many responsibilities. It cycles in a lot of component leading up to the start of a game. The selection of the usermode/gamemode, updating ones profile, logging out and displaying a scoreboard of all user highscores for the different game modes. Code: Home Module

Lobby

The lobby screens module consists of two major components, a screen and associated react components to join a lobby and the lobby screen itself for waiting till the game start. Code: Lobby Module

Game

The game screen is the most compley of all our components as it handles most of the FE gamelogic, displaying of satellite-imagery, interactive map for dropping pins, displaying of scores, playing sound-effects and manipulating the satellite image (clouds / pixelation).

Code: Game Module

Launch and Deployment

We require latest node & react for bugfree running of our application (Date: June 2021).

To get all the required dependecies needed for our application:

npm install

For hot reloading and running our application:

npm run dev

For building a "compiled" version of our application run:

npm run build

For running a "compiled" version of our application:

npm run start

Connecting to BE

Our application requires a running BE. You can find our BE repo and installation guide here.

To repoint the FE requests to a url of your liking (local/external URL) edit the getDomain.js File.

Illustrations

Home

On the Application's Home Screen you can see the current leaderboard of all the Gamemodes. From here you can choose to start a Single- or Multiplayer Game. In the header your current Highscores are displayed. By clicking on your name you have the possibility to change your user data.

Lobby Screen

If you choose to join a Lobby you will see this lobby screen. Choose the game mode / visibility on the left and see the invite key on the right to invite friends to your private game.

In Game Screen

This is what you see during the game. You can place your guess on the minimap on the bottom right. In the header you see the most important stats about the current round.

ScoreScreen

After Submiting a guess you'll be navigated to the Score Screen. Here you can see your current score aswell as the distance between your guess and the solution. After 10 seconds the next round starts.

Roadmap

For the following two features help would be very much appreciated.

Question Type Selection Module

A component similair to the gameMode/userMode selection that lets the user select if they only want questions from places in Switzerland, Europe or Worldwide.

Tinting of Satellite Image

A gimmick to add would be red tinting the satelitte image more and more in the last 10s of each round, fo added game tension.

Authors and acknowledgment

This project was started using the following back end template provided by the University of Zurich.

Team Members

• Claudio Gebbia - @claudioge
• Jérôme Hadorn - @jeromehadorn
• Hoàng Ben Lê Giang - @benlegiang
• David Diener - @Dave5252
• Philip Giryes - @Pieli

License

This project is licensed under the MIT license. Check out the License text here.

client's Issues

Create Logout Button

Estimate: 1h

This is part of user story #3

Create game page

Estimate: 1h

This is part of user story #12

As an authenticated user who just submitted their guess in the multiplayer mode, I want to be able to see the current score of all players and when the next round starts so I know how I am doing so far and so the next round starts in sync for all players.

Acceptance criteria:

• Given being in a multiplayer game, when the user submits a guess, then the user sees the current scoreboard of the game room until all players finished the round
• Given all players submitted their guess, then each user sees a short countdown (5 sec) before the next round starts for all players
• Upon failure, an error message is displayed on what went wrong

Estimate: 4h

Create JoinRoom component with input field

Estimate: 1h

This is part of user story #11

Create submit button which sends user's guess to backend

Estimate: 2h

This is part of user story #13

As an authenticated user, I want to be able to manage my profile's credentials to view or change my credentials (username, password).

Acceptance criteria:

• Given an already registered and logged in user, when the user clicks on their "Profile" button on the top right of the home screen, then the user can see their credentials and edit them
• Given a non-empty updated username that is not taken and a password, when the user clicks on the "Save" button, then the user will see the updated credentials displayded on the user page immediately
• Upon failure, an error message with a short description of what went wrong is displayed (e.g. username already taken)

Estimate: 2h

Display pixelated satellite image (less pixelated with every second) for game mode "Pixelation" on game page

Estimate: 3h

This is part of user story #18

Implement eraser feature (hold left mouse button) for game mode "Clouds"

Estimate: 2h

This is part of user story #19

Acceptance criteria:

• Given I press my left mouse button I want to see the clouds slowly disappearing
• Upon failure, an error message is shown and the game is exited prematurely, because the game would be unplayable

As an authenticated user, I want to click a button on the top right to log out of my user account and be redirected to the landing page and no other user using my browser after me can play on my account without logging in again.

Acceptance criteria:

• Given being logged in, when the user presses the "Log out" button, then the user is logged out and is being redirected to the landing page
• Given being logged in, when the user is on the landing page, then the user cannot log out because they are not logged in
• Upon failure, the user should be logged out anyways if for example their browser crashes (extra security layer)

Estimate: 1h

Create CreateRoomJoinRoom component which is subcomponent of GameModeSelector

Estimate: 1h

This is part of user story #9

Redirect all players to final score page after last round

Estimate: 1h

This is part of user story #16

As an authenticated user (after selecting a game mode), I want to be able to create a room and share the roomkey with my friends or join the room of a friend to start a collaborateively game with my friends.

Acceptance criteria:

• Given the user is authenticated and chose both UserMode and GameMode, when the user navigates to that component, then the "Create Room" and "Join Room" buttons are displayed
• Given the user wants to join a room, when the user clicks on the "Join Room" button, then the "Join Room" component is rendered
• Given the user wants to create a room, when the user clicks on the "Create Room" button, then the "Multiplayer Waiting Room" component is rendered
• Upon failure, an error message is displayed and the user is encouraged to reload the page

Estimate: 1h

As an authenticated user who is playing the game and is finishing the last round, I want to be redirected to the "Final Score" page so I can see my final score together with the scores of the players in the same room.

Acceptance criteria:

• Given the user is on their last question, when the user clicks on the "Submit" button, then the user is being redirected to the "Final score" page where their final score is displayed including the final scores of the players that participated in the same room
• Given the user is on the "Final score" page, then a "Finish" button is displayed which ends the game redirects the user to the home screen
• Given the user presses the "Finish" button on the "Final score" page, when the user is being redirected to the home screen, then the user's score is saved to their profile and the leaderboard is updated with the new high scores.
• Upon failure, an error message is displayed. The final score is saved if possible and the leaderboard is updated

Estimate: 3h

As an authenticated user, I want to see a scoreboard of the 15 best players with their names and achieved score for each game mode to form an opinion on how good or bad I am relative to other users and whether I made it onto the scoreboard

Acceptance criteria:

• Given being logged in, when the user is on the home screen, then a scoreboard of the 15 best players with their names and scores is displayed and updated as new high scores are achieved
• Upon failure, the scoreboard component should be replaced by an error message showing that the scoreboard could not be loaded

Estimate: 3h

Create Login Page

Estimate: 2h

This is part of user story #2

Display satellite image covered with clouds for game mode "Clouds" on game page

Estimate: 3h

This is part of user story #19

Acceptance criteria:

• Given I chose to play the clouds game mode I want to see satellite picture covered in clouds
• Upon failure, an error message is displayed and the game is exited prematurely

As an authenticated user who just beat the highest score on the leaderboard for the corresponding the game mode, I want to see confetti raining down the screen and have a crown symbol next to my entry on the scoreboard component so I feel special.

Acceptance criteria:

• Given a score after finishing a game, when the score exceeds the current high score, then confetti rains down on the user's screen
• Given a score after finishing a game, when the score exceeds the current high score, then a crown symbol is put next to the user's username on the scoreboard component
• Upon failure, no celebratory actions is taking place or the user is informed that there was an error when adding their score to the scoreboard

Estimate: 2h

Create scoreboard component on home screen

Estimate: 3h

This is part of user story #6

Acceptance criteria:

• Given I am on the home screen i want to be able to see the scoreboard filled with the best player scores
• When I look at the scoreboard I want to be able to chose for which game mode I want to see the scoreboard
• Upon failure, an error is displayed at the spot where the scoreboard should be

As an authenticated user playing the game, I want to see all the important information in one place (Header, satellite image & mini-map) to be able to play the game.

Acceptance criteria:

• Given a selected game mode, when the user places a pin as their guess on the mini-map and presses the "Submit" button, then their score for that round is being calculated based on the game mode's implementation
• Given a selected game mode, when a new round starts, then the satellite image is visually displayed according to the game mode's implementation
• Upon failure, an error message is displayed and the user is navigated back to the home screen

Estimate: 12h

As a registered user, I want go log back into my existing account to access authenticated web pages and play the game.

• Given an already registered username and the corresponding password, when the user logs back into their account, then the user is successfully logged in and can access all application features
• Given an already logged in user, when the user tries to log into their account, then the user is automatically redirected to the home screen because they are already logged in
• Upon failure, an error message is displayed and the user is encouraged to try again with the required changes highlighted in the error message (A non registered username is used or an incorrect password was provided for a valid user account)

Estimate: 3h

Create user profile page and make username & password editable

Estimate: 2h

This is part of user story #4

As an authenticated user (after selecting a user mode), I want to be able to see a button for each game mode of the application to choose which game mode to play for this game session.

Acceptance criteria:

• Given all our game modes, when the user sees this component, then a button for each game mode should be displayed
• Given the game mode buttons, when the user clicks on one of them, then the game player starts and it will be initialized to track scores and display the satellite image as defined per game mode
• Given the game mode buttons, when the user had previously selected "Singe Player" and now clicks on a game mode, then the game player starts and it will be initialized to track scores and display the satellite image defined per game mode
• Upon failure, an error message is displayed and the user is encouraged to reload and start from the beginning

Estimate: 1h

Create UserModeSelector component (Singleplayer & Multiplayer)

Estimate: 1h

This is part of user story #7

Display clear satellite image for game mode "Time" on game page

Estimate: 2h

This is part of user story #17

Create mini-map component and make it dynamic (resizable, zoomable) for game page

Estimate: 4h

This is part of user story #13

As an unregistered user, I want to register a user account with my chosen credentials (i.e. username and password) to access authenticated web pages and play the game.

Acceptance criteria:

• Given a unique non-empty username and non-empty password, when the user registers for a new account, then the user is successfully registered, logged in and can access all application features
• Upon failure, an error message is displayed and the user is encouraged to try again with the required changes highlighted in the error message (non-emptiness of username or password, or non uniqueness of username)

Estimate: 4h

Redirect user to home screen after successful login/registration

Estimate: 1h

This is part of user story #1 #2

Create multiplayer-waiting-room page and display all participants in real-time

Estimate: 3h

This is part of user story #10

Create Home Screen Page

Estimate: 2h

This is part of user story #5

As an authenticated user (after selecting "Join Room"), I want to be able to join a room with a roomkey to join an existing game room.

Acceptance criteria:

• Given the user is authenticated and chose "Join Room" from the "Create or Join Room" component, when the user navigates to that component, then an input field for the invite key is displayed
• Given the user wants to join a game and has a valid key, when the user types the room key in and clicks on "Join", then the "Multiplayer waiting room" component is rendered
• Given the user wants to join a game and has an invalid key, when the user types the room key in and clicks on "Join", then a descriptive error message is displayed and the user is still able to type in another room key
• Upon failure, an error message is displayed and the user is encouraged to reload the page

Estimate: 5h

Implement confetti celebration and crown symbol for new high score

Estimate: 3h

This is part of user story #20

Acceptance Criteria:

• Confetti should rain down the screen if you've won the game
• Confetti starts when everyone submitted their guess
• Confetti stops when exiting the game

Create clickable username that redirects to user's profile

Estimate: 1h

This is part of user story #4

Create Register Page

Estimate: 2h

This is part of user story #1

As an authenticated user who is playing the game with the "Pixelation" game mode, I want to be able to see a pixelated version of the satellite image so I can find out where I am and submit my guess.

Acceptance criteria:

• Given the round has started and the user does not know their exact location, when time passes, then the image of the map is less and less pixelated
• Upon failure, an error message is displayed on what went wrong and a recommendation for the user on what to do

Estimate: 4h

As an authenticated user who is playing the game with the "Clouds" game mode, I want to be able to see a satellite image that is covered with "Clouds" so I can find out where I am by wiping off the clouds by holding the left mouse button.

Acceptance criteria:

• Given the round started, when the user holds the left mouse button and hovers (draws) over the image of the map, then the clouds disappear in a radius around the mouse of the user
• Upon failure, an error message is displayed on what went wrong and a recommendation for the user on what to do

As an authenticated user wanting to play the game, I want to see two buttons "Single Player" and "Multi Player" rendered in a component on the home screen to choose whether I want to play alone or with other users.

Acceptance criteria:

• Given being authenticated and on the home screen, when the user clicks on either the "Single Player" or "Multi Player" button, then the current "UserModeSelection" component is replaced by the "GameModeSelection" component
• Upon failure, an error message is displayed and the user is encouraged to reload the page

Estimate: 1h

As an authenticated user who is in an ongoing game session, I want to be able to press on an "Exit" button at any given time so I can exit the game without my score being saved and return to the home screen.

• Given the user is playing a game, when the user desires to leave the game, then an "Exit" button is displayed on the top of the screen
• Given the user is playing a game, when the user clicks on the "Exit" button, then the game is abandoned and the score is not saved
• Given the user is playing a game, when the user clicks on the "Exit" button, then the user is being redirected to the home screen where the user can start a new game
• Upon failure, the game will continue and an error message is displayed saying that the user should try to exit again

Estimate: 3h

Create CreateRoom component

Estimate: 2h

This is part of user story #9

As an authenticated user, I want to see all the important information on the home screen so that I can view my profile, log out or start a game.

Acceptance criteria:

• Given being on the home screen, when the user wants to see the scoreboard, then it is displayed
• Given being on the home screen, when the user wants to see/edit their profile, then the user can click on a "Profile" button
• Given being on the home screen, when the user wants to start a game, the user can click either on "Single player" or "Multi player"
• Given being on the home screen, when the user wants to log out, then the user can click on a "Log out" button
• Upon failure, the scoreboard component should be replaced by an error message showing that the scoreboard could not be loaded

Estimate: 3h

Display error message if login/registration credentials are invalid/incorrect

Estimate: 1h

This is part user story #1 #2

Implement observer design pattern for end-of-round scoreboard, final page scoreboard and leaderboard (home screen)

Estimate: 3h

This is part of user story #6 #16

Acceptance Criteria:

• Observer pattern is used for the listed component

As an authenticated user (who selected the multiplayer mode and is currently in a room), I want to be able to see the names of the other players so I know who I am playing against.

Acceptance criteria:

• Given being a multiplayer waiting room, when the host (room creator) clicks on the "Start" button, then a countdown will be displayed and the game starts when the countdown hits zero
• Given being in the multiplayer waiting room, when another user joins the same room, then the user instantly sees the newly-joined user
• Given being in the multiplayer room, when the user wants to see who they are playing against, then the user sees the names of all the other participating users
• Given being in the multiplayer waiting room, when the user wants to invite another user, then the user can see the invite-code for the room and copy it
• Upon failure, an error message is displayed when a user wants to start a game alone in multiplayer mode and the user is being redirected to the home screen

Estimate: 8h

Create final score page and display final scoreboard of all participants

Estimate: 3h

This is part of user story #16

Create End-Of-Round page with a temporary scoreboard & a countdown

Estimate: 3h

This is part of user story #14

Create header component (rounds, countdown, exit button) for game page

Estimate: 3h

This is part of user story #13

As an authenticated user who is in an ongoing game session, I want to be able to see my current score, the amount of rounds, a countdown and a mini-map of the world to know my score, how many rounds I have already played and how many rounds are left to play. To also know how much time I have left to submit my guess and to click on the mini-map to drop off a pin to mark my guess.

Acceptance criteria:

• Given being in an ongoing game session, when the state of the game changes (e.g. new round), then the header and its displayed values is updated
• Given being in an ongoing game session, when the user clicks on the mini-map, then the mini-map is enlarged
• Given the mini-map is enlarged, when the user clicks on any location of the mini-map, then a pin displayed at the selected location
• Given the mini-map is enlarged, when the user scrolls up, down or drags the map around, then the map zooms in, out or moves around
• Upon failure, an error message is displayed with a description on what went wrong

Estimate: 4h

Create GameModeSelector component (time, clouds, pixelation) which is subcomponent of UserModeSelector

Estimate: 1h

This is part of user story #8

Create exit button on gamepage (header) and on end-of-round page

Estimate: 1h

This is part of user story #15

Create HomeScreenGuard to redirect unauthenticated users to the landing page

Estimate: 1h

This is part of user story #5

As an authenticated user who is playing the game with the "Time" game mode, I want to be able to see a satellite picture that is completely clear unlike game mode "Pixelation" and "Clouds" so I can find out where I am and submit my guess.

Acceptance criteria:

• Given the round has started and the user does not know their exact location, when the user takes a long time to submit their guess, then the user receives less points for every second that passed
• Given the round has started and the user does not know their exact location, when the user takes an incorrect guess, then the user receives less points for every kilometer that the guess is oss from the correct solution
• Upon failure, an error message is displayed on what went wrong and a recommendation for the user what to do

Estimate: 4h