@tastic/shell 0.0.0-stage → 0.1.0

package/src/components/SeatTwoPanel.tsx

@@ -0,0 +1,132 @@
+import type { SeedColor } from '@rific/auto-paper'
+import { type MenuOption, type PopoverHost, ReadyButton, useZoneClampedAlign } from '@tastic/hud'
+import { getOptionPickerContentSize, OptionPicker, type OptionPickerOption, type Profile, type ProfilePickerColorSection } from '@tastic/profile'
+import { ReactNode, useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import type { SeatTwo } from '../types'
+
+// Seat 2's one button: who sits there (a CPU at a difficulty, nobody where the game has a solo
+// mode, a guest, or a profile) and, on top, the seat's Color row. It replaces the choice between
+// One Player and Two Player that Home used to ask before the loadout: picking a person here is what
+// makes the round 2 Player, and the loadout turns to face both players.
+//
+// Built on @tastic/profile's OptionPicker, so it opens, places itself and closes like seat 1's
+// ProfilePicker beside it; written so it can move into @tastic/hud's PlayerSetupPanel once the pack
+// layout's shell moves into the shared packages (see the PuckTastic plan). Laid out like
+// PlayerSetupPanel: the seat button, a person's controls picker under it, and their Ready button.
+
+const CPU_PREFIX = 'cpu:'
+const PROFILE_PREFIX = 'profile:'
+const NOBODY = 'nobody'
+const GUEST = 'guest'
+
+const GUEST_ICON = 'account-outline'
+const NOBODY_ICON = 'account-off-outline'
+const CPU_ICON = 'robot'
+
+export function getSeatTwoPopoverId(idPrefix: string): string {
+  return `${idPrefix}-seat`
+}
+
+export interface SeatTwoPanelProps {
+  idPrefix: string
+  host: PopoverHost
+  // Seat 2's choices in this game (GameDefinition.seatTwo), in menu order.
+  choices: readonly SeatTwo[]
+  seatTwo: SeatTwo
+  onSeatTwoChange: (seatTwo: SeatTwo) => void
+  // The CPU's levels (GameLoadout.cpuDifficulty), or undefined for a CPU with none: one CPU row then.
+  cpuDifficulty?: { value: string; options: MenuOption<string>[]; onChange: (value: string) => void }
+  profiles: Profile[]
+  selectedProfileId: string | null
+  // Seat 1's profile: picking it here swaps the two seats (see @tastic/profile's select).
+  onProfileSelect: (profileId: string | null) => void
+  color: string
+  onColorChange: (hex: string) => void
+  swatches: SeedColor[]
+  takenColor?: string
+  allowSwapTaken?: boolean
+  // Shown under the Color row while a profile is in the seat (its pick is kept for this pack only).
+  colorCaption?: string
+  dark: boolean
+  // A person's controls picker (see GameLoadout.seatControl).
+  secondPicker?: ReactNode
+  secondPickerId?: string
+  ready?: boolean
+  onToggleReady?: () => void
+  showReadyButton?: boolean
+}
+
+export function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, profiles, selectedProfileId, onProfileSelect, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, dark, secondPicker, secondPickerId, ready, onToggleReady, showReadyButton = true }: SeatTwoPanelProps) {
+  const isPerson = seatTwo === 'person'
+  const selectedProfile = isPerson ? (profiles.find((p) => p.id === selectedProfileId) ?? null) : null
+
+  const cpuOptions = cpuDifficulty?.options
+  const options = useMemo<OptionPickerOption<string>[]>(() => {
+    const list: OptionPickerOption<string>[] = []
+    if (choices.includes('cpu')) list.push(...(cpuOptions ? cpuOptions.map((o) => ({ value: `${CPU_PREFIX}${o.value}`, label: o.label, icon: o.icon })) : [{ value: CPU_PREFIX, label: 'CPU', icon: CPU_ICON }]))
+    if (choices.includes('nobody')) list.push({ value: NOBODY, label: 'Nobody', icon: NOBODY_ICON })
+    if (choices.includes('person')) {
+      list.push({ value: GUEST, label: 'Player 2', icon: GUEST_ICON })
+      list.push(...[...profiles].sort((a, b) => a.name.localeCompare(b.name)).map((p) => ({ value: `${PROFILE_PREFIX}${p.id}`, label: p.name, icon: 'account', color: p.color })))
+    }
+    return list
+  }, [choices, cpuOptions, profiles])
+
+  const value = seatTwo === 'cpu' ? `${CPU_PREFIX}${cpuDifficulty?.value ?? ''}` : seatTwo === 'nobody' ? NOBODY : selectedProfile ? `${PROFILE_PREFIX}${selectedProfile.id}` : GUEST
+  const icon = seatTwo === 'cpu' ? CPU_ICON : seatTwo === 'nobody' ? NOBODY_ICON : selectedProfile ? 'account' : GUEST_ICON
+
+  const handleChange = (next: string) => {
+    if (next.startsWith(CPU_PREFIX)) {
+      cpuDifficulty?.onChange(next.slice(CPU_PREFIX.length))
+      onSeatTwoChange('cpu')
+    } else if (next === NOBODY) {
+      onSeatTwoChange('nobody')
+    } else {
+      onProfileSelect(next.startsWith(PROFILE_PREFIX) ? next.slice(PROFILE_PREFIX.length) : null)
+      onSeatTwoChange('person')
+    }
+  }
+
+  // Nobody has no color to pick: there's nothing of theirs on the board.
+  const colorSection: ProfilePickerColorSection | undefined = seatTwo === 'nobody' ? undefined : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : undefined }
+
+  const pickerId = getSeatTwoPopoverId(idPrefix)
+  const size = getOptionPickerContentSize(options.length, colorSection)
+  // Kept inside this player's half in 2 Player, like PlayerSetupPanel's own seat button.
+  const align = useZoneClampedAlign(host.openId === pickerId, size.width, size.height)
+
+  const ownPopoverOpen = host.openId?.startsWith(`${idPrefix}-`) ?? false
+  const pickerRowOpen = secondPickerId !== undefined && host.openId === secondPickerId
+
+  return (
+    <View style={[styles.panel, ownPopoverOpen && styles.panelOpen]}>
+      <OptionPicker id={pickerId} host={host} options={options} value={value} onChange={handleChange} color={color} dark={dark} icon={icon} colorSection={colorSection} alignOverride={align} />
+      {isPerson && secondPicker && <View style={[styles.pickerRow, pickerRowOpen && styles.pickerRowOpen]}>{secondPicker}</View>}
+      {isPerson && showReadyButton && onToggleReady && <ReadyButton color={color} ready={ready ?? false} onToggleReady={onToggleReady} />}
+    </View>
+  )
+}
+
+// The same rhythm and stacking as @tastic/hud's PlayerSetupPanel, so seat 2 lines up with seat 1.
+const styles = StyleSheet.create({
+  panel: {
+    alignItems: 'center',
+    gap: 12
+  },
+  // A popover escaping this panel needs the panel itself elevated to paint above a later sibling.
+  panelOpen: {
+    zIndex: 100
+  },
+  pickerRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 12
+  },
+  // Lifts the controls picker's popover above the Ready button below it (each View is its own
+  // stacking context on the web).
+  pickerRowOpen: {
+    zIndex: 100
+  }
+})

