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