Confirm?

Are you sure you want to proceed?
J
John Carlo Lescano

Timer and Monster Selector Page

Clone & Customize via AI

Blazor Monster Spawn Timer is a scheduler page for creating timed monster spawns using EditForm validation and Bootstrap layout. It displays realtime countdowns in responsive cards and updates via a background timer.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - A scheduling form to add timed monster spawns (hours/minutes/seconds and monster selection). - Validation using DataAnnotations with client-side EditForm support. - A responsive Bootstrap card grid that lists scheduled spawns and shows realtime countdowns. - A background timer loop that triggers StateHasChanged every second to update countdowns. ## Key components - EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage - InputNumber, InputSelect with @bind-Value - ObservableCollection<MonsterSpawnInfo> for UI-bound state - Task.Run timer, CancellationTokenSource, InvokeAsync(StateHasChanged) - Bootstrap classes (container, row, col-*, card, btn) and FontAwesome icons ## How it works - The form model is SpawnTimerInputModel with DataAnnotations (Range, Required). Fields bind with @bind-Value. - On valid submit HandleValidSubmit computes a DateTime spawn time, creates MonsterSpawnInfo and adds it to the ObservableCollection so cards render. - A background task calls InvokeAsync(StateHasChanged) every second to refresh countdown values on the page. - GetCountdownDisplay returns an HTML-formatted string for elapsed/remaining time (note: rendered as plain string unless converted to MarkupString). ## Styling - Uses Bootstrap layout and form-control/form-select classes for responsive columns and inputs. - Cards use card-header/card-body and Bootstrap grid (col-lg-3 col-md-4 col-sm-6) for responsiveness. - FontAwesome icon classes (fa-*) provide visual affordances. ## Reuse steps 1. Add the Razor page and the model classes (SpawnTimerInputModel, MonsterSpawnInfo) to the project. 2. Ensure Bootstrap CSS and FontAwesome are included in index.html/_Host.cshtml. 3. Import System.ComponentModel.DataAnnotations in the page and models. 4. Wire the page route (@page) and include using statements as needed. 5. Optionally implement IDisposable or IAsyncDisposable on the component to dispose the CancellationTokenSource. 6. Replace in-memory ObservableCollection with a service or persistence layer for multi-user or durable storage. ## Limitations & next steps - GetCountdownDisplay returns HTML text; convert to MarkupString or RenderFragment to render markup safely. - The page uses an in-memory ObservableCollection; persistence, server sync, and authorization are not implemented. - Ensure the component implements IDisposable/IAsyncDisposable so the timer cancels reliably on navigation. - Consider timezone handling, localization, and edge cases for long-running timers. - Add unit/integration tests and accessibility checks for form controls and dynamic updates.