Feature Summary

Each game in the home page’s list of open games show the number of players in it e.g. 0/2, 1/2, 2/2. We should replace this with text describing who specifically is in the game e.g. “vs aleph_one”.

Detailed Description

There can be 0, 1, or 2 players in a game at any time, so we should update their display to handle each of these cases as follows

0 players

The text should say: Empty

1 player

The text should say: vs
e.g. vs aleph_one

2 players

The text should say: <p0_username> vs <p1_username>
e.g. aleph_one vs SUBMARINO

Implementation

Building this feature will require backend updates to ensure the data is provided, and frontend updates to appropriately consume them, and test updates to describe the changed behavior.

Backend

There is one endpoint that provides the list of games displayed by the frontend: api/controllers/game/get-list.js

This endpoint uses two helpers to generate the delivered data:

• api/hooks/customGameHook/index.js’s findOpenGames() function
• api/helpers/find-spectatable-games.js

These two should be updated so that they both include the .players on each game, but with each user transformed to only include the id and username.

customeGameHook.findOpenGames()

This function already includes the players as an array on each game because it calls .populate(‘players’) when querying for the games on line 39. This queries for all the user records associated with each game and adds them to the players array of the respective game.

The issue with this is that it includes all data for each user record, when we should instead include only the id and username. To address this, we should update the processing logic on line 46 so that the returned openGames variable has each of its games transformed so that the each user in the game’s players array consists only of their id and username.

findSpectatableGames()

This helper doesn’t yet include the players associated with a game, so we should update it to call .populate(‘players’) on the existing query for games, and then use the same technique as above to convert each game so that each of its players have only an id and username.

Frontend

The frontend requires a change to the GameListItem component, which renders a game in the list, and the gameList store, which handles processing data for the list of available games.

GameListItem Component

The primary frontend change will be in src/routes/home/components/GameListItem.vue which is the component that renders an individual game that is available to play or to spectate. We should update it so that it expects the game to have an array of players and that it renders the text described above based on the number of players in the game.

gameList Store

In addition to the component change, we need to update the pinia store src/stores/gameList.js so that it works with the list of players in the game, rather than just the number of players in the game. Specifically, we need to:

1. Update the GameSummary constructor to use the players array itself instead of creating a numPlayers attribute using the length of the players list.
2. Update the joinGame() and otherLeftGame() attributes to .push() and .pop() players from the relevant game’s .players() array rather than incrementing/decrementing the player count.