Add sign toggle button for score entry and email to title screen
Replaces type="number" with type="text" + inputMode="numeric" so iOS shows the numpad. A +/− toggle button beside each field handles the sign; it is a no-op when the field is empty. Also adds contact email below the title on the title screen. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -27,6 +27,18 @@
|
|||||||
background: #fff5f5;
|
background: #fff5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.signToggle {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--color-parchment-border);
|
||||||
|
background: #fdfaf4;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #555;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sumLine {
|
.sumLine {
|
||||||
margin: 0.5rem 0 0;
|
margin: 0.5rem 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -17,6 +17,15 @@ export default function EnterScores({ game, onSubmit }: Props) {
|
|||||||
setValues(vs => vs.map((val, idx) => (idx === i ? v : val)))
|
setValues(vs => vs.map((val, idx) => (idx === i ? v : val)))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleSign(i: number) {
|
||||||
|
setValues(vs => vs.map((val, idx) => {
|
||||||
|
if (idx !== i) return val
|
||||||
|
const digits = val.startsWith('-') ? val.slice(1) : val
|
||||||
|
if (!digits) return val
|
||||||
|
return val.startsWith('-') ? digits : '-' + digits
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
const parsed = values.map(v => parseInt(v, 10))
|
const parsed = values.map(v => parseInt(v, 10))
|
||||||
const fieldError = values.map((v, i) => v !== '' && (isNaN(parsed[i]) || !isIndividualScoreValid(parsed[i])))
|
const fieldError = values.map((v, i) => v !== '' && (isNaN(parsed[i]) || !isIndividualScoreValid(parsed[i])))
|
||||||
const allFilled = parsed.every(n => !isNaN(n))
|
const allFilled = parsed.every(n => !isNaN(n))
|
||||||
@@ -35,9 +44,12 @@ export default function EnterScores({ game, onSubmit }: Props) {
|
|||||||
{game.players.map((name, i) => (
|
{game.players.map((name, i) => (
|
||||||
<div key={i} className={styles.row}>
|
<div key={i} className={styles.row}>
|
||||||
<span className={styles.name}>{name}</span>
|
<span className={styles.name}>{name}</span>
|
||||||
|
<button type="button" className={styles.signToggle} onClick={() => toggleSign(i)}>
|
||||||
|
{values[i].startsWith('-') ? '−' : '+'}
|
||||||
|
</button>
|
||||||
<input
|
<input
|
||||||
className={`${styles.scoreInput}${fieldError[i] ? ` ${styles.scoreInputError}` : ''}`}
|
className={`${styles.scoreInput}${fieldError[i] ? ` ${styles.scoreInputError}` : ''}`}
|
||||||
type="number"
|
type="text"
|
||||||
inputMode="numeric"
|
inputMode="numeric"
|
||||||
value={values[i]}
|
value={values[i]}
|
||||||
onChange={e => updateValue(i, e.target.value)}
|
onChange={e => updateValue(i, e.target.value)}
|
||||||
|
|||||||
@@ -26,6 +26,14 @@
|
|||||||
line-height: 0.9;
|
line-height: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.email {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
.buttonRow {
|
.buttonRow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 2rem;
|
bottom: 2rem;
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default function TitleScreen({ onNewGame }: Props) {
|
|||||||
<div className={styles.title}>
|
<div className={styles.title}>
|
||||||
<span className={styles.titleWord}>Black</span>
|
<span className={styles.titleWord}>Black</span>
|
||||||
<span className={styles.titleNumber}>7</span>
|
<span className={styles.titleNumber}>7</span>
|
||||||
|
<span className={styles.email}>ross.andrews@gmail.com</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.buttonRow}>
|
<div className={styles.buttonRow}>
|
||||||
<PrimaryButton onClick={onNewGame}>New Game</PrimaryButton>
|
<PrimaryButton onClick={onNewGame}>New Game</PrimaryButton>
|
||||||
|
|||||||
Reference in New Issue
Block a user