PhaserJSX

https://phaserjsx.number10.de
Admin
PhaserJSX is a modular, React-like UI framework for game engines like Phaser, PixiJS, and Konva that...
Tokens:190,816
Snippets:1,281
Trust Score:4.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### View Quick Start

Source: https://phaserjsx.number10.de/components/view

Basic visible container example. Ensure a background color or content is added to make the view visible.

```typescript
/**
 * View Quick Start Example - Basic visible container
 * Note: An empty View is invisible. Add background color or content to make it visible.
 */
/** @jsxImportSource @number10/jsx-core */
import { Text, View } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'

export const quickStartViewExampleMeta: ExampleMeta = {
  id: 'view-quick-start',
  title: 'View Quick Start',
  description: 'Basic visible container — add background color or content to make it visible.',
  category: 'layout',
  tags: ['view', 'layout'],
  height: 200,
}

export default function QuickStartViewExample(): VNodeLike {
  return (
    <View padding={20} justifyContent="center" alignItems="center">
      <View backgroundColor={0x3498db} width={200} height={100} cornerRadius={8} padding={10}>
        <Text text="I'm a View!" style={{ fontSize: '20px', color: '#ffffff' }} />
      </View>
    </View>
  )
}
```

--------------------------------

### onTooltip Usage Examples

Source: https://phaserjsx.number10.de/api/core-props

Examples for implementing simple, conditional, and configured tooltips.

```jsx
// Simple text tooltip
<Button onTooltip={() => "Click to delete"} />

// Conditional tooltip
<Button onTooltip={() => isAdmin ? "Admin action" : null} />

// Full configuration
<Button onTooltip={() => ({
  content: "Delete item",
  position: "top",
  showDelay: 100
})} />
```

--------------------------------

### onReady Usage Examples

Source: https://phaserjsx.number10.de/api/core-props

Examples for accessing Phaser GameObjects after creation.

```jsx
// Display image dimensions
<Image
  texture="icon"
  onReady={(img) => console.log(`${img.width}x${img.height}`)}
/>

// Access View bounds
<View
  width={200}
  height={100}
  onReady={(view) => console.log(view.getBounds())}
/>
```

--------------------------------

### Install dependencies

Source: https://phaserjsx.number10.de/guides/three-panels

Install the required core, component, and peer dependencies for the project.

```bash
pnpm add @number10/jsx-core @number10/jsx-components @number10/jsx-konva @number10/jsx-three
pnpm add react react-dom konva three @react-three/fiber @react-three/drei
```

--------------------------------

### Visibility approaches comparison example

Source: https://phaserjsx.number10.de/guides/best-practices

A comprehensive example demonstrating the three visibility strategies within a state-driven component.

```jsx
/**
 * Visibility Example - Demonstrates different approaches to showing/hiding components
 */
/** @jsxImportSource @number10/phaserjsx */
import { Text, View } from '@number10/jsx-components'
import { useEffect, useState } from '@number10/jsx-core'

/**
 * Demonstrates three different approaches to controlling component visibility in PhaserJSX
 */
export function VisibilityExample() {
  const [test, setTest] = useState(0)
  useEffect(() => {
    const interval = setInterval(() => {
      setTest((t) => t + 1)
    }, 2000)
    return () => clearInterval(interval)
  }, [])

  const isOdd = test % 2 === 1

  return (
    <View justifyContent="center" alignItems="center" padding={20} gap={20}>
      <Text text={`Test cycle: ${test} (${isOdd ? 'ODD' : 'EVEN'})`} />
      <View gap={20} direction="row">
        {/* Test 1: visible=false - Child should toggle visibility, but stay took place */}
        <View borderColor={0xff0000} padding={10} gap={10} direction="column">
          <Text text={`Test 1: visible=${isOdd}`} style={{ fontSize: '12px' }} />
          <Text
            text={`Parent should unchanged: ${isOdd ? 'VISIBLE' : 'HIDDEN'}`}
            style={{ fontSize: '10px', color: '#888888' }}
          />
          <View width={100} height={20} backgroundColor={0xff00ff} visible={isOdd} />
        </View>

        {/* Test 2: visible="none" - Child should toggle visibility, parent should re-layout */}
        <View borderColor={0xff0000} padding={10} gap={10} direction="column">
          <Text
            text={`Test 1: visible=${isOdd ? 'true' : "'none'"}`}
            style={{ fontSize: '12px' }}
          />
          <Text
            text={`Parent should shrink/grow: ${isOdd ? 'VISIBLE' : 'HIDDEN'}`}
            style={{ fontSize: '10px', color: '#888888' }}
          />
          <View
            width={100}
            height={20}
            backgroundColor={0x00ffff}
            visible={isOdd ? true : 'none'}
          />
        </View>

        {/* Test 3: Conditional rendering - Child should be added/removed from VDOM */}
        <View borderColor={0x00ff00} padding={10} gap={10} direction="column">
          <Text
            text={`Test 2: Conditional {${isOdd ? 'true' : 'false'} && <View>}`}
            style={{ fontSize: '12px' }}
          />
          {isOdd && <View width={100} height={20} backgroundColor={0xffff00} />}
          <Text
            text={`VDOM should add/remove: ${isOdd ? 'MOUNTED' : 'UNMOUNTED'}`}
            style={{ fontSize: '10px', color: '#888888' }}
          />
        </View>
      </View>
    </View>
  )
}
```

