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:
2026-05-26 23:59:45 -05:00
parent bb077b31a3
commit 4f852d7902
4 changed files with 137 additions and 6 deletions
+7 -1
View File
@@ -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 -2
View File
@@ -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>
)