package/src/components/SettingsDialog.tsx

@@ -0,0 +1,42 @@
+import { useUpdateErrorToast } from '@rific/toaster'
+import { ViewRotation } from '@tastic/core'
+import { BaseSettingsDialog } from '@tastic/hud'
+import type { ReactNode } from 'react'
+
+import { useAppSettings } from '../hooks/useAppSettings'
+import { usePack } from '../PackContext'
+
+export interface SettingsDialogProps {
+  visible: boolean
+  onDismiss: () => void
+  // Live physical-hold rotation (see @tastic/core's useRotation). BaseSettingsDialog lays the sheet
+  // out in its own frame turned by this (see @tastic/hud's RotatedFrame), so it reads right-side-up
+  // and fits the short edge however the phone is held. Defaults to 0 for a call site that doesn't
+  // track one.
+  rotation?: ViewRotation
+  // Shows the How to Play row, which opens this game's cards (a loadout passes its game's opener).
+  // Left out on Home, where each tile's rules button does it, and in a match, where opening
+  // Settings pauses play.
+  onShowHowToPlay?: () => void
+  // A play screen's own rows (a game's rule variants, where it has no loadout to set them in, see
+  // GameDefinition.useLoadout), above the pack's own sections.
+  children?: ReactNode
+}
+
+// The pack-wide Settings dialog: everything the shell puts in it applies to every game (Lock
+// Orientation, Edge Guard, theme, sound, haptics, Keep Awake), so it reads and writes the app
+// settings itself. Under those, a play screen's own rows and then the pack's own sections
+// (PackDefinition.SettingsSections), in every Settings dialog the pack opens.
+export function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPlay, children }: SettingsDialogProps) {
+  const onUpdateError = useUpdateErrorToast()
+  const { settings, setSettings } = useAppSettings()
+  // The pack's otaVersion (src/constants/release.ts, which the OTA tooling bumps).
+  const { otaVersion, SettingsSections } = usePack()
+
+  return (
+    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} rotation={rotation} version={otaVersion} lockOrientation={settings.lockOrientation} onLockOrientationChange={(value) => setSettings({ lockOrientation: value })} deferBottomEdgeGestures={settings.deferBottomEdgeGestures} onDeferBottomEdgeGestures={(value) => setSettings({ deferBottomEdgeGestures: value })} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
+      {children}
+      {SettingsSections && <SettingsSections />}
+    </BaseSettingsDialog>
+  )
+}