--------------------------------

### Start Development Server

Source: https://phaserjsx.number10.de/guides/testing

Commands to launch the documentation site development server.

```bash
cd apps/docs-site
pnpm dev
```

--------------------------------

### Install Konva Dependencies

Source: https://phaserjsx.number10.de/installation

Install the core, components, and Konva-specific renderer packages.

```bash
pnpm add @number10/jsx-core @number10/jsx-components @number10/jsx-konva konva
```

--------------------------------

### Create Button Quick Start Component

Source: https://phaserjsx.number10.de/guides/testing

Defines a basic PhaserJSX component with a click handler for the quick start example.

```typescript
/**
 * Button Quick Start Example
 */
/** @jsxImportSource @number10/phaserjsx */
import { Button, Text, View } from '@number10/phaserjsx'

export function QuickStartButtonExample() {
  return (
    <View padding={20} justifyContent="center" alignItems="center">
      <Button onClick={() => console.log('Clicked!')}>
        <Text text="Click Me" />
      </Button>
    </View>
  )
}
```

--------------------------------

### Install Portable Dependencies

Source: https://phaserjsx.number10.de/installation

Install only the core and components packages for library development.

```bash
pnpm add @number10/jsx-core @number10/jsx-components
```

--------------------------------

### Install PixiJS Dependencies

Source: https://phaserjsx.number10.de/installation

Install the core, components, and PixiJS-specific renderer packages.

```bash
pnpm add @number10/jsx-core @number10/jsx-components @number10/jsx-pixi pixi.js
```

--------------------------------

### Install PhaserJSX dependencies

Source: https://phaserjsx.number10.de/

Use this command to install the core framework, components, and Phaser renderer integration.

```bash
pnpm add @number10/jsx-core @number10/jsx-components @number10/jsx-phaser phaser
```

--------------------------------

### Generator Output Example

Source: https://phaserjsx.number10.de/guides/custom-svg-icons

Example console output showing the icon scanning and generation process.

```text
🎨 Icon Generator

📝 Generating icon types...
📦 Scanning package: bootstrap-icons
✓ Found 2078 icons from Bootstrap Icons
📁 Scanning directory: ./src/custom-icons
✓ Found 3 icons from Custom Icons
✓ Total unique icons: 2081
✓ Generated: icon-types.generated.ts

⚡ Generating icon loaders...
✓ Found 5 unique icons
  Icons: check, gear, custom-logo, custom-check, custom-plus
✓ Generated: icon-loaders.generated.ts
```

--------------------------------

### Creating Themes

Source: https://phaserjsx.number10.de/api/theme-types

Example of defining a complete theme and shared portable overrides.

```typescript
import { createTheme, type Theme } from '@number10/phaserjsx'
import type { PortablePartialTheme } from '@number10/jsx-components'

// Complete theme
const darkTheme: Theme = {
  View: {
    backgroundColor: 0x1a1a1a,
    cornerRadius: 8,
  },
  Text: {
    style: {
      fontFamily: 'Inter',
      fontSize: '16px',
      color: '#ffffff',
    },
  },
  // ... all other built-in components
}

// Shared portable override map
const customizations: PortablePartialTheme = {
  Button: {
    backgroundColor: 0xff0000,
  },
  Icon: {
    size: 28,
  },
}
```

--------------------------------

### Initialize Theme System State

Source: https://phaserjsx.number10.de/guides/theme-system

Example of managing theme modes and presets within a component.

```typescript
export function ThemeSystemDocumentationExample() {
  const [mode, setMode] = useState<Mode>('dark')
  const [alertsEnabled, setAlertsEnabled] = useState(true)
  const [compactMode, setCompactMode] = useState(false)

  const preset = getPresetWithMode('oceanBlue', mode)
  const { colors } = preset
```

--------------------------------

### View Icon Directory Structure

Source: https://phaserjsx.number10.de/guides/custom-svg-icons

Example of a recommended file structure for organizing icons by category.

```text
src/icons/
├── brand/
│   ├── company-logo.svg
│   └── partner-logo.svg
├── products/
│   ├── product-a-icon.svg
│   └── product-b-icon.svg
└── illustrations/
    ├── hero-illustration.svg
    └── error-illustration.svg
```

--------------------------------

### Text Quick Start

Source: https://phaserjsx.number10.de/components/text

Basic Text component with default and styled text.

```typescript
/**
 * Text Quick Start Example
 */
/** @jsxImportSource @number10/jsx-core */
import { Text, View } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'

export const quickStartTextExampleMeta: ExampleMeta = {
  id: 'text-quick-start',
  title: 'Text Quick Start',
  description: 'Basic Text component with default and styled text.',
  category: 'text',
  tags: ['text', 'typography'],
  height: 200,
}

export default function QuickStartTextExample(): VNodeLike {
  return (
    <View width={'fill'} height={'fill'} justifyContent="center" alignItems="center" gap={16}>
      <Text text="Hello World" />
      <Text text="Styled text" style={{ fontSize: '24px', color: '#4caf50' }} />
    </View>
  )
}
```

--------------------------------

### Keyboard and Input Event Usage

Source: https://phaserjsx.number10.de/api/core-props

Example implementation of keyboard and input event handlers.

