Skip to content

Completion Steps

Mason Thomas edited this page Sep 3, 2024 · 9 revisions

There are a few categories of issues that need to be fixed. They are (mostly) of equal importance for the sake of the application, but vary drastically in difficulty and scope. For the more difficult issues, there are included hints. Viewing the hints will have no effect on the acceptance chance of your application, and is in fact encouraged. However, you are free to try and solve issues without hints if you wish to challenge yourself.

API and WebSocket Issues

These issues are caused by a larger variety of problems than just typos, and the solutions will be just as varied. Good luck! (Make sure to check the hints if you get stuck).

Important

This category of issues must be fixed first, and in the order they are listed in below to continue with the application.

Server Fails To Start

At the top of every file is a good few lines where you import every outside class you use within that file. Sometimes you rename a file or class, or maybe just forget the import. Now you have the dreaded Red Squiggly! These errors cause the server to fail to start, and are the most important to fix before continuing.

Steps to Reproduce: Start the server.

Expected Result: The server starts without any errors.

Actual Result: The server fails to start.

Hints: Errors should be thrown on startup in your console which tell you what files are missing and what needs fixing. If you have your IDE of choice set up correctly, you should be able to see the errors highlighted to make it easier to find the missing imports and add them to the files. For a little more help, we've listed all the files you'll need to make import fixes in.

  • src/server/main.ts
  • src/server/api/api.ts
  • src/server/api/game-manager.ts
  • src/common/game-engine.ts
  • src/common/message/messages.ts
  • src/client/App.tsx

/start-game Endpoint Misspelled

Steps to Reproduce: Start the server, and try to access the /start-game endpoint.

Expected Result: The server returns a 200 status code and starts the game.

Actual Result: The server returns a 404 error when trying to access the /start-game endpoint.

Hints: There are technically 2 ways of fixing this issue 😉. All the API endpoints are defined in src/server/api/api.ts, and all API calls on the frontend are in src/client/App.tsx.

Missing Implementation for /game-state

Steps to Reproduce: Start the server, and try to start the /game-state endpoint.

Expected Result: The server returns the current game state and allows you to continue with the game.

Actual Result: The server returns a 404 error when trying to access the /game-state endpoint.

Hints: The /game-state endpoint is missing its implementation in the src/server/api/api.ts file. You will need to implement the endpoint in the api.ts file, and make sure it returns the current game state. Take a look at the other endpoints in the api.ts file for reference, especially the /board-state endpoint.

Visual Typos

These issues are the most minor, and are by far the easiest to fix. They have no effect on the actual functionality of the code.

Incorrect Button Naming

Steps to Reproduce: Open the application, and look at the button you press to start the game.

Expected Result: The button is spelled "Start Game".

Actual Result: The button is spelled "Start Gmae".

Misspelled Tab Name

Steps to Reproduce: Open the application, and look at the tab name in your browser.

Expected Result: The tab name is spelled "ChessBots Application".

Actual Result: The tab name is spelled "Chezbot Application".

Functional Typos

These typos are a bit more serious. They are harder to identify, and cause tangible bugs. The typos themselves will not be listed, but the issues they cause will.

Player Pieces are Incorrect

Steps to Reproduce: Start a game, and look at the pieces that the players are playing.

Expected Result: Player 1 (the host) plays X, and Player 2 (the client) plays O.

Actual Result: Both players are playing X.

Placement Messages Can Be Sent After Game End

Steps to Reproduce: Start a game, and click a non-disabled board title after the game has ended.

Expected Result: The game does not allow you to place a piece after the game has ended.

Actual Result: The game allows you to place a piece after the game has ended.

Board Is Not Disabled After Game End

Steps to Reproduce: Start a game, and look at the board after the game has ended.

Expected Result: The board is disabled after the game has ended. All the tiles are greyed out, and clicking a piece does nothing.

Actual Result: The board is not disabled after the game has ended. You can still click on the tiles, and place pieces.

Implement Missing Game Win Logic

Steps To Reproduce: Start the server, and play a game until someone wins by placing all their pieces in a column.

Expected Result: A message is sent over the WebSocket that the game has been won, and the client displays a message as well.

Actual Result: The game does not end when a player wins by placing all their pieces in a column.

Hints: The game win logic is implemented in the src/common/game-engine.ts file. There is a function called isColumnWin that is missing its implementation. You will need to implement this function with the correct logic to check if a player has won by placing all their pieces in a column. Feel free to use the the isRowWin function as a reference, and the comment above the isColumnWin function as a guide for what the function should do.

React Shenanigans

If you are new to React, or even front-end in general, these may seem like black magic at first. I suggest carefully reading through all the client files, and trying to fully understand the flow. (You may also want to look into things like state and useEffect).

Board Layout Is Wrong

Steps to Reproduce: Start a game, and look at the board.

Expected Result: The board is a 3x3 grid.

Actual Result: The board is a 1x9 grid.

Empty State Squares

Steps to Reproduce: Start a game, and look at the board.

Expected Result: The board is a 3x3 grid with empty squares.

Actual Result: The board is a 3x3 grid with squares that say 'blank' when empty.

Colored Board Squares

Steps to Reproduce: Start a game, and look at the board, and place an O tile and an X tile.

Expected Result: The board squares change color when an X or O tile is placed in them.

Actual Result: The board squares do not change color when an X or O tile is placed in them.