froxxxy/bscscore
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: streamline new-game player selection ux

Browse Source 
Consolidate new-game wizard steps into reusable components and remove legacy duplicate files.
Replace inline player inputs with a chip-first flow and minimal name-entry modal, while improving compact-screen spacing and step-specific selection behavior.

Made-with: Cursor
This commit is contained in:
Frank Schwenk
2026-04-14 15:22:56 +02:00
parent 5deb38ebb7
commit ed7c6232c1
21 changed files with 825 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/features/new-game/steps/BreakOrderStep.tsx
+23 -35
View File
@@ -1,8 +1,9 @@
import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import styles from '../NewGame.module.css';
import { ProgressIndicator } from '../ProgressIndicator';
import type { BreakRule } from '@lib/domain/types';
import { WizardNav } from '../components/WizardNav';
import { WizardStepForm } from '../components/WizardStepForm';
interface BreakOrderStepProps {
players: string[];
@@ -48,15 +49,22 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
};
return (
<form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen" onSubmit={handleSubmit}>
<div className={styles['form-header']}>
<div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
<ProgressIndicator currentStep={7} style={{ marginBottom: 24 }} />
</div>
<div className={styles['form-content']}>
<div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
<WizardStepForm
ariaLabel="Break-Reihenfolge wählen"
title="Wer hat den ersten Anstoss?"
currentStep={7}
onSubmit={handleSubmit}
footer={
<WizardNav
onBack={onCancel}
nextDisabled={
(rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
}
/>
}
>
<div className={styles['choice-heading']}>Wer hat den ersten Anstoss?</div>
<div className={styles['quick-picks-row']}>
{players.filter(Boolean).map((name, idx) => (
<button
key={`first-${idx}`}
@@ -64,7 +72,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
onClick={() => handleFirst(idx + 1)}
aria-label={`Zuerst: ${name}`}
style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
style={{ minWidth: 160, minHeight: 64 }}
>
{name}
</button>
@@ -73,8 +81,8 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
{rule === 'wechselbreak' && playerCount === 3 && (
<>
<div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
<div className={styles['choice-heading']}>Wer hat den zweiten Anstoss?</div>
<div className={styles['quick-picks-row']}>
{players.filter(Boolean).map((name, idx) => (
<button
key={`second-${idx}`}
@@ -82,7 +90,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
onClick={() => handleSecond(idx + 1)}
aria-label={`Zweites Break: ${name}`}
style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
style={{ minWidth: 160, minHeight: 64 }}
>
{name}
</button>
@@ -90,27 +98,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
</div>
</>
)}
</div>
<div className={styles['form-footer']}>
<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' }}>
&#8592;
</button>
<button
type="submit"
className={styles['arrow-btn']}
aria-label="Weiter"
disabled={
(rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
}
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: ((rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)) ? 0.5 : 1 }}
>
&#8594;
</button>
</div>
</div>
</form>
</WizardStepForm>
);
};