This project is a homework project for Carnegie Mellon University's 17214/514: Principles of Software System Construction. This is a full-stack, individual project which builds a java web application implementing a board game called Santorini. More information about the game and rules can be found here. The whole project took about one month to design and build.
This project consists of a frontend and a backend. The backend is written in Java, and the frontend is in Typescript, using the React.js framework. The frontend and backend communicates with each other using Http calls via Java NanoHttpd library.
Several design patterns are utilized in the design of backend. For example:
-
Strategy pattern that determines the specific implementation logic of the God based on the users' choice;
-
Decorator pattern that extends the original
Game
class functionality to support both the normal mode and the extended God mode.
For information can be found on the last page (page 10) of justification.pdf
.
Before coding, a domain model was constructed and peer-reviewed.
During implementing the code, a more detailed object model and system-sequent diagram was constructed and updated throughout the project. The finalized version can be found on page 7, 8 and 9 of the justification.pdf
.
To start the game, one needs to do the following:
-
Open the folder
/backend
in the Intellj IDE, and wait for the maven to download and install the dependencies -
Go to the folder
src/main/java/app
folder and find theApp.java
file. Click on the "play" button next to the main function to run the backend. -
If succeed, the word "Running!" will appear on the terminal.
In the terminal, under the /frontend
folder, run the following commands:
-
npm install
: install the dependencies of the frontend -
npm run compile
(optional): compile the scripts -
npm run start
: start the frontend. This will create a frontend running atlocalhost:3000
Usually a tab will be opened automatically in the browser, if not, type localhost:3000
in the url and the frontend will appear like below:
The numbers on the grids indicates the levels of the tower. O means nothing has been built yet. 1/2/3 would mean 1/2/3 levels has been built, and 4 would indicate a dome.
Also, as also indicated on the UI, player 1's workers' positions would be indicated by (x), and player 2's workers' positions would be indicated by [x]. Since at the init game, no workers have been setup yet, so they are not showing up in the screenshot.
-
To play the game in normal mode, just begin selecting the worker positions on the board, or click the "normal mode" to start a new game in normal mode
-
To play the game in god mode, click the "god mode" to start a new game in got mode
-
While playing, you can click the "Undo" button to undo the previous action
The undo feature is implemented in this game. At the frontend, the user can click the "undo" button to perform the undo operation at run time. To achieve this, immutable states are used. Every call from the frontend to the backend returns a State
object which serves two purposes: (1) telling the front end what to render, and (2) storing itself in the History
(which is a list of State
s internally) in the backend. When an Undo operation is called, the backend just removes the last State
stored in the history and return the last State
in the current History
to the frontend. Also, the backend will also call a function game.restore()
to restore the game environment globals to the undo state. Therefore, the frontend will be able to show the state that is just performed, and the Undo
will be successfully implemented.