```jsx
<View
  enableGestures
  onKeyDown={(e) => console.log('Key pressed:', e.key)}
  onInput={(e) => console.log('Input value:', e.value)}
  onFocus={() => console.log('Focused')}
/>
```

--------------------------------

### Toggle Quick Start

Source: https://phaserjsx.number10.de/components/toggle

Basic implementation of a controlled toggle switch with state management.

```jsx
/**
 * Toggle Quick Start Example
 */
/** @jsxImportSource @number10/jsx-core */
import { Text, Toggle, View } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'
import { useState } from '@number10/jsx-core'

export const quickStartToggleExampleMeta: ExampleMeta = {
  id: 'toggle-quick-start',
  title: 'Toggle Quick Start',
  description: 'Basic toggle switch with on/off states.',
  category: 'inputs',
  tags: ['toggle', 'input'],
  height: 300,
}

export default function QuickStartToggleExample(): VNodeLike {
  const [isEnabled, setIsEnabled] = useState(false)

  return (
    <View width={'fill'} height={'fill'} justifyContent="center" alignItems="center" gap={16}>
      <Toggle checked={isEnabled} onChange={setIsEnabled} label="Enable feature" />

      <Text
        text={isEnabled ? 'Feature is ON' : 'Feature is OFF'}
        style={{ color: isEnabled ? '#4caf50' : '#999999', fontSize: '14px' }}
      />
    </View>
  )
}
```

--------------------------------

### WheelPicker Quick Start

Source: https://phaserjsx.number10.de/components/wheel-picker

Basic implementation of a wheel picker for selecting difficulty levels.

```typescript
/** @jsxImportSource @number10/jsx-core */
import type { WheelPickerItem } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'
import { Text, View, WheelPicker } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'

const items: WheelPickerItem[] = [
  { value: 'easy', label: 'Easy' },
  { value: 'normal', label: 'Normal' },
  { value: 'hard', label: 'Hard' },
  { value: 'expert', label: 'Expert' },
  { value: 'nightmare', label: 'Nightmare' },
]

export const quickStartWheelPickerExampleMeta: ExampleMeta = {
  id: 'wheelpicker-quick-start',
  title: 'WheelPicker Quick Start',
  description: 'Basic wheel picker for option selection.',
  category: 'inputs',
  tags: ['wheelpicker', 'input', 'selection'],
  height: 300,
}

export default function QuickStartWheelPickerExample(): VNodeLike {
  const [selected, setSelected] = useState('normal')

  return (
    <View width="fill" height="fill" alignItems="center" justifyContent="center" gap={12}>
      <WheelPicker
        items={items}
        value={selected}
        onChange={setSelected}
        visibleItems={5}
        width={200}
      />
      <Text text={`Difficulty: ${selected}`} />
    </View>
  )
}
```

--------------------------------

### Tooltip Quick Start

Source: https://phaserjsx.number10.de/guides/tooltips

Basic implementation of tooltips on buttons, including conditional content logic.

```jsx
/**
 * Tooltip Quick Start Example
 */
/** @jsxImportSource @number10/phaserjsx */
import { Button, Text, View } from '@number10/jsx-components'

export function QuickStartTooltipExample() {
  return (
    <View width={'fill'} height={'fill'} alignItems="center" justifyContent="center" gap={14}>
      <Text text="Hover to show tooltips" style={{ color: '#ffffff', fontSize: '16px' }} />
      <View direction="row" gap={12}>
        <Button onTooltip={() => 'Primary action'}>
          <Text text="Primary" />
        </Button>
        <Button variant="secondary" onTooltip={() => 'Secondary action'}>
          <Text text="Secondary" />
        </Button>
        <Button variant="outline" onTooltip={() => (Math.random() > 0.5 ? 'Lucky!' : 'Unlucky!')}>
          <Text text="Conditional" />
        </Button>
      </View>
      <Text
        text="Desktop/mouse only - tooltips are disabled on touch devices"
        style={{ color: '#9aa0a6', fontSize: '12px' }}
      />
    </View>
  )
}
```

--------------------------------

### ListBox Quick Start

Source: https://phaserjsx.number10.de/components/listbox

Basic implementation of a ListBox with predefined items and state-managed selection.

```typescript
/** @jsxImportSource @number10/jsx-core */
import type { ListBoxItem } from '@number10/jsx-components'
import { ListBox, Text, View } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'
import { useState } from '@number10/jsx-core'

const items: ListBoxItem[] = [
  { value: 'player', label: 'Player Settings' },
  { value: 'graphics', label: 'Graphics' },
  { value: 'audio', label: 'Audio' },
  { value: 'controls', label: 'Controls' },
  { value: 'network', label: 'Network', disabled: true },
  { value: 'language', label: 'Language' },
]

export const quickStartListBoxExampleMeta: ExampleMeta = {
  id: 'listbox-quick-start',
  title: 'ListBox Quick Start',
  description: 'Basic listbox with option selection.',
  category: 'inputs',
  tags: ['listbox', 'input', 'selection'],
  height: 300,
}

export default function QuickStartListBoxExample(): VNodeLike {
  const [selected, setSelected] = useState<string>('graphics')

  return (
    <View width="fill" height="fill" alignItems="center" justifyContent="center" gap={12}>
      <ListBox
        items={items}
        value={selected}
        onChange={setSelected}
        maxVisibleItems={4}
        width={260}
      />
      <Text text={`Selected: ${items.find((i) => i.value === selected)?.label ?? selected}`} />
    </View>
  )
}
```

