Confirm?

Are you sure you want to proceed?
?

Live Scoring Layout Design

Clone & Customize via AI

The Blazor referee live scoring page provides live match tracking with player scores, turn input controls, a shot clock timer, and session management using Bootstrap styling and components.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Live scoring interface for a two-player billiard match - Player score display with active player highlight - Score adjustment controls with bounds enforcement - Shot clock timer with start, pause, and reset - Last turn snapshot with undo functionality - Status badges and match controls (swap players, stop match) - Session acquisition, heartbeat keep-alive, and release logic - Navigation links to edit game and turns ## Key components - Razor page with parameter binding - Bootstrap grid layout and utility classes - InputNumber bound with @bind-Value - Buttons with event handlers for score changes and shot clock control - Conditional rendering for errors, loading, and status - State management via private fields and properties - Asynchronous lifecycle method OnInitializedAsync ## How it works - Uses route parameter to load game state asynchronously - Binds score inputs dynamically based on active player - Updates server via service interfaces on score changes and turn submission - Maintains session via heartbeat calls every 30 seconds - Shot clock runs asynchronously with cancellation tokens - Enables undo by restoring last known turn scores from service ## Styling - Bootstrap 5 classes for responsive layout, cards, buttons, badges, and spacing - FontAwesome icons for UI affordance - Responsive columns for match summary and controls ## Reuse steps 1. Copy Razor page and timer model class 2. Implement or replace mock service interfaces with actual data services 3. Inject NavigationManager and required services 4. Add Bootstrap CSS and FontAwesome icons to project 5. Adapt data models and routing as needed 6. Handle authentication and authorization externally ## Limitations & next steps - No modal confirmation dialogs implemented for stopping match - Services use mock implementations needing real back-end - Real-time updates beyond periodic heartbeat not included - UI could be extended with broadcast features via SignalR - Further validation and error handling could be improved