package/src/components/Theme.tsx

@@ -0,0 +1,75 @@
+import MaskedView from '@react-native-masked-view/masked-view'
+import { Provider as AutoPaperProvider, themeActions, ThemeSettings, useThemeBridgeProps } from '@rific/auto-paper'
+import * as ExpoBlur from 'expo-blur'
+import * as SplashScreen from 'expo-splash-screen'
+import { ReactNode, useCallback } from 'react'
+import Reanimated from 'react-native-reanimated'
+import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+
+import { usePack } from '../PackContext'
+import type { ShellState } from '../redux/shellState'
+import { markSplashReady } from '../splashGate'
+
+SplashScreen.preventAutoHideAsync()
+// iOS defaults `fade` to false (Android always fades regardless of this flag), so without this the
+// splash view is just yanked off screen the instant every gate reports ready.
+SplashScreen.setOptions({ fade: true, duration: 400 })
+
+interface Props {
+  children: ReactNode
+}
+
+export function Theme({ children }: Props) {
+  const { fontFamily } = usePack()
+  // redux/store.ts's own `theme` slice (createThemeReducer, seeded with this app's real default
+  // P1/P2 colors - see constants/game.ts) replaces this component's old per-field AsyncStorage
+  // load/save entirely. PersistGate (mounted in Providers.tsx, an ancestor of this component -
+  // Theme is rendered as its child in _layout.tsx) already blocks rendering until redux-persist has
+  // rehydrated, so by the time this mounts `settings` is already the real persisted (or, on a fresh
+  // install, default) triad - no async gate/loading state needed here the way the old AsyncStorage
+  // version required.
+  const settings = useSelector((state: ShellState) => state.theme, shallowEqual)
+  const dispatch = useDispatch()
+
+  // A one-shot callback, not a boolean, so there's nothing for useSplashReady to watch - PersistGate
+  // (an ancestor, see Providers.tsx) already blocks this component from mounting until redux-persist
+  // has rehydrated, so `settings` above is already the real persisted value the instant Theme mounts.
+  // That's necessary but not sufficient, though: AutoPaperProvider itself renders null internally
+  // until it's actually computed a theme object from that settings value (see its own source), which
+  // is a separate, later step from Theme just mounting with valid settings in hand. Marking this gate
+  // ready unconditionally at mount - as this file used to - could let the splash screen lift while
+  // AutoPaperProvider was still rendering null underneath it, same class of bug this app's own
+  // splash-gate audit found elsewhere. This instead marks the 'theme' gate (see
+  // src/utils/splashGate.ts) only once AutoPaperProvider itself reports a real theme, matching every
+  // sibling app's own Theme.tsx.
+  const onReady = useCallback(() => markSplashReady('theme'), [])
+
+  // Persists the FULL settings object now (appearance included), not just appearance - color used
+  // to be excluded here and persisted separately by loadout.tsx's own saveGuestColors/saveCpuColor
+  // AsyncStorage calls; now that both live in the same `theme` Redux slice, one unconditional
+  // dispatch covers all of it. loadout.tsx's own useThemeSettings().set(...) calls (unchanged by
+  // this) are what drive the LIVE color moment to moment; this onChange is only what makes whatever
+  // that resolves to durable across a relaunch.
+  const onChange = useCallback((next: ThemeSettings) => dispatch(themeActions.initialize(next)), [dispatch])
+
+  const bridgeProps = useThemeBridgeProps({ initialValue: settings, onChange, onReady })
+
+  // expoBlur is what lets auto-paper's BlurView actually blur (the settings sheet, Paper menus and
+  // @tastic/hud's overlay cards) while the player's Blur setting is on. Without it they paint the
+  // theme's solid surface instead, and hud's Settings hides the Blur row.
+  // maskedView is what lets auto-paper's FadingScrollView fade scrolling rows out at their edges on
+  // iOS/Android (the Settings sheet's and Rules' rows above Done, @tastic/profile's dropdown lists
+  // above Manage); without it they just scroll with a hard edge. Web needs nothing.
+  // statusBar={false}: auto-paper renders no React Native StatusBar (here or in Appbar.Header). The
+  // status bar is set per screen (_layout.tsx's useRotationAwareStatusBar), and with @tastic/core's
+  // config plugin on, a mounted StatusBar logs an error (a red box in a dev build).
+  // reanimated is what makes Dialog's own animatedStyle prop do anything (Metro won't pick up a
+  // require()-in-try/catch from this package's ESM build, so the module is handed in); nothing else in
+  // auto-paper reads it. fontFamily is the pack's (PackDefinition.fontFamily): set, it goes on every
+  // Paper typography variant; unset, Paper keeps its own.
+  return (
+    <AutoPaperProvider {...bridgeProps} expoBlur={ExpoBlur} maskedView={MaskedView} statusBar={false} reanimated={Reanimated} fontFamily={fontFamily}>
+      {children}
+    </AutoPaperProvider>
+  )
+}