--------------------------------

### Install PhaserJSX and Phaser

Source: https://phaserjsx.number10.de/installation

Use this command to add the compatibility package and Phaser dependency to your project.

```bash
pnpm add @number10/phaserjsx phaser
```

--------------------------------

### Implement a Quick Start MenuButton

Source: https://phaserjsx.number10.de/components/menu-button

Demonstrates a standard file action menu with item callbacks, icons, and selection feedback.

```typescript
/** @jsxImportSource @number10/phaserjsx */
import { Icon } from '@/components/Icon'
import { MenuButton, Text, View, type ContextMenuItem } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'

export function QuickStartMenuButtonExample() {
  const [lastAction, setLastAction] = useState('None')

  const items: ContextMenuItem[] = [
    {
      id: 'save',
      label: 'Save',
      prefix: <Icon type="check" size={16} />,
    },
    {
      id: 'open',
      label: 'Open folder',
      prefix: <Icon type="folder" size={16} />,
    },
    {
      id: 'export',
      label: 'Export',
      prefix: <Icon type="download" size={16} />,
    },
    {
      id: 'delete',
      label: 'Delete',
      danger: true,
      prefix: <Icon type="trash" size={16} />,
    },
  ]

  return (
    <View width="fill" height="fill" alignItems="center" justifyContent="center" gap={20}>
      <MenuButton
        label="File"
        icon={<Icon type="folder" size={16} />}
        items={items}
        width={190}
        onSelect={(item) => setLastAction(item.label)}
      />

      <View padding={10} backgroundColor={0x1e293b} cornerRadius={6}>
        <View direction="row" gap={8} alignItems="center">
          <Text text="Last Action:" />
          <Text text={lastAction} alpha={0.8} />
        </View>
      </View>
    </View>
  )
}
```

--------------------------------

### Image Quick Start

Source: https://phaserjsx.number10.de/components/image

Demonstrates basic image loading and rendering using the useTexture hook to manage asset readiness.

```jsx
/**
 * Image Quick Start - Basic image loading via useTexture hook
 */
/** @jsxImportSource @number10/phaserjsx */
import { resolveAssetPath } from '@/utils/assetPath'
import { Image, Text, View } from '@number10/jsx-components'
import { useTexture } from '@number10/jsx-core'

export function QuickStartImageExample() {
  const test = useTexture('test', resolveAssetPath('assets/images/test.png'))
  const back = useTexture('back', resolveAssetPath('assets/images/back.png'))
  const line = useTexture('wideline', resolveAssetPath('assets/images/wideline.png'))
  const ready = test.ready && back.ready && line.ready

  return (
    <View width="100%" height="100%" padding={20} gap={20}>
      <Text text={ready ? 'Textures loaded via useTexture:' : 'Loading...'} />

      {ready && (
        <View gap={20} direction="row" flexWrap="wrap">
          <Image texture={test.key} width={64} height={64} />
          <Image texture={back.key} width={64} height={64} />
          <Image texture={line.key} width={64} height={64} />
        </View>
      )}
    </View>
  )
}
```

--------------------------------

### TransformProps Usage Examples

Source: https://phaserjsx.number10.de/api/core-props

Examples for applying position, rotation, and scaling transformations.

```jsx
// Position
<View x={100} y={50} />

// Rotation (radians)
<View rotation={Math.PI / 4} />

// Scale
<View scale={1.5} />
<View scaleX={2} scaleY={0.5} />
```

--------------------------------

### Basic Phaser Scene Setup

Source: https://phaserjsx.number10.de/installation

Demonstrates manual component mounting within a Phaser scene using mountJSX.

```typescript
/**
 * Basic Phaser 4 scene setup — Phaser Direct
 * Components from @number10/jsx-components, mountJSX from @number10/jsx-phaser.
 */
/** @jsxImportSource @number10/jsx-phaser */
import { Button, Text, View } from '@number10/jsx-components'
import { mountJSX } from '@number10/jsx-phaser'
import * as Phaser from 'phaser'

class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' })
  }

  create() {
    // Mount your PhaserJSX component tree
    mountJSX(this, MainUI, { width: this.scale.width, height: this.scale.height })
  }
}

// Your component using PhaserJSX
function MainUI() {
  return (
    <View width="100vw" height="100vh" alignItems="center" justifyContent="center" gap={20}>
      <Text text="Welcome to PhaserJSX!" />

      <Button variant="primary" onClick={() => console.log('Clicked!')}>
        <Text text="Get Started" />
      </Button>
    </View>
  )
}

export { GameScene }
```

--------------------------------

### Configure Global Theme

Source: https://phaserjsx.number10.de/guides/theme-system

Initialize a theme using color presets and semantic tokens for consistent component styling.

```javascript
import { createTheme, getPresetWithMode } from '@number10/phaserjsx'

// Get preset with color mode
const preset = getPresetWithMode('oceanBlue', 'light')
const { colors } = preset

// Create theme using color tokens
const theme = createTheme({
  Text: {
    style: {
      color: colors.text.DEFAULT.toString(),  // Semantic token
      fontSize: '16px',
      fontFamily: 'Arial'
    }
  },
  View: {
    backgroundColor: colors.surface.light.toNumber(),
    borderColor: colors.border.medium.toNumber(),
    cornerRadius: 8
  },
  Button: {
    backgroundColor: colors.primary.DEFAULT.toNumber(),
    borderColor: colors.primary.dark.toNumber(),
    textStyle: {
      color: colors.text.lightest.toString()
    }
  }
})
```

