@tastic/shell 0.5.0 → 0.6.0

package/README.md

@@ -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); desktop web (a browser window at least
+  `MATCH_CHIPS_DESKTOP_MIN_WIDTH`, 768, wide), 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 on desktop web.
+- **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

@@ -399,6 +399,30 @@ declare function imageGameIcon(images: {
     dark: ImageSourcePropType;
 }): ComponentType<GameIconProps>;
 
+declare const MATCH_CHIPS_DESKTOP_MIN_WIDTH = 768;
+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 on desktop web, 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 on desktop
+     * web: 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 on desktop web. */
+declare function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }: MatchChipsProps): react.JSX.Element;
+
 interface SettingsDialogProps {
     visible: boolean;
     onDismiss: () => void;
@@ -551,5 +575,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_DESKTOP_MIN_WIDTH, 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, 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

@@ -399,6 +399,30 @@ declare function imageGameIcon(images: {
     dark: ImageSourcePropType;
 }): ComponentType<GameIconProps>;
 
+declare const MATCH_CHIPS_DESKTOP_MIN_WIDTH = 768;
+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 on desktop web, 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 on desktop
+     * web: 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 on desktop web. */
+declare function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }: MatchChipsProps): react.JSX.Element;
+
 interface SettingsDialogProps {
     visible: boolean;
     onDismiss: () => void;
@@ -551,5 +575,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_DESKTOP_MIN_WIDTH, 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, 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.js

@@ -35,6 +35,9 @@ __export(index_exports, {
   GUEST_PLAYER_ID: () => GUEST_PLAYER_ID,
   HomeScreen: () => HomeScreen,
   LoadoutRoute: () => LoadoutRoute,
+  MATCH_CHIPS_DESKTOP_MIN_WIDTH: () => MATCH_CHIPS_DESKTOP_MIN_WIDTH,
+  MATCH_CHIPS_FADE_MS: () => MATCH_CHIPS_FADE_MS,
+  MatchChips: () => MatchChips,
   PREVIEW_ASPECT: () => PREVIEW_ASPECT,
   PackProvider: () => PackProvider,
   PlayRoute: () => PlayRoute,
@@ -1566,6 +1569,46 @@ function imageGameIcon(images) {
   };
 }
 
+// src/components/MatchChips.tsx
+var import_auto_paper8 = require("@rific/auto-paper");
+var import_feedback_press4 = require("@rific/feedback-press");
+var import_react18 = require("react");
+var import_react_native10 = require("react-native");
+var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"));
+var import_react_native_safe_area_context5 = require("react-native-safe-area-context");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var MATCH_CHIPS_DESKTOP_MIN_WIDTH = 768;
+var MATCH_CHIPS_FADE_MS = 150;
+var CHIP_SIZE = 48;
+var EDGE_PAD = 8;
+function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }) {
+  const { width, height } = (0, import_react_native10.useWindowDimensions)();
+  const insets = (0, import_react_native_safe_area_context5.useSafeAreaInsets)();
+  const { dark } = (0, import_auto_paper8.useAutoPaperTheme)();
+  const desktopWeb = import_react_native10.Platform.OS === "web" && width >= MATCH_CHIPS_DESKTOP_MIN_WIDTH;
+  const visible = desktopWeb || !playing;
+  const opacity = (0, import_react_native_reanimated3.useSharedValue)(visible ? 1 : 0);
+  (0, import_react18.useEffect)(() => {
+    opacity.value = (0, import_react_native_reanimated3.withTiming)(visible ? 1 : 0, { duration: MATCH_CHIPS_FADE_MS });
+  }, [visible]);
+  const fadeStyle = (0, import_react_native_reanimated3.useAnimatedStyle)(() => ({ opacity: opacity.value }));
+  const iconColor = dark ? "#FFFFFF" : "#000000";
+  const containerColor = dark ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.55)";
+  const between = faceToFace && !desktopWeb;
+  const top = between ? (centerLineY ?? height / 2) - CHIP_SIZE / 2 : EDGE_PAD + insets.top;
+  const backSlot = { top, left: EDGE_PAD + insets.left };
+  const settingsSlot = { top, right: EDGE_PAD + insets.right };
+  const pointerEvents = visible ? "box-none" : "none";
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_reanimated3.default.View, { pointerEvents, style: [styles6.slot, backSlot, fadeStyle], testID: "match-chips-back", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.IconButton, { icon: "arrow-left", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onBack, accessibilityLabel: "Back" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_reanimated3.default.View, { pointerEvents, style: [styles6.slot, settingsSlot, fadeStyle], testID: "match-chips-settings", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onSettings, accessibilityLabel: "Settings" }) })
+  ] });
+}
+var styles6 = import_react_native10.StyleSheet.create({
+  chip: { margin: 0 },
+  slot: { position: "absolute" }
+});
+
 // src/hooks/useActiveRound.ts
 var import_react_redux11 = require("react-redux");
 function useActiveRound(game, defaults) {
@@ -1581,12 +1624,12 @@ var import_toolkit = require("@reduxjs/toolkit");
 var import_redux_persist = require("redux-persist");
 
 // src/redux/shellState.ts
-var import_auto_paper8 = require("@rific/auto-paper");
+var import_auto_paper9 = require("@rific/auto-paper");
 var import_core11 = require("@rific/core");
-var import_feedback_press4 = require("@rific/feedback-press");
+var import_feedback_press5 = require("@rific/feedback-press");
 var import_profile10 = require("@tastic/profile");
-var initialSoundSettings = { ...import_feedback_press4.defaultSoundSettings, enabled: !__DEV__ };
-var appSoundReducer = (state = initialSoundSettings, action) => (0, import_feedback_press4.soundReducer)(state, action);
+var initialSoundSettings = { ...import_feedback_press5.defaultSoundSettings, enabled: !__DEV__ };
+var appSoundReducer = (state = initialSoundSettings, action) => (0, import_feedback_press5.soundReducer)(state, action);
 function createShellReducers({ seatColors, appearance = "system", seatTheme }) {
   return {
     // Explicit primary/secondary triad (rather than a single seed expanded via harmony) so the pack's
@@ -1598,8 +1641,8 @@ function createShellReducers({ seatColors, appearance = "system", seatTheme }) {
     // createThemeReducer's own default, when it sets none).
     // A pack with its own seatTheme starts from what seat 1's default color makes of it instead (dark
     // only when the pack's appearance is; hooks/useSeatColors.ts re-applies it with the live mode).
-    theme: (0, import_auto_paper8.createThemeReducer)(seatTheme ? { appearance, ...seatTheme(seatColors, appearance === "dark") } : { appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: (0, import_auto_paper8.getThirdColor)(seatColors[1], seatColors[2]) } }),
-    haptic: import_feedback_press4.hapticReducer,
+    theme: (0, import_auto_paper9.createThemeReducer)(seatTheme ? { appearance, ...seatTheme(seatColors, appearance === "dark") } : { appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: (0, import_auto_paper9.getThirdColor)(seatColors[1], seatColors[2]) } }),
+    haptic: import_feedback_press5.hapticReducer,
     sound: appSoundReducer,
     // @rific/core's Keep Awake setting (see Providers.tsx's KeepAwakeBridge), under the namespace its
     // REHYDRATE handling expects.
@@ -1709,8 +1752,8 @@ function forgetProfileAchievements(dropStats) {
 
 // src/gameStats.tsx
 var import_achievements2 = require("@tastic/achievements");
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SEATS = [1, 2];
 function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileStatsView }) {
   const { actions: actions6, reducer: sliceReducer } = (0, import_achievements2.createAchievementsSlice)({
@@ -1727,7 +1770,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
   };
   const reducer6 = onProfileRemoved(sliceReducer, forgetProfileAchievements(dropProfileStats));
   const profileViews = (stats) => Object.fromEntries(Object.entries(stats.profiles).map(([profileId, bucket]) => [profileId, getProfileStatsView(bucket)]));
-  const Context = (0, import_react18.createContext)(null);
+  const Context = (0, import_react19.createContext)(null);
   function Provider({ children }) {
     const { stats, unlockedAchievements, recordOutcome, resetAll } = (0, import_achievements2.useAchievements)({
       catalog,
@@ -1735,18 +1778,18 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
       actions: actions6,
       profileViews
     });
-    const record = (0, import_react18.useCallback)(
+    const record = (0, import_react19.useCallback)(
       (update, profileIds) => {
         const result = recordOutcome(update);
         return { device: result.device, profiles: (0, import_achievements2.mapUnlocksBySeat)(SEATS, profileIds, result.profiles) };
       },
       [recordOutcome]
     );
-    const value = (0, import_react18.useMemo)(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Context.Provider, { value, children });
+    const value = (0, import_react19.useMemo)(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Context.Provider, { value, children });
   }
   function useStats() {
-    const ctx = (0, import_react18.useContext)(Context);
+    const ctx = (0, import_react19.useContext)(Context);
     if (!ctx) throw new Error(`The ${key} stats are read within their game's Provider`);
     return ctx;
   }
@@ -1754,7 +1797,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
 }
 
 // src/playerSettings.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_redux12 = require("react-redux");
 var SEATS2 = [1, 2];
 function seatPlayerKey(selection, seat) {
@@ -1798,8 +1841,8 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
     const saved = (0, import_react_redux12.useSelector)((state) => state[settingsKey]);
     const controls = (0, import_react_redux12.useSelector)((state) => state[controlsKey]);
     const dispatch = (0, import_react_redux12.useDispatch)();
-    const settings = (0, import_react19.useMemo)(() => compose(saved, controls, selection, seatTwoIsPerson), [saved, controls, selection, seatTwoIsPerson]);
-    const setSettings = (0, import_react19.useCallback)(
+    const settings = (0, import_react20.useMemo)(() => compose(saved, controls, selection, seatTwoIsPerson), [saved, controls, selection, seatTwoIsPerson]);
+    const setSettings = (0, import_react20.useCallback)(
       (next) => {
         const { controlScheme, ...changes } = next;
         if (Object.keys(changes).length > 0) dispatch(patch(seatPlayerKey(selection, 1), changes));
@@ -1822,6 +1865,9 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
   GUEST_PLAYER_ID,
   HomeScreen,
   LoadoutRoute,
+  MATCH_CHIPS_DESKTOP_MIN_WIDTH,
+  MATCH_CHIPS_FADE_MS,
+  MatchChips,
   PREVIEW_ASPECT,
   PackProvider,
   PlayRoute,

package/dist/index.mjs

@@ -1492,6 +1492,46 @@ function imageGameIcon(images) {
   };
 }
 
+// src/components/MatchChips.tsx
+import { useAutoPaperTheme as useAutoPaperTheme6 } from "@rific/auto-paper";
+import { IconButton as IconButton2 } from "@rific/feedback-press";
+import { useEffect as useEffect7 } from "react";
+import { Platform as Platform3, StyleSheet as StyleSheet6, useWindowDimensions as useWindowDimensions2 } from "react-native";
+import Animated2, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var MATCH_CHIPS_DESKTOP_MIN_WIDTH = 768;
+var MATCH_CHIPS_FADE_MS = 150;
+var CHIP_SIZE = 48;
+var EDGE_PAD = 8;
+function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }) {
+  const { width, height } = useWindowDimensions2();
+  const insets = useSafeAreaInsets4();
+  const { dark } = useAutoPaperTheme6();
+  const desktopWeb = Platform3.OS === "web" && width >= MATCH_CHIPS_DESKTOP_MIN_WIDTH;
+  const visible = desktopWeb || !playing;
+  const opacity = useSharedValue(visible ? 1 : 0);
+  useEffect7(() => {
+    opacity.value = withTiming(visible ? 1 : 0, { duration: MATCH_CHIPS_FADE_MS });
+  }, [visible]);
+  const fadeStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+  const iconColor = dark ? "#FFFFFF" : "#000000";
+  const containerColor = dark ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.55)";
+  const between = faceToFace && !desktopWeb;
+  const top = between ? (centerLineY ?? height / 2) - CHIP_SIZE / 2 : EDGE_PAD + insets.top;
+  const backSlot = { top, left: EDGE_PAD + insets.left };
+  const settingsSlot = { top, right: EDGE_PAD + insets.right };
+  const pointerEvents = visible ? "box-none" : "none";
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx18(Animated2.View, { pointerEvents, style: [styles6.slot, backSlot, fadeStyle], testID: "match-chips-back", children: /* @__PURE__ */ jsx18(IconButton2, { icon: "arrow-left", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onBack, accessibilityLabel: "Back" }) }),
+    /* @__PURE__ */ jsx18(Animated2.View, { pointerEvents, style: [styles6.slot, settingsSlot, fadeStyle], testID: "match-chips-settings", children: /* @__PURE__ */ jsx18(IconButton2, { icon: "cog", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onSettings, accessibilityLabel: "Settings" }) })
+  ] });
+}
+var styles6 = StyleSheet6.create({
+  chip: { margin: 0 },
+  slot: { position: "absolute" }
+});
+
 // src/hooks/useActiveRound.ts
 import { useSelector as useSelector8 } from "react-redux";
 function useActiveRound(game, defaults) {
@@ -1636,7 +1676,7 @@ function forgetProfileAchievements(dropStats) {
 // src/gameStats.tsx
 import { createAchievementsSlice, mapUnlocksBySeat, useAchievements } from "@tastic/achievements";
 import { createContext as createContext5, useCallback as useCallback11, useContext as useContext5, useMemo as useMemo8 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SEATS = [1, 2];
 function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileStatsView }) {
   const { actions: actions6, reducer: sliceReducer } = createAchievementsSlice({
@@ -1669,7 +1709,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
       [recordOutcome]
     );
     const value = useMemo8(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
-    return /* @__PURE__ */ jsx18(Context.Provider, { value, children });
+    return /* @__PURE__ */ jsx19(Context.Provider, { value, children });
   }
   function useStats() {
     const ctx = useContext5(Context);
@@ -1747,6 +1787,9 @@ export {
   GUEST_PLAYER_ID,
   HomeScreen,
   LoadoutRoute,
+  MATCH_CHIPS_DESKTOP_MIN_WIDTH,
+  MATCH_CHIPS_FADE_MS,
+  MatchChips,
   PREVIEW_ASPECT,
   PackProvider,
   PlayRoute,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/shell",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "The app around a pack of React Native games, two-seat or for one player: Home, the loadout, the stats screen, Profiles and Settings, the pack's Redux store and its root providers, driven by one PackDefinition",
   "keywords": [
     "react-native",

package/src/components/MatchChips.tsx

@@ -0,0 +1,72 @@
+import { useAutoPaperTheme } from '@rific/auto-paper'
+import { IconButton } from '@rific/feedback-press'
+import { useEffect } from 'react'
+import { Platform, StyleSheet, useWindowDimensions } from 'react-native'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+// A web window at least this wide is a computer: the chips stay up in the page's top corners all
+// match. The games' own desktop cutoff, the same number everywhere.
+export const MATCH_CHIPS_DESKTOP_MIN_WIDTH = 768
+// How long the chips take to fade out when play starts, and back in when it stops.
+export const MATCH_CHIPS_FADE_MS = 150
+// The chip's box: a 24 icon in IconButton's 48, with Paper's margin zeroed.
+const CHIP_SIZE = 48
+const EDGE_PAD = 8
+
+export 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 on desktop web, 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 on desktop
+   * web: 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 on desktop web. */
+export function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }: MatchChipsProps) {
+  const { width, height } = useWindowDimensions()
+  const insets = useSafeAreaInsets()
+  const { dark } = useAutoPaperTheme()
+  const desktopWeb = Platform.OS === 'web' && width >= MATCH_CHIPS_DESKTOP_MIN_WIDTH
+  const visible = desktopWeb || !playing
+  const opacity = useSharedValue(visible ? 1 : 0)
+  useEffect(() => {
+    opacity.value = withTiming(visible ? 1 : 0, { duration: MATCH_CHIPS_FADE_MS })
+  }, [visible]) // eslint-disable-line react-hooks/exhaustive-deps
+  const fadeStyle = useAnimatedStyle(() => ({ opacity: opacity.value }))
+
+  const iconColor = dark ? '#FFFFFF' : '#000000'
+  const containerColor = dark ? 'rgba(0,0,0,0.55)' : 'rgba(255,255,255,0.55)'
+  const between = faceToFace && !desktopWeb
+  const top = between ? (centerLineY ?? height / 2) - CHIP_SIZE / 2 : EDGE_PAD + insets.top
+  const backSlot = { top, left: EDGE_PAD + insets.left }
+  const settingsSlot = { top, right: EDGE_PAD + insets.right }
+  const pointerEvents = visible ? 'box-none' : 'none'
+  return (
+    <>
+      <Animated.View pointerEvents={pointerEvents} style={[styles.slot, backSlot, fadeStyle]} testID='match-chips-back'>
+        <IconButton icon='arrow-left' iconColor={iconColor} containerColor={containerColor} style={styles.chip} size={24} onPress={onBack} accessibilityLabel='Back' />
+      </Animated.View>
+      <Animated.View pointerEvents={pointerEvents} style={[styles.slot, settingsSlot, fadeStyle]} testID='match-chips-settings'>
+        <IconButton icon='cog' iconColor={iconColor} containerColor={containerColor} style={styles.chip} size={24} onPress={onSettings} accessibilityLabel='Settings' />
+      </Animated.View>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  chip: { margin: 0 },
+  slot: { position: 'absolute' }
+})

package/src/index.ts

@@ -15,6 +15,7 @@ export { StatsScreen } from './screens/StatsScreen'
 // What a game's own screens use.
 export { useGameGuide } from './components/GuideHost'
 export { imageGameIcon } from './components/imageGameIcon'
+export { MATCH_CHIPS_DESKTOP_MIN_WIDTH, MATCH_CHIPS_FADE_MS, MatchChips, type MatchChipsProps } from './components/MatchChips'
 export { SettingsDialog, type SettingsDialogProps } from './components/SettingsDialog'
 export { useActiveRound } from './hooks/useActiveRound'
 export { useAppSettings } from './hooks/useAppSettings'