#UE-Connect Documentation

import { UEProvider, useUEContext } from 'ue-connect'

// Provide context at the app root component
function App() {
  return (
    <UEProvider>
      <YourComponent />
    </UEProvider>
  )
}

// Use context in child components
function YourComponent() {
  const { isConnected, isMobile, useMouse, setUseMouse, lastKeyAction } = useUEContext()

  return (
    <div>
      <p>Connection Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
      <p>Device Type: {isMobile ? 'Mobile' : 'Desktop'}</p>
      <p>Last Key Action: {lastKeyAction || 'None'}</p>
      <button onClick={() => setUseMouse(!useMouse)}>{useMouse ? 'Disable Mouse' : 'Enable Mouse'}</button>
    </div>
  )
}

import { useQuickUIEventSender, useQuickUIEventListener } from 'ue-connect'

function EventSystemComponent() {
  // Send event - requires specifying event name (corresponds to backend QuickUIListenEvent)
  const sendEvent = useQuickUIEventSender('playerUpdate')

  // Listen for events from UE (corresponds to backend QuickUIEventJSONGenerate)
  useQuickUIEventListener('gameStateChange', (event) => {
    console.log('Game state changed:', event)
    console.log('Event topic:', event.topic)
    console.log('Event payload:', event.payload)
    console.log('Timestamp:', event.timestamp)
    console.log('Event source:', event.source) // "web" or "ue"
  })

  const updatePlayer = () => {
    // Send event to UE (fire-and-forget)
    sendEvent({
      health: 100,
      ammo: 30,
      position: { x: 10, y: 20, z: 30 }
    })
  }

  return <button onClick={updatePlayer}>Update Player Data</button>
}

import { useUEMouse } from 'ue-connect'

function MouseComponent() {
  const { useMouse, setUseMouse } = useUEMouse(true)

  return (
    <div>
      <button onClick={() => setUseMouse(!useMouse)}>{useMouse ? 'Disable Mouse Events' : 'Enable Mouse Events'}</button>

      {/* This area will not trigger mouse events */}
      <div data-nohit style={{ padding: '20px', background: '#f0f0f0' }}>
        Mouse Event Disabled Area
      </div>
    </div>
  )
}

import { useUEGameControl } from 'ue-connect'

function GameControlComponent() {
  const gameControl = useUEGameControl()

  return (
    <div>
      <button onClick={() => gameControl.quitGame()}>Quit Game</button>
      <button onClick={() => gameControl.executeCommand('stat fps')}>Show FPS</button>
      <button onClick={() => gameControl.clientTravel('127.0.0.1')}>Connect to Server</button>
    </div>
  )
}

import { useDevicePixelRatio } from 'ue-connect'

function ResponsiveComponent() {
  const dpr = useDevicePixelRatio()

  return (
    <div
      style={{
        width: `${100 * dpr}px`,
        height: `${50 * dpr}px`
      }}
    >
      Adaptive Element
    </div>
  )
}

import { useInputBlocker } from 'ue-connect'

function InputComponent() {
  const { blockInput, unblockInput, isBlocked } = useInputBlocker()

  return (
    <div>
      <button onClick={blockInput}>Block Input</button>
      <button onClick={unblockInput}>Allow Input</button>
      <p>Current Status: {isBlocked ? 'Input Blocked' : 'Input Normal'}</p>
    </div>
  )
}

import { useInputKeyEventListener } from 'ue-connect'

function NavigationComponent() {
  const { lastKeyAction } = useInputKeyEventListener({
    onKeyAction: (action) => {
      console.log('Key Action:', action)
      // action values: "Up" | "Down" | "Left" | "Right" | "Next" | "Previous" | "Select"
    }
  })

  return (
    <div>
      <p>Last Key Action: {lastKeyAction || 'None'}</p>
    </div>
  )
}

import { useUEEventJSON } from 'ue-connect'

function EventComponent() {
  const triggerEvent = useUEEventJSON({ functionName: 'MyBlueprintEvent' })

  const handleClick = () => {
    triggerEvent({
      playerName: 'Player1',
      score: 100,
      level: 5,
      items: ['item1', 'item2']
    })
  }

  return <button onClick={handleClick}>Send Game Event</button>
}

import { useUECallback } from 'ue-connect'

function CallbackComponent() {
  useUECallback('OnPlayerDataUpdated', (onData) => {
    console.log('Player data updated:', onData)
    // Process player data
  })

  return <div>Callback Component</div>
}

function filterUECallBackJSonData<T extends Record<string, any>>(
  data: T | undefined,
  filters: Record<string, any>
): Partial<T> | undefined

import { useUECallback, filterUECallBackJSonData } from 'ue-connect'
import { useState } from 'react'