--------------------------------

### Alpha Usage Example

Source: https://phaserjsx.number10.de/api/core-props

Applies transparency to a View component.

```jsx
<View alpha={0.5}>Semi-transparent</View>
```

--------------------------------

### Full Icon Generator Configuration

Source: https://phaserjsx.number10.de/guides/icon-generator-config

A complete configuration example demonstrating icon sources, type generation, loader settings, and custom detection patterns.

```typescript
import { defineIconConfig } from '@number10/jsx-icon-generator/icon-generator-config'

export default defineIconConfig({
  // Multiple icon sources
  source: [
    {
      package: 'bootstrap-icons',
      iconsPath: 'icons',
      label: 'Bootstrap Icons',
    },
    {
      directory: './src/custom-icons',
      label: 'Custom Icons',
    },
  ],

  // Type generation
  types: {
    enabled: true,
    scanIconDirectory: 'start',  // Once at server start
    output: './src/components/Icon/icon-types.generated.ts',
    typeName: 'IconType',
  },

  // Loader generation
  loaders: {
    enabled: true,
    generateLoaders: 'watch',    // Regenerate on code changes
    output: './src/components/Icon/icon-loaders.generated.ts',
    scanDir: './src',
    componentNames: ['Icon', 'BootstrapIcon'],
    validate: true,              // Warn about missing icons
  },

  // Custom detection patterns
  customPatterns: [
    {
      name: 'Theme icon properties',
      pattern: '(\w*[Ii]con):\s*["'](\w+)["']',
      captureGroup: 2,
    },
  ],

  // Exclude directories
  exclude: ['node_modules', 'dist', '.git', 'build'],
})
```

--------------------------------

### Wheel Event Usage

Source: https://phaserjsx.number10.de/api/core-props

Example implementation of a wheel event handler.

```jsx
<View
  enableGestures
  onWheel={(e) => console.log('Scrolled:', e.deltaX, e.deltaY)}
/>
```

--------------------------------

### Implement Phaser Direct Application

Source: https://phaserjsx.number10.de/quick-start

A complete example showing component definition, scene integration, and Phaser game configuration.

```typescript
/** @jsxImportSource @number10/jsx-phaser */
import * as Phaser from 'phaser'
import { Button, Text, View } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'
import { mountJSX } from '@number10/jsx-phaser'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <View width={'fill'} height={'fill'} direction="column"
          justifyContent="center" alignItems="center" gap={20}
          backgroundColor={0xf0f0f0}>
      <Text text={`Count: ${count}`}
            style={{ fontSize: '32px', color: '#333', fontWeight: 'bold' }} />
      <View direction="row" gap={12}>
        <Button variant="secondary" onClick={() => setCount(count - 1)}>
          <Text text="Decrement" />
        </Button>
        <Button variant="primary" onClick={() => setCount(count + 1)}>
          <Text text="Increment" />
        </Button>
      </View>
      <Button variant="ghost" onClick={() => setCount(0)}>
        <Text text="Reset" />
      </Button>
    </View>
  )
}

class GameScene extends Phaser.Scene {
  constructor() { super({ key: 'GameScene' }) }
  create() {
    mountJSX(this, Counter, { width: this.scale.width, height: this.scale.height })
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO, width: 800, height: 600,
  parent: 'game-container', backgroundColor: '#ffffff',
  scene: [GameScene],
}

new Phaser.Game(config)
```

--------------------------------

### Example NineSliceTheme usage

Source: https://phaserjsx.number10.de/api/theme-types

Configuration object for a NineSlice component theme.

```typescript
NineSlice: {
  texture: 'panel',
  leftWidth: 10,
  rightWidth: 10,
  topHeight: 10,
  bottomHeight: 10,
}
```

--------------------------------

### Quick Start Badge and Tag Implementation

Source: https://phaserjsx.number10.de/components/badge

Demonstrates basic usage of Badge for notifications and Tag for filter labels within a PhaserJSX view.

```jsx
/**
 * Badge Quick Start Example
 */
/** @jsxImportSource @number10/phaserjsx */
import { Badge, Button, Tag, Text, View } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'

export function QuickStartBadgeExample() {
  const [notifications, setNotifications] = useState(3)

  return (
    <View width="fill" height="fill" padding={24} gap={18} justifyContent="center">
      <View direction="row" gap={12} alignItems="center">
        <Text text="Inbox" style={{ color: '#ffffff', fontSize: '18px' }} />
        <Badge count={notifications} tone="danger" />
        <Badge dot tone="success" />
      </View>

      <View direction="row" gap={10} alignItems="center">
        <Tag label="Quest" tone="primary" selected />
        <Tag label="Rare" tone="warning" />
        <Tag label="New" tone="success" variant="outline" />
      </View>

      <View direction="row" gap={10}>
        <Button
          width={120}
          height={34}
          onClick={() => setNotifications((value) => Math.max(0, value - 1))}
        >
          <Text text="Read one" style={{ color: '#ffffff', fontSize: '13px' }} />
        </Button>
        <Button width={120} height={34} onClick={() => setNotifications((value) => value + 5)}>
          <Text text="Add five" style={{ color: '#ffffff', fontSize: '13px' }} />
        </Button>
      </View>
    </View>
  )
}
```

