chk
/
KoogleApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: chk:6c0cb35842fe8306599ea05587e2b241ede6a5e1
Branches Tags
chk:main
chk:fuchsjagd
chk:feature/d2-person-pages
chk:feature/d1-person-state-fluxor
chk:feature/c2-club-pages
...
compare: chk:310cc0e2ec8ca05b6196b40c11423301d0db631f
Branches Tags
chk:main
chk:fuchsjagd
chk:feature/d2-person-pages
chk:feature/d1-person-state-fluxor
chk:feature/c2-club-pages

2 Commits
6c0cb35842 ... 310cc0e2ec

Author SHA1 Message Date
beo3000 310cc0e2ec layout optimization for tablets 2026-01-09 10:59:15 +01:00
beo3000 325bf5b002 added manifest and icons 2026-01-09 09:54:43 +01:00
6 changed files with 122 additions and 54 deletions
Show Stats Expand all files Collapse all files

4
.claude/settings.local.json
View File

@ -18,7 +18,9 @@
"Bash(cat:*)", "Bash(cat:*)",
"Bash(dir:*)", "Bash(dir:*)",
"Bash(dotnet add:*)", "Bash(dotnet add:*)",
"Bash(del \"C:\\\\work\\\\chrka\\\\Koogle2025\\\\KoogleApp\\\\src\\\\Koogle.Application\\\\DTOs\\\\DayProtocolDto.cs\")" "Bash(del \"C:\\\\work\\\\chrka\\\\Koogle2025\\\\KoogleApp\\\\src\\\\Koogle.Application\\\\DTOs\\\\DayProtocolDto.cs\")",
"Bash(ls -la \"C:\\\\work\\\\chrka\\\\Koogle2025\\\\KoogleApp\\\\src\\\\Koogle.Web\\\\wwwroot\"\" | grep -E \"icon)",
"Bash(png \")"
] ]
} }
} }

8
src/Koogle.Web/Components/App.razor
View File

@ -3,7 +3,13 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="KOOGLE" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="manifest" href="manifest.webmanifest" />
<link rel="apple-touch-icon" href="icon-192.png" />
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="@Assets["app.css"]" /> <link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["Koogle.Web.styles.css"]" /> <link rel="stylesheet" href="@Assets["Koogle.Web.styles.css"]" />

141
src/Koogle.Web/Components/Game/GameInputPanel.razor
View File

@ -14,72 +14,77 @@
@GameState.Value.ThrowPanelBefore *@ @GameState.Value.ThrowPanelBefore *@
<div class="game-input-panel"> <div class="game-input-panel">
@* Current player display *@ @* Left column: Player + Pins *@
<div class="current-player-section"> <div class="left-column">
<MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText> @* Current player display *@
<MudText Typo="Typo.h4" Class="player-name"> <div class="current-player-section">
@(CurrentPlayerName ?? "Kein Spieler") <MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText>
</MudText> <MudText Typo="Typo.h4" Class="player-name">
@if (GameState.Value.Participants.Mode == ParticipantsMode.FreeToChoose) @(CurrentPlayerName ?? "Kein Spieler")
</MudText>
@if (GameState.Value.Participants.Mode == ParticipantsMode.FreeToChoose)
{
<MudButton Variant="Variant.Outlined"
Color="Color.Warning"
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.ThrowPanelAfter"
IsInteractive="@IsInteractive"
OnPinClicked="HandlePinClick" />
</div>
@* Number quick-entry (below pins) *@
@if (@GameState.Value.ThrowPanelAfter.ThrowMode == ThrowMode.Reposition)
{ {
<MudButton Variant="Variant.Outlined" <div class="number-input-section">
Color="Color.Warning" <NumberPanel IsInteractive="@IsInteractive"
Size="Size.Small" CanConfirmThrow="@CanConfirmThrow"
OnClick="ShowPlayerSelector" SelectedNumber="@_selectedNumber"
StartIcon="@Icons.Material.Filled.SwapHoriz"> OnNumberClicked="HandleNumberClick" />
Spieler wechseln </div>
</MudButton>
} }
</div> </div>
@* Pin input area *@ @* Right column: Controls *@
<div class="pin-input-section"> <div class="right-column">
<PinPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter" <ConfirmPanel IsInteractive="@IsInteractive"
IsInteractive="@IsInteractive" CanConfirmThrow="@CanConfirmThrow"
OnPinClicked="HandlePinClick" /> OnBellClicked="HandleBellClick"
</div> OnThrowConfirmed="HandleThrowConfirmed"/>
@* Throw info and controls *@
@if (@GameState.Value.ThrowPanelAfter.ThrowMode == ThrowMode.Reposition) <div class="throw-control-section">
{ <ThrowPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
@* Number quick-entry *@ IsInteractive="@IsInteractive"
<div class="number-input-section"> OnGutterClicked="HandleGutterClick" />
<NumberPanel IsInteractive="@IsInteractive"
CanConfirmThrow="@CanConfirmThrow"
SelectedNumber="@_selectedNumber"
OnNumberClicked="HandleNumberClick" />
</div> </div>
}
<ConfirmPanel IsInteractive="@IsInteractive" @* Undo/Redo buttons *@
CanConfirmThrow="@CanConfirmThrow" <div class="undo-section">
OnBellClicked="HandleBellClick" <UndoRedoButtons IsDisabled="@GameState.Value.IsSaving" />
OnThrowConfirmed="HandleThrowConfirmed"/> </div>
@* Throw info and controls *@ @* Game-specific actions *@
<div class="throw-control-section"> <GameActionPanel />
<ThrowPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
IsInteractive="@IsInteractive"
OnGutterClicked="HandleGutterClick" />
</div> </div>
@* Undo/Redo buttons *@ @* Error display (full width) *@
<div class="undo-section">
<UndoRedoButtons IsDisabled="@GameState.Value.IsSaving" />
</div>
@* Game-specific actions *@
<GameActionPanel />
@* Error display *@
@if (!string.IsNullOrEmpty(GameState.Value.Error)) @if (!string.IsNullOrEmpty(GameState.Value.Error))
{ {
<MudAlert Severity="Severity.Error" Class="mt-2"> <MudAlert Severity="Severity.Error" Class="mt-2 error-section">
@GameState.Value.Error @GameState.Value.Error
</MudAlert> </MudAlert>
} }
@* Saving indicator *@ @* Saving indicator (full width) *@
@if (GameState.Value.IsSaving) @if (GameState.Value.IsSaving)
{ {
<div class="saving-indicator"> <div class="saving-indicator">
@ -95,10 +100,44 @@
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
padding: 16px; padding: 16px;
max-width: 500px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
} }
.left-column {
display: flex;
flex-direction: column;
gap: 16px;
}
.right-column {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Tablet and larger: two-column layout */
@@media (min-width: 768px) {
.game-input-panel {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
gap: 24px;
align-items: start;
}
.error-section,
.saving-indicator {
grid-column: 1 / -1;
}
}
/* Mobile: stack everything vertically */
@@media (max-width: 767px) {
.game-input-panel {
max-width: 500px;
}
}
.current-player-section { .current-player-section {
text-align: center; text-align: center;
padding: 16px; padding: 16px;

BIN
src/Koogle.Web/wwwroot/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/Koogle.Web/wwwroot/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

21
src/Koogle.Web/wwwroot/manifest.webmanifest Normal file
View File

@ -0,0 +1,21 @@
{
"name": "KOOGLE",
"short_name": "KOOGLE",
"description": "Club Management App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#594AE2",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}