{children}
diff --git a/src/pages/EnterScores.tsx b/src/pages/EnterScores.tsx
index 98980c9..b7f5f56 100644
--- a/src/pages/EnterScores.tsx
+++ b/src/pages/EnterScores.tsx
@@ -1,20 +1,24 @@
import { useState } from 'react'
import PageFrame from '../components/PageFrame'
import PrimaryButton from '../components/PrimaryButton'
+import HelpModal from '../components/HelpModal'
import { isIndividualScoreValid, isRoundScoreValid } from '../game/scoring'
import { type GameState } from '../types'
import styles from './EnterScores.module.css'
+import sharedStyles from '../styles/shared.module.css'
interface Props {
game: GameState
onSubmit: (scores: number[]) => void
+ onBack: () => void
initialValues?: number[]
}
-export default function EnterScores({ game, onSubmit, initialValues }: Props) {
+export default function EnterScores({ game, onSubmit, onBack, initialValues }: Props) {
const [values, setValues] = useState
(() =>
game.players.map((_, i) => initialValues ? String(initialValues[i]) : '')
)
+ const [showHelp, setShowHelp] = useState(false)
function updateValue(i: number, v: string) {
setValues(vs => vs.map((val, idx) => (idx === i ? v : val)))
@@ -38,6 +42,9 @@ export default function EnterScores({ game, onSubmit, initialValues }: Props) {
return (
←}
+ headerAction={}
+ overlay={showHelp ? setShowHelp(false)} /> : undefined}
footer={
onSubmit(parsed)} disabled={!canSubmit}>
Submit
diff --git a/src/pages/PlayerSetup.tsx b/src/pages/PlayerSetup.tsx
index a1550fe..d5f23f9 100644
--- a/src/pages/PlayerSetup.tsx
+++ b/src/pages/PlayerSetup.tsx
@@ -1,7 +1,9 @@
import { useState } from 'react'
import PageFrame from '../components/PageFrame'
import PrimaryButton from '../components/PrimaryButton'
+import HelpModal from '../components/HelpModal'
import styles from './PlayerSetup.module.css'
+import sharedStyles from '../styles/shared.module.css'
interface Props {
onStart: (players: string[]) => void
@@ -14,6 +16,7 @@ function normalize(s: string) {
export default function PlayerSetup({ onStart, initialNames }: Props) {
const [names, setNames] = useState(initialNames ?? ['', '', ''])
+ const [showHelp, setShowHelp] = useState(false)
function updateName(i: number, value: string) {
setNames(n => n.map((v, idx) => (idx === i ? value : v)))
@@ -36,6 +39,8 @@ export default function PlayerSetup({ onStart, initialNames }: Props) {
return (
setShowHelp(true)}>?}
+ overlay={showHelp ? setShowHelp(false)} /> : undefined}
footer={
onStart(names.map(n => n.trim()))} disabled={!isValid}>
Start
diff --git a/src/styles/shared.module.css b/src/styles/shared.module.css
index 62b5c6b..fc4c22f 100644
--- a/src/styles/shared.module.css
+++ b/src/styles/shared.module.css
@@ -1,3 +1,15 @@
+.helpBtn {
+ background: none;
+ border: none;
+ padding: 0;
+ min-height: unset;
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: #aaa;
+ line-height: 1;
+ box-shadow: none;
+}
+
.card {
position: fixed;
inset: 1rem;