--------------------------------

### Example IconTheme usage

Source: https://phaserjsx.number10.de/api/theme-types

Configuration object for an Icon component theme.

```typescript
Icon: {
  size: 24,
  color: 0x6b7280,
  strokeWidth: 2,
}
```

--------------------------------

### Example TextTheme usage

Source: https://phaserjsx.number10.de/api/theme-types

Configuration object for a Text component theme.

```typescript
Text: {
  style: {
    fontFamily: 'Inter',
    fontSize: '16px',
    color: '#1f2937',
    align: 'left',
  },
  maxWidth: 600,
}
```

--------------------------------

### Render a Sprite with Quick Start

Source: https://phaserjsx.number10.de/components/sprite

Demonstrates basic sprite rendering by defining a texture and applying position and scale properties. Requires preloading the texture asset in the scene.

```typescript
/**
 * Sprite Quick Start Example
 */
/** @jsxImportSource @number10/phaserjsx */
import { resolveAssetPath } from '@/utils/assetPath'
import { Sprite } from '@number10/phaserjsx'
import { Text, View } from '@number10/jsx-components'

export function QuickStartSpriteExample() {
  return (
    <View width="fill" height="fill" padding={20} gap={14} justifyContent="center">
      <Text text="Sprites render Phaser textures as layout-independent game objects." />
      <View width={300} height={150} direction="stack" backgroundColor={0x20283a} cornerRadius={8}>
        <Sprite texture="sprite-eye" x={105} y={75} scale={0.85} />
        <Sprite texture="sprite-eye" x={195} y={75} scale={0.85} alpha={0.65} />
      </View>
    </View>
  )
}

// eslint-disable-next-line react-refresh/only-export-components
export function preloadQuickStartSprite(scene: Phaser.Scene) {
  scene.load.image('sprite-eye', resolveAssetPath('assets/images/lance-overdose-loader-eye.png'))
}
```

--------------------------------

### Example ViewTheme usage

Source: https://phaserjsx.number10.de/api/theme-types

Configuration object for a View component theme.

```typescript
View: {
  backgroundColor: 0xf3f4f6,
  cornerRadius: 8,
  padding: 16,
  gap: 12,
  // Nested component themes
  Text: {
    style: { color: '#111827' },
  },
}
```

--------------------------------

### Dropdown Quick Start

Source: https://phaserjsx.number10.de/components/dropdown

Basic implementation of a single-select dropdown component.

```typescript
/**
 * Dropdown Quick Start Example
 */
/** @jsxImportSource @number10/jsx-core */
import { Dropdown, Text, View, type DropdownOption } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'
import { useState } from '@number10/jsx-core'

const fruits: DropdownOption[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'orange', label: 'Orange' },
]

export const quickStartDropdownExampleMeta: ExampleMeta = {
  id: 'dropdown-quick-start',
  title: 'Dropdown Quick Start',
  description: 'Basic dropdown with option selection.',
  category: 'inputs',
  tags: ['dropdown', 'input', 'selection'],
  height: 300,
}

export default function QuickStartDropdownExample(): VNodeLike {
  const [selected, setSelected] = useState<string>('')

  return (
    <View width={'fill'} height={'fill'} gap={16} direction="stack">
      <View
        width={'fill'}
        height={'fill'}
        alignItems="center"
        justifyContent="center"
        padding={16}
        gap={10}
      >
        <Text text="Select Fruit" style={{ color: '#ffffff', fontSize: '16px' }} />
        <Text
          text={`Selected: ${fruits.find((f) => f.value === selected)?.label || 'None'}`}
          style={{ color: '#aaaaaa', fontSize: '14px' }}
        />
        <Text
          text="The menu is rendered as a portal overlay and stays outside the parent layout."
          style={{ color: '#95a5a6', fontSize: '11px' }}
        />
      </View>

      <View width={'fill'} alignItems="center" padding={16}>
        <Dropdown
          options={fruits}
          value={selected}
          onChange={(value) => setSelected(value as string)}
          placeholder="Choose a fruit..."
          width={250}
          maxHeight={200}
        />
      </View>
    </View>
  )
}
```

--------------------------------

### Layout Debugging with useLayoutRect

Source: https://phaserjsx.number10.de/api/hooks

Example of using useLayoutRect to display dimensions of a container.

```typescript
function LayoutDebug() {
  const ref = useRef<Phaser.GameObjects.Container | null>(null)
  const rect = useLayoutRect(ref)

  return (
    <View ref={ref} width={240} height={120} backgroundColor={0x333333}>
      <Text text={rect ? `w:${rect.width} h:${rect.height}` : 'Measuring...'} />
    </View>
  )
}
```

--------------------------------

### Joystick Quick Start

Source: https://phaserjsx.number10.de/components/joystick

Basic implementation of a virtual joystick with real-time position feedback using state hooks.

