feat: Implement Piece Count Display Below Player Avatar

tridecco / game-client-web

Tridecco Game Client is a frontend application designed to support Tridecco games. It provides user interface rendering, user interaction handling, dynamic content loading, and communication with the backend server.

https://play.tridecco.com

GNU Affero General Public License v3.0

1 stars 0 forks source link

feat: Implement Piece Count Display Below Player Avatar #39

Closed TKanX closed 3 weeks ago

TKanX commented 3 weeks ago

Summary:

Implemented a new feature that displays the count of pieces a player has directly below their avatar in the game UI. This change enhances the user experience by providing quick, accessible information during gameplay.

Related Issues:

Closes #30

Changes:

Added a UI component to display the piece count below each player avatar.
Integrated the piece count with the backend data to ensure real-time updates.
Adjusted styling to align with the existing UI design.

Screenshots:

Screenshot_20241103_140330

tedhyu commented 3 weeks ago

This is a good start, but I think there should be some way the player can see what pieces the other player has, not just the number of pieces. An idea is that if they click on the number, a pop up will occur that shows the colors of the pieces the player has and how many pieces each.

TKanX commented 3 weeks ago

Ok, I've reopened this issue and will implement this feature.

TKanX commented 3 weeks ago

Summary:

Implemented a new feature that creates a container that shows the pieces and their counts when the player element is hovered over or touched.

Related Issues:

Closes #30

Changes:

Added a method showPlayerPiecesOnHover in GameUI to display the count of pieces below the player's avatar on hover.
Updated the pieceCountMap in GameUI to correctly assign the index from the pieces array instead of the pieceCountMap.
Modified the reduce function to include the index i and store it in the pieceCountMap.
Adjusted the forEach loop to use the correct index from pieceCountMap.

Screenshots:

Screenshot_20241104_180327