Web Game

Project of simple clicking web game with a database and separate frontend and backend.

Logic

Load main page with score == 0, blank nickname textbox, time set to 10 seconds and svg target in the middle. When target is clicked start time t=10 until t=0 and save nickname to temporary variable. If player click in target radius, add score++. When miss-click target do miss++. After every click change target position. When t=0 stop game, show results (modal), send data to backend, do logic and store them into the MySQL database. Restart.

Used Tools and Languages

Frontend	Backend	Database	Cloud hosting/ Deployment	Git	Tests
TypeScript	Java	MySQL	AWS	Git	Jacoco
HTML, CSS	Spring Boot	MySQL Workbench	Ubuntu	Git Bash	SonarCloud
Angular	Maven	JPA API	Docker	GitHub	Karma
WebStorm	IntelliJ IDEA			GitHub Actions

Screenshots

MySQL Database

Get all players

  GET /api/players

Parameter	Type	Description
id	BIGINT	Required. Player key
nickname	VARCHAR	Player nickname
score	INT	Player score

Get leaderboard (Top 10 players)

  GET /api/leaderboard

SELECT * FROM databaseName ORDER BY score DESC LIMIT 10

Running Tests

To run unit tests for frontend via Karma, run the following command

  ng test

To run tests for backend and generate test coverage report from jacoco, run the following command

  mvn clean test

Deployment

Frontend

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Backend

Run mvn package in /webGame/webGame/ directory for build the project (/xxxFileName-0.0.x-SNAPSHOT.jar)
Run java -jar /xxxFileName-0.0.x-SNAPSHOT.jar for start application server. Navigate to http://localhost:8080/.

All-in-One

Using Docker for automated deployment. To deploy this project run

  *not implemented yet*

Author

• Me, myself and I