```typescript
/**
 * Joystick Quick Start Example - Basic usage
 */
/** @jsxImportSource @number10/jsx-core */
import { Joystick, Text, View } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'
import { useState } from '@number10/jsx-core'

export const quickStartJoystickExampleMeta: ExampleMeta = {
  id: 'joystick-quick-start',
  title: 'Joystick Quick Start',
  description: 'Basic virtual joystick with position feedback.',
  category: 'interactions',
  tags: ['joystick', 'interactions'],
  height: 300,
}

export default function QuickStartJoystickExample(): VNodeLike {
  const [angle, setAngle] = useState(0)
  const [force, setForce] = useState(0)

  return (
    <View padding={20} gap={20} justifyContent="center" alignItems="center">
      <Joystick
        width={200}
        height={200}
        onMove={(active, angle, force) => {
          if (active) {
            setAngle(angle)
            setForce(force)
          }
        }}
      />
      <View gap={10}>
        <Text text={`Angle: ${Math.round(angle)}°`} />
        <Text text={`Force: ${force.toFixed(2)}`} />
      </View>
    </View>
  )
}
```

--------------------------------

### Create Documentation Page

Source: https://phaserjsx.number10.de/guides/testing

Implements the React page layout for rendering component documentation and live examples.

```typescript
/** @jsxImportSource react */
import {
  DocDescription,
  ExampleSection,
  InheritedProps,
  PropsTable,
  Section,
  ToggleButton,
} from '@/components/Doc'
import { CodeBlock, LiveExample } from '@/components/Example'
import { DocLayout } from '@/components/Layout'
import { buttonContent } from '@/content/button.content'

export function ButtonPage() {
  return (
    <DocLayout>
      <h1>{buttonContent.title}</h1>
      <DocDescription>{buttonContent.description}</DocDescription>
      
      <Section title="Quick Start">
        <LiveExample
          sceneFactory={() => createPhaserScene(buttonContent.quickStart.component)}
          height={buttonContent.quickStart.height}
        />
      </Section>
      
      {/* More sections... */}
    </DocLayout>
  )
}
```

--------------------------------

### Usage in Examples

Source: https://phaserjsx.number10.de/guides/scene-backgrounds

Configuration for adding background properties to component documentation definitions.

```typescript
import { SCENE_SIZES } from '@/constants/scene-sizes'
import type { ComponentDocs } from '@/types/docs'

export const myContent: ComponentDocs = {
  quickStart: {
    id: 'quick-start',
    component: MyComponent,
    height: SCENE_SIZES.medium,
    // Optional background configuration
    background: {
      type: 'grid',
      animation: 'lemniscate',
      opacity: 0.2,
      color: 0x4a9eff,
    },
    code: `...`,
  },
}
```

--------------------------------

### Gesture Configuration Usage

Source: https://phaserjsx.number10.de/api/core-props

Example of overriding default gesture timing values.

```jsx
<View
  enableGestures
  longPressDuration={1000}
  doubleTapDelay={200}
  maxTouchDuration={800}
  onLongPress={(e) => console.log('Long pressed')}
/>
```

--------------------------------

### Depth Usage Example

Source: https://phaserjsx.number10.de/api/core-props

Controls rendering order using the depth property.

```jsx
<View direction="stack">
  <View depth={1}>Background</View>
  <View depth={2}>Content</View>
  <View depth={3}>Overlay</View>
</View>
```

--------------------------------

### Overflow Usage Example

Source: https://phaserjsx.number10.de/api/core-props

Demonstrates clipping content within a View container.

```jsx
<View width={100} height={50} overflow="hidden">
  <Text text="This long text will be clipped" />
</View>
```

--------------------------------

### Configure Icon Sources

Source: https://phaserjsx.number10.de/guides/icon-generator-config

Examples for defining icon sources from npm packages, local directories, or a combination of both.

```typescript
source: [
  {
    package: 'bootstrap-icons',      // npm package name
    iconsPath: 'icons',              // Path to icons within package
    label: 'Bootstrap Icons',        // Display label in logs
  },
]
```

```typescript
source: [
  {
    directory: './src/custom-icons', // Path to local SVG files
    label: 'Custom Icons',           // Display label in logs
  },
]
```

```typescript
source: [
  {
    package: 'bootstrap-icons',
    iconsPath: 'icons',
    label: 'Bootstrap Icons',
  },
  {
    directory: './src/custom-icons',
    label: 'Custom Icons',
  },
  {
    package: 'feather-icons',
    iconsPath: 'dist/icons',
    label: 'Feather Icons',
  },
]
```

--------------------------------

### Initialize theme system imports

Source: https://phaserjsx.number10.de/guides/theme-system

Standard imports required for setting up the theme system and component definitions in a project.

```typescript
/**
 * Theme system documentation sample
 */
/** @jsxImportSource @number10/phaserjsx */
import {
  Button,
  Text,
  View,
  WrapText,
  type PortableComponentPartialTheme,
  type PortableComponentThemes,
} from '@number10/jsx-components'
import {
  createTheme,
  getGlobalThemeDefaults,
  getPresetWithMode,
  KNOWN_COMPONENTS,
  mergeThemes,
  registerComponentThemeDefaults,
  resolveComponentTheme,
  useMemo,
  useState,
  useTheme,
  type NestedComponentThemes,
  type PortableTextStyle,
} from '@number10/jsx-core'

type Mode = 'light' | 'dark'
```

--------------------------------

### Responsive Viewport Playground Implementation

Source: https://phaserjsx.number10.de/guides/responsive-design

