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

refactor: standardize new game progress ui

Browse Source 
- introduce shared progress indicator component for wizard steps
- align layouts and button sizing across new game panels
- update feature exports to surface the new component

Refs #30
This commit is contained in:
Frank Schwenk
2025-11-14 11:07:26 +01:00
parent 8a46a8a019
commit 01123f291d
9 changed files with 146 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/features/new-game/steps/BreakOrderStep.tsx
+65 -63
View File
@@ -1,6 +1,7 @@
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';
interface BreakOrderStepProps {
@@ -37,74 +38,75 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
return (
<form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
<div className={styles['screen-title']}>Wer hat den ersten Anstoss?</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']} />
<span className={styles['progress-dot']} />
<span className={styles['progress-dot'] + ' ' + styles['active']} />
<div className={styles['form-header']}>
<div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
<ProgressIndicator currentStep={7} style={{ marginBottom: 24 }} />
</div>
<div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
{players.filter(Boolean).map((name, idx) => (
<button
key={`first-${idx}`}
type="button"
className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
onClick={() => handleFirst(idx + 1)}
aria-label={`Zuerst: ${name}`}
>
{name}
<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' }}>
{players.filter(Boolean).map((name, idx) => (
<button
key={`first-${idx}`}
type="button"
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' }}
>
{name}
</button>
))}
</div>
{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' }}>
{players.filter(Boolean).map((name, idx) => (
<button
key={`second-${idx}`}
type="button"
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' }}
>
{name}
</button>
))}
</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>
))}
</div>
{rule === 'wechselbreak' && playerCount === 3 && (
<>
<div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
{players.filter(Boolean).map((name, idx) => (
<button
key={`second-${idx}`}
type="button"
className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
onClick={() => handleSecond(idx + 1)}
aria-label={`Zweites Break: ${name}`}
>
{name}
</button>
))}
</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' }}>
&#8592;
</button>
<button
type="button"
className={styles['arrow-btn']}
aria-label="Weiter"
onClick={() => {
if (rule === 'wechselbreak' && playerCount === 3) {
if (first > 0 && (second ?? 0) > 0) {
handleSecond(second as number);
}
} else {
if (first > 0) {
<button
type="button"
className={styles['arrow-btn']}
aria-label="Weiter"
onClick={() => {
if (rule === 'wechselbreak' && playerCount === 3) {
if (first > 0 && (second ?? 0) > 0) {
handleSecond(second as number);
}
} else if (first > 0) {
onNext(first);
}
}}
disabled={
(rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
}
}}
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>
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>
);