@tastic/hud 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",

package/src/ConfirmDialog.tsx

@@ -0,0 +1,104 @@
+import { useAutoPaperTheme } from '@rific/auto-paper'
+import { Button } from '@rific/feedback-press'
+import { StyleSheet, View } from 'react-native'
+import { Icon, Portal, Text } from 'react-native-paper'
+
+export interface ConfirmDialogProps {
+  visible: boolean
+  title: string
+  message: string
+  confirmLabel: string
+  cancelLabel: string
+  onConfirm: () => void
+  onCancel: () => void
+  // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) - same convention as
+  // BaseSettingsDialog's own rotation prop; defaults to 0 for a caller with no per-player zone to
+  // match (a portrait-only or single-player game has nothing to stay consistent with).
+  rotation?: number
+  // Any react-native-paper Icon `source` name, shown above the title - defaults to a plain
+  // question mark, since this component has no way to know why a caller is asking.
+  icon?: string
+  // Whether the confirm button reads as destructive (the fleet's shared `danger` semantic role)
+  // instead of the default primary-colored affirmative action.
+  destructive?: boolean
+}
+
+// A themed replacement for the native Alert.alert/window.confirm two-button confirm pattern - the
+// same "retro card overlay" look BaseSettingsDialog's own update-check info messages already use
+// (see its onInfo/infoMessage), generalized here into its own reusable, exported component for any
+// caller that needs a real yes/no decision instead of a single OK dismissal. A solid backdrop +
+// centered card, not react-native-paper's own Dialog (which BaseSettingsDialog uses instead) -
+// this renders identically on every platform, including web, where react-native-web's Alert.alert
+// is a hard no-op (confirmed: its entire implementation is `static alert() {}`) and Dialog's own
+// Portal-based positioning has its own web quirks BaseSettingsDialog already works around.
+export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = 'help-circle-outline', destructive = false }: ConfirmDialogProps) {
+  const { dark, colors } = useAutoPaperTheme()
+  if (!visible) return null
+
+  // High-contrast retro look: literal black/white by appearance, not auto-paper's own (slightly
+  // tinted) background role - same convention BaseSettingsDialog's own overlay card uses.
+  const fg = dark ? '#FFFFFF' : '#000000'
+  const cardBg = dark ? '#111111' : '#F2F2F2'
+  const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
+  const accent = destructive ? colors.danger : colors.primary
+  const onAccent = destructive ? colors.onDanger : colors.onPrimary
+
+  return (
+    <Portal>
+      <View style={styles.overlay}>
+        <View style={[styles.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+          <Icon source={icon} size={64} color={accent} />
+          <Text variant='headlineLarge' style={[styles.title, { color: accent }]}>
+            {title}
+          </Text>
+          <Text variant='bodyLarge' style={[styles.body, { color: fg }]}>
+            {message}
+          </Text>
+          <View style={styles.actions}>
+            <Button mode='outlined' onPress={onCancel} style={styles.actionButton}>
+              {cancelLabel}
+            </Button>
+            <Button mode='contained' onPress={onConfirm} style={styles.actionButton} buttonColor={accent} textColor={onAccent}>
+              {confirmLabel}
+            </Button>
+          </View>
+        </View>
+      </View>
+    </Portal>
+  )
+}
+
+const styles = StyleSheet.create({
+  actionButton: {
+    flex: 1
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: 12,
+    width: '100%'
+  },
+  body: {
+    textAlign: 'center'
+  },
+  card: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlay: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.72)',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
+  title: {
+    fontWeight: 'bold'
+  }
+})

package/src/ControlSchemePicker.tsx

@@ -0,0 +1,53 @@
+import { useIsTouchPrimaryDevice } from '@tastic/core'
+import { Platform } from 'react-native'
+
+import { MenuOption, SectionedDropdown } from './SectionedDropdown'
+import { PopoverHost } from './usePopoverHost'
+
+export interface ControlSchemePickerProps<T extends string | number> {
+  id: string
+  host: PopoverHost
+  value: T
+  onChange: (value: T) => void
+  options: MenuOption<T>[]
+  // Another seat's currently-selected scheme, if any — passed straight through as the underlying
+  // section's own takenValue (see SectionedDropdown's own doc: stays in the list, shown disabled,
+  // rather than filtered out). Two local seats sharing one physical keyboard (and, depending on your
+  // own option set, one mouse) can't both be assigned the same scheme at once; this is what a caller
+  // wires up to prevent that.
+  takenValue?: T
+  accentColor: string
+  mutedColor: string
+  onAccentColor?: string
+  dark: boolean
+  align?: 'left' | 'right' | 'center'
+  labelFontFamily?: string
+}
+
+// A single-select SectionedDropdown, opinionated for exactly one job: letting a local seat pick
+// which physical input drives it in a couch-multiplayer game. Fixes the trigger icon and
+// accessibility label so every game's control-scheme picker looks and reads the same, and — the
+// actual reason this exists as its own component rather than a usage snippet in each app's own
+// docs — bakes in the "does this even mean anything right now" gate every consumer was independently
+// re-deriving: a physical keyboard scheme has no meaning on a touch-primary device (there's nothing
+// to pick a *keyboard* layout for), and this repo's own components target React Native Web, where
+// `Platform.OS !== 'web'` means native/touch already, so keying off `useIsTouchPrimaryDevice` alone
+// isn't enough on its own — a native touch device still needs the `Platform.OS` check to be excluded
+// the same way a desktop browser needs the touch check. Renders nothing at all when either
+// condition fails, rather than a disabled/empty picker, so a caller can mount this unconditionally
+// inside its own per-seat layout (a `View` row alongside a color picker, say) without its own
+// `Platform`/`useIsTouchPrimaryDevice` branch — an always-rendered-but-sometimes-null child is a
+// no-op in a flex layout, so the surrounding row collapses to just its other children automatically.
+//
+// Deliberately generic over `T` (matching SectionedDropdown's own `MenuOption<T>`) rather than
+// hardcoding a fixed scheme union: this repo has no opinion on which schemes exist — the raw
+// physical-key layouts (wasd/arrows/ijkl/numpad) live in `@tastic/input`, and any extra values with
+// no keys of their own (a "keep using pointer input" option, say) are purely a per-app label — so a
+// caller always supplies its own `options` (and typically its own `T`) rather than this component
+// importing `@tastic/input` and choosing a set for every consumer.
+export function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }: ControlSchemePickerProps<T>) {
+  const isTouchPrimary = useIsTouchPrimaryDevice()
+  if (Platform.OS !== 'web' || isTouchPrimary) return null
+
+  return <SectionedDropdown id={id} host={host} icon='keyboard-outline' accessibilityLabel='Control scheme' sections={[{ kind: 'single', id: 'controls', options, value, onChange, takenValue }]} accentColor={accentColor} mutedColor={mutedColor} onAccentColor={onAccentColor} dark={dark} align={align} labelFontFamily={labelFontFamily} />
+}

