@tastic/hud 0.1.0

package/src/InlineColorPicker.tsx

@@ -0,0 +1,183 @@
+import { defaultColors, getContrastColor, SeedColor } from '@rific/auto-paper'
+import { TouchableRipple } from '@rific/feedback-press'
+import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Icon } from 'react-native-paper'
+
+import { PopoverBody } from './PopoverBody'
+import { useAutoAlign } from './useAutoAlign'
+import { PopoverHost } from './usePopoverHost'
+
+const SIZE = 48
+const SWATCH_SIZE = 28
+const SWATCHES_PADDING = 8
+const SWATCHES_GAP = 6
+const SWATCHES_BORDER_WIDTH = 2
+// However wide the actual screen is, the grid never goes narrower than 3 columns or wider than 6 —
+// below 3 it reads as a cramped single-file list, above 6 the swatches themselves get lost in a
+// wall of tiny color chips instead of reading as a deliberate palette.
+const MIN_COLUMNS = 3
+const MAX_COLUMNS = 6
+// How much screen width the grid leaves alone on either side when computing how many columns fit —
+// this trigger can sit anywhere (including flush against a player's own screen edge in split-screen
+// mode), so the budget is against the whole window, not this trigger's own local space.
+const SCREEN_MARGIN = 40
+
+function widthForColumns(columns: number) {
+  return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1)
+}
+
+interface Props {
+  id: string
+  host: PopoverHost
+  value: string
+  onChange: (hex: string) => void
+  swatches?: SeedColor[]
+  // The other player's current color, if any — stays visible in the grid (so the full palette
+  // reads consistently for both players) but renders disabled with an X, rather than being
+  // silently removed from the list. Unless allowSwapTaken is set — see that prop.
+  takenValue?: string
+  // Lets a tap on the taken swatch swap the two colors (this picker takes it, the other slot takes
+  // this picker's old color) instead of being disabled — useful when the "other" slot is CPU-
+  // controlled, not a second real person's choice to step on. Leave unset when the other slot is a
+  // human player: swapping their color out from under them without their input isn't the same
+  // tradeoff.
+  allowSwapTaken?: boolean
+  dark: boolean
+  // Manual override — omit to let the popover measure its own trigger and pick whichever alignment
+  // keeps it from overflowing the screen edge (see useAutoAlign).
+  align?: 'left' | 'right' | 'center'
+  // Trigger glyph — defaults to a plain palette. Pass a distinct icon per slot (e.g. a face for a
+  // human, a robot for CPU) to convey identity through the icon itself.
+  icon?: string
+  // Whether picking a swatch closes the popover. Defaults to true — a color pick is a single,
+  // complete choice the same way a single-select dropdown row is (see SectionedDropdown's identical
+  // prop), so press-away isn't the only way out, but doesn't have to be either.
+  autoDismiss?: boolean
+  // Overrides the auto-computed column count (see MIN_COLUMNS/MAX_COLUMNS/SCREEN_MARGIN above).
+  columns?: number
+}
+
+// Renders inline rather than as a full-screen modal, scoped to its own panel — a modal color
+// picker would block the whole screen for one player while another can't touch their own panel at
+// the same time, which defeats the point of a split-screen lobby.
+export function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', autoDismiss = true, columns }: Props) {
+  const menuBg = dark ? '#000000' : '#FFFFFF'
+  const { width: windowWidth } = useWindowDimensions()
+  const autoColumns = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))))
+  const resolvedColumns = columns ?? autoColumns
+  const swatchesWidth = widthForColumns(resolvedColumns)
+  const swatchRows = Math.ceil(swatches.length / resolvedColumns)
+  const swatchesHeight = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * swatchRows + SWATCHES_GAP * (swatchRows - 1)
+
+  const open = host.openId === id
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight)
+  const align = alignOverride ?? autoAlign
+
+  return (
+    <View style={[styles.anchor, open && styles.anchorOpen]}>
+      <TouchableRipple onPress={() => host.toggle(id)} borderless style={[styles.trigger, { backgroundColor: value }]}>
+        <View ref={triggerRef} collapsable={false} style={styles.triggerMeasure}>
+          <Icon source={icon} size={20} color={getContrastColor(value)} />
+        </View>
+      </TouchableRipple>
+
+      {/* Gated on `measured`, not just `open` — see useAutoAlign's own comment and
+      SectionedDropdown's identical fix: without it, the popover mounts for one frame at a stale or
+      guessed alignment and visibly jumps once this open's own measurement lands. */}
+      <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={value} caretBorderWidth={SWATCHES_BORDER_WIDTH} triggerSize={SIZE}>
+        {/* Border matches this trigger's own current color (not a neutral gray) — two triggers can
+        sit close together, so the popover needs a clear visual tie back to which one opened it,
+        not just its screen position. maxHeight (see useAutoAlign) only actually clamps on a screen
+        short enough that the full grid can't fit above or below the trigger either way — a short
+        landscape screen with the trigger row near the top, same case SectionedDropdown's own
+        ScrollView exists for. */}
+        <ScrollView style={[styles.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }]} contentContainerStyle={styles.swatchesContent} showsVerticalScrollIndicator={false}>
+          {swatches.map((swatch) => {
+            const selected = swatch.value.toLowerCase() === value.toLowerCase()
+            const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase()
+            const swappable = taken && allowSwapTaken
+            return (
+              <TouchableRipple
+                key={swatch.value}
+                disabled={taken && !swappable}
+                onPress={() => {
+                  onChange(swatch.value)
+                  if (autoDismiss) host.close()
+                }}
+                borderless
+                style={[styles.swatch, { backgroundColor: swatch.value }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]}
+              >
+                {selected ? <Icon source='check' size={16} color={getContrastColor(swatch.value)} /> : swappable ? <Icon source='swap-horizontal' size={16} color={getContrastColor(swatch.value)} /> : taken ? <Icon source='close' size={16} color={getContrastColor(swatch.value)} /> : <View />}
+              </TouchableRipple>
+            )
+          })}
+        </ScrollView>
+      </PopoverBody>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  anchor: {
+    position: 'relative'
+  },
+  // See SectionedDropdown's identical comment — React Native Web gives every position:'relative' view
+  // its own stacking context, so the elevation has to live on the anchor itself, not just the
+  // popover content nested inside it, to correctly paint above this anchor's own later siblings.
+  anchorOpen: {
+    zIndex: 100
+  },
+  swatch: {
+    alignItems: 'center',
+    borderRadius: SWATCH_SIZE / 2,
+    height: SWATCH_SIZE,
+    justifyContent: 'center',
+    width: SWATCH_SIZE
+  },
+  swatchSelected: {
+    borderColor: '#ffffff',
+    borderWidth: 2
+  },
+  swatchTaken: {
+    opacity: 0.35
+  },
+  swatches: {
+    borderRadius: 12,
+    borderWidth: SWATCHES_BORDER_WIDTH,
+    elevation: 8,
+    shadowColor: '#000000',
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+    // width is set inline above — border-box sizing means it has to include the border too
+    // (2*SWATCHES_BORDER_WIDTH), not just padding+content, or exactly enough room goes missing that
+    // the last column silently wraps to a new row. Anything wider than the exact sum just shows as
+    // dead space on the right edge of each row instead.
+  },
+  // Separate from `swatches` itself — see SectionedDropdown's identical menu/menuContent split.
+  // The scroll frame's own bounds (including maxHeight) live on the ScrollView; the actual grid
+  // wrapping belongs to its contentContainerStyle, which sizes to the unclamped content instead.
+  swatchesContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: SWATCHES_GAP,
+    padding: SWATCHES_PADDING
+  },
+  trigger: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderRadius: SIZE / 2,
+    height: SIZE,
+    justifyContent: 'center',
+    width: SIZE
+  },
+  // Wraps just the icon, inside the TouchableRipple, purely so useAutoAlign has a plain View to
+  // attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a measurable
+  // native node.
+  triggerMeasure: {
+    alignItems: 'center',
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%'
+  }
+})