package/src/components/UpdateDialog.tsx

@@ -0,0 +1,13 @@
+import { useUpdateErrorToast } from '@rific/toaster'
+import { useRotation } from '@tastic/core'
+import { UpdateDialog as SharedUpdateDialog } from '@tastic/hud'
+
+// Thin bridge onto the fleet-shared @tastic/hud UpdateDialog, which now owns the useUpdater()
+// instance, the manifest/confirm bridging, and the themed ConfirmDialog rendering this file used
+// to hand-roll itself. Kept as its own named export (rather than importing SharedUpdateDialog
+// directly in _layout.tsx) purely so this app's own onError -> toast wiring has one place to live.
+export function UpdateDialog() {
+  const onError = useUpdateErrorToast()
+  const rotation = useRotation()
+  return <SharedUpdateDialog onError={onError} rotation={rotation} />
+}

package/src/components/imageGameIcon.tsx

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'react'
+import { Image, type ImageSourcePropType } from 'react-native'
+
+import type { GameIconProps } from '../types'
+
+// A game icon drawn as a light and dark pair of pictures (opaque squares, the art drawn as an app
+// icon) rather than in the seats' colors: GameDefinition.icon for a game whose art is a picture.
+// Home clips it to the row's rounded icon square.
+export function imageGameIcon(images: { light: ImageSourcePropType; dark: ImageSourcePropType }): ComponentType<GameIconProps> {
+  return function ImageGameIcon({ size, dark }: GameIconProps) {
+    return <Image source={dark ? images.dark : images.light} style={{ height: size, width: size }} accessibilityIgnoresInvertColors />
+  }
+}

package/src/gameStats.tsx