package/src/CornerActionButtons.tsx

@@ -12,6 +12,14 @@ interface Props {
   // @tastic/split-screen's rotateInsets) — this component just adds the fixed 8px margin on top,
   // it doesn't know anything about physical device orientation itself.
   insets: { top: number; left: number; right: number }
+  // Overrides the top-left button's icon (a react-native-paper/MaterialCommunityIcons name) and its
+  // accessibility label — default 'arrow-left'/'Back'. Not every screen's top-left control is
+  // actually "undo the last navigation": a flat menu/detail screen with nothing deeper to pop back
+  // through often wants a literal home/menu affordance driving an absolute navigation instead (see
+  // e.g. Solitaire's GameChrome, whose onBack navigates straight to its root route). Pass both
+  // together — an icon without a matching label (or vice versa) misleads screen readers/tooltips.
+  backIcon?: string
+  backLabel?: string
 }
 
 // Back (top-left) + Settings (top-right) icon buttons, fixed at the screen's rotated corners — the
@@ -20,10 +28,10 @@ interface Props {
 // right answer for a screen where the top corners themselves fall *inside* one player's own rotated
 // zone (two-player face-to-face) — see SharedActionBand for that case instead, which callers select
 // between based on their own game-mode/orientation state (this component has no opinion on which).
-export function CornerActionButtons({ onBack, onSettings, fg, insets }: Props) {
+export function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = 'arrow-left', backLabel = 'Back' }: Props) {
   return (
     <>
-      <IconButton icon='arrow-left' iconColor={fg} size={24} style={[styles.back, { top: 8 + insets.top, left: 8 + insets.left }]} onPress={onBack} accessibilityLabel='Back' />
+      <IconButton icon={backIcon} iconColor={fg} size={24} style={[styles.back, { top: 8 + insets.top, left: 8 + insets.left }]} onPress={onBack} accessibilityLabel={backLabel} />
       <IconButton icon='cog' iconColor={fg} size={24} style={[styles.topRight, { top: 8 + insets.top, right: 8 + insets.right }]} onPress={onSettings} accessibilityLabel='Settings' />
     </>
   )

package/src/CornerStatusBadges.tsx

@@ -0,0 +1,87 @@
+import { StyleSheet, View } from 'react-native'
+import { Icon } from 'react-native-paper'
+
+// Mirrors @tastic/split-screen's own type of the same name, duplicated here rather than imported —
+// this package has never taken a dependency on @tastic/split-screen; every orientation/rotation-
+// derived value it touches (ConfirmDialog's and BaseSettingsDialog's own `rotation` props, this
+// component's orientationMode/p1OnRight below) is always a plain value the caller already resolved
+// via that package's own hook, never something this package reads itself.
+export type OrientationMode = 'faceToFace' | 'sideBySide'
+
+export interface CornerStatusBadgeSeat {
+  // Any react-native-paper Icon `source` name. Omit to still render the badge itself, empty — a
+  // seat with nothing to show right now is different from no seat at all (see `p1`/`p2` on
+  // CornerStatusBadgesProps below), and the empty badge is itself the answer ("nothing"), not a
+  // reason to hide the corner.
+  icon?: string
+}
+
+export interface CornerStatusBadgesProps {
+  orientationMode: OrientationMode
+  // Same "is this seat on the right" convention as @tastic/split-screen's own p1OnRight — only
+  // meaningful when orientationMode is 'sideBySide'; ignored in 'faceToFace', where seat 1 always
+  // owns the bottom half of a shared screen and seat 2 the top half, regardless of physical rotation.
+  p1OnRight: boolean
+  // Independently optional — omit a seat entirely to skip rendering its badge at all (e.g. a solo
+  // mode with no second seat to show anything for). Pass an object (even `{}`) to render that
+  // seat's badge with nothing in it.
+  p1?: CornerStatusBadgeSeat
+  p2?: CornerStatusBadgeSeat
+}
+
+const BADGE_SIZE = 30
+
+// Deliberately understated (small, low-opacity, no per-seat color) — a quiet corner landmark, not
+// something that should compete for attention with whatever's on screen underneath it.
+function StatusBadge({ icon }: { icon?: string }) {
+  return <View style={styles.badge}>{icon && <Icon source={icon} size={16} color='rgba(255,255,255,0.85)' />}</View>
+}
+
+// Generic per-seat corner status badge: at most one caller-supplied icon per seat (or none), each
+// pinned to that seat's own screen corner. Has zero opinion on what the icon means — originally
+// extracted from LightCycles' PowerupHud.tsx and Snake's SnakePowerupHud.tsx, which both used this
+// exact positioning and styling to reveal a held power-up, but this component only ever sees a
+// resolved icon name (or undefined) per seat, never the domain value behind it, so it's equally
+// suited to any other per-seat status a caller wants glanceable in a screen corner (connection
+// state, a turn-order marker, anything that's a single icon or nothing). Corner picked per seat
+// from orientationMode/p1OnRight — the same "is this seat on the right" convention
+// @tastic/split-screen's own consumers already use for zone/rotation decisions — so each badge
+// always sits in that seat's own zone rather than a side fixed regardless of which way the device
+// is being held. In 'faceToFace', column doesn't matter (each seat's zone spans the full width):
+// seat 1 stays bottom, seat 2 stays top, regardless of p1OnRight.
+export function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: CornerStatusBadgesProps) {
+  const p1OnRightSide = orientationMode === 'sideBySide' && p1OnRight
+  const p2OnLeftSide = orientationMode === 'sideBySide' && !p1OnRight
+  return (
+    <>
+      {p1 && (
+        <View pointerEvents='none' style={p1OnRightSide ? styles.bottomRight : styles.bottomLeft}>
+          <StatusBadge icon={p1.icon} />
+        </View>
+      )}
+      {p2 && (
+        <View pointerEvents='none' style={p2OnLeftSide ? styles.topLeft : styles.topRight}>
+          <StatusBadge icon={p2.icon} />
+        </View>
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    borderColor: 'rgba(255,255,255,0.18)',
+    borderRadius: BADGE_SIZE / 2,
+    borderWidth: 1,
+    height: BADGE_SIZE,
+    justifyContent: 'center',
+    opacity: 0.7,
+    width: BADGE_SIZE
+  },
+  bottomLeft: { bottom: 12, left: 12, position: 'absolute' },
+  bottomRight: { bottom: 12, position: 'absolute', right: 12 },
+  topLeft: { left: 12, position: 'absolute', top: 12 },
+  topRight: { position: 'absolute', right: 12, top: 12 }
+})

package/src/index.ts

@@ -1,8 +1,11 @@
 export { AchievementRow, LOCKED_BADGE_COLOR } from './AchievementRow'
 export { BaseSettingsDialog, type BaseSettingsDialogProps } from './BaseSettingsDialog'
 export { BaseStatsScreen } from './BaseStatsScreen'
+export { ConfirmDialog, type ConfirmDialogProps } from './ConfirmDialog'
 export { ContentGutter } from './ContentGutter'
+export { ControlSchemePicker, type ControlSchemePickerProps } from './ControlSchemePicker'
 export { CornerActionButtons } from './CornerActionButtons'
+export { CornerStatusBadges, type CornerStatusBadgeSeat, type CornerStatusBadgesProps, type OrientationMode } from './CornerStatusBadges'
 export { MONO_FONT } from './fonts'
 export { InlineColorPicker } from './InlineColorPicker'
 export { getLabeledDropdownContentHeight, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption } from './LabeledDropdown'