Application Structure

Backend

Found in /src/server. The server acts as the backend for the application, facilitating communication between the clients and managing the underlying game engine.

File Structure:

main.ts

Launch point for the server. Handles starting the individual services and initialization of various components.

api

An API is basically just an interface between two pieces of code which allows them to communicate with each other.

• api.ts: Contains endpoints that handle API requests from the client. It is also what initially receives the websocket messages and passes them off.
• socket-manager.ts: Has direct access to the websockets that clients join with.
• client-manager.ts: Holds information about, and middlemans all communication from the server to the clients.
• game-manager.ts: Handles everything about a single game. Stores the game engine, knows the state, and passes messages to the correct clients.
• managers.ts: Exports global variables holding managers that need to be accessed by multiple files.

Client

Found in /src/client. The client is user-side and handles sending input from the user to the server and updating the board in the browser.

File Structure:

• tsconfig.json: Client specific Typescript settings. React stuff.
• vite-env.d.ts: Vite environment settings. We just use defaults, so nothing much in here.
• main.tsx: Called by index.html in the root.
• index.css: Imported by main.tsx. Holds the css for the html elements we use. Defines the look and feel, as well as the position and layout of our react components.
• App.tsx: This is the important file for the client. It handles basically everything from the code that runs to the components that are rendered.

Common

Found in /src/common. Holds files that both the client and the server share. Usually they are sending info contained in these between each other.

File Structure:

• client-types.ts: A small enum of the different types a client can be.
• game-end-reasons.ts: Holds a couple enums for the different methods by which a game can end.
• game-types.ts: Holds an enum for the different available piece types, and a class for when a piece is being placed on the board.
• game-engine.ts: This handles all of the actual tictactoe game logic. Also is what stores the board.

message

These files handle shared files directly used for communicating between the server and clients.

• message-types.ts: This is just an enumerator of the message types that are sent between the server and the clients.
• messages.ts: Turns each MessageType into it's own class that extends a base Message class.
• parse-message.ts: Takes in a MessageType and returns a new instance of its corresponding Message class.

Root

Found in /. These files are setup files and settings for the backbone of running the application.

• README.md: This is simply the description page you see when you open the main repo.
• package.json: This keeps track of all the dependencies used, and runs the scripts we define (yarn dev).
• yarn.lock: This is an auto created file. Don't need to touch it.
• tsconfig.json: This keeps track of all of our Typescript settings. You can allow or deny different ts behaviors in this file.
• vite.config.ts: This is for any vite behaviors you want to change. We don't change any.
• index.html: This is the home page of the website. Determines the name and icon for the webpage tab.
• .gitignore: Any paths or files defined in this file won't be tracked by git and committed. (Very useful to avoid needlessly committing hundreds of thousands of lines from the node modules).

node_modules

Yarn is basically just an extension of node. NodeJS is the backbone of our server. These node modules are public libraries and dependencies that are used for running our code. They are handled automatically when we run yarn.

public

This folder just holds the public assets that we use outside of client (Basically just the icon that index.html uses).

src

This is where all of the actual code is located. Stands for source.