A comprehensive example demonstrating dynamic UI adaptation based on viewport dimensions using state-driven layout adjustments.

```typescript
/**
 * Responsive Viewport Playground Example
 */
/** @jsxImportSource @number10/phaserjsx */
import type { SizeValue } from '@number10/phaserjsx'
import { Button, Divider, Text, View } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'

type ViewportPreset = {
  id: 'phone' | 'tablet' | 'desktop'
  label: string
  width: number
  height: number
}

const VIEWPORTS: ViewportPreset[] = [
  { id: 'phone', label: 'Phone', width: 250, height: 420 },
  { id: 'tablet', label: 'Tablet', width: 420, height: 330 },
  { id: 'desktop', label: 'Desktop', width: 560, height: 330 },
]

const TEXT = { color: '#f8fafc', fontSize: '12px' }
const MUTED = { color: '#94a3b8', fontSize: '11px' }

function PresetButton({
  preset,
  active,
  onClick,
}: {
  key?: string
  preset: ViewportPreset
  active: boolean
  onClick: () => void
}) {
  return (
    <Button
      width={92}
      height={34}
      size="small"
      variant={active ? 'primary' : 'outline'}
      onClick={onClick}
    >
      <Text text={preset.label} style={{ color: '#ffffff', fontSize: '12px' }} />
    </Button>
  )
}

function Meter({ label, width, color }: { label: string; width: SizeValue; color: number }) {
  return (
    <View direction="column" gap={5}>
      <View direction="row" justifyContent="space-between" width="fill">
        <Text text={label} style={MUTED} />
        <Text text={String(width)} style={MUTED} />
      </View>
      <View width="fill" height={12} backgroundColor={0x1e293b} cornerRadius={6}>
        <View width={width} height={12} backgroundColor={color} cornerRadius={6} />
      </View>
    </View>
  )
}

function InfoCard({ title, value, accent }: { title: string; value: string; accent: number }) {
  return (
    <View
      width="fill"
      minWidth={60}
      maxWidth={120}
      height={54}
      direction="column"
      gap={8}
      padding={10}
      backgroundColor={0x1e293b}
      borderColor={accent}
      borderWidth={2}
      cornerRadius={6}
    >
      <Text text={title} style={MUTED} />
      <Text text={value} style={{ color: '#f8fafc', fontSize: '15px' }} />
    </View>
  )
}

function SimulatedApp({ viewport }: { viewport: ViewportPreset }) {
  const compact = viewport.width < 320
  const roomy = viewport.width >= 500

  return (
    <View
      width={viewport.width}
      height={viewport.height}
      direction="column"
      gap={compact ? 8 : 12}
      padding={compact ? 10 : 16}
      backgroundColor={0x0f172a}
      borderColor={0x38bdf8}
      borderWidth={2}
      cornerRadius={8}
    >
      <View
        width="fill"
        height={compact ? 48 : 58}
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        padding={10}
        backgroundColor={0x1e293b}
        cornerRadius={6}
      >
        <Text text="Game UI" style={{ color: '#f8fafc', fontSize: compact ? '13px' : '16px' }} />
        <View width={compact ? 52 : 92} height={10} backgroundColor={0x22c55e} cornerRadius={5} />
      </View>

      <View flex={1} width="fill" direction={roomy ? 'row' : 'column'} gap={compact ? 8 : 12}>
        <View
          width={roomy ? 160 : 'fill'}
          height={roomy ? 'fill' : undefined}
          direction="column"
          gap={8}
          padding={10}
          backgroundColor={0x111827}
          cornerRadius={6}
        >
          <Text text={roomy ? 'Sidebar' : 'Quick stats'} style={TEXT} />
          <Meter label="HP" width="78%" color={0x22c55e} />
          <Meter label="MP" width="52%" color={0x38bdf8} />
        </View>
```

--------------------------------

### Compare Static vs Dynamic Icon Imports

Source: https://phaserjsx.number10.de/guides/icon-system

Demonstrates the difference between bundling all icons via static imports and optimizing bundle size using dynamic imports.

```javascript
// ❌ All 2000+ icons in bundle
import check from 'bootstrap-icons/icons/check.svg'
import gear from 'bootstrap-icons/icons/gear.svg'
// ... 2000+ more imports

const icons = { check, gear, ... }
```

```javascript
// ✅ Only used icons in bundle
export const iconLoaders = {
  'check': () => import('bootstrap-icons/icons/check.svg'),
  'gear': () => import('bootstrap-icons/icons/gear.svg'),
  // Only icons found in your code
}
```

--------------------------------

### Opacity & Visibility Configuration

Source: https://phaserjsx.number10.de/components/view

Example metadata for controlling alpha transparency and visibility properties.

```typescript
/**
 * View Alpha & Visibility Example - Opacity and visibility control
 */
/** @jsxImportSource @number10/jsx-core */
import { ScrollView, Text, View } from '@number10/jsx-components'
import type { VNodeLike } from '@number10/jsx-core'
import type { ExampleMeta } from '../types'

export const alphaVisibilityViewExampleMeta: ExampleMeta = {
  id: 'view-alpha-visibility',
  title: 'Opacity & Visibility',
  description: 'Alpha transparency and visible prop control.',
  category: 'layout',
  tags: ['view', 'layout'],
  height: 500,
}
```
Tokens:
Raw