●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Scoreboard with player and computer badges.
- Three choice buttons (Rock / Paper / Scissors) with FontAwesome icons.
- Computer choice simulation with spinner while resolving.
- Result message with contextual styling (win/draw/lose).
- Play-again/reset action that clears round state but preserves scores.
## Key components
- Razor component with fields: playerScore, computerScore, playerChoice, computerChoice, resultMessage.
- Methods: PlayRound(string), GetComputerChoice(), DetermineWinner(string,string), ResetGame().
- UI primitives: <button> elements with @onclick lambdas, Bootstrap badges, spinner-border, and FontAwesome <i> icons.
- Injected service: @inject IJSRuntime (present but optional).
- Framework features: Random for computer move and StateHasChanged() to refresh UI.
## How it works
- Player triggers PlayRound via button @onclick; PlayRound sets playerChoice, picks a random computerChoice, then calls DetermineWinner.
- DetermineWinner compares choices, sets resultMessage and resultMessageClass (text-success/text-danger/text-warning), and increments playerScore or computerScore.
- UI shows player's and computer's icon classes via GetIconClass(choice) and displays a spinner while computerChoice is null.
- State is stored in component fields; component re-renders after StateHasChanged calls.
## Styling
- Layout and components use Bootstrap utility classes: container, row, col-*, btn, btn-outline-*, badge bg-*, spinner-border, text-center, mt-4, mb-4.
- Icons rely on FontAwesome CSS (external CDN link recommended in MainLayout or index.html).
- Responsive behavior leverages Bootstrap grid (col-auto, col-4) for basic responsiveness.
## Reuse steps
1. Copy the .razor file into a Blazor Pages or Components folder in a .NET Blazor project.
2. Ensure Bootstrap CSS is available (default Blazor template includes Bootstrap) and add FontAwesome CDN link to the layout or index.html.
3. Add @inject IJSRuntime if using JS interop; no extra NuGet packages are required for this page.
4. Wire any application services or persistent storage if score persistence across sessions is desired.
5. Optionally extract game logic into a service class for unit testing and reuse.
## Limitations & next steps
- This is a single-page component generated by Instruct UI; it does not include persistence, authentication, or multiplayer wiring.
- Random uses a static System.Random; replace with an injectable randomness provider for testability or determinism in tests.
- Accessibility, localization, and unit tests are not implemented; consider ARIA labels, keyboard support, and refactoring logic into services.
- Add optional animations, sounds, or a game history grid to extend the experience.