function AuthComponent() {
  useUECallback(
    'OnPlayerDataUpdated',
    (data) => {
      // First check if the returned data is a JSON string
      if (typeof data === 'string') {
        try {
          data = JSON.parse(data)
        } catch {
          console.error('Invalid JSON string, treating as non-JSON:', data)
          return
        }
      }
    
      // Filter data
      const filter = filterUECallBackJSonData(data, { health: (vs: any) => vs, isAlive: (vs: any) => vs })
      
      // Callback logic processing
      console.log('Filtered data:', filter)
      /*
      Output:
      Filtered data: { health: 100, isAlive: true }
      */
    }
  )

  return (
    <div>
      <p>Health: {filter?.health || 'N/A'}</p>
      <p>Alive: {filter?.isAlive ? 'Yes' : 'No'}</p>
    </div>
  )
}

import React from 'react'
import {
  UEProvider,
  useUEContext,
  useUEEventJSON,
  useUEMouse,
  useQuickUIEvent,
  useQuickUIEventListener,
  useUECallback,
  useInputKeyEventListener,
  filterUECallBackJSonData,
} from 'ue-connect'

function GameUI() {
  const { isConnected, useMouse, lastKeyAction } = useUEContext()
  const { useMouse: mouseEnabled, setUseMouse } = useUEMouse(true)
  const triggerEvent = useUEEventJSON({ functionName: 'UpdateUI' })

  // Use updated useQuickUIEvent
  const sendPlayerEvent = useQuickUIEvent('playerAction')
  const sendGameEvent = useQuickUIEvent('gameState')

  // Listen for events from UE5
  useQuickUIEventListener('enemySpawn', (event) => {
    console.log('Enemy spawned:', event.payload)
    // Update UI state here
  })

  // Listen for UE5 key navigation events (suitable for TV or gamepad remote control)
  useInputKeyEventListener({
    onKeyAction: (action) => {
      console.log('Key Navigation:', action)
    }
  })

  // Use optimized callback management
  useUECallback('OnPlayerDataUpdated', (data) => {
    console.log('Player data updated:', data)
    // Process player data update
  })

  // Use filterUECallBackJSonData for data filtering
  useUECallback(
    'OnPlayerDataUpdated', // Frontend callback function name
    (data) => {
      // Note: First check if returned data is JSON string, treat plain text as non-JSON
      if (typeof data === 'string') {
        try {
          data = JSON.parse(data)
        } catch {
          console.error('Invalid JSON string, treating as non-JSON:', data)
          return
        }
      }
    
      const filter = filterUECallBackJSonData(data, { health: (vs: any) => vs, isAlive: (vs: any) => vs })
      
      console.log('Filtered data:', filter)
    }
  )

  const handlePlayerAction = (action: string) => {
    triggerEvent({
      action,
      timestamp: Date.now(),
      playerId: 'player123'
    })

    sendPlayerEvent({
      actionType: action,
      player: 'player123'
    })
  }

  const handleGameStateChange = (state: string) => {
    sendGameEvent({
      newState: state,
      previousState: 'playing'
    })
  }

  return (
    <div className="game-ui">
      <div className="status-bar">
        <span>Status: {isConnected ? 'Connected' : 'Connecting...'}</span>
        <span>Last Key Action: {lastKeyAction || 'None'}</span>
        <button onClick={() => setUseMouse(!mouseEnabled)}>{mouseEnabled ? 'Disable' : 'Enable'} Mouse</button>
      </div>

      <div className="game-controls">
        <button onClick={() => handlePlayerAction('jump')}>Jump</button>
        <button onClick={() => handlePlayerAction('attack')}>Attack</button>
        <button onClick={() => handleGameStateChange('paused')}>Pause Game</button>
      </div>

      <div data-nohit className="no-mouse-zone">
        This area does not respond to mouse events
      </div>
    </div>
  )
}

export default function App() {
  return (
    <UEProvider>
      <GameUI />
    </UEProvider>
  )
}

// Key action type
type KeyAction = "Up" | "Down" | "Left" | "Right" | "Next" | "Previous" | "Select"

// Custom event interface
interface QuickEvent<Payload = QuickEventPayload> {
  type: 'event' // Event type (fixed as "event")
  topic: string // Event topic/name
  payload?: Payload // Event payload data
  timestamp: number // Event timestamp
  source: 'web' | 'ue' // Event source
}

type QuickEventPayload = Record<string, any> | null

interface QuickEvent<Payload = QuickEventPayload> {
  type: 'event'
  topic: string
  payload?: Payload
  timestamp: number
  source: 'web' | 'ue'
}

type QuickEventPayload = Record<string, any> | null

import { useQuickUIEvent, useQuickUIEventListener, type QuickEvent } from 'ue-connect'

// Define custom payload type
interface PlayerEvent {
  playerId: string
  health: number
  position: { x: number; y: number; z: number }
}

function TypedComponent() {
  const sendPlayerUpdate = useQuickUIEvent('playerUpdate')

  useQuickUIEventListener('playerUpdate', (event: QuickEvent<PlayerEvent>) => {
    if (event.payload) {
      console.log('Player ID:', event.payload.playerId)
      console.log('Player Health:', event.payload.health)
      console.log('Player Position:', event.payload.position)
    }
  })

  const updatePlayer = () => {
    sendPlayerUpdate({
      playerId: 'player123',
      health: 100,
      position: { x: 10, y: 20, z: 30 }
    })
  }

  return <button onClick={updatePlayer}>Update Player</button>
}