Add Pin Input Components (Phase H2)
- Pin.razor: clickable pin with Standing/Fallen/Disabled states - PinPanel.razor: 9-pin layout in classic bowling configuration - NumberPanel.razor: quick-entry 0-9, bell toggle, throw confirm - ThrowPanel.razor: gutter buttons, throw counters, mode display - GameInputPanel.razor: orchestrates all panels, handles throw logic - ThrowResult.cs: throw result record with strike/circle detection 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
beo3000
parent
1ef6c984db
commit
8067ff3cf4
|
|
@ -0,0 +1,304 @@
|
|||
@using Koogle.Domain.Enums
|
||||
@using Koogle.Web.Store.GameState
|
||||
@using Koogle.Web.Components.Game
|
||||
@inherits FluxorComponent
|
||||
|
||||
@inject IState<GameState> GameState
|
||||
@inject IDispatcher Dispatcher
|
||||
|
||||
<div class="game-input-panel">
|
||||
@* Current player display *@
|
||||
<div class="current-player-section">
|
||||
<MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText>
|
||||
<MudText Typo="Typo.h4" Class="player-name">
|
||||
@(CurrentPlayerName ?? "Kein Spieler")
|
||||
</MudText>
|
||||
@if (GameState.Value.Participants.Mode == ParticipantsMode.FreeToChoose)
|
||||
{
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Small"
|
||||
OnClick="ShowPlayerSelector"
|
||||
StartIcon="@Icons.Material.Filled.SwapHoriz">
|
||||
Spieler wechseln
|
||||
</MudButton>
|
||||
}
|
||||
</div>
|
||||
|
||||
@* Pin input area *@
|
||||
<div class="pin-input-section">
|
||||
<PinPanel ThrowPanelState="@GameState.Value.ThrowPanel"
|
||||
IsInteractive="@IsInteractive"
|
||||
OnPinClicked="HandlePinClick" />
|
||||
</div>
|
||||
|
||||
@* Number quick-entry *@
|
||||
<div class="number-input-section">
|
||||
<NumberPanel IsInteractive="@IsInteractive"
|
||||
CanConfirmThrow="@CanConfirmThrow"
|
||||
SelectedNumber="@_selectedNumber"
|
||||
BellValue="@GameState.Value.ThrowPanel.BellValue"
|
||||
OnNumberClicked="HandleNumberClick"
|
||||
OnBellClicked="HandleBellClick"
|
||||
OnThrowConfirmed="HandleThrowConfirmed" />
|
||||
</div>
|
||||
|
||||
@* Throw info and controls *@
|
||||
<div class="throw-control-section">
|
||||
<ThrowPanel ThrowPanelState="@GameState.Value.ThrowPanel"
|
||||
IsInteractive="@IsInteractive"
|
||||
OnGutterClicked="HandleGutterClick" />
|
||||
</div>
|
||||
|
||||
@* Undo button *@
|
||||
@if (GameState.Value.UndoStack.Count > 0)
|
||||
{
|
||||
<div class="undo-section">
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Secondary"
|
||||
FullWidth="true"
|
||||
OnClick="HandleUndo"
|
||||
StartIcon="@Icons.Material.Filled.Undo">
|
||||
Letzten Wurf rückgängig (@GameState.Value.UndoStack.Count)
|
||||
</MudButton>
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Error display *@
|
||||
@if (!string.IsNullOrEmpty(GameState.Value.Error))
|
||||
{
|
||||
<MudAlert Severity="Severity.Error" Class="mt-2">
|
||||
@GameState.Value.Error
|
||||
</MudAlert>
|
||||
}
|
||||
|
||||
@* Saving indicator *@
|
||||
@if (GameState.Value.IsSaving)
|
||||
{
|
||||
<div class="saving-indicator">
|
||||
<MudProgressCircular Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Typo="Typo.caption">Speichern...</MudText>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.game-input-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.current-player-section {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
background: var(--mud-palette-primary);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.player-label {
|
||||
opacity: 0.8;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pin-input-section,
|
||||
.number-input-section,
|
||||
.throw-control-section {
|
||||
background: var(--mud-palette-surface);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.undo-section {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.saving-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--mud-palette-text-secondary);
|
||||
}
|
||||
|
||||
@@media (max-width: 600px) {
|
||||
.game-input-panel {
|
||||
padding: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// Name of the current player (resolved from PersonId).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string? CurrentPlayerName { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Lookup function to get player names by ID.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public Func<Guid, string>? PlayerNameResolver { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Callback to show player selector dialog.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback OnShowPlayerSelector { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Callback when a throw is completed.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<ThrowResult> OnThrowCompleted { get; set; }
|
||||
|
||||
private int? _selectedNumber;
|
||||
private bool _hasModifiedPins;
|
||||
|
||||
private bool IsInteractive => GameState.Value.IsGameActive && !GameState.Value.IsLoading;
|
||||
|
||||
private bool CanConfirmThrow => _hasModifiedPins || _selectedNumber.HasValue;
|
||||
|
||||
private void HandlePinClick(int pinNumber)
|
||||
{
|
||||
var currentStatus = GetPinStatus(pinNumber);
|
||||
var newStatus = currentStatus == PinStatus.Standing ? PinStatus.Fallen : PinStatus.Standing;
|
||||
|
||||
Dispatcher.Dispatch(new SetPinStatusAction(pinNumber, newStatus));
|
||||
_hasModifiedPins = true;
|
||||
_selectedNumber = null;
|
||||
}
|
||||
|
||||
private void HandleNumberClick(int number)
|
||||
{
|
||||
// Quick entry: set pins 1-N as fallen, rest as standing
|
||||
var newState = GameState.Value.ThrowPanel.ResetPins();
|
||||
|
||||
for (int i = 1; i <= 9; i++)
|
||||
{
|
||||
var status = i <= number ? PinStatus.Fallen : PinStatus.Standing;
|
||||
newState = newState.SetPin(i, status);
|
||||
}
|
||||
|
||||
// Dispatch individual pin updates to match the new state
|
||||
for (int i = 1; i <= 9; i++)
|
||||
{
|
||||
var targetStatus = i <= number ? PinStatus.Fallen : PinStatus.Standing;
|
||||
Dispatcher.Dispatch(new SetPinStatusAction(i, targetStatus));
|
||||
}
|
||||
|
||||
_selectedNumber = number;
|
||||
_hasModifiedPins = true;
|
||||
}
|
||||
|
||||
private void HandleBellClick()
|
||||
{
|
||||
Dispatcher.Dispatch(new SetBellValueAction(!GameState.Value.ThrowPanel.BellValue));
|
||||
}
|
||||
|
||||
private async Task HandleGutterClick(bool isLeft)
|
||||
{
|
||||
// Gutter = 0 pins fallen, auto-confirm throw
|
||||
Dispatcher.Dispatch(new ResetPinsAction());
|
||||
_selectedNumber = 0;
|
||||
|
||||
await ConfirmThrow(isGutter: true, isLeftGutter: isLeft);
|
||||
}
|
||||
|
||||
private async Task HandleThrowConfirmed()
|
||||
{
|
||||
await ConfirmThrow(isGutter: false, isLeftGutter: false);
|
||||
}
|
||||
|
||||
private async Task ConfirmThrow(bool isGutter, bool isLeftGutter)
|
||||
{
|
||||
var fallenPins = GameState.Value.ThrowPanel.CountFallenPins();
|
||||
var bellValue = GameState.Value.ThrowPanel.BellValue;
|
||||
|
||||
// Create throw result
|
||||
var result = new ThrowResult
|
||||
{
|
||||
FallenPins = fallenPins,
|
||||
IsGutter = isGutter,
|
||||
IsLeftGutter = isLeftGutter,
|
||||
BellValue = bellValue,
|
||||
PinStates = GameState.Value.ThrowPanel.GetPins()
|
||||
};
|
||||
|
||||
// Calculate new throw panel state
|
||||
var newThrowPanel = GameState.Value.ThrowPanel with
|
||||
{
|
||||
ThrowCounterPerRound = GameState.Value.ThrowPanel.ThrowCounterPerRound + 1,
|
||||
TotalThrowCounter = GameState.Value.ThrowPanel.TotalThrowCounter + 1,
|
||||
BellValue = false // Reset bell after throw
|
||||
};
|
||||
|
||||
// Check if round is complete
|
||||
if (newThrowPanel.ThrowCounterPerRound >= newThrowPanel.ThrowsPerRound)
|
||||
{
|
||||
newThrowPanel = newThrowPanel with { ThrowCounterPerRound = 0 };
|
||||
|
||||
// Reset pins if in Reposition mode
|
||||
if (newThrowPanel.ThrowMode == ThrowMode.Reposition)
|
||||
{
|
||||
newThrowPanel = newThrowPanel.ResetPins();
|
||||
}
|
||||
}
|
||||
else if (newThrowPanel.ThrowMode == ThrowMode.Reposition)
|
||||
{
|
||||
// In Reposition mode, always reset pins after each throw
|
||||
newThrowPanel = newThrowPanel.ResetPins();
|
||||
}
|
||||
|
||||
// Dispatch record throw action
|
||||
Dispatcher.Dispatch(new RecordThrowAction(newThrowPanel, GameState.Value.GameModel));
|
||||
|
||||
// Reset local state
|
||||
_selectedNumber = null;
|
||||
_hasModifiedPins = false;
|
||||
|
||||
// Notify parent
|
||||
await OnThrowCompleted.InvokeAsync(result);
|
||||
}
|
||||
|
||||
private void HandleUndo()
|
||||
{
|
||||
if (GameState.Value.UndoStack.Count > 0)
|
||||
{
|
||||
var lastSnapshot = GameState.Value.UndoStack[^1];
|
||||
Dispatcher.Dispatch(new UndoThrowSuccessAction(
|
||||
lastSnapshot.ThrowPanel,
|
||||
lastSnapshot.Participants,
|
||||
lastSnapshot.GameModel));
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ShowPlayerSelector()
|
||||
{
|
||||
await OnShowPlayerSelector.InvokeAsync();
|
||||
}
|
||||
|
||||
private PinStatus GetPinStatus(int pinNumber) => pinNumber switch
|
||||
{
|
||||
1 => GameState.Value.ThrowPanel.Pin1,
|
||||
2 => GameState.Value.ThrowPanel.Pin2,
|
||||
3 => GameState.Value.ThrowPanel.Pin3,
|
||||
4 => GameState.Value.ThrowPanel.Pin4,
|
||||
5 => GameState.Value.ThrowPanel.Pin5,
|
||||
6 => GameState.Value.ThrowPanel.Pin6,
|
||||
7 => GameState.Value.ThrowPanel.Pin7,
|
||||
8 => GameState.Value.ThrowPanel.Pin8,
|
||||
9 => GameState.Value.ThrowPanel.Pin9,
|
||||
_ => PinStatus.Standing
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
@using Koogle.Domain.Enums
|
||||
|
||||
<div class="number-panel">
|
||||
<div class="number-buttons">
|
||||
@for (int i = 0; i <= 9; i++)
|
||||
{
|
||||
var number = i;
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="@GetButtonColor(number)"
|
||||
Size="Size.Large"
|
||||
OnClick="() => HandleNumberClick(number)"
|
||||
Class="number-button"
|
||||
Disabled="@(!IsInteractive)">
|
||||
@number
|
||||
</MudButton>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Warning"
|
||||
Size="Size.Large"
|
||||
OnClick="HandleBellClick"
|
||||
Class="action-button"
|
||||
Disabled="@(!IsInteractive)">
|
||||
<MudIcon Icon="@Icons.Material.Filled.NotificationsActive" />
|
||||
Glocke
|
||||
</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Success"
|
||||
Size="Size.Large"
|
||||
OnClick="HandleConfirmThrow"
|
||||
Class="action-button confirm-button"
|
||||
Disabled="@(!IsInteractive || !CanConfirmThrow)">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Check" />
|
||||
Wurf
|
||||
</MudButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.number-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: var(--mud-palette-surface);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.number-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.number-button {
|
||||
min-width: 48px !important;
|
||||
height: 48px !important;
|
||||
font-size: 1.2rem !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
flex: 1;
|
||||
height: 56px !important;
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
@@media (max-width: 600px) {
|
||||
.number-buttons {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.number-button {
|
||||
min-width: 40px !important;
|
||||
height: 40px !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
height: 48px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// Whether the panel is interactive.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsInteractive { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
/// Whether the throw can be confirmed (pins have been selected).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool CanConfirmThrow { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
/// Currently selected number (for highlighting).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int? SelectedNumber { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Current bell value state.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool BellValue { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Callback when a number is clicked (sets all pins 1-N as fallen).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<int> OnNumberClicked { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Callback when bell button is clicked.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback OnBellClicked { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Callback when throw is confirmed.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback OnThrowConfirmed { get; set; }
|
||||
|
||||
private Color GetButtonColor(int number)
|
||||
{
|
||||
if (SelectedNumber == number)
|
||||
return Color.Secondary;
|
||||
|
||||
// Special colors for key numbers
|
||||
return number switch
|
||||
{
|
||||
0 => Color.Error, // Rinne (gutter)
|
||||
9 => Color.Success, // Alle (strike)
|
||||
_ => Color.Primary
|
||||
};
|
||||
}
|
||||
|
||||
private async Task HandleNumberClick(int number)
|
||||
{
|
||||
if (!IsInteractive)
|
||||
return;
|
||||
|
||||
await OnNumberClicked.InvokeAsync(number);
|
||||
}
|
||||
|
||||
private async Task HandleBellClick()
|
||||
{
|
||||
if (!IsInteractive)
|
||||
return;
|
||||
|
||||
await OnBellClicked.InvokeAsync();
|
||||
}
|
||||
|
||||
private async Task HandleConfirmThrow()
|
||||
{
|
||||
if (!IsInteractive || !CanConfirmThrow)
|
||||
return;
|
||||
|
||||
await OnThrowConfirmed.InvokeAsync();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
@using Koogle.Domain.Enums
|
||||
|
||||
<div class="pin @GetPinClass()" @onclick="OnClick" style="@GetStyle()">
|
||||
<span class="pin-number">@PinNumber</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pin {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
border: 3px solid transparent;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.pin:hover:not(.pin-disabled) {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.pin:active:not(.pin-disabled) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.pin-standing {
|
||||
background-color: var(--mud-palette-primary);
|
||||
color: white;
|
||||
border-color: var(--mud-palette-primary-darken);
|
||||
}
|
||||
|
||||
.pin-fallen {
|
||||
background-color: var(--mud-palette-error);
|
||||
color: white;
|
||||
border-color: var(--mud-palette-error-darken);
|
||||
}
|
||||
|
||||
.pin-disabled {
|
||||
background-color: var(--mud-palette-gray-light);
|
||||
color: var(--mud-palette-gray-dark);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.pin-number {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@media (max-width: 600px) {
|
||||
.pin {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// The pin number (1-9).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int PinNumber { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Current status of the pin.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public PinStatus Status { get; set; } = PinStatus.Standing;
|
||||
|
||||
/// <summary>
|
||||
/// Whether the pin is interactive.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsInteractive { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
/// Callback when pin is clicked.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<int> OnPinClicked { get; set; }
|
||||
|
||||
private string GetPinClass() => Status switch
|
||||
{
|
||||
PinStatus.Standing => "pin-standing",
|
||||
PinStatus.Fallen => "pin-fallen",
|
||||
PinStatus.Disabled => "pin-disabled",
|
||||
_ => "pin-standing"
|
||||
};
|
||||
|
||||
private string GetStyle()
|
||||
{
|
||||
if (!IsInteractive || Status == PinStatus.Disabled)
|
||||
{
|
||||
return "pointer-events: none;";
|
||||
}
|
||||
return string.Empty;
|
||||
}
|
||||
|
||||
private async Task OnClick()
|
||||
{
|
||||
if (!IsInteractive || Status == PinStatus.Disabled)
|
||||
return;
|
||||
|
||||
await OnPinClicked.InvokeAsync(PinNumber);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
@using Koogle.Domain.Enums
|
||||
@using Koogle.Web.Store.GameState
|
||||
|
||||
<div class="pin-panel">
|
||||
@* Row 1: Pin 1 (top) *@
|
||||
<div class="pin-row pin-row-1">
|
||||
<Pin PinNumber="1" Status="@GetPinStatus(1)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
</div>
|
||||
|
||||
@* Row 2: Pins 2, 3 *@
|
||||
<div class="pin-row pin-row-2">
|
||||
<Pin PinNumber="2" Status="@GetPinStatus(2)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
<Pin PinNumber="3" Status="@GetPinStatus(3)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
</div>
|
||||
|
||||
@* Row 3: Pins 4, 5, 6 *@
|
||||
<div class="pin-row pin-row-3">
|
||||
<Pin PinNumber="4" Status="@GetPinStatus(4)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
<Pin PinNumber="5" Status="@GetPinStatus(5)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
<Pin PinNumber="6" Status="@GetPinStatus(6)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
</div>
|
||||
|
||||
@* Row 4: Pins 7, 8 *@
|
||||
<div class="pin-row pin-row-4">
|
||||
<Pin PinNumber="7" Status="@GetPinStatus(7)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
<Pin PinNumber="8" Status="@GetPinStatus(8)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
</div>
|
||||
|
||||
@* Row 5: Pin 9 (bottom) *@
|
||||
<div class="pin-row pin-row-5">
|
||||
<Pin PinNumber="9" Status="@GetPinStatus(9)" IsInteractive="@IsInteractive" OnPinClicked="HandlePinClick" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pin-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
background: var(--mud-palette-surface);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pin-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@media (max-width: 600px) {
|
||||
.pin-panel {
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.pin-row {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// Current state of the throw panel containing pin statuses.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public ThrowPanelState ThrowPanelState { get; set; } = ThrowPanelState.Initial;
|
||||
|
||||
/// <summary>
|
||||
/// Whether the pins are interactive (clickable).
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsInteractive { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
/// Callback when a pin is clicked.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<int> OnPinClicked { get; set; }
|
||||
|
||||
private PinStatus GetPinStatus(int pinNumber) => pinNumber switch
|
||||
{
|
||||
1 => ThrowPanelState.Pin1,
|
||||
2 => ThrowPanelState.Pin2,
|
||||
3 => ThrowPanelState.Pin3,
|
||||
4 => ThrowPanelState.Pin4,
|
||||
5 => ThrowPanelState.Pin5,
|
||||
6 => ThrowPanelState.Pin6,
|
||||
7 => ThrowPanelState.Pin7,
|
||||
8 => ThrowPanelState.Pin8,
|
||||
9 => ThrowPanelState.Pin9,
|
||||
_ => PinStatus.Standing
|
||||
};
|
||||
|
||||
private async Task HandlePinClick(int pinNumber)
|
||||
{
|
||||
await OnPinClicked.InvokeAsync(pinNumber);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
@using Koogle.Domain.Enums
|
||||
@using Koogle.Web.Store.GameState
|
||||
|
||||
<div class="throw-panel">
|
||||
@* Gutter buttons *@
|
||||
<div class="gutter-row">
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Error"
|
||||
Size="Size.Medium"
|
||||
OnClick="() => HandleGutterClick(true)"
|
||||
Class="gutter-button"
|
||||
Disabled="@(!IsInteractive)">
|
||||
<MudIcon Icon="@Icons.Material.Filled.ArrowBack" />
|
||||
Rinne Links
|
||||
</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Error"
|
||||
Size="Size.Medium"
|
||||
OnClick="() => HandleGutterClick(false)"
|
||||
Class="gutter-button"
|
||||
Disabled="@(!IsInteractive)">
|
||||
Rinne Rechts
|
||||
<MudIcon Icon="@Icons.Material.Filled.ArrowForward" />
|
||||
</MudButton>
|
||||
</div>
|
||||
|
||||
@* Throw counter and mode info *@
|
||||
<div class="throw-info">
|
||||
<MudChip T="string" Color="Color.Info" Size="Size.Medium">
|
||||
Wurf @(ThrowPanelState.ThrowCounterPerRound + 1) / @ThrowPanelState.ThrowsPerRound
|
||||
</MudChip>
|
||||
<MudChip T="string" Color="Color.Secondary" Size="Size.Medium">
|
||||
@GetThrowModeDisplay()
|
||||
</MudChip>
|
||||
<MudChip T="string" Color="Color.Dark" Size="Size.Medium">
|
||||
Gesamt: @ThrowPanelState.TotalThrowCounter
|
||||
</MudChip>
|
||||
</div>
|
||||
|
||||
@* Bell indicator *@
|
||||
@if (ThrowPanelState.BellValue)
|
||||
{
|
||||
<div class="bell-indicator">
|
||||
<MudIcon Icon="@Icons.Material.Filled.NotificationsActive" Color="Color.Warning" Size="Size.Large" />
|
||||
<MudText Typo="Typo.body1" Color="Color.Warning">Glocke aktiv!</MudText>
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Fallen pins display *@
|
||||
<div class="fallen-pins-display">
|
||||
<MudText Typo="Typo.h4" Class="pin-count">
|
||||
@ThrowPanelState.CountFallenPins()
|
||||
</MudText>
|
||||
<MudText Typo="Typo.body2" Class="pin-label">Kegel gefallen</MudText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.throw-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: var(--mud-palette-surface);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.gutter-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.gutter-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.throw-info {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bell-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background: rgba(255, 193, 7, 0.15);
|
||||
border-radius: 4px;
|
||||
animation: bell-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@keyframes bell-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.fallen-pins-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: var(--mud-palette-background);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pin-count {
|
||||
font-weight: bold;
|
||||
color: var(--mud-palette-primary);
|
||||
}
|
||||
|
||||
.pin-label {
|
||||
color: var(--mud-palette-text-secondary);
|
||||
}
|
||||
|
||||
@@media (max-width: 600px) {
|
||||
.gutter-row {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.throw-info {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// Current state of the throw panel.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public ThrowPanelState ThrowPanelState { get; set; } = ThrowPanelState.Initial;
|
||||
|
||||
/// <summary>
|
||||
/// Whether the panel is interactive.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsInteractive { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
/// Callback when gutter (Rinne) is selected.
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<bool> OnGutterClicked { get; set; }
|
||||
|
||||
private string GetThrowModeDisplay() => ThrowPanelState.ThrowMode switch
|
||||
{
|
||||
ThrowMode.Reposition => "In die Vollen",
|
||||
ThrowMode.Decrease => "Abräumen",
|
||||
_ => "Unbekannt"
|
||||
};
|
||||
|
||||
private async Task HandleGutterClick(bool isLeft)
|
||||
{
|
||||
if (!IsInteractive)
|
||||
return;
|
||||
|
||||
await OnGutterClicked.InvokeAsync(isLeft);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
using Koogle.Domain.Enums;
|
||||
|
||||
namespace Koogle.Web.Components.Game;
|
||||
|
||||
/// <summary>
|
||||
/// Represents the result of a throw.
|
||||
/// </summary>
|
||||
public record ThrowResult
|
||||
{
|
||||
/// <summary>
|
||||
/// Number of pins knocked down.
|
||||
/// </summary>
|
||||
public int FallenPins { get; init; }
|
||||
|
||||
/// <summary>
|
||||
/// Whether the throw went into the gutter.
|
||||
/// </summary>
|
||||
public bool IsGutter { get; init; }
|
||||
|
||||
/// <summary>
|
||||
/// Whether it was the left gutter (if IsGutter is true).
|
||||
/// </summary>
|
||||
public bool IsLeftGutter { get; init; }
|
||||
|
||||
/// <summary>
|
||||
/// Whether the bell was active for this throw.
|
||||
/// </summary>
|
||||
public bool BellValue { get; init; }
|
||||
|
||||
/// <summary>
|
||||
/// Individual pin states after the throw.
|
||||
/// </summary>
|
||||
public PinStatus[] PinStates { get; init; } = [];
|
||||
|
||||
/// <summary>
|
||||
/// Checks if this is a strike (all 9 pins).
|
||||
/// </summary>
|
||||
public bool IsStrike => FallenPins == 9;
|
||||
|
||||
/// <summary>
|
||||
/// Checks if this is a circle/wreath (8 outer pins, center standing).
|
||||
/// </summary>
|
||||
public bool IsCircle => FallenPins == 8 && PinStates.Length == 9 && PinStates[4] == PinStatus.Standing;
|
||||
}
|
||||
Loading…
Reference in New Issue