Add player setup form with validation and field error highlighting
- Dynamic name fields (3–6 players) with add/remove controls - Start button disabled until all names are non-blank and unique; uniqueness check normalizes internal whitespace so "Bob Smith" and "Bob Smith" are treated as the same name - Names passed to game state are edge-trimmed only, preserving internal spacing as the user typed it - Failing fields highlighted with red border and light red background - PrimaryButton gains disabled prop with faded/flat appearance; active press state suppressed when disabled - All round buttons now use consistent shadow and translateY values Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,7 +11,13 @@
|
||||
transition: transform 80ms ease, box-shadow 80ms ease;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
.button:active:not(:disabled) {
|
||||
transform: translateY(2px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.45;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -3,11 +3,12 @@ import styles from './PrimaryButton.module.css'
|
||||
interface Props {
|
||||
onClick: () => void
|
||||
children: React.ReactNode
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export default function PrimaryButton({ onClick, children }: Props) {
|
||||
export default function PrimaryButton({ onClick, children, disabled }: Props) {
|
||||
return (
|
||||
<button className={styles.button} onClick={onClick}>
|
||||
<button className={styles.button} onClick={onClick} disabled={disabled}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user