Enhancement Description
The player's side already has a great interactive card UI, three cards for Rock, Paper, and Scissors, where the chosen one gets highlighted with a green border. However, the computer's side shows no such UI. The bot's choice is only communicated through the result text ("You Win!" / "You Lose!"), leaving the top half of the game feeling empty and one-sided.
The fix is to add an identical set of three cards on the computer's side, and after each round, highlight the card matching the bot's choice, the same way the player's selection is highlighted.
Current experience:
Player picks → their card highlights → result text says "You Win!" → bot's choice is never shown
Expected experience:
Player picks → their card highlights → bot's card highlights simultaneously → result text confirms outcome
Proposed Solution
In the modal HTML, add a mirrored set of three cards (Rock / Paper / Scissors) for the computer's side, marked as non-interactive (no click handlers)
In web-app/js/projects.js, after the computer's choice is generated, apply the same highlight class (the green border) to the corresponding bot card
Clear the bot's highlight on reset, same as the player's cards are cleared
This requires no new dependencies and stays fully consistent with the existing card design and CSS.
Enhancement Description
The player's side already has a great interactive card UI, three cards for Rock, Paper, and Scissors, where the chosen one gets highlighted with a green border. However, the computer's side shows no such UI. The bot's choice is only communicated through the result text ("You Win!" / "You Lose!"), leaving the top half of the game feeling empty and one-sided.
The fix is to add an identical set of three cards on the computer's side, and after each round, highlight the card matching the bot's choice, the same way the player's selection is highlighted.
Current experience:
Player picks → their card highlights → result text says "You Win!" → bot's choice is never shown
Expected experience:
Player picks → their card highlights → bot's card highlights simultaneously → result text confirms outcome
Proposed Solution
In the modal HTML, add a mirrored set of three cards (Rock / Paper / Scissors) for the computer's side, marked as non-interactive (no click handlers)
In web-app/js/projects.js, after the computer's choice is generated, apply the same highlight class (the green border) to the corresponding bot card
Clear the bot's highlight on reset, same as the player's cards are cleared
This requires no new dependencies and stays fully consistent with the existing card design and CSS.