@tastic/hud 0.8.5 → 0.13.0

package/dist/guide/index.mjs

@@ -0,0 +1,428 @@
+import {
+  getOverlayCardColors,
+  overlayActionStyles,
+  overlayStyles
+} from "../chunk-32U2OIRW.mjs";
+
+// src/guide/DirectionKeysHint.tsx
+import { useAutoPaperTheme } from "@rific/auto-paper";
+import { StyleSheet, View } from "react-native";
+import { Icon, Text } from "react-native-paper";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CAP_SIZE = 34;
+var ARROWS = { up: "arrow-up", left: "arrow-left", down: "arrow-down", right: "arrow-right" };
+function KeyCap({ label, icon, color }) {
+  return /* @__PURE__ */ jsx(View, { style: [styles.cap, { borderColor: color }], children: label !== void 0 ? /* @__PURE__ */ jsx(Text, { variant: "titleMedium", style: [styles.capLabel, { color }], children: label }) : /* @__PURE__ */ jsx(Icon, { source: icon, size: 20, color }) });
+}
+function DirectionKeysHint({ labels, axis = "both", color }) {
+  const { colors } = useAutoPaperTheme();
+  const tint = color ?? colors.primary;
+  if (axis === "vertical") {
+    const accessibilityLabel2 = labels?.up && labels.down ? `Keys ${labels.up} and ${labels.down}` : "Up and down arrow keys";
+    return /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel: accessibilityLabel2, style: styles.cluster, children: [
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.up, icon: ARROWS.up, color: tint }),
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.down, icon: ARROWS.down, color: tint })
+    ] });
+  }
+  const accessibilityLabel = labels?.up && labels.left && labels.down && labels.right ? `Keys ${labels.up}, ${labels.left}, ${labels.down}, ${labels.right}` : "Arrow keys";
+  return /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel, style: styles.cluster, children: [
+    /* @__PURE__ */ jsx(KeyCap, { label: labels?.up, icon: ARROWS.up, color: tint }),
+    /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.left, icon: ARROWS.left, color: tint }),
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.down, icon: ARROWS.down, color: tint }),
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.right, icon: ARROWS.right, color: tint })
+    ] })
+  ] });
+}
+var styles = StyleSheet.create({
+  cap: {
+    alignItems: "center",
+    borderRadius: 8,
+    borderWidth: 2,
+    height: CAP_SIZE,
+    justifyContent: "center",
+    width: CAP_SIZE
+  },
+  capLabel: {
+    fontWeight: "bold"
+  },
+  cluster: {
+    alignItems: "center",
+    gap: 6
+  },
+  row: {
+    flexDirection: "row",
+    gap: 6
+  }
+});
+
+// src/guide/GuideProvider.tsx
+import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/guide/HowToPlayDialog.tsx
+import { useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
+import { Button } from "@rific/feedback-press";
+import { useEffect, useRef, useState } from "react";
+import { BackHandler, ScrollView, StyleSheet as StyleSheet2, useWindowDimensions, View as View2 } from "react-native";
+import { Portal, Text as Text2 } from "react-native-paper";
+import { useReducedMotion } from "react-native-reanimated";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OVERLAY_GUTTER = 24;
+var CARD_PADDING = 24;
+var MAX_CARD_WIDTH = 360;
+var MAX_CARD_WIDTH_TURNED = 520;
+var ART_HEIGHT = 132;
+var COMPACT_BELOW = 480;
+var ART_HEIGHT_COMPACT = 88;
+function getGuideCardSize(windowWidth, windowHeight, rotation) {
+  const turned = rotation === 90 || rotation === -90;
+  const availableWidth = (turned ? windowHeight : windowWidth) - OVERLAY_GUTTER * 2;
+  const availableHeight = (turned ? windowWidth : windowHeight) - OVERLAY_GUTTER * 2;
+  const width = Math.min(turned ? MAX_CARD_WIDTH_TURNED : MAX_CARD_WIDTH, availableWidth);
+  return {
+    width,
+    pageWidth: width - CARD_PADDING * 2,
+    maxHeight: availableHeight,
+    artHeight: availableHeight < COMPACT_BELOW ? ART_HEIGHT_COMPACT : ART_HEIGHT
+  };
+}
+function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
+  const { dark, colors } = useAutoPaperTheme2();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const reducedMotion = useReducedMotion();
+  const [index, setIndex] = useState(0);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      onSkip();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [onSkip]);
+  const { fg, cardBg, cardBorder, fgMuted } = getOverlayCardColors(dark);
+  const { width: cardWidth, pageWidth, maxHeight, artHeight } = getGuideCardSize(windowWidth, windowHeight, rotation);
+  const rotationStyle = rotation === 0 ? void 0 : { transform: [{ rotate: `${rotation}deg` }] };
+  const isFirst = index === 0;
+  const isLast = index === steps.length - 1;
+  const isOnly = steps.length === 1;
+  const artBackground = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+  const targetRef = useRef(null);
+  function goTo(next) {
+    targetRef.current = next;
+    setIndex(next);
+    scrollRef.current?.scrollTo({ x: next * pageWidth, animated: !reducedMotion });
+  }
+  function syncToOffset(offsetX) {
+    const page = Math.round(offsetX / pageWidth);
+    if (page < 0 || page >= steps.length) return;
+    if (targetRef.current !== null) {
+      if (page === targetRef.current) targetRef.current = null;
+      return;
+    }
+    setIndex(page);
+  }
+  function handleScroll(e) {
+    syncToOffset(e.nativeEvent.contentOffset.x);
+  }
+  function handleMomentumEnd(e) {
+    targetRef.current = null;
+    syncToOffset(e.nativeEvent.contentOffset.x);
+  }
+  return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(View2, { style: [overlayStyles.overlay, styles2.overlay], children: /* @__PURE__ */ jsxs2(View2, { accessibilityViewIsModal: true, style: [overlayStyles.card, styles2.card, { width: cardWidth, maxHeight, backgroundColor: cardBg, borderColor: cardBorder }, rotationStyle], children: [
+    /* @__PURE__ */ jsx2(ScrollView, { ref: scrollRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, scrollEventThrottle: 16, onMomentumScrollEnd: handleMomentumEnd, style: [styles2.pager, { width: pageWidth }], children: steps.map((step, i) => /* @__PURE__ */ jsxs2(ScrollView, { nestedScrollEnabled: true, showsVerticalScrollIndicator: false, style: { width: pageWidth }, contentContainerStyle: styles2.page, children: [
+      step.art !== void 0 && /* @__PURE__ */ jsx2(View2, { style: [styles2.art, { height: artHeight, backgroundColor: artBackground }], children: step.art }),
+      /* @__PURE__ */ jsx2(Text2, { variant: "headlineSmall", style: [styles2.title, { color: fg }], children: step.title }),
+      /* @__PURE__ */ jsx2(Text2, { variant: "bodyMedium", style: [styles2.body, { color: fg }], children: step.body })
+    ] }, i)) }),
+    steps.length > 1 && /* @__PURE__ */ jsx2(View2, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles2.dots, children: steps.map((_, i) => /* @__PURE__ */ jsx2(View2, { style: [styles2.dot, { backgroundColor: i === index ? colors.primary : fgMuted }] }, i)) }),
+    /* @__PURE__ */ jsxs2(View2, { style: overlayActionStyles.actions, children: [
+      !isOnly && /* @__PURE__ */ jsx2(Button, { mode: "outlined", onPress: isFirst ? onSkip : () => goTo(index - 1), style: overlayActionStyles.actionButton, children: isFirst ? "Skip" : "Back" }),
+      /* @__PURE__ */ jsx2(Button, { mode: "contained", onPress: isLast ? onFinish : () => goTo(index + 1), style: isOnly ? overlayActionStyles.actionButtonSingle : overlayActionStyles.actionButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: isLast ? "Ready" : "Next" })
+    ] })
+  ] }) }) });
+}
+function HowToPlayDialog({ visible, steps, ...rest }) {
+  if (!visible || steps.length === 0) return null;
+  return /* @__PURE__ */ jsx2(HowToPlayCard, { steps, ...rest });
+}
+var styles2 = StyleSheet2.create({
+  art: {
+    alignItems: "center",
+    borderRadius: 12,
+    justifyContent: "center",
+    overflow: "hidden",
+    width: "100%"
+  },
+  body: {
+    textAlign: "center"
+  },
+  // Additive on top of overlayCard's own shared `card` shape — its default 32px padding is tighter
+  // here (a paged card wants more width for its art) and the shared 16px gap is right.
+  card: {
+    padding: CARD_PADDING
+  },
+  dot: {
+    borderRadius: 4,
+    height: 8,
+    width: 8
+  },
+  dots: {
+    flexDirection: "row",
+    gap: 8
+  },
+  overlay: {
+    paddingHorizontal: OVERLAY_GUTTER
+  },
+  page: {
+    alignItems: "center",
+    gap: 12
+  },
+  pager: {
+    flexShrink: 1
+  },
+  title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+
+// src/guide/GuideProvider.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var noop = () => {
+};
+var GuideContext = createContext({ isOpen: false, open: noop, close: noop, requestAutoShow: noop });
+function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, children }) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const autoShownRef = useRef2(false);
+  const unseen = seenVersion < currentVersion;
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    if (unseen) onSeen(currentVersion);
+  }, [unseen, onSeen, currentVersion]);
+  const requestAutoShow = useCallback(() => {
+    if (!unseen || autoShownRef.current) return;
+    autoShownRef.current = true;
+    setIsOpen(true);
+  }, [unseen]);
+  const value = useMemo(() => ({ isOpen, open, close, requestAutoShow }), [isOpen, open, close, requestAutoShow]);
+  return /* @__PURE__ */ jsxs3(GuideContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx3(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
+  ] });
+}
+function useGuide() {
+  return useContext(GuideContext);
+}
+function useAutoShowGuide(enabled = true) {
+  const { requestAutoShow } = useGuide();
+  useEffect2(() => {
+    if (enabled) requestAutoShow();
+  }, [enabled, requestAutoShow]);
+}
+
+// src/guide/guideSlice.ts
+var REHYDRATE = "persist/REHYDRATE";
+function createGuideSlice({ currentVersion, mountKey = "guide", persistKey = "root" }) {
+  const MARK_SEEN = `${mountKey}/markSeen`;
+  const initialState = { versionSeen: 0 };
+  function markSeen(version) {
+    return { type: MARK_SEEN, payload: version };
+  }
+  function reducer(state = initialState, action) {
+    if (action.type === REHYDRATE) {
+      if (action.key !== void 0 && action.key !== persistKey) return state;
+      const payload = action.payload;
+      if (!payload) return state;
+      const persisted = payload[mountKey];
+      if (typeof persisted?.versionSeen === "number") return { versionSeen: persisted.versionSeen };
+      return { versionSeen: currentVersion };
+    }
+    if (action.type === MARK_SEEN && typeof action.payload === "number") {
+      return { versionSeen: Math.max(state.versionSeen, action.payload) };
+    }
+    return state;
+  }
+  function selectVersionSeen(rootState) {
+    return rootState[mountKey]?.versionSeen ?? 0;
+  }
+  return { actions: { markSeen }, reducer, selectVersionSeen };
+}
+function createReturningPlayerMigrate(storage, legacyKeys) {
+  return async (state, version) => {
+    if (state !== void 0 || legacyKeys.length === 0) return state;
+    try {
+      const values = await Promise.all(legacyKeys.map((key) => storage.getItem(key)));
+      return values.some((value) => value !== null) ? { _persist: { version, rehydrated: false } } : void 0;
+    } catch {
+      return void 0;
+    }
+  };
+}
+
+// src/guide/SeatDevicesHint.tsx
+import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Icon as Icon2 } from "react-native-paper";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ICON = {
+  keyboard: { source: "keyboard-outline", size: 56 },
+  mouse: { source: "mouse-outline", size: 44 }
+};
+var ORDER = ["keyboard", "mouse"];
+function SeatDevicesHint({ devices, seatColors }) {
+  const { colors } = useAutoPaperTheme3();
+  const tints = seatColors ?? [colors.primary, colors.secondary];
+  const accessibilityLabel = devices.map((device, i) => `Player ${i + 1} uses the ${device}`).join(", ");
+  return /* @__PURE__ */ jsx4(View3, { accessible: true, accessibilityLabel, style: styles3.row, children: ORDER.map((device) => {
+    const seats = devices.flatMap((d, i) => d === device ? [i] : []);
+    if (seats.length === 0) return null;
+    const color = seats.length === 1 ? tints[seats[0]] ?? colors.onSurface : colors.onSurface;
+    return /* @__PURE__ */ jsx4(Icon2, { source: ICON[device].source, size: ICON[device].size, color }, device);
+  }) });
+}
+var styles3 = StyleSheet3.create({
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 20
+  }
+});
+
+// src/guide/SeatDiagram.tsx
+import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { Text as Text3 } from "react-native-paper";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEVICE_WIDTH = 88;
+var DEVICE_HEIGHT = 120;
+function SeatDiagram({ topColor, bottomColor, topLabel = "P2", bottomLabel = "P1" }) {
+  const { colors } = useAutoPaperTheme4();
+  const top = topColor ?? colors.secondary;
+  const bottom = bottomColor ?? colors.primary;
+  return /* @__PURE__ */ jsxs4(View4, { accessible: true, accessibilityLabel: `${bottomLabel} plays the bottom half, ${topLabel} plays the top half`, style: [styles4.device, { borderColor: colors.onSurface }], children: [
+    /* @__PURE__ */ jsxs4(View4, { style: [styles4.half, { borderColor: top }], children: [
+      /* @__PURE__ */ jsx5(View4, { style: [StyleSheet4.absoluteFill, styles4.tint, { backgroundColor: top }] }),
+      /* @__PURE__ */ jsx5(Text3, { variant: "titleMedium", style: [styles4.label, styles4.flipped, { color: top }], children: topLabel })
+    ] }),
+    /* @__PURE__ */ jsxs4(View4, { style: [styles4.half, styles4.bottomHalf, { borderColor: bottom }], children: [
+      /* @__PURE__ */ jsx5(View4, { style: [StyleSheet4.absoluteFill, styles4.tint, { backgroundColor: bottom }] }),
+      /* @__PURE__ */ jsx5(Text3, { variant: "titleMedium", style: [styles4.label, { color: bottom }], children: bottomLabel })
+    ] })
+  ] });
+}
+var styles4 = StyleSheet4.create({
+  bottomHalf: {
+    borderTopWidth: 0
+  },
+  device: {
+    borderRadius: 16,
+    borderWidth: 2,
+    height: DEVICE_HEIGHT,
+    overflow: "hidden",
+    width: DEVICE_WIDTH
+  },
+  flipped: {
+    transform: [{ rotate: "180deg" }]
+  },
+  half: {
+    alignItems: "center",
+    borderWidth: 2,
+    flex: 1,
+    justifyContent: "center"
+  },
+  label: {
+    fontWeight: "bold"
+  },
+  // A wash of the seat color behind its own label rather than an rgba() fill — the theme's colors
+  // aren't guaranteed to be 6-digit hex, so an opacity layer is the only alpha that always works.
+  tint: {
+    opacity: 0.2
+  }
+});
+
+// src/guide/SwipeHint.tsx
+import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
+import { useEffect as useEffect3 } from "react";
+import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
+import { Icon as Icon3 } from "react-native-paper";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion as useReducedMotion2, useSharedValue, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var DOT_COUNT = 7;
+var FINGER_SIZE = 28;
+var MOUSE_SIZE = 30;
+var SWEEP_MS = 900;
+var PAUSE_MS = 500;
+var ARROW_ICON = { up: "arrow-up", down: "arrow-down", left: "arrow-left", right: "arrow-right" };
+function SwipeHint({ direction = "right", pointer = "finger", color, length = 96 }) {
+  const { colors } = useAutoPaperTheme5();
+  const tint = color ?? colors.primary;
+  const reducedMotion = useReducedMotion2();
+  const progress = useSharedValue(0.5);
+  const horizontal = direction === "left" || direction === "right";
+  const sign = direction === "right" || direction === "down" ? 1 : -1;
+  useEffect3(() => {
+    if (reducedMotion) {
+      progress.value = 0.5;
+      return;
+    }
+    progress.value = 0;
+    progress.value = withRepeat(withSequence(withTiming(1, { duration: SWEEP_MS, easing: Easing.out(Easing.cubic) }), withTiming(1, { duration: PAUSE_MS }), withTiming(0, { duration: 0 })), -1);
+  }, [reducedMotion]);
+  const fingerStyle = useAnimatedStyle(() => {
+    const travel = (progress.value - 0.5) * length * sign;
+    return {
+      opacity: reducedMotion ? 1 : Math.min(1, progress.value * 6, (1 - progress.value) * 6 + 1e-3),
+      transform: horizontal ? [{ translateX: travel }] : [{ translateY: travel }]
+    };
+  });
+  const axis = horizontal ? sign > 0 ? "row" : "row-reverse" : sign > 0 ? "column" : "column-reverse";
+  return /* @__PURE__ */ jsxs5(View5, { accessibilityLabel: `${pointer === "mouse" ? "Drag" : "Swipe"} ${direction}`, accessible: true, style: [styles5.path, { flexDirection: axis }], children: [
+    /* @__PURE__ */ jsx6(View5, { style: [styles5.dots, { flexDirection: axis, [horizontal ? "width" : "height"]: length }], children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ jsx6(View5, { style: [styles5.dot, { backgroundColor: tint, opacity: 0.35 + 0.65 * i / (DOT_COUNT - 1) }] }, i)) }),
+    /* @__PURE__ */ jsx6(Icon3, { source: ARROW_ICON[direction], size: 28, color: tint }),
+    pointer === "mouse" ? /* @__PURE__ */ jsx6(Animated.View, { style: [styles5.mouse, fingerStyle], children: /* @__PURE__ */ jsx6(Icon3, { source: "mouse", size: MOUSE_SIZE, color: tint }) }) : /* @__PURE__ */ jsx6(Animated.View, { style: [styles5.finger, { borderColor: tint }, fingerStyle] })
+  ] });
+}
+var styles5 = StyleSheet5.create({
+  dot: {
+    borderRadius: 3,
+    height: 6,
+    width: 6
+  },
+  dots: {
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  // Centered on the whole path (not on the dots row alone) by the container's own alignItems/
+  // justifyContent, then pushed along the axis by its own animated translate — absolute so it never
+  // takes space from the dots and arrowhead it's drawn over.
+  finger: {
+    borderRadius: FINGER_SIZE / 2,
+    borderWidth: 3,
+    height: FINGER_SIZE,
+    position: "absolute",
+    width: FINGER_SIZE
+  },
+  // Positioned exactly like `finger` (absolute, centered by the container, moved by the same animated
+  // translate); only what's drawn differs.
+  mouse: {
+    position: "absolute"
+  },
+  path: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  DirectionKeysHint,
+  GuideProvider,
+  HowToPlayDialog,
+  SeatDevicesHint,
+  SeatDiagram,
+  SwipeHint,
+  createGuideSlice,
+  createReturningPlayerMigrate,
+  getGuideCardSize,
+  useAutoShowGuide,
+  useGuide
+};