@ankhorage/zora-game 0.1.0

package/src/features/game-presentation/adapters/inbound/GameField.tsx

@@ -0,0 +1,44 @@
+import { View } from '@ankhorage/zora';
+import { StyleSheet } from 'react-native';
+
+import type { GameFieldProps } from '../../../../types/gamePresentation';
+
+/*** Render a bounded relative-positioning surface for game presentation content. */
+export function GameField({
+  children,
+  aspectRatio,
+  minHeight = 240,
+  clip = true,
+  accessibilityLabel,
+  testID,
+}: GameFieldProps) {
+  return (
+    <View
+      {...(accessibilityLabel === undefined ? {} : { accessibilityLabel })}
+      {...(testID === undefined ? {} : { testID })}
+      style={[
+        styles.root,
+        clip ? styles.clipped : styles.overflowVisible,
+        {
+          ...(aspectRatio === undefined ? {} : { aspectRatio }),
+          minHeight,
+        },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  clipped: {
+    overflow: 'hidden',
+  },
+  overflowVisible: {
+    overflow: 'visible',
+  },
+  root: {
+    position: 'relative',
+    width: '100%',
+  },
+});

package/src/features/game-presentation/adapters/inbound/GameOverlay.tsx

@@ -0,0 +1,57 @@
+import { View } from '@ankhorage/zora';
+import { StyleSheet, type ViewStyle } from 'react-native';
+
+import type { GameOverlayPlacement, GameOverlayProps } from '../../../../types/gamePresentation';
+
+/*** Render an absolute game presentation layer for HUD, feedback, and phase content. */
+export function GameOverlay({
+  children,
+  placement = 'fill',
+  blocking = false,
+  padding = 0,
+  accessibilityLabel,
+  testID,
+}: GameOverlayProps) {
+  return (
+    <View
+      {...(accessibilityLabel === undefined ? {} : { accessibilityLabel })}
+      {...(testID === undefined ? {} : { testID })}
+      pointerEvents={blocking ? 'auto' : 'box-none'}
+      style={[styles.root, resolvePlacementStyle(placement), { padding }]}
+    >
+      {children}
+    </View>
+  );
+}
+
+/*** Resolve overlay alignment without coupling layout to any game genre or rule. */
+function resolvePlacementStyle(placement: GameOverlayPlacement): ViewStyle {
+  switch (placement) {
+    case 'center':
+      return { alignItems: 'center', justifyContent: 'center' };
+    case 'top':
+      return { alignItems: 'center', justifyContent: 'flex-start' };
+    case 'bottom':
+      return { alignItems: 'center', justifyContent: 'flex-end' };
+    case 'top-left':
+      return { alignItems: 'flex-start', justifyContent: 'flex-start' };
+    case 'top-right':
+      return { alignItems: 'flex-end', justifyContent: 'flex-start' };
+    case 'bottom-left':
+      return { alignItems: 'flex-start', justifyContent: 'flex-end' };
+    case 'bottom-right':
+      return { alignItems: 'flex-end', justifyContent: 'flex-end' };
+    case 'fill':
+      return {};
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});

package/src/features/game-presentation/meta/gameEntityMeta.ts

@@ -0,0 +1,91 @@
+import type { ZoraComponentMeta } from '@ankhorage/zora/metadata';
+
+/*** Describe one positioned generic game entity for ZORA authoring tools. */
+export const gameEntityMeta = {
+  name: 'GameEntity',
+  category: 'component',
+  description: 'Positions arbitrary visual content inside a GameField without owning game rules.',
+  directManifestNode: true,
+  allowedChildren: ['Badge', 'Icon', 'Image', 'Text', 'View'],
+  blueprint: {
+    label: 'Game entity',
+    defaultProps: { x: 0, y: 0, opacity: 1, scale: 1, rotation: 0, zIndex: 0 },
+  },
+  props: {
+    x: {
+      type: 'number',
+      category: 'Position',
+      label: 'X (%)',
+      default: 0,
+      authoring: { authority: 'instance' },
+    },
+    y: {
+      type: 'number',
+      category: 'Position',
+      label: 'Y (%)',
+      default: 0,
+      authoring: { authority: 'instance' },
+    },
+    width: {
+      type: 'number',
+      category: 'Size',
+      label: 'Width',
+      authoring: { authority: 'instance' },
+    },
+    height: {
+      type: 'number',
+      category: 'Size',
+      label: 'Height',
+      authoring: { authority: 'instance' },
+    },
+    opacity: {
+      type: 'number',
+      category: 'Appearance',
+      label: 'Opacity',
+      default: 1,
+      authoring: { authority: 'instance' },
+    },
+    scale: {
+      type: 'number',
+      category: 'Transform',
+      label: 'Scale',
+      default: 1,
+      authoring: { authority: 'instance' },
+    },
+    rotation: {
+      type: 'number',
+      category: 'Transform',
+      label: 'Rotation',
+      default: 0,
+      authoring: { authority: 'instance' },
+    },
+    zIndex: {
+      type: 'number',
+      category: 'Position',
+      label: 'Z index',
+      default: 0,
+      authoring: { authority: 'instance' },
+    },
+    hidden: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Hidden',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    pointerEvents: {
+      type: 'enum',
+      category: 'Interaction',
+      label: 'Pointer events',
+      enum: ['auto', 'box-none', 'box-only', 'none'],
+      default: 'auto',
+      authoring: { authority: 'instance' },
+    },
+    accessibilityLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Accessibility label',
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/game-presentation/meta/gameFieldMeta.ts

@@ -0,0 +1,42 @@
+import type { ZoraComponentMeta } from '@ankhorage/zora/metadata';
+
+/*** Describe the embeddable game field for ZORA authoring tools. */
+export const gameFieldMeta = {
+  name: 'GameField',
+  category: 'layout',
+  description: 'Relative positioning surface for embeddable game presentation content.',
+  directManifestNode: true,
+  allowedChildren: ['GameEntity', 'GameOverlay', 'Gradient', 'Image', 'View'],
+  blueprint: {
+    label: 'Game field',
+    defaultProps: { minHeight: 320, clip: true },
+  },
+  props: {
+    aspectRatio: {
+      type: 'number',
+      category: 'Layout',
+      label: 'Aspect ratio',
+      authoring: { authority: 'instance' },
+    },
+    minHeight: {
+      type: 'number',
+      category: 'Layout',
+      label: 'Minimum height',
+      default: 320,
+      authoring: { authority: 'instance' },
+    },
+    clip: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Clip overflow',
+      default: true,
+      authoring: { authority: 'instance' },
+    },
+    accessibilityLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Accessibility label',
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/game-presentation/meta/gameOverlayMeta.ts

@@ -0,0 +1,66 @@
+import type { ZoraComponentMeta } from '@ankhorage/zora/metadata';
+
+/*** Describe a generic absolute game layer for HUD, feedback, and phase content. */
+export const gameOverlayMeta = {
+  name: 'GameOverlay',
+  category: 'layout',
+  description: 'Absolute presentation layer for HUD, feedback, controls, and phase content.',
+  directManifestNode: true,
+  allowedChildren: [
+    'Badge',
+    'Button',
+    'ButtonGroup',
+    'Card',
+    'GameEntity',
+    'Heading',
+    'Icon',
+    'Image',
+    'Progress',
+    'ProgressRing',
+    'Text',
+    'View',
+  ],
+  blueprint: {
+    label: 'Game overlay',
+    defaultProps: { placement: 'fill', blocking: false, padding: 0 },
+  },
+  props: {
+    placement: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Placement',
+      enum: [
+        'fill',
+        'center',
+        'top',
+        'bottom',
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+      ],
+      default: 'fill',
+      authoring: { authority: 'instance' },
+    },
+    blocking: {
+      type: 'boolean',
+      category: 'Interaction',
+      label: 'Block pointer input',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    padding: {
+      type: 'number',
+      category: 'Layout',
+      label: 'Padding',
+      default: 0,
+      authoring: { authority: 'instance' },
+    },
+    accessibilityLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Accessibility label',
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/game-presentation/public.ts

@@ -0,0 +1,10 @@
+export type {
+  GameEntityProps,
+  GameFieldProps,
+  GameOverlayPlacement,
+  GameOverlayProps,
+  GamePointerEvents,
+} from '../../types/gamePresentation';
+export { GameEntity } from './adapters/inbound/GameEntity';
+export { GameField } from './adapters/inbound/GameField';
+export { GameOverlay } from './adapters/inbound/GameOverlay';

package/src/index.ts

@@ -0,0 +1,9 @@
+export type {
+  GameEntityProps,
+  GameFieldProps,
+  GameOverlayPlacement,
+  GameOverlayProps,
+  GamePointerEvents,
+} from './features/game-presentation/public';
+export { GameEntity, GameField, GameOverlay } from './features/game-presentation/public';
+export { ZORA_GAME_PLUGIN } from './ZORA_GAME_PLUGIN';

package/src/metadata.ts

@@ -0,0 +1,2 @@
+export { ZORA_GAME_COMPONENT_META } from './ZORA_GAME_COMPONENT_META';
+export { ZORA_PLUGIN_METADATA } from './ZORA_PLUGIN_METADATA';

package/src/types/gamePresentation.ts

@@ -0,0 +1,41 @@
+import type React from 'react';
+
+type GameOverlayCornerPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export type GamePointerEvents = 'auto' | 'box-none' | 'box-only' | 'none';
+export type GameOverlayPlacement =
+  'fill' | 'center' | 'top' | 'bottom' | GameOverlayCornerPlacement;
+
+export interface GameFieldProps {
+  readonly children?: React.ReactNode;
+  readonly aspectRatio?: number;
+  readonly minHeight?: number;
+  readonly clip?: boolean;
+  readonly accessibilityLabel?: string;
+  readonly testID?: string;
+}
+
+export interface GameEntityProps {
+  readonly children?: React.ReactNode;
+  readonly x?: number;
+  readonly y?: number;
+  readonly width?: number;
+  readonly height?: number;
+  readonly opacity?: number;
+  readonly scale?: number;
+  readonly rotation?: number;
+  readonly zIndex?: number;
+  readonly hidden?: boolean;
+  readonly pointerEvents?: GamePointerEvents;
+  readonly accessibilityLabel?: string;
+  readonly testID?: string;
+}
+
+export interface GameOverlayProps {
+  readonly children?: React.ReactNode;
+  readonly placement?: GameOverlayPlacement;
+  readonly blocking?: boolean;
+  readonly padding?: number;
+  readonly accessibilityLabel?: string;
+  readonly testID?: string;
+}