refactor: extract reusable library
- move reusable domain, data, state, ui code into src/lib - update host screens to consume new library exports - document architecture and configure path aliases - bump astro integration dependencies for compatibility Refs #30
This commit is contained in:
Frank Schwenk
+14
-10
@@ -1,20 +1,24 @@
|
||||
import { h } from 'preact';
|
||||
import { useEffect, useCallback } from 'preact/hooks';
|
||||
|
||||
import { useGameState } from '../hooks/useGameState';
|
||||
import { useNavigation, useNewGameWizard } from '../hooks/useNavigation';
|
||||
import { useModal, useValidationModal, useCompletionModal } from '../hooks/useModal';
|
||||
import {
|
||||
useGameState,
|
||||
useNavigation,
|
||||
useNewGameWizard,
|
||||
useModal,
|
||||
useValidationModal,
|
||||
useCompletionModal,
|
||||
} from '@lib/state';
|
||||
import { GameService } from '@lib/data/gameService';
|
||||
import type { StandardGame, Game, EndlosGame } from '@lib/domain/types';
|
||||
|
||||
import { GameService } from '../services/gameService';
|
||||
import type { StandardGame, Game, EndlosGame } from '../types/game';
|
||||
|
||||
import { Layout } from './ui/Layout';
|
||||
import { Layout } from '@lib/ui/Layout';
|
||||
import GameListScreen from './screens/GameListScreen';
|
||||
import NewGameScreen from './screens/NewGameScreen';
|
||||
import GameDetailScreen from './screens/GameDetailScreen';
|
||||
import Modal from './Modal';
|
||||
import ValidationModal from './ValidationModal';
|
||||
import GameCompletionModal from './GameCompletionModal';
|
||||
import Modal from '@lib/ui/Modal';
|
||||
import ValidationModal from '@lib/ui/ValidationModal';
|
||||
import GameCompletionModal from '@lib/features/game-lifecycle/GameCompletionModal';
|
||||
import FullscreenToggle from './FullscreenToggle';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
/* Only GameCompletionModal-specific styles. Shared modal styles are now in Modal.module.css */
|
||||
.final-scores {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.final-score {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 18px 0;
|
||||
margin-bottom: 8px;
|
||||
background: #333;
|
||||
border-radius: 8px;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
}
|
||||
.final-score .player-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.final-score .score {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.winner-announcement {
|
||||
text-align: center;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 32px 16px 24px 16px; /* extra top padding to keep icons inside */
|
||||
background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
|
||||
border-radius: 16px;
|
||||
font-size: 1.2rem;
|
||||
color: #222;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
|
||||
animation: celebrationPulse 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
overflow: visible; /* avoid clipping decorative icons */
|
||||
}
|
||||
|
||||
.winner-announcement::before {
|
||||
content: '🎉';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 20px;
|
||||
font-size: 24px;
|
||||
animation: bounce 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.winner-announcement::after {
|
||||
content: '🏆';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 20px;
|
||||
font-size: 24px;
|
||||
animation: bounce 1s ease-in-out infinite 0.5s;
|
||||
}
|
||||
|
||||
.winner-announcement h3 {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@keyframes celebrationPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 12px 40px rgba(255, 152, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 18px 0;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: #333;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn--warning {
|
||||
background: #f44336;
|
||||
}
|
||||
.btn:not(.btn--warning):hover {
|
||||
background: #444;
|
||||
}
|
||||
.btn--warning:hover {
|
||||
background: #d32f2f;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.btn {
|
||||
font-size: 1rem;
|
||||
padding: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
color: #495057;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.player-name-stats {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.95rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.stat-item strong {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { h } from 'preact';
|
||||
import modalStyles from './Modal.module.css';
|
||||
import modalStyles from '@lib/ui/Modal.module.css';
|
||||
import styles from './GameCompletionModal.module.css';
|
||||
import type { Game } from '../types/game';
|
||||
import type { Game } from '@lib/domain/types';
|
||||
|
||||
interface GameCompletionModalProps {
|
||||
open: boolean;
|
||||
|
||||
@@ -1,473 +0,0 @@
|
||||
/* GameDetail-specific styles only. Shared utility classes are now in global CSS. */
|
||||
.screen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
.screen.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
position: relative;
|
||||
}
|
||||
.screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
min-height: 0;
|
||||
}
|
||||
.game-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: var(--space-md);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.game-title {
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.game-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.scores-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
min-height: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.player-score {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.player-score:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
.player-score:first-child {
|
||||
background-color: #43a047;
|
||||
}
|
||||
.player-score:nth-child(2) {
|
||||
background-color: #1565c0;
|
||||
}
|
||||
.player-score:nth-child(3) {
|
||||
background-color: #333;
|
||||
}
|
||||
.player-name {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #fff 0%, #f0f0f0 100%);
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.game-status {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.game-status.active {
|
||||
background: #4caf50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.game-status.completed {
|
||||
background: #ff9800;
|
||||
color: #222;
|
||||
}
|
||||
.score {
|
||||
font-size: 40vh;
|
||||
font-weight: 900;
|
||||
margin: 20px 0 30px 0;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-shadow: 0 4px 16px rgba(0,0,0,0.6);
|
||||
text-align: center;
|
||||
display: block;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.score-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
.score-button {
|
||||
background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
|
||||
color: #222;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 8px;
|
||||
box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.score-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
|
||||
background: linear-gradient(135deg, #ffa726 0%, #ffb74d 100%);
|
||||
}
|
||||
|
||||
.score-button:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.score-button:disabled {
|
||||
background: #666;
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.game-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.control-button {
|
||||
flex: 1;
|
||||
padding: 30px;
|
||||
background: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.control-button.delete {
|
||||
background: #f44336;
|
||||
}
|
||||
.game-detail-controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
margin: 40px 0 0 0;
|
||||
padding-bottom: var(--space-xl);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.franky .player-name {
|
||||
font-weight: bold;
|
||||
color: #ff8c00; /* Example color */
|
||||
}
|
||||
.active-player {
|
||||
position: relative;
|
||||
border: 4px solid #ff9800;
|
||||
box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15);
|
||||
background: linear-gradient(90deg, #ff9800 0 8px, rgba(255,152,0,0.15) 8px 100%);
|
||||
color: #222 !important;
|
||||
animation: activePulse 1.2s infinite alternate;
|
||||
z-index: 2;
|
||||
}
|
||||
.active-player .player-name, .active-player .score {
|
||||
color: #222 !important;
|
||||
text-shadow: 0 2px 8px rgba(255,255,255,0.25);
|
||||
}
|
||||
.active-player::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0;
|
||||
width: 8px;
|
||||
background: #ff9800;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
@keyframes activePulse {
|
||||
0% { box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15); }
|
||||
100% { box-shadow: 0 0 48px 16px #ff9800, 0 0 0 16px rgba(255,152,0,0.22); }
|
||||
}
|
||||
.turn-indicator {
|
||||
margin: 20px 0;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.potted-balls-container {
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
background: #2a2a2a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.potted-balls-header {
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.potted-balls-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.potted-ball-btn {
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #444;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, transform 0.2s;
|
||||
}
|
||||
.potted-ball-btn:hover:not(:disabled) {
|
||||
background-color: #45a049;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.potted-ball-btn:disabled {
|
||||
background-color: #222;
|
||||
color: #555;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rerack-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.rerack-btn {
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #444;
|
||||
background-color: #3a539b;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.rerack-btn:hover {
|
||||
background-color: #4a6fbf;
|
||||
}
|
||||
|
||||
.foul-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.foul-btn {
|
||||
flex-grow: 1;
|
||||
background-color: #ffc107; /* Amber */
|
||||
color: #212529;
|
||||
border: none;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.foul-btn:hover {
|
||||
background-color: #ffca2c;
|
||||
}
|
||||
|
||||
.foul-btn:disabled {
|
||||
background-color: #e0e0e0;
|
||||
color: #9e9e9e;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.foul-indicator {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #c0392b;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.foul-warning {
|
||||
background-color: #f39c12;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Game Log Styles */
|
||||
.game-log {
|
||||
width: 100%;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.log-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.log-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
padding: 0.5rem 0.25rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.log-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.game-log-table-container {
|
||||
margin: 2.5rem auto 0 auto;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
background: #181818;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.12);
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
.game-log-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 1.05rem;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
}
|
||||
.game-log-table th, .game-log-table td {
|
||||
border: 1px solid #444;
|
||||
padding: 0.5rem 0.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
.game-log-table th {
|
||||
background: #333;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.game-log-table tr:nth-child(even) td {
|
||||
background: #232323;
|
||||
}
|
||||
.game-log-table tr:nth-child(odd) td {
|
||||
background: #181818;
|
||||
}
|
||||
.game-log-table .log-player-col {
|
||||
background: #222;
|
||||
color: #ff9800;
|
||||
font-size: 1.15rem;
|
||||
border-bottom: 2px solid #ff9800;
|
||||
}
|
||||
|
||||
.turn-change-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 2.5rem 0 1.5rem 0;
|
||||
}
|
||||
.turn-change-btn {
|
||||
background: #ff9800;
|
||||
color: #222;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
padding: 2rem 4rem;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 4px 32px rgba(255,152,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
|
||||
letter-spacing: 1px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.turn-change-btn:hover, .turn-change-btn:focus {
|
||||
background: #ffa726;
|
||||
color: #111;
|
||||
box-shadow: 0 6px 40px rgba(255,152,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
|
||||
}
|
||||
.pending-foul-info {
|
||||
margin-left: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
color: #ffc107;
|
||||
font-weight: 700;
|
||||
}
|
||||
.selected {
|
||||
outline: 3px solid #ff9800 !important;
|
||||
background: #fff3e0 !important;
|
||||
color: #222 !important;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { h } from 'preact';
|
||||
import { useState } from 'preact/hooks';
|
||||
import styles from './GameDetail.module.css';
|
||||
import type { Game, EndlosGame } from '../types/game';
|
||||
import type { Game, EndlosGame } from '@lib/domain/types';
|
||||
|
||||
interface GameDetailProps {
|
||||
game: Game | undefined;
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
/* GameHistory-specific styles only. Shared utility classes are now in global CSS. */
|
||||
.screen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
.screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.screen-title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -1,284 +0,0 @@
|
||||
/* GameList-specific styles using design system tokens */
|
||||
.screen.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding: var(--space-lg);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.screen-title {
|
||||
font-size: var(--font-size-xxl);
|
||||
margin-bottom: var(--space-lg);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.game-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Filter buttons with improved symmetry */
|
||||
.filter-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-sm);
|
||||
margin: var(--space-lg) 0 var(--space-md) 0;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--space-md) 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-base);
|
||||
min-height: var(--touch-target-comfortable);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
background: var(--color-secondary-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Games container with improved spacing */
|
||||
.games-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
margin-top: var(--space-lg);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-height: 0;
|
||||
padding-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* Game item with better symmetry and spacing */
|
||||
.game-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.game-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.game-item.active {
|
||||
background: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.game-item.completed {
|
||||
background: var(--color-surface);
|
||||
opacity: 0.8;
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* Game info with improved layout */
|
||||
.game-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.game-type {
|
||||
font-weight: 700;
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
background: var(--color-secondary);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.player-names {
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.game-scores {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: var(--color-primary);
|
||||
min-width: 120px;
|
||||
background: var(--color-background);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Delete button with improved touch target */
|
||||
.delete-button {
|
||||
width: var(--touch-target-comfortable);
|
||||
height: var(--touch-target-comfortable);
|
||||
border: none;
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: var(--font-size-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.delete-button::before {
|
||||
content: '🗑️';
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
background: #cc0000;
|
||||
transform: scale(1.05);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.delete-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Empty state styling */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--space-xxl);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-lg);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 2px dashed var(--color-border);
|
||||
}
|
||||
|
||||
/* Page header */
|
||||
.page-header {
|
||||
font-size: var(--font-size-xxxl);
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface);
|
||||
padding: var(--space-lg) 0 var(--space-md) 0;
|
||||
margin-bottom: var(--space-sm);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
/* Tablet-specific improvements */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.screen-content {
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
gap: var(--space-md);
|
||||
margin: var(--space-xl) 0 var(--space-lg) 0;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
font-size: var(--font-size-lg);
|
||||
padding: var(--space-lg) 0;
|
||||
min-height: var(--touch-target-comfortable);
|
||||
}
|
||||
|
||||
.game-item {
|
||||
padding: var(--space-xl);
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.game-info {
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.game-type {
|
||||
font-size: var(--font-size-xl);
|
||||
min-width: 150px;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
}
|
||||
|
||||
.player-names {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.game-scores {
|
||||
font-size: var(--font-size-xxl);
|
||||
min-width: 150px;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
font-size: var(--font-size-xl);
|
||||
padding: var(--space-xxl) var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 767px) {
|
||||
.screen-content {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.game-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.game-type,
|
||||
.game-scores {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { h } from 'preact';
|
||||
import { Card } from './ui/Card';
|
||||
import { Button } from './ui/Button';
|
||||
import { Card } from '@lib/ui/Card';
|
||||
import { Button } from '@lib/ui/Button';
|
||||
import styles from './GameList.module.css';
|
||||
import type { Game, GameFilter, StandardGame } from '../types/game';
|
||||
import type { Game, GameFilter, StandardGame } from '@lib/domain/types';
|
||||
|
||||
interface GameListProps {
|
||||
games: Game[];
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
/* Consolidated modal styles for all modals */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
}
|
||||
.modal.show {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #2a2a2a;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.close-button {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: #888;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.close-button:hover {
|
||||
color: white;
|
||||
}
|
||||
.modal-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
.modal-button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
.modal-button.cancel {
|
||||
background-color: #444;
|
||||
color: white;
|
||||
}
|
||||
.modal-button.confirm {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
.modal-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import styles from './Modal.module.css';
|
||||
|
||||
interface ModalProps {
|
||||
open: boolean;
|
||||
title: string;
|
||||
message: string;
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generic modal dialog for confirmation.
|
||||
*/
|
||||
const Modal = ({ open, title, message, onCancel, onConfirm }: ModalProps) => {
|
||||
if (!open) return null;
|
||||
return (
|
||||
<div className={styles['modal'] + ' ' + styles['show']} role="dialog" aria-modal="true" aria-labelledby="modal-title">
|
||||
<div className={styles['modal-content']}>
|
||||
<div className={styles['modal-header']}>
|
||||
<span className={styles['modal-title']} id="modal-title">{title}</span>
|
||||
<button className={styles['close-button']} onClick={onCancel} aria-label="Schließen">×</button>
|
||||
</div>
|
||||
<div className={styles['modal-body']}>
|
||||
<div className={styles['modal-message']}>{message}</div>
|
||||
</div>
|
||||
<div className={styles['modal-footer']}>
|
||||
<button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
|
||||
<button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm} aria-label="Löschen">Löschen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
@@ -1,431 +0,0 @@
|
||||
/* NewGame-specific styles only. Shared utility classes are now in global CSS. */
|
||||
.screen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: transform var(--transition-slow), opacity var(--transition-slow);
|
||||
}
|
||||
.screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: var(--space-lg);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
min-height: 0;
|
||||
}
|
||||
.screen-title {
|
||||
font-size: clamp(1.25rem, 3vh, 1.5rem);
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin-bottom: clamp(0.5rem, 2vh, 2rem);
|
||||
letter-spacing: 0.5px;
|
||||
text-align: center;
|
||||
}
|
||||
.player-inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-xl);
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.player-input {
|
||||
background: var(--color-background);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-lg);
|
||||
border: 2px solid var(--color-border);
|
||||
transition: border-color var(--transition-base);
|
||||
position: relative;
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.player-input:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-light);
|
||||
}
|
||||
.player-input label {
|
||||
display: block;
|
||||
margin-bottom: clamp(0.5rem, 2vh, 1rem);
|
||||
color: var(--color-text);
|
||||
font-size: clamp(1rem, 2.5vh, 1.125rem);
|
||||
font-weight: 600;
|
||||
}
|
||||
.name-input-container {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
position: relative;
|
||||
}
|
||||
.name-input {
|
||||
flex: 1;
|
||||
padding: var(--space-md);
|
||||
border: 2px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-base);
|
||||
min-height: var(--touch-target-comfortable);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
.name-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-light);
|
||||
}
|
||||
.game-settings {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
.setting-group {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
.setting-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
.setting-group select, .setting-group input {
|
||||
width: 100%;
|
||||
padding: var(--space-md);
|
||||
border: 2px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-base);
|
||||
min-height: var(--touch-target-comfortable);
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color var(--transition-base);
|
||||
}
|
||||
.setting-group input:focus, .setting-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-light);
|
||||
}
|
||||
.validation-error {
|
||||
color: var(--color-danger);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-danger);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: var(--font-size-base);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.new-game-form {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: var(--space-xl) auto 0 auto;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--color-border);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
flex-shrink: 0;
|
||||
padding: clamp(0.5rem, 2vh, 2rem) var(--space-lg) clamp(0.25rem, 1vh, 1rem) var(--space-lg);
|
||||
}
|
||||
|
||||
.form-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0 var(--space-lg);
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
.progress-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: clamp(0.5rem, 1.5vw, 1rem);
|
||||
margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
|
||||
}
|
||||
.progress-dot {
|
||||
width: clamp(10px, 2vh, 16px);
|
||||
height: clamp(10px, 2vh, 16px);
|
||||
border-radius: 50%;
|
||||
background: var(--color-border);
|
||||
opacity: 0.4;
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
}
|
||||
.progress-dot.active {
|
||||
background: var(--color-primary);
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
box-shadow: 0 0 0 4px var(--color-primary-light);
|
||||
}
|
||||
.quick-pick-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.quick-pick-btn {
|
||||
min-width: 60px;
|
||||
min-height: 36px;
|
||||
font-size: clamp(0.75rem, 2vw, 1rem);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
padding: 0.4rem 0.8rem;
|
||||
transition: all var(--transition-base);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.quick-pick-btn:hover, .quick-pick-btn:focus {
|
||||
background: var(--color-secondary-hover);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
outline: none;
|
||||
}
|
||||
.arrow-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: var(--space-xxl);
|
||||
width: 100%;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
.arrow-btn {
|
||||
font-size: 48px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: var(--shadow-md);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-base);
|
||||
font-weight: bold;
|
||||
}
|
||||
.arrow-btn:hover, .arrow-btn:focus {
|
||||
background: var(--color-secondary-hover);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
outline: none;
|
||||
}
|
||||
.arrow-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.clear-input-btn {
|
||||
position: absolute;
|
||||
right: var(--space-sm);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-text-muted);
|
||||
padding: var(--space-xs);
|
||||
z-index: 2;
|
||||
transition: color var(--transition-base);
|
||||
border-radius: var(--radius-sm);
|
||||
min-height: var(--touch-target-min);
|
||||
min-width: var(--touch-target-min);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.clear-input-btn:hover, .clear-input-btn:focus {
|
||||
color: var(--color-text);
|
||||
background: var(--color-secondary);
|
||||
outline: none;
|
||||
}
|
||||
.game-type-selection {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
width: 100%;
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
.game-type-btn {
|
||||
background: var(--color-background);
|
||||
border: 2px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
padding: var(--space-xl);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all var(--transition-base);
|
||||
min-height: var(--touch-target-comfortable);
|
||||
}
|
||||
.game-type-btn:hover {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.game-type-btn.selected {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.race-to-selection {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
gap: var(--space-md);
|
||||
width: 100%;
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
.race-to-btn {
|
||||
background: var(--color-background);
|
||||
border: 2px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
padding: var(--space-lg) var(--space-sm);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all var(--transition-base);
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.race-to-btn:hover {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.race-to-btn.selected {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
/* Match selected styling for quick pick buttons used in BreakRuleStep */
|
||||
.quick-pick-btn.selected {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.custom-race-to {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
margin-top: var(--space-lg);
|
||||
align-items: center;
|
||||
}
|
||||
.custom-race-to input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.custom-race-to .arrow-btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.endlos-container {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.endlos-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.player1-input.player-input {
|
||||
border-color: var(--color-success);
|
||||
background: linear-gradient(135deg, var(--color-success) 0%, rgba(76, 175, 80, 0.1) 100%);
|
||||
}
|
||||
.player2-input.player-input {
|
||||
border-color: #1565c0;
|
||||
background: linear-gradient(135deg, #1565c0 0%, rgba(21, 101, 192, 0.1) 100%);
|
||||
}
|
||||
.player3-input.player-input {
|
||||
border-color: var(--color-secondary);
|
||||
background: linear-gradient(135deg, var(--color-secondary) 0%, rgba(51, 51, 51, 0.1) 100%);
|
||||
}
|
||||
.player1-input.player-input input,
|
||||
.player2-input.player-input input,
|
||||
.player3-input.player-input input {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.screen-content {
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
.new-game-form {
|
||||
max-width: 700px;
|
||||
padding: var(--space-xxl) var(--space-xl) var(--space-xl) var(--space-xl);
|
||||
}
|
||||
.screen-title {
|
||||
font-size: var(--font-size-xxxl);
|
||||
}
|
||||
.arrow-btn {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 56px;
|
||||
}
|
||||
.game-type-btn,
|
||||
.race-to-btn {
|
||||
padding: var(--space-xl);
|
||||
font-size: var(--font-size-xl);
|
||||
min-height: var(--touch-target-comfortable);
|
||||
}
|
||||
.quick-pick-btn {
|
||||
min-height: var(--touch-target-comfortable);
|
||||
font-size: var(--font-size-lg);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.screen-content {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
.new-game-form {
|
||||
margin: var(--space-lg) auto 0 auto;
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
.game-type-selection {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.race-to-selection {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.arrow-nav {
|
||||
gap: var(--space-md);
|
||||
}
|
||||
.arrow-btn {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
@@ -22,7 +22,7 @@ import { GameTypeStep } from './new-game/GameTypeStep';
|
||||
import { RaceToStep } from './new-game/RaceToStep';
|
||||
import { BreakRuleStep } from './new-game/BreakRuleStep';
|
||||
import { BreakOrderStep } from './new-game/BreakOrderStep';
|
||||
import type { BreakRule } from '../types/game';
|
||||
import type { BreakRule } from '@lib/domain/types';
|
||||
|
||||
// PlayerSelectModal moved to ./new-game/PlayerSelectModal
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
import { h } from "preact";
|
||||
@@ -1,70 +0,0 @@
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
background: #2c2c2c;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.modalHeader h3 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.playerList {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.playerItem {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.playerItem:hover {
|
||||
background: #555;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import styles from './Modal.module.css';
|
||||
|
||||
interface ValidationModalProps {
|
||||
open: boolean;
|
||||
message: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal for displaying validation errors.
|
||||
*/
|
||||
const ValidationModal = ({ open, message, onClose }: ValidationModalProps) => {
|
||||
if (!open) return null;
|
||||
return (
|
||||
<div className={styles['modal'] + ' ' + styles['show']} id="validation-modal" role="alertdialog" aria-modal="true" aria-labelledby="validation-modal-title">
|
||||
<div className={styles['modal-content']}>
|
||||
<div className={styles['modal-header']}>
|
||||
<span className={styles['modal-title']} id="validation-modal-title">Fehler</span>
|
||||
<button className={styles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
|
||||
</div>
|
||||
<div className={styles['modal-body']}>
|
||||
<div className={styles['modal-message']}>{message}</div>
|
||||
</div>
|
||||
<div className={styles['modal-footer']}>
|
||||
<button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onClose} aria-label="OK">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ValidationModal;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { h } from 'preact';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import styles from '../NewGame.module.css';
|
||||
import type { BreakRule } from '../../types/game';
|
||||
import type { BreakRule } from '@lib/domain/types';
|
||||
|
||||
interface BreakOrderStepProps {
|
||||
players: string[];
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { h } from 'preact';
|
||||
import { useState } from 'preact/hooks';
|
||||
import styles from '../NewGame.module.css';
|
||||
import type { BreakRule } from '../../types/game';
|
||||
import type { BreakRule } from '@lib/domain/types';
|
||||
|
||||
interface BreakRuleStepProps {
|
||||
onNext: (rule: BreakRule) => void;
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import { useState } from 'preact/hooks';
|
||||
import styles from '../NewGame.module.css';
|
||||
|
||||
interface GameTypeStepProps {
|
||||
onNext: (type: string) => void;
|
||||
onCancel: () => void;
|
||||
initialValue?: string;
|
||||
}
|
||||
|
||||
export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps) => {
|
||||
const [gameType, setGameType] = useState(initialValue);
|
||||
const gameTypes = ['8-Ball', '9-Ball', '10-Ball'];
|
||||
|
||||
const handleSelect = (selectedType: string) => {
|
||||
setGameType(selectedType);
|
||||
onNext(selectedType);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (gameType) {
|
||||
onNext(gameType);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen">
|
||||
<div className={styles['form-header']}>
|
||||
<div className={styles['screen-title']}>Spielart auswählen</div>
|
||||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles['form-content']}>
|
||||
<div className={styles['game-type-selection']}>
|
||||
{gameTypes.map(type => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
className={`${styles['game-type-btn']} ${gameType === type ? styles.selected : ''}`}
|
||||
onClick={() => handleSelect(type)}
|
||||
>
|
||||
{type}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles['form-footer']}>
|
||||
<div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Zurück"
|
||||
onClick={onCancel}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Weiter"
|
||||
disabled={!gameType}
|
||||
style={{
|
||||
fontSize: 48,
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: '50%',
|
||||
background: '#222',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
||||
cursor: 'pointer',
|
||||
opacity: !gameType ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,256 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import styles from '../NewGame.module.css';
|
||||
import { UI_CONSTANTS, ERROR_MESSAGES, ARIA_LABELS, FORM_CONFIG, ERROR_STYLES } from '../../utils/constants';
|
||||
import { PlayerSelectModal } from './PlayerSelectModal';
|
||||
|
||||
interface PlayerStepProps {
|
||||
playerNameHistory: string[];
|
||||
onNext: (name: string) => void;
|
||||
onCancel: () => void;
|
||||
initialValue?: string;
|
||||
}
|
||||
|
||||
export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
|
||||
const [player1, setPlayer1] = useState(initialValue);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!player1) {
|
||||
setFilteredNames(playerNameHistory);
|
||||
} else {
|
||||
setFilteredNames(
|
||||
playerNameHistory.filter(name =>
|
||||
name.toLowerCase().includes(player1.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [player1, playerNameHistory]);
|
||||
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault();
|
||||
const trimmedName = player1.trim();
|
||||
if (!trimmedName) {
|
||||
setError(ERROR_MESSAGES.PLAYER1_REQUIRED);
|
||||
if (inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
inputRef.current.setAttribute('aria-invalid', 'true');
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (trimmedName.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH) {
|
||||
setError(`Spielername darf maximal ${FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen lang sein`);
|
||||
if (inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
inputRef.current.setAttribute('aria-invalid', 'true');
|
||||
}
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
if (inputRef.current) {
|
||||
inputRef.current.setAttribute('aria-invalid', 'false');
|
||||
}
|
||||
onNext(trimmedName);
|
||||
};
|
||||
|
||||
const handleQuickPick = (name: string) => {
|
||||
setError(null);
|
||||
onNext(name);
|
||||
};
|
||||
|
||||
const handleModalSelect = (name: string) => {
|
||||
setIsModalOpen(false);
|
||||
handleQuickPick(name);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setPlayer1('');
|
||||
setError(null);
|
||||
if (inputRef.current) inputRef.current.focus();
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off">
|
||||
<div className={styles['form-header']}>
|
||||
<div className={styles['screen-title']}>Name Spieler 1</div>
|
||||
<div className={styles['progress-indicator']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}>
|
||||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles['form-content']}>
|
||||
<div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_LARGE, position: 'relative' }}>
|
||||
<label htmlFor="player1-input" style={{ fontSize: UI_CONSTANTS.LABEL_FONT_SIZE, fontWeight: 600 }}>Spieler 1</label>
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<input
|
||||
id="player1-input"
|
||||
className={styles['name-input']}
|
||||
placeholder="Name Spieler 1"
|
||||
value={player1}
|
||||
onInput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const value = target.value;
|
||||
setPlayer1(value);
|
||||
if (value.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH) {
|
||||
setError(`Spielername darf maximal ${FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen lang sein`);
|
||||
target.setAttribute('aria-invalid', 'true');
|
||||
} else if (value.trim() && error) {
|
||||
setError(null);
|
||||
target.setAttribute('aria-invalid', 'false');
|
||||
}
|
||||
}}
|
||||
autoComplete="off"
|
||||
aria-label="Name Spieler 1"
|
||||
aria-describedby="player1-help"
|
||||
style={{
|
||||
fontSize: UI_CONSTANTS.INPUT_FONT_SIZE,
|
||||
minHeight: UI_CONSTANTS.INPUT_MIN_HEIGHT,
|
||||
marginTop: 12,
|
||||
marginBottom: 12,
|
||||
width: '100%',
|
||||
paddingRight: UI_CONSTANTS.INPUT_PADDING_RIGHT
|
||||
}}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<div id="player1-help" className="sr-only">
|
||||
Geben Sie den Namen für Spieler 1 ein. Maximal {FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen erlaubt.
|
||||
</div>
|
||||
{player1.length > FORM_CONFIG.CHARACTER_COUNT_WARNING_THRESHOLD && (
|
||||
<div style={{
|
||||
fontSize: '0.875rem',
|
||||
color: player1.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH ? '#f44336' : '#ff9800',
|
||||
marginTop: '4px',
|
||||
textAlign: 'right'
|
||||
}}>
|
||||
{player1.length}/{FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen
|
||||
</div>
|
||||
)}
|
||||
{player1 && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles['clear-input-btn']}
|
||||
aria-label="Feld leeren"
|
||||
onClick={handleClear}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: 24,
|
||||
color: '#aaa',
|
||||
padding: 0,
|
||||
zIndex: 2
|
||||
}}
|
||||
tabIndex={0}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{filteredNames.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
|
||||
{filteredNames.slice(0, UI_CONSTANTS.MAX_QUICK_PICKS).map((name, idx) => (
|
||||
<button
|
||||
type="button"
|
||||
key={name + idx}
|
||||
className={styles['quick-pick-btn']}
|
||||
style={{
|
||||
fontSize: UI_CONSTANTS.QUICK_PICK_FONT_SIZE,
|
||||
padding: UI_CONSTANTS.QUICK_PICK_PADDING,
|
||||
borderRadius: 8,
|
||||
background: '#333',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => handleQuickPick(name)}
|
||||
aria-label={ARIA_LABELS.QUICK_PICK(name)}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
))}
|
||||
{playerNameHistory.length > UI_CONSTANTS.MAX_QUICK_PICKS && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles['quick-pick-btn']}
|
||||
style={{
|
||||
fontSize: UI_CONSTANTS.QUICK_PICK_FONT_SIZE,
|
||||
padding: UI_CONSTANTS.QUICK_PICK_PADDING,
|
||||
borderRadius: 8,
|
||||
background: '#333',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
aria-label={ARIA_LABELS.SHOW_MORE_PLAYERS}
|
||||
>
|
||||
...
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{error && (
|
||||
<div
|
||||
className={styles['validation-error']}
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
...ERROR_STYLES.CONTAINER
|
||||
}}
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span style={ERROR_STYLES.ICON}>⚠️</span>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles['form-footer']}>
|
||||
<div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Zurück"
|
||||
onClick={onCancel}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Weiter"
|
||||
disabled={!player1.trim()}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player1.trim() ? 0.5 : 1 }}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isModalOpen && (
|
||||
<PlayerSelectModal
|
||||
players={playerNameHistory}
|
||||
onSelect={handleModalSelect}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,155 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import styles from '../NewGame.module.css';
|
||||
|
||||
interface PlayerStepProps {
|
||||
playerNameHistory: string[];
|
||||
onNext: (name: string) => void;
|
||||
onCancel: () => void;
|
||||
initialValue?: string;
|
||||
}
|
||||
|
||||
export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
|
||||
const [player2, setPlayer2] = useState(initialValue);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!player2) {
|
||||
setFilteredNames(playerNameHistory);
|
||||
} else {
|
||||
setFilteredNames(
|
||||
playerNameHistory.filter(name =>
|
||||
name.toLowerCase().includes(player2.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [player2, playerNameHistory]);
|
||||
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!player2.trim()) {
|
||||
setError('Bitte Namen für Spieler 2 eingeben');
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
onNext(player2.trim());
|
||||
};
|
||||
|
||||
const handleQuickPick = (name: string) => {
|
||||
setError(null);
|
||||
onNext(name);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setPlayer2('');
|
||||
setError(null);
|
||||
if (inputRef.current) inputRef.current.focus();
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 2 Eingabe" autoComplete="off">
|
||||
<div className={styles['form-header']}>
|
||||
<div className={styles['screen-title']}>Name Spieler 2</div>
|
||||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles['form-content']}>
|
||||
<div className={styles['player-input'] + ' ' + styles['player2-input']} style={{ marginBottom: 32, position: 'relative' }}>
|
||||
<label htmlFor="player2-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 2</label>
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<input
|
||||
id="player2-input"
|
||||
className={styles['name-input']}
|
||||
placeholder="Name Spieler 2"
|
||||
value={player2}
|
||||
onInput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setPlayer2(target.value);
|
||||
}}
|
||||
autoComplete="off"
|
||||
aria-label="Name Spieler 2"
|
||||
style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
|
||||
ref={inputRef}
|
||||
/>
|
||||
{player2 && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles['clear-input-btn']}
|
||||
aria-label="Feld leeren"
|
||||
onClick={handleClear}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: 24,
|
||||
color: '#aaa',
|
||||
padding: 0,
|
||||
zIndex: 2
|
||||
}}
|
||||
tabIndex={0}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{filteredNames.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
|
||||
{filteredNames.slice(0, 10).map((name, idx) => (
|
||||
<button
|
||||
type="button"
|
||||
key={name + idx}
|
||||
className={styles['quick-pick-btn']}
|
||||
style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
|
||||
onClick={() => handleQuickPick(name)}
|
||||
aria-label={`Schnellauswahl: ${name}`}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
|
||||
</div>
|
||||
|
||||
<div className={styles['form-footer']}>
|
||||
<div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Zurück"
|
||||
onClick={onCancel}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Weiter"
|
||||
disabled={!player2.trim()}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player2.trim() ? 0.5 : 1 }}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,161 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import styles from '../NewGame.module.css';
|
||||
|
||||
interface PlayerStepProps {
|
||||
playerNameHistory: string[];
|
||||
onNext: (name: string) => void;
|
||||
onCancel: () => void;
|
||||
initialValue?: string;
|
||||
}
|
||||
|
||||
export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
|
||||
const [player3, setPlayer3] = useState(initialValue);
|
||||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!player3) {
|
||||
setFilteredNames(playerNameHistory);
|
||||
} else {
|
||||
setFilteredNames(
|
||||
playerNameHistory.filter(name =>
|
||||
name.toLowerCase().includes(player3.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [player3, playerNameHistory]);
|
||||
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault();
|
||||
onNext(player3.trim());
|
||||
};
|
||||
|
||||
const handleQuickPick = (name: string) => {
|
||||
onNext(name);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setPlayer3('');
|
||||
if (inputRef.current) inputRef.current.focus();
|
||||
};
|
||||
|
||||
const handleSkip = (e: Event) => {
|
||||
e.preventDefault();
|
||||
onNext('');
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
|
||||
<div className={styles['form-header']}>
|
||||
<div className={styles['screen-title']}>Name Spieler 3 (optional)</div>
|
||||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles['form-content']}>
|
||||
<div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
|
||||
<label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<input
|
||||
id="player3-input"
|
||||
className={styles['name-input']}
|
||||
placeholder="Name Spieler 3 (optional)"
|
||||
value={player3}
|
||||
onInput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setPlayer3(target.value);
|
||||
}}
|
||||
autoComplete="off"
|
||||
aria-label="Name Spieler 3"
|
||||
style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
|
||||
ref={inputRef}
|
||||
/>
|
||||
{player3 && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles['clear-input-btn']}
|
||||
aria-label="Feld leeren"
|
||||
onClick={handleClear}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: 24,
|
||||
color: '#aaa',
|
||||
padding: 0,
|
||||
zIndex: 2
|
||||
}}
|
||||
tabIndex={0}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{filteredNames.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
|
||||
{filteredNames.slice(0, 10).map((name, idx) => (
|
||||
<button
|
||||
type="button"
|
||||
key={name + idx}
|
||||
className={styles['quick-pick-btn']}
|
||||
style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
|
||||
onClick={() => handleQuickPick(name)}
|
||||
aria-label={`Schnellauswahl: ${name}`}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles['form-footer']}>
|
||||
<div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Zurück"
|
||||
onClick={onCancel}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSkip}
|
||||
className={styles['quick-pick-btn']}
|
||||
style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
|
||||
>
|
||||
Überspringen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Weiter"
|
||||
disabled={!player3.trim()}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player3.trim() ? 0.5 : 1 }}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import modalStyles from '../PlayerSelectModal.module.css';
|
||||
|
||||
interface PlayerSelectModalProps {
|
||||
players: string[];
|
||||
onSelect: (player: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const PlayerSelectModal = ({ players, onSelect, onClose }: PlayerSelectModalProps) => (
|
||||
<div className={modalStyles.modalOverlay} onClick={onClose}>
|
||||
<div className={modalStyles.modalContent} onClick={e => e.stopPropagation()}>
|
||||
<div className={modalStyles.modalHeader}>
|
||||
<h3>Alle Spieler</h3>
|
||||
<button className={modalStyles.closeButton} onClick={onClose}>×</button>
|
||||
</div>
|
||||
<div className={modalStyles.playerList}>
|
||||
{players.map(player => (
|
||||
<button key={player} className={modalStyles.playerItem} onClick={() => onSelect(player)}>
|
||||
{player}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import styles from '../NewGame.module.css';
|
||||
|
||||
interface RaceToStepProps {
|
||||
onNext: (raceTo: string | number) => void;
|
||||
onCancel: () => void;
|
||||
initialValue?: string | number;
|
||||
gameType?: string;
|
||||
}
|
||||
|
||||
export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToStepProps) => {
|
||||
const quickPicks = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
const defaultValue = 5;
|
||||
const [raceTo, setRaceTo] = useState<string | number>(initialValue !== '' ? initialValue : defaultValue);
|
||||
|
||||
useEffect(() => {
|
||||
if ((initialValue === '' || initialValue === undefined) && raceTo !== defaultValue) {
|
||||
setRaceTo(defaultValue);
|
||||
}
|
||||
if (initialValue !== '' && initialValue !== undefined && initialValue !== raceTo) {
|
||||
setRaceTo(initialValue);
|
||||
}
|
||||
}, [gameType, initialValue, defaultValue]);
|
||||
|
||||
const handleQuickPick = (value: number) => {
|
||||
const selected = value === 0 ? 'Infinity' : value;
|
||||
setRaceTo(selected);
|
||||
const raceToValue = selected === 'Infinity' ? Infinity : (parseInt(String(selected), 10) || 0);
|
||||
onNext(raceToValue);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setRaceTo(target.value);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault();
|
||||
const raceToValue = raceTo === 'Infinity' ? Infinity : (parseInt(String(raceTo), 10) || 0);
|
||||
onNext(raceToValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Race To auswählen">
|
||||
<div className={styles['screen-title']}>Race To auswählen</div>
|
||||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
</div>
|
||||
<div className={styles['endlos-container']}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles['race-to-btn']} ${styles['endlos-btn']} ${raceTo === 'Infinity' ? styles.selected : ''}`}
|
||||
onClick={() => handleQuickPick(0)}
|
||||
>
|
||||
Endlos
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles['race-to-selection']}>
|
||||
{quickPicks.map(value => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
className={`${styles['race-to-btn']} ${parseInt(String(raceTo), 10) === value ? styles.selected : ''}`}
|
||||
onClick={() => handleQuickPick(value)}
|
||||
>
|
||||
{value}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles['custom-race-to']}>
|
||||
<input
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
value={raceTo}
|
||||
onInput={handleInputChange}
|
||||
className={styles['name-input']}
|
||||
placeholder="manuelle Eingabe"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Zurück"
|
||||
onClick={onCancel}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Weiter"
|
||||
disabled={String(raceTo).trim() === ''}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: String(raceTo).trim() === '' ? 0.5 : 1 }}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { h } from 'preact';
|
||||
import { Screen } from '../ui/Layout';
|
||||
import GameDetail from '../GameDetail';
|
||||
import type { Game, EndlosGame } from '../../types/game';
|
||||
import { Screen } from '@lib/ui/Layout';
|
||||
import GameDetail from '@lib/features/game-detail/GameDetail';
|
||||
import type { Game, EndlosGame } from '@lib/domain/types';
|
||||
|
||||
interface GameDetailScreenProps {
|
||||
game?: Game;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { h } from 'preact';
|
||||
import { Button } from '../ui/Button';
|
||||
import { Screen } from '../ui/Layout';
|
||||
import GameList from '../GameList';
|
||||
import type { Game, GameFilter } from '../../types/game';
|
||||
import { Button } from '@lib/ui/Button';
|
||||
import { Screen } from '@lib/ui/Layout';
|
||||
import GameList from '@lib/features/game-list/GameList';
|
||||
import type { Game, GameFilter } from '@lib/domain/types';
|
||||
|
||||
interface GameListScreenProps {
|
||||
games: Game[];
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
import { h } from 'preact';
|
||||
import { Screen } from '../ui/Layout';
|
||||
import { Player1Step, Player2Step, Player3Step, GameTypeStep, BreakRuleStep, BreakOrderStep, RaceToStep } from '../NewGame';
|
||||
import type { NewGameStep, NewGameData } from '../../types/game';
|
||||
import { Screen } from '@lib/ui/Layout';
|
||||
import {
|
||||
Player1Step,
|
||||
Player2Step,
|
||||
Player3Step,
|
||||
GameTypeStep,
|
||||
BreakRuleStep,
|
||||
BreakOrderStep,
|
||||
RaceToStep,
|
||||
} from '@lib/features/new-game';
|
||||
import type { NewGameStep, NewGameData, GameType } from '@lib/domain/types';
|
||||
import { GAME_TYPES, RACE_TO_DEFAULT } from '@lib/domain/constants';
|
||||
|
||||
interface NewGameScreenProps {
|
||||
step: NewGameStep;
|
||||
@@ -40,9 +49,13 @@ export default function NewGameScreen({
|
||||
};
|
||||
|
||||
const handleGameTypeNext = (type: string) => {
|
||||
onDataChange({
|
||||
gameType: type as any, // Type assertion for now, could be improved with proper validation
|
||||
raceTo: '8'
|
||||
const selectedType = type as GameType;
|
||||
const match = GAME_TYPES.find((item) => item.value === selectedType);
|
||||
const defaultRace = match ? String(match.defaultRaceTo) : String(RACE_TO_DEFAULT);
|
||||
|
||||
onDataChange({
|
||||
gameType: selectedType,
|
||||
raceTo: defaultRace,
|
||||
});
|
||||
onStepChange('raceTo');
|
||||
};
|
||||
|
||||
@@ -1,134 +0,0 @@
|
||||
/* Use CSS custom properties from global design system */
|
||||
.button {
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: var(--transition-base);
|
||||
touch-action: manipulation;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
font-family: inherit;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.button:hover::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
.primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.primary:hover:not(.disabled) {
|
||||
background: var(--color-primary-hover);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.secondary:hover:not(.disabled) {
|
||||
background: var(--color-secondary-hover);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.danger {
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.danger:hover:not(.disabled) {
|
||||
background: #ef5350;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Sizes with improved touch targets for tablets */
|
||||
.small {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
font-size: var(--font-size-sm);
|
||||
min-height: var(--touch-target-min);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.medium {
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
font-size: var(--font-size-base);
|
||||
min-height: var(--touch-target-comfortable);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.large {
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
font-size: var(--font-size-lg);
|
||||
min-height: 56px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
/* Tablet-specific size adjustments */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.small {
|
||||
min-height: var(--touch-target-comfortable);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.medium {
|
||||
min-height: var(--touch-target-comfortable);
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.large {
|
||||
min-height: 64px;
|
||||
padding: var(--space-xl) var(--space-xxl);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* States */
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.disabled:hover::before {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { h } from 'preact';
|
||||
import type { ButtonProps } from '../../types/ui';
|
||||
import type { ButtonProps } from '@lib/ui/types';
|
||||
import styles from './Button.module.css';
|
||||
|
||||
export function Button({
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
.card {
|
||||
border-radius: var(--border-radius);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.default {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.elevated {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.outlined {
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.clickable:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.clickable:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Padding variants */
|
||||
.padding-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.padding-small {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.padding-medium {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.padding-large {
|
||||
padding: 24px;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import styles from './Card.module.css';
|
||||
|
||||
interface CardProps {
|
||||
children: any;
|
||||
variant?: 'default' | 'elevated' | 'outlined';
|
||||
padding?: 'none' | 'small' | 'medium' | 'large';
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function Card({
|
||||
children,
|
||||
variant = 'default',
|
||||
padding = 'medium',
|
||||
className = '',
|
||||
onClick
|
||||
}: CardProps) {
|
||||
const classNames = [
|
||||
styles.card,
|
||||
styles[variant],
|
||||
styles[`padding-${padding}`],
|
||||
onClick && styles.clickable,
|
||||
className,
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const Component = onClick ? 'button' : 'div';
|
||||
|
||||
return (
|
||||
<Component className={classNames} onClick={onClick}>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
.layout {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-md);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Tablet optimizations */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.content {
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large tablet and small desktop */
|
||||
@media (min-width: 1025px) {
|
||||
.content {
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 767px) {
|
||||
.content {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { h } from 'preact';
|
||||
import styles from './Layout.module.css';
|
||||
|
||||
interface LayoutProps {
|
||||
children: any;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Layout({ children, className = '' }: LayoutProps) {
|
||||
return (
|
||||
<div className={`${styles.layout} ${className}`}>
|
||||
<a href="#main-content" className="skip-link">
|
||||
Zum Hauptinhalt springen
|
||||
</a>
|
||||
<div className={styles.content} id="main-content">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ScreenProps {
|
||||
children: any;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Screen({ children, className = '' }: ScreenProps) {
|
||||
return (
|
||||
<div className={`${styles.screen} ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user