{celebrate && setCelebrate(undefined)} />}

Family Bingo Bash {game && {game.title !== "Family Bingo Bash" ? game.title : "Reunion game"}{game.creatorHandle !== handle && <> hosted by }} {games.length > 1 && (

}
                        </Field>
                        {current && <Button type="button" size="sm" tone="idle" variant="quiet" onClick={() => { setCurrent(undefined); setSentence(""); }}>Add new squares instead</Button>}
                        <Row gap={2} wrap>
                          <Button type="submit" tone="purple" loading={busy} disabled={!sentence.trim()}>{current ? "Apply correction" : "Add squares"}</Button>
                          <Button type="button" tone="idle" variant="quiet" disabled={busy || !sentence.trim()} onClick={ask}>Ask about squares</Button>
                          {lastWrite && <Button type="button" tone="idle" variant="quiet" disabled={busy} onClick={undo}>Undo</Button>}
                        </Row>
                        <Text size="sm" muted role="status">{message}</Text>
                        {answer && <Text>{answer}</Text>}
                      </Stack>
                    </form>
                  ) : (
                    <Text muted>The host builds the square pool.</Text>
                  )}
                  {canAdd && (
                    <form onSubmit={addPlain}>
                      <Row gap={2} align="top">
                        <Field label="Add one square">{(id, d) => <Input id={id} describedBy={d} value={plain} onChange={setPlain} />}</Field>
                        <Button type="submit" tone="idle" variant="quiet" disabled={!plain.trim()}>Add square</Button>
                      </Row>
                    </form>
                  )}
                </Stack>
              </Card>
            </Item>
            <Item i={1}>
              <Card>
                <Stack gap={3}>
                  <Eyebrow>Pool</Eyebrow>
                  <Heading level={2}>{squares.length} of 24 squares</Heading>
                  {squares.length === 0 && <Empty icon="sparkle" title="Paste your first jokes to make squares" />}
                  {squares.map((sq) => (
                    <SquareRow key={sq._id} sq={sq} canEdit={can.edit(sq).ok} disabled={busy}
                      onCorrect={(s) => { setCurrent(s); setSentence(""); }} onSave={saveSquare} onDelete={deleteSquare} />
                  ))}
                </Stack>
              </Card>
            </Item>
          </Grid>
        )}

{game && tab === "family" && (
          <Grid cols={2} gap={5}>
            <Item i={0}>
              <Card>
                <Stack gap={3}>
                  <Eyebrow>Invites</Eyebrow>
                  <Heading level={2}>Who is playing</Heading>
                  {members.map((m) => (
                    <Row key={m._id} gap={2} align="center"><ViewerTag userHandle={m.userHandle} /><Spacer /><Badge tone="info">{m.role === "host" ? "Host" : "Player"}</Badge></Row>
                  ))}
                  {isHost && !ready && <Skeleton />}
                  {isHost && ready && can.create({ type: "member", gameId: gid, userHandle: "x", addedBy: handle }).ok && (
                    <Stack gap={2}>
                      <Text size="sm" muted>Add a family member by handle or email</Text>
                      <HandleInput onChange={addMember} placeholder="Add a relative..." />
                    </Stack>
                  )}
                </Stack>
              </Card>
            </Item>
            <Item i={1}>
              <Card>
                <Stack gap={3}>
                  <Eyebrow>Cards</Eyebrow>
                  <Heading level={2}>Deal the cards</Heading>
                  <Text muted>{needDeal.length} waiting for a card. Each person gets a different shuffle.</Text>
                  {isHost ? (
                    <Button type="button" tone="purple" disabled={squares.length < 24 || needDeal.length === 0} onClick={deal}>Deal cards</Button>
                  ) : (
                    <Text size="sm" muted>The host deals the cards.</Text>
                  )}
                  {squares.length < 24 && <Text size="sm" muted>Add {24 - squares.length} more squares first.</Text>}
                </Stack>
              </Card>
            </Item>
          </Grid>
        )}
      </div>
    </main>
  );
}</article></body></html>