package/src/PopoverBody.tsx

@@ -0,0 +1,131 @@
+import { ReactNode } from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+
+const CARET_SIZE = 7
+// How far the fill triangle's base sits past the border triangle's own base, producing the ring of
+// caretBorderColor around it — kept fixed regardless of caretBorderWidth; tuned by eye.
+const CARET_RING_OFFSET = 2
+// How far both triangles dip past the box's own edge (top edge when below the trigger, bottom edge
+// when above it — see verticalAlign). The caret renders after (on top of) the box, so this overlap
+// lets it paint over the box's own border there instead of butting up against it — a seam shows if
+// the two edges only touch, since neither is guaranteed to land on the exact same subpixel.
+const CARET_DIP = 1
+
+interface Props {
+  visible: boolean
+  children: ReactNode
+  // Which edge of the trigger the popover aligns to — 'center' (default) centers the popover
+  // under/over its trigger regardless of either one's width; 'left'/'right' instead align that
+  // edge flush with the trigger's matching edge, growing away from it. A trigger sitting right at
+  // the screen's edge (e.g. the rightmost of a row of icons, or a right-side player's panel) needs
+  // an explicit 'left' or 'right' — centering alone can still overflow there — to guarantee which
+  // direction it grows.
+  align?: 'left' | 'right' | 'center'
+  // Whether the popover opens below the trigger (default — the usual case) or above it. Flips both
+  // the content's own position and the caret's direction, so it still reads as pointing back at the
+  // trigger either way. Meant for a trigger that doesn't have enough room below it to fit — a short
+  // landscape screen with the trigger row near the top is the case this actually shows up in.
+  verticalAlign?: 'below' | 'above'
+  // Small triangle pointing back at the trigger, reinforcing the visual link beyond just position
+  // (two triggers can sit close together). Omit both to skip it. caretBorderColor defaults to
+  // caretColor (a solid, borderless caret) when only caretColor is given.
+  caretColor?: string
+  caretBorderColor?: string
+  // Must match the popover box's own borderWidth — a fixed ring thickness would only happen to
+  // match whichever box first used it, and look like a mismatched outline on any other consumer.
+  caretBorderWidth?: number
+  // The trigger's own width, in px — required whenever a caret is shown, so the caret can be pinned
+  // to the trigger's actual center via a fixed offset rather than the (usually much wider) content
+  // box's own midpoint, which only coincides with the trigger's center by coincidence, if at all.
+  triggerSize?: number
+}
+
+// Rendered inline as an absolutely-positioned sibling of its own trigger (never via Portal), so it
+// inherits any rotation transform the trigger's zone applies — a Portal-based popover renders at
+// the app root, outside that transform, and would end up upside-down relative to its own trigger
+// once a face-to-face zone gets flipped 180°. Positioned via percentage (`top:'100%'`/`bottom:'100%'`)
+// against the trigger's own wrapper rather than a measured pixel rect, so no onLayout/measurement
+// plumbing is needed here and it resolves correctly regardless of how deep the trigger sits in the
+// tree — the caller (useAutoAlign) is the one that actually measures, to decide which side to grow
+// toward in the first place.
+export function PopoverBody({ visible, children, align = 'center', verticalAlign = 'below', caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }: Props) {
+  if (!visible) return null
+
+  const above = verticalAlign === 'above'
+  const alignStyle = align === 'left' ? styles.contentLeft : align === 'right' ? styles.contentRight : styles.contentCenter
+  const verticalStyle = above ? styles.contentAbove : styles.contentBelow
+  const ringSize = CARET_SIZE + caretBorderWidth
+
+  // The caret is a width:0 box whose rendered footprint is purely its (symmetric) borders, so
+  // pinning its *center* at some offset means placing its own `left`/`right` half a footprint short
+  // of that offset. Every align pins one edge of `content` flush with the matching edge of the
+  // trigger-sized anchor (contentCenter stretches left:0/right:0 to do this too, rather than
+  // centering via a percentage `transform` — those need the child's own auto-resolved width fed
+  // back into the transform, which native has been unreliable about; plain flexbox centering
+  // doesn't), so triggerSize/2 from that shared edge always lands on the trigger's true center,
+  // however much wider the actual popover box grows.
+  const caretOffset = (halfFootprint: number): ViewStyle => (align === 'right' ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint })
+  // Below the trigger: caret sits at content's top edge, apex pointing up (a filled border-bottom
+  // makes an apex-up triangle), dipping upward past that edge. Above the trigger: mirrored — caret
+  // sits at content's bottom edge, apex pointing down (filled border-top), dipping downward past it.
+  const caretFill = above ? 'borderTopColor' : 'borderBottomColor'
+  const caretWidthProp = above ? 'borderTopWidth' : 'borderBottomWidth'
+  const caretEdge = (size: number): ViewStyle => (above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP })
+
+  return (
+    <View style={[styles.content, alignStyle, verticalStyle]}>
+      {children}
+      {/* Painted after (on top of) the box above, dipping into its edge — see CARET_DIP — so it
+      reads as one continuous outline flowing from the trigger into the box, not a separate chip
+      butted up against it. */}
+      {caretColor && (
+        <>
+          <View style={[styles.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }]} />
+          <View style={[styles.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }]} />
+        </>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  caret: {
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    height: 0,
+    position: 'absolute',
+    width: 0,
+    // Explicit, not left to DOM order — the box it dips into is itself a position:'relative' view,
+    // which React Native Web always gives an implicit zIndex:0 (see PopoverBody's stacking-context
+    // notes elsewhere in this codebase), so painting on top needs a real zIndex to beat that
+    // reliably rather than relying on being the later sibling.
+    zIndex: 1
+  },
+  content: {
+    position: 'absolute',
+    zIndex: 50
+  },
+  contentAbove: {
+    bottom: '100%',
+    marginBottom: 8
+  },
+  contentBelow: {
+    marginTop: 8,
+    top: '100%'
+  },
+  // Stretched to the anchor's own (trigger) width, with alignItems centering the actual (usually
+  // much wider) popover box inside via plain flexbox — not `left:'50%'` plus a percentage
+  // `transform`, which depends on native resolving the box's own auto width before applying the
+  // transform and has proven unreliable there, visibly shifting the box off-center.
+  contentCenter: {
+    alignItems: 'center',
+    left: 0,
+    right: 0
+  },
+  contentLeft: {
+    left: 0
+  },
+  contentRight: {
+    right: 0
+  }
+})

