@tastic/shell 0.5.0 → 0.7.0

package/README.md

@@ -111,7 +111,7 @@ PuckTastic and DuelTastic draw what they always did:
 
 | Field | |
 | --- | --- |
-| `Backdrop?` | A table drawn once behind the whole stack (Solitaire's felt). The stack's two layers go transparent (the screens' `contentStyle` and the navigation theme's `colors.background`, which React Navigation paints around every screen), the root window stays dark so light mode doesn't flash white on a push, Android's push and pop crossfade (its default holds the outgoing screen opaque), and Home, each loadout, the stats screen and Profiles draw transparent, with their buttons and tabs on the theme's surface. |
+| `Backdrop?` | A table drawn once behind the whole stack (Solitaire's felt). The stack's two layers go transparent (the screens' `contentStyle` and the navigation theme's `colors.background`, which React Navigation paints around every screen), the root window stays dark so light mode doesn't flash white on a push, Android's push and pop crossfade (its default holds the outgoing screen opaque), and Home, each loadout, the stats screen and Profiles draw transparent, with their buttons and tabs on the theme's surface (a loadout's Ready buttons too, filled with the seat's color once ready). |
 | `foreground?` | The color of what those screens draw straight on the background (the hero, the corner buttons, headers), and at half strength a loadout's muted options. Unset is black or white with the theme. |
 | `Provider?` | Mounted once around How to Play and the stack, inside the store, the theme, profiles and every game's `Provider` (one stats context across the pack's games). |
 | `useScreenOptions?` | A hook returning stack screen options (`StackScreenOptions`), merged after the shell's own (a status bar style of the pack's own, Reduce Motion's crossfade). The shell's already follow the app's theme, and stay dark over a `Backdrop`. |
@@ -135,8 +135,8 @@ PuckTastic and DuelTastic draw what they always did:
 
 Each game is one object: its `id`, `title`, `blurb` and `icon` (a component drawn in the seats'
 colors, or `imageGameIcon({ light, dark })` for a light and dark pair of pictures), its seat 2
-choices (`seatTwo`: `'cpu'`, `'person'`, `'nobody'`) and whether 2 Player seats its players side by
-side in a wide window (`sideBySideWhenWide`), the store `reducers` it mounts, its root `Provider`, its `useLoadout(mode)`, its
+choices (`seatTwo`: `'cpu'`, `'person'`, `'nobody'`), whether 2 Player seats its players side by side
+at a computer (`sideBySideAtComputer`) and in a wide window (`sideBySideWhenWide`), the store `reducers` it mounts, its root `Provider`, its `useLoadout(mode)`, its
 `PlayScreen`, its `StatsSections` and `AchievementList`, `resetStats`, and its How to Play `guide`.
 See `src/types.ts` for every field.
 
@@ -144,9 +144,9 @@ What a game can leave out or add, each optional, so a two-seat game sets none of
 
 | Field | |
 | --- | --- |
-| no `seatTwo` (nor `sideBySideWhenWide`) | A game for one player: its loadout has no seat 2 button, every round is solo (`useActiveRound` falls back to `'solo'`), and its How to Play describes a solo round. |
+| no `seatTwo` (nor `sideBySideWhenWide`) | A game for one player: its loadout has no opponent button, every round is solo (`useActiveRound` falls back to `'solo'`), and its How to Play describes a solo round. |
 | no `useLoadout` | Nothing to set up first: Home opens its play screen straight away, after its How to Play the first time, and a link to its loadout plays it. Its rule variants go in its play screen's Settings: `<SettingsDialog>` takes `children`. |
-| no `cpuDifficulty` (in `GameLoadout`) | A CPU with no levels: seat 2's menu offers one plain CPU. |
+| no `cpuDifficulty` (in `GameLoadout`) | A CPU with no levels: player 1's opponent menu offers one plain CPU. |
 | `resumable` | A cold launch drops the player back into its play screen if they left the app there rather than backing out of it. The shell remembers only which game (`lastActiveGame`); the game saves and restores its own board. |
 | `Preview` | Drawn on Home in place of the icon (`GamePreviewProps`: `width`, `height`, the seats' colors, `dark`), in a box of `PREVIEW_ASPECT` (360:200), a frame after Home first paints. While any game has one, Home shows tiles: rows upright, and on a wide screen a grid beside the hero and seat 1's button. A game without one keeps its icon. |
 | no `icon` | Only with a `Preview`, which Home draws in its place. |
@@ -196,6 +196,21 @@ longer reads the accelerometer, draws a turn or offers Lock Orientation. A pack
 - takes `"@tastic/core"` out of `app.json`'s plugins, sets `UIViewControllerBasedStatusBarAppearance: true`
   in `ios.infoPlist` (the stack sets the status bar per screen), and makes a new native build.
 
+### The chips over a match (0.6.0)
+
+`MatchChips` is every game's back and settings chips during a match, so they sit and show the same
+way in every game of every pack. A play screen renders it with `playing` (true while play is on: a
+live puck, a shot in flight, a round being ridden), `faceToFace` (two players at opposite ends of the
+screen right now) and `onBack`/`onSettings`, plus `centerLineY` when the line between the players isn't
+the window's middle.
+
+- **Where:** the window's top corners; 2 Player face to face, the side edges at the line between the
+  players (the top corners are the far player's end); at a computer (`useAtComputer`: the web without
+  a touch-first screen), the page's top corners always.
+- **When:** faded out over `MATCH_CHIPS_FADE_MS` (150) and not pressable while `playing`, back the moment
+  it stops; up all match at a computer.
+- **Look:** a 24 icon in the theme's full contrast on a translucent chip of the page's color.
+
 ## Peer dependencies
 
 None are bundled. The floors are the versions PuckTastic and DuelTastic ran the shell on when it

package/dist/index.d.mts

@@ -207,6 +207,7 @@ interface GameDefinition {
     Preview?: ComponentType<GamePreviewProps>;
     seatTwo?: readonly SeatTwo[];
     sideBySideWhenWide?: boolean;
+    sideBySideAtComputer?: boolean;
     reducers: Record<string, Reducer>;
     Provider?: ComponentType<{
         children: ReactNode;
@@ -399,6 +400,30 @@ declare function imageGameIcon(images: {
     dark: ImageSourcePropType;
 }): ComponentType<GameIconProps>;
 
+declare const MATCH_CHIPS_FADE_MS = 150;
+interface MatchChipsProps {
+    /** Whether play is on right now (a live puck, a shot in flight, a round being ridden). While it is,
+     * the chips fade out and can't be pressed, so they never cover play; they come back the moment it
+     * stops (between points, a round's card, Game Over). Ignored at a computer, where they stay up. */
+    playing: boolean;
+    /** Two players at opposite ends of one screen right now (2 Player face to face). The chips then sit
+     * on the side edges at the line between the players, rather than in the top corners, which are the
+     * far player's end. False for one human (vs CPU, solo) and for side by side. Ignored at a
+     * computer: both players share one upright screen there. */
+    faceToFace: boolean;
+    /** Where that line between the players is, as a y in the window. Defaults to the window's middle;
+     * pass it when the board isn't centered (a band of score above it, say). */
+    centerLineY?: number;
+    onBack: () => void;
+    onSettings: () => void;
+}
+/** The back and settings chips over a match, in every game of every pack: one rule for where they sit
+ * and when they show. The window's top corners (the same spot as hud's CornerActionButtons on every
+ * other screen), except 2 Player face to face, which puts them on the side edges at the line between
+ * the players; faded out while play is on, except at a computer (useAtComputer: the web without a
+ * touch-first screen), where they stay up in the page's corners. */
+declare function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }: MatchChipsProps): react.JSX.Element;
+
 interface SettingsDialogProps {
     visible: boolean;
     onDismiss: () => void;
@@ -417,6 +442,8 @@ declare function useAppSettings(): {
     setSettings: (patch: Partial<AppSettings>) => void;
 };
 
+declare function useAtComputer(): boolean;
+
 declare function useOpponent(): {
     seatTwo: SeatTwo;
     setSeatTwo: (seatTwo: SeatTwo) => void;
@@ -551,5 +578,5 @@ declare function createPlayerSettings<S extends WithControls<C>, C>({ id, defaul
     };
 };
 
-export { DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, GUEST_PLAYER_ID, HomeScreen, LoadoutRoute, PREVIEW_ASPECT, PackProvider, PlayRoute, ProfilesProvider, ProfilesRoute, RootLayout, SettingsDialog, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };
-export type { ActiveRound, AppSettings, FeedbackSounds, GameDefinition, GameGuide, GameGuideState, GameIconProps, GameLoadout, GamePreviewProps, GameRulesProps, GuidelessGameDefinition, HeroTitleProps, HomeTab, LiveplaySliceState, LoadoutOptionsProps, OpponentState, PackDefinition, PackGameDefinition, PackGuide, PackStatsReset, PackStatsSectionsProps, PackStatsTab, PackStore, PackStoreConfig, PackStoreSource, PickerAlign, PlayerControlsState, PlayerSettingsState, ProfileSelectionState, RecordResult, RoundMode, Seat, SeatColorsState, SeatControlLook, SeatTwo, SettingsDialogProps, ShellState, StackScreenOptions };
+export { DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, GUEST_PLAYER_ID, HomeScreen, LoadoutRoute, MATCH_CHIPS_FADE_MS, MatchChips, PREVIEW_ASPECT, PackProvider, PlayRoute, ProfilesProvider, ProfilesRoute, RootLayout, SettingsDialog, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useAtComputer, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };
+export type { ActiveRound, AppSettings, FeedbackSounds, GameDefinition, GameGuide, GameGuideState, GameIconProps, GameLoadout, GamePreviewProps, GameRulesProps, GuidelessGameDefinition, HeroTitleProps, HomeTab, LiveplaySliceState, LoadoutOptionsProps, MatchChipsProps, OpponentState, PackDefinition, PackGameDefinition, PackGuide, PackStatsReset, PackStatsSectionsProps, PackStatsTab, PackStore, PackStoreConfig, PackStoreSource, PickerAlign, PlayerControlsState, PlayerSettingsState, ProfileSelectionState, RecordResult, RoundMode, Seat, SeatColorsState, SeatControlLook, SeatTwo, SettingsDialogProps, ShellState, StackScreenOptions };

package/dist/index.d.ts

@@ -207,6 +207,7 @@ interface GameDefinition {
     Preview?: ComponentType<GamePreviewProps>;
     seatTwo?: readonly SeatTwo[];
     sideBySideWhenWide?: boolean;
+    sideBySideAtComputer?: boolean;
     reducers: Record<string, Reducer>;
     Provider?: ComponentType<{
         children: ReactNode;
@@ -399,6 +400,30 @@ declare function imageGameIcon(images: {
     dark: ImageSourcePropType;
 }): ComponentType<GameIconProps>;
 
+declare const MATCH_CHIPS_FADE_MS = 150;
+interface MatchChipsProps {
+    /** Whether play is on right now (a live puck, a shot in flight, a round being ridden). While it is,
+     * the chips fade out and can't be pressed, so they never cover play; they come back the moment it
+     * stops (between points, a round's card, Game Over). Ignored at a computer, where they stay up. */
+    playing: boolean;
+    /** Two players at opposite ends of one screen right now (2 Player face to face). The chips then sit
+     * on the side edges at the line between the players, rather than in the top corners, which are the
+     * far player's end. False for one human (vs CPU, solo) and for side by side. Ignored at a
+     * computer: both players share one upright screen there. */
+    faceToFace: boolean;
+    /** Where that line between the players is, as a y in the window. Defaults to the window's middle;
+     * pass it when the board isn't centered (a band of score above it, say). */
+    centerLineY?: number;
+    onBack: () => void;
+    onSettings: () => void;
+}
+/** The back and settings chips over a match, in every game of every pack: one rule for where they sit
+ * and when they show. The window's top corners (the same spot as hud's CornerActionButtons on every
+ * other screen), except 2 Player face to face, which puts them on the side edges at the line between
+ * the players; faded out while play is on, except at a computer (useAtComputer: the web without a
+ * touch-first screen), where they stay up in the page's corners. */
+declare function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }: MatchChipsProps): react.JSX.Element;
+
 interface SettingsDialogProps {
     visible: boolean;
     onDismiss: () => void;
@@ -417,6 +442,8 @@ declare function useAppSettings(): {
     setSettings: (patch: Partial<AppSettings>) => void;
 };
 
+declare function useAtComputer(): boolean;
+
 declare function useOpponent(): {
     seatTwo: SeatTwo;
     setSeatTwo: (seatTwo: SeatTwo) => void;
@@ -551,5 +578,5 @@ declare function createPlayerSettings<S extends WithControls<C>, C>({ id, defaul
     };
 };
 
-export { DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, GUEST_PLAYER_ID, HomeScreen, LoadoutRoute, PREVIEW_ASPECT, PackProvider, PlayRoute, ProfilesProvider, ProfilesRoute, RootLayout, SettingsDialog, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };
-export type { ActiveRound, AppSettings, FeedbackSounds, GameDefinition, GameGuide, GameGuideState, GameIconProps, GameLoadout, GamePreviewProps, GameRulesProps, GuidelessGameDefinition, HeroTitleProps, HomeTab, LiveplaySliceState, LoadoutOptionsProps, OpponentState, PackDefinition, PackGameDefinition, PackGuide, PackStatsReset, PackStatsSectionsProps, PackStatsTab, PackStore, PackStoreConfig, PackStoreSource, PickerAlign, PlayerControlsState, PlayerSettingsState, ProfileSelectionState, RecordResult, RoundMode, Seat, SeatColorsState, SeatControlLook, SeatTwo, SettingsDialogProps, ShellState, StackScreenOptions };
+export { DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, GUEST_PLAYER_ID, HomeScreen, LoadoutRoute, MATCH_CHIPS_FADE_MS, MatchChips, PREVIEW_ASPECT, PackProvider, PlayRoute, ProfilesProvider, ProfilesRoute, RootLayout, SettingsDialog, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useAtComputer, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };
+export type { ActiveRound, AppSettings, FeedbackSounds, GameDefinition, GameGuide, GameGuideState, GameIconProps, GameLoadout, GamePreviewProps, GameRulesProps, GuidelessGameDefinition, HeroTitleProps, HomeTab, LiveplaySliceState, LoadoutOptionsProps, MatchChipsProps, OpponentState, PackDefinition, PackGameDefinition, PackGuide, PackStatsReset, PackStatsSectionsProps, PackStatsTab, PackStore, PackStoreConfig, PackStoreSource, PickerAlign, PlayerControlsState, PlayerSettingsState, ProfileSelectionState, RecordResult, RoundMode, Seat, SeatColorsState, SeatControlLook, SeatTwo, SettingsDialogProps, ShellState, StackScreenOptions };