@@ -0,0 +1,90 @@
+import { type AchievementDefinition, type AchievementsState, createAchievementsSlice, mapUnlocksBySeat, type UnlockedAchievementsState, useAchievements } from '@tastic/achievements'
+import { createContext, ReactNode, useCallback, useContext, useMemo } from 'react'
+
+import { forgetProfileAchievements, onProfileRemoved } from './redux/onProfileRemoved'
+import type { Seat } from './types'
+
+const SEATS: readonly Seat[] = [1, 2]
+
+// What a recorded result unlocked: device-wide, and per seat for each seat with a profile in it (the
+// package keys per-profile unlocks by profile id; the games think in seats).
+export interface RecordResult<TStats> {
+  device: AchievementDefinition<TStats>[]
+  profiles: Partial<Record<Seat, AchievementDefinition<TStats>[]>>
+}
+
+interface GameStatsContextValue<TStats> {
+  stats: TStats
+  unlockedAchievements: UnlockedAchievementsState
+  // Applies a result to the stats and returns what it unlocked. `profileIds` maps each seat to the
+  // profile in it, for the per-seat breakdown.
+  record: (update: (prev: TStats) => TStats, profileIds?: Partial<Record<Seat, string>>) => RecordResult<TStats>
+  // Wipes the game's stats and achievements back to defaults - irreversible, so callers confirm with
+  // the player first (the shell's stats screen reset).
+  resetAll: () => void
+}
+
+interface GameStatsOptions<TStats, TBucket> {
+  // The store key, which is also where the stats are saved.
+  key: string
+  defaultStats: TStats
+  isValidStats?: (value: unknown) => boolean
+  catalog: AchievementDefinition<TStats>[]
+  // A profile's own bucket seen through the same shape as the device-wide stats, so every
+  // achievement predicate reads either.
+  getProfileStatsView: (bucket: TBucket) => TStats
+}
+
+// One game's stats and achievements: its store slice (@tastic/achievements' createAchievementsSlice
+// under the game's own key, with a profile deleted on the Profiles screen taking its stats bucket and
+// unlocks with it), and the context every screen reads them through, mounted once at the app root
+// (GameDefinition.Provider) so useAchievements' mount-time unlock re-sweep runs once. Every game keeps
+// its stats with a `profiles` bucket per profile beside the device-wide totals.
+export function createGameStats<TStats extends { profiles: Record<string, TBucket> }, TBucket>({ key, defaultStats, isValidStats, catalog, getProfileStatsView }: GameStatsOptions<TStats, TBucket>) {
+  const { actions, reducer: sliceReducer } = createAchievementsSlice<TStats>({
+    key,
+    defaultStats,
+    isValidStats,
+    // Backfills `profiles` onto stats saved without it.
+    migrateStats: (stored) => ({ ...stored, profiles: stored.profiles ?? {} })
+  })
+
+  const dropProfileStats = (stats: TStats, profileId: string): TStats => {
+    if (!(profileId in stats.profiles)) return stats
+    const { [profileId]: _removed, ...rest } = stats.profiles
+    return { ...stats, profiles: rest }
+  }
+  const reducer = onProfileRemoved(sliceReducer, forgetProfileAchievements<TStats, AchievementsState<TStats>>(dropProfileStats))
+
+  const profileViews = (stats: TStats): Record<string, TStats> => Object.fromEntries(Object.entries(stats.profiles).map(([profileId, bucket]) => [profileId, getProfileStatsView(bucket)]))
+
+  const Context = createContext<GameStatsContextValue<TStats> | null>(null)
+
+  function Provider({ children }: { children: ReactNode }) {
+    const { stats, unlockedAchievements, recordOutcome, resetAll } = useAchievements<TStats, Record<string, AchievementsState<TStats>>>({
+      catalog,
+      select: (state) => state[key],
+      actions,
+      profileViews
+    })
+
+    const record = useCallback(
+      (update: (prev: TStats) => TStats, profileIds?: Partial<Record<Seat, string>>): RecordResult<TStats> => {
+        const result = recordOutcome(update)
+        return { device: result.device, profiles: mapUnlocksBySeat(SEATS, profileIds, result.profiles) }
+      },
+      [recordOutcome]
+    )
+
+    const value = useMemo(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll])
+    return <Context.Provider value={value}>{children}</Context.Provider>
+  }
+
+  function useStats(): GameStatsContextValue<TStats> {
+    const ctx = useContext(Context)
+    if (!ctx) throw new Error(`The ${key} stats are read within their game's Provider`)
+    return ctx
+  }
+
+  return { reducer, actions, Provider, useStats }
+}

package/src/hooks/useActiveRound.ts

@@ -0,0 +1,16 @@
+import { useSelector } from 'react-redux'
+
+import { usePackGame } from '../PackContext'
+import type { ShellState } from '../redux/shellState'
+import type { RoundMode } from '../types'
+
+// The round a play screen is playing: committed by the loadout when every human player readied up
+// (see liveplaySlice.ts). A play screen reached without one (a direct link, a web reload, or a game
+// with no loadout, which Home opens straight away) plays its game's defaults: against the CPU, or
+// solo in a game with no seat 2 (GameDefinition.seatTwo).
+export function useActiveRound<S extends object>(game: string, defaults: S): { mode: RoundMode; settings: S } {
+  const round = useSelector((state: ShellState) => state.liveplay.activeRound)
+  const seated = !!usePackGame(game)?.seatTwo
+  if (!round || round.game !== game) return { mode: seated ? 'vsCpu' : 'solo', settings: defaults }
+  return { mode: round.mode, settings: { ...defaults, ...(round.settings as Partial<S>) } }
+}

package/src/hooks/useAppSettings.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { type AppSettings, appSettingsActions } from '../redux/appSettingsSlice'
+import type { ShellState } from '../redux/shellState'
+
+// The one way the pack-wide settings are read and written (Lock Orientation, Edge Guard). Writes
+// merge, so a patch only changes the fields it names.
+export function useAppSettings(): { settings: AppSettings; setSettings: (patch: Partial<AppSettings>) => void } {
+  const settings = useSelector((state: ShellState) => state.appSettings)
+  const dispatch = useDispatch()
+  const setSettings = useCallback(
+    (patch: Partial<AppSettings>) => {
+      dispatch(appSettingsActions.initialize(patch))
+    },
+    [dispatch]
+  )
+  return { settings, setSettings }
+}

package/src/hooks/useFrozenWhileHidden.ts

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+
+// Returns `value`, except while `hidden` is true: then it keeps returning whatever `value` was the
+// instant before `hidden` became true, rather than whatever `value` has already become. Ported from
+// Solitaire's components/useFrozenWhileHidden.ts as it was.
+//
+// Home holds its layout with it while another screen covers it (screens/HomeScreen.tsx): Home stays
+// mounted beneath every screen the stack pushes and keeps following the rotation, and crossing the
+// upright/wide threshold swaps its whole tree (every tile, the hero, seat 1's button), invisible work
+// landing in the same commit as the covering screen's own rotation update. While covered the layout is
+// held where it was; it catches up (one swap, visible) when Home is shown again.
+export function useFrozenWhileHidden<T>(value: T, hidden: boolean): T {
+  // React's own sanctioned "adjust state during render" shape (see react.dev's guide of the same
+  // name) rather than mutating a ref during render: each setter below is only ever called when the
+  // value it tracks has actually changed, so this settles within the same render pass instead of
+  // triggering a visible extra frame.
+  const [prevHidden, setPrevHidden] = useState(hidden)
+  const [prevValue, setPrevValue] = useState(value)
+  const [frozen, setFrozen] = useState(value)
+
+  if (hidden !== prevHidden) {
+    setPrevHidden(hidden)
+    // Freezes `prevValue` (last render's value, still whatever was visible a moment ago), not this
+    // render's `value`: hidden can flip true the same commit `value` already changed, and it's the
+    // outgoing one that should stay on screen.
+    if (hidden) setFrozen(prevValue)
+  }
+  if (value !== prevValue) {
+    setPrevValue(value)
+  }
+
+  return hidden ? frozen : value
+}

package/src/hooks/useLastActiveGame.tsx

@@ -0,0 +1,73 @@
+import { createContext, ReactNode, useContext, useMemo, useRef, useState } from 'react'
+import { useDispatch, useStore } from 'react-redux'
+
+import { lastActiveGameActions } from '../redux/lastActiveGameSlice'
+import type { ShellState } from '../redux/shellState'
+
+interface LastActiveGameContextValue {
+  // Returns the game a cold launch should drop the player straight back onto (once), or null.
+  consumeResumeGame: () => string | null
+  setLastActiveGame: (gameId: string) => void
+  clearLastActiveGame: () => void
+}
+
+const LastActiveGameContext = createContext<LastActiveGameContextValue | null>(null)
+
+// Which play screen the player is currently on, persisted (the store's `lastActiveGame` key) so a
+// cold launch/relaunch can drop them straight back onto it (see screens/HomeScreen.tsx) instead of
+// Home - independent of whether that game still has a resumable board, which is the game's own.
+// Mounted inside PersistGate, so the value read once at mount is already the rehydrated one. Ported
+// from Solitaire's stores/lastActiveGame.tsx as it was.
+//
+// Deliberately NOT React state, and never read with useSelector. The only thing that ever needed the
+// live value was Home's resume Redirect, and that is a one-shot cold-launch decision - so exposing it
+// as state made every set/clear (each game mount, each Home tap) re-render every consumer, and made
+// every Home instance in the stack swap its whole menu tree for a Redirect and back (in Solitaire,
+// tearing down and rebuilding ~370 SVG preview cards on each transition). The value handed out here
+// is stable for the provider's whole lifetime; `pendingResume` is consumed by the first Home to mount
+// and cleared by any set/clear, so a launch straight into a game (deep link) can never later resume a
+// stale one. A pack with no resumable game has no `lastActiveGame` key, and this reads null.
+export function LastActiveGameProvider({ children }: { children: ReactNode }) {
+  const store = useStore<ShellState>()
+  const dispatch = useDispatch()
+  // Read once, at mount (a lazy initializer, never a subscription).
+  const [initial] = useState(() => store.getState().lastActiveGame?.gameId ?? null)
+  const pendingResume = useRef<string | null>(initial)
+  // What the store currently holds, so an unchanged value is never rewritten: every game mount sets it
+  // and every exit clears it.
+  const persisted = useRef<string | null>(initial)
+
+  const value = useMemo<LastActiveGameContextValue>(
+    () => ({
+      consumeResumeGame: () => {
+        const game = pendingResume.current
+        pendingResume.current = null
+        return game
+      },
+      setLastActiveGame: (gameId) => {
+        pendingResume.current = null
+        if (persisted.current === gameId) return
+        persisted.current = gameId
+        dispatch(lastActiveGameActions.setGameId(gameId))
+      },
+      // Called from the play route's unmount cleanup (screens/GameRoute.tsx) - it fires on the play
+      // screen's own back, hardware back, or a browser back, but not on mere app backgrounding, where
+      // the screen stays mounted. That's exactly "explicitly back out."
+      clearLastActiveGame: () => {
+        pendingResume.current = null
+        if (persisted.current === null) return
+        persisted.current = null
+        dispatch(lastActiveGameActions.setGameId(null))
+      }
+    }),
+    [dispatch]
+  )
+
+  return <LastActiveGameContext.Provider value={value}>{children}</LastActiveGameContext.Provider>
+}
+
+export function useLastActiveGame(): LastActiveGameContextValue {
+  const ctx = useContext(LastActiveGameContext)
+  if (!ctx) throw new Error('useLastActiveGame must be used within a LastActiveGameProvider')
+  return ctx
+}

package/src/hooks/useOpponent.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { opponentActions } from '../redux/opponentSlice'
+import type { ShellState } from '../redux/shellState'
+import type { SeatTwo } from '../types'
+
+// Who sits in seat 2 across the pack (see opponentSlice.ts).
+export function useOpponent(): { seatTwo: SeatTwo; setSeatTwo: (seatTwo: SeatTwo) => void } {
+  const seatTwo = useSelector((state: ShellState) => state.opponent.seatTwo)
+  const dispatch = useDispatch()
+  const setSeatTwo = useCallback((next: SeatTwo) => dispatch(opponentActions.setSeatTwo(next)), [dispatch])
+  return { seatTwo, setSeatTwo }
+}