package/src/PressAwayOverlay.tsx

@@ -0,0 +1,20 @@
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from 'react-native'
+
+interface Props {
+  active: boolean
+  onPress: () => void
+  // Defaults to filling the parent entirely — pass a narrower rect (e.g. just one player's half of
+  // the screen) to scope how far "away" reaches for that player's own popovers.
+  style?: StyleProp<ViewStyle>
+}
+
+// Invisible full-bleed tap catcher for "press away to close." Render one per popover host (or per
+// player's own screen zone — see the package README for the split-screen wiring pattern), as an
+// early sibling of that zone's real content: plain paint order then keeps every real control
+// directly tappable (later siblings paint on top of this), while a tap on genuinely empty space
+// falls through to this and closes whatever's open. Unmounts entirely rather than always rendering
+// an inert Pressable, so an idle zone never sits in the way of anything for no reason.
+export function PressAwayOverlay({ active, onPress, style }: Props) {
+  if (!active) return null
+  return <Pressable accessibilityLabel='Dismiss' accessibilityRole='button' onPress={onPress} style={[StyleSheet.absoluteFill, style]} />
+}

package/src/ReadyButton.tsx

@@ -0,0 +1,43 @@
+import { TouchableRipple } from '@rific/feedback-press'
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { Text } from 'react-native-paper'
+
+import { MONO_FONT } from './fonts'
+
+interface Props {
+  color: string
+  ready: boolean
+  onToggleReady: () => void
+  // Lets a caller fade/hide a standalone Ready button (e.g. while a popover is open elsewhere on
+  // screen, so it doesn't visually collide with the popover's own positioning) without reflowing
+  // layout around it — pass `{ opacity: 0, pointerEvents: 'none' }` rather than conditionally
+  // unmounting.
+  style?: StyleProp<ViewStyle>
+  // Defaults to the system monospace font — pass your own game's registered font to match its UI.
+  labelFontFamily?: string
+}
+
+// Standalone toggle so it can render either embedded in a per-player panel or centered on its own
+// below a shared row — e.g. a vs-CPU mode with only one human player needs just one Ready toggle,
+// not one tucked under each slot.
+export function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }: Props) {
+  return (
+    <TouchableRipple onPress={onToggleReady} borderless style={[styles.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style]}>
+      <Text variant='labelLarge' style={[{ fontFamily: labelFontFamily, fontWeight: 'bold' }, { color: ready ? '#000000' : color }]}>
+        {ready ? 'READY ✓' : 'READY?'}
+      </Text>
+    </TouchableRipple>
+  )
+}
+
+const styles = StyleSheet.create({
+  readyButton: {
+    alignItems: 'center',
+    borderRadius: 12,
+    borderWidth: 1,
+    justifyContent: 'center',
+    minWidth: 120,
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  }
+})