Skip to content

Latest commit

 

History

History
116 lines (86 loc) · 5.33 KB

README.md

File metadata and controls

116 lines (86 loc) · 5.33 KB


RaveWave
RaveWave-Client

RaveWave.V2.mp4

Introduction

By combining Kahoot with Spotify, RaveWave creates a competitive and fun music guessing game to play among friends. This is the repository of the front-end part of our implementation, you'll find the back-end part here.

Technologies

The client is written in TypeScript using React. For styling Mantine components are used.

To establish a connection between the front- and backend REST is used. When further proceeding in the game (invite players), a stomp websocket connection gets established.

High-level components

The SelectGameMode view allows the users to choose a game mode, select the number of game rounds and select the playback duration. In addition, the user can choose from a variety of playlists. The game configuration is sent to the backend via the stomp websocket connection as soon as the host invites players to the game.

The different game mode views, namely GuessSong , GuessArtist, GuesLyrics are the most important component of RaveWave. This is where the users can listen to music and can give their guesses. Again, the communication with the backend is done with stomp websockets.

Lastly, PostRound and PostGame are a central part of the frontend. PostRound displays the game results after every round and PostGame displays the results at the very end of the game.

The GameController controls the game states as soon as the stomp websocket connection is established. The GameController subscribes as a listener and handles the different game states and decides which views are rendered.

Launch & Deployment

  • npm run dev

    Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

    The page will reload if you make edits. You will also see any lint errors in the console.

  • npm run build

    Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

    The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Illustrations


RaveWave
Landinghost - As a host you can log in or register.


RaveWave
Selectgamemode - This is where the host can adjust game parameters.


RaveWave
DisplayQR - The host displays a QR-code which other players can scan in order to join the lobby.


RaveWave
Guess the song - The players can give give their guesses.


RaveWave
EndRound - A leaderboard is shown after each round.


RaveWave
EndGame - A final leaderboard is shown after all game rounds are played.

Roadmap

  • New game mode: Guess the lyrics
  • Global RaveWAver leaderboard
  • Submit Quota Extension request (takes about six weeks)

Authors and acknoledgment

SoPra Group 17 2022 consists of Marco Leder, Valentin Hollenstein, Dennys Huber, Sheena Lang and Isabella Chesney.

We first want to thank our teaching assistant Tarek Alakmeh for his help during the last semester, as well as our previous teaching assistant Kyrill Hux. We also thank Spotify for providing such a well documented API and Kahoot for the inspiration. It has been a very educational and challenging semester, and we are very thankful for this experience.

License

Apache-2.0 license