- Introduction
Exploding Chickens is a spin-off of the popular game 'Exploding Kittens'. In this version, the protagonists are lovely chickens (but not so lovely, they can explode!). We created this unique implementation to conect people through a web implementation of this game, as previously it was only possible to play when players were co-located.
This project offers an innovative user interface and features that enhance collaboration between players while providing a good user experience. These features include the ability to send friend requests, a chat to discuss strategies, and high-quality graphics.
- React - Front-end JavaScript library
- MUI - React component library
- Spring - Java Back-end framework
- Gradle - Build automation tool
- STOMP - Bidirectional real time communication over websockets
- DeckOfCardsAPI - External API to simulate card decks
- PerspectiveAPI - External API for content moderation (checking usernames and emails for toxicity)
- GmailAPI - External API for email interaction for password reset
- PostgreSQL - Persistent Database (through instance of CloudSQL)
- Game.tsx: This view is what the player sees when they play a game of exploding kittens. It is the main part of our application and this is where most of the magic happens. The most important part here is the Websocket connection to the server, which handles all game-related logic.
- Chat.tsx: The chat view enables users to communicate with each other while playing a game.
- WebsocketConnection.tsx: This helper file is used in many views to facilitate the websocket connection. It is responsible for connecting and disconnecting to the server, as well as subscribing and unsubscribing to channels and sending messages.
- AllPlayers.tsx, EnemyPlayers.tsx, Friends.tsx: These views allow users to check out who else is playing Exploding Kittens, send friend requests and look at game related statistics.
- Profile.tsx: Here, users can view their own profile and change things like their profile image, their country as well as their e-mail and password.
git clone https://github.com/sopra-fs24-group-17/client.git
cd client
- Build :
npm run build dev - Run :
npm run dev - Install dependencies:
npm install
You can verify that the server is running by visiting localhost:8080 in your browser. By default the development profile is active, utilizing an in-memory H2 database.
You can access the local hosted application (client) by visiting localhost:3000
NOTE: The server repository can be found here
- through GitHub workflows, the main branch is automatically deployed onto Google Cloud's App Engine
- during deployment, the in-memory H2 database is migrated to a CloudSQL instance of PostgreSQL
- (Note: if changes to the database schema are done, the database must be restarted upon deployment)
- during deployment, credentials for Google App Engine, PostgreSQL and the Gmail API are replaced with GitHub secrets
The user flow is as follows:
- An existing user logs in and a new user registers to the platform.
- The user is redirected to the main dashboard where it is possible to create a new game, join to a existing one, go to user's profile, use the social features, or logout.
- The user can select the game configuration (private or public and number of players). By clicking the
SETUP GAMEbutton the game lobby is started where users can join and can be started once the number of players is reached.
- The join game view will display the public available games, the user can either join a public game by clicking the join button or join a private game by entering the game id of the private game.
- All players view will display all existing players. The user can search here for specific players, see their statistics, and add them to their friends network.
- The friends view will display all the friends of the user, where the user can see if they are online and their avatar.
- The user profile shows the data given by the user upon registration and enables the user to modify this data, as well as completing their profile by adding an avatar, birthday, among others.
- The user can see in the top of the window who is the active player. When the user is the active player they can play their move cards (visible in their hand) and end their turn by grabing a card from the dealer pile (upside down cards).
- The player can access the tutorial by clicking the
?icon at any time of the game. - The player can interact with other players during the game by clicking the chat icon, which will pop out the chat.
- The player can leave the game earlier by clicking the exit icon.
- Upon completion of the game, a leaderboard with the position of the players will be displayed and users can go back to the home view.
- Ends user session.
Below is an outline of suggestive features that developers who want to contribute to our project could use as a starting point:
- new game modes, e.g higher probability of explosions and new custom game cards
- implementation of a mobile application
- in game store to allow customization of user profiles and avatars
- Liam Tessendorf - (Frontend) - liamti5
- Liam Kane - (Frontend) - ljkane
- Panagiotis Patsias - (Frontend) - PanagiotisPatsias
- Jorge Ortiz - (Backend) - jorgeortizv
- Kevin Bründler - (Backend) - random9ness
We would like to thank the professor and tutors of the Software Engineering Lab course from the Univeristy of Zurich. A special thanks to our tutor feji08 for the weekly meetings and continuous support.
This project is licensed under the MIT License. For more details, see the LICENSE file.
- Project: Exploding Chickens Game Cards
- Author: Radison Akerman, Sengdao Inthavong, Vincent Do, Richard Yang
- Source: GitHub Repository
- License: Mozilla Public License 2.0 (MPL 2.0)
- License Details: This project is protected under the MPL 2.0. For more details, see the LICENSE file in the repository.
- The project's materials, meaning the game cards images, are utilized according to the terms of the Mozilla Public License 2.0.
- Any modifications made to the original materials are clearly documented and attributed to the modifier.