Hudini Panel Component

A panel component that combines Card, SectionHeader, and optional close button for creating modal-like UI elements.

Panel Component

A panel component that combines Card, SectionHeader, and optional close button for creating modal-like UI elements. Perfect for settings panels, information dialogs, and popup windows.

Features

  • 🎴 Card-based: Built on top of Card component with double stroke effect
  • 📑 Optional Header: SectionHeader for panel titles
  • ❌ Close Button: Optional close button with custom callback
  • 🎨 Customizable: Full control over colors, border radius, and margins
  • 🔄 Dynamic Updates: Update title, child, and styling dynamically
  • ⚡ Auto Layout: Automatically positions header and close button

Props

  • scene - Phaser scene where the Panel will be added
  • x - X position of the Panel - default: 0
  • y - Y position of the Panel - default: 0
  • title - Optional title text for the panel header
  • backgroundColor - Background color token or CSS color - default: 'white'
  • borderRadius - Border radius in pixels - default: 8
  • margin - Internal margin in pixels - default: 16
  • showCloseButton - Whether to show close button - default: false
  • onClose - Optional callback function when close button is clicked
  • child - Any Phaser GameObject to be contained within the panel (required)

Methods

  • setTitle(title) - Set or update the panel title
  • setShowCloseButton(show) - Show or hide the close button
  • setOnClose(callback) - Set the close button callback
  • setBackgroundColor(color) - Change background color
  • setBorderRadius(radius) - Change border radius
  • setMargin(margin) - Change internal margin
  • setChild(child) - Replace the panel content
  • getCard() - Get the underlying Card component
  • getSectionHeader() - Get the SectionHeader component (if exists)
  • getCloseButton() - Get the close button component (if exists)

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    Panel,
    Column,
    TextButton
} from 'hudini';

const theme = createTheme({});
type Theme = typeof theme;

class PanelDemoScene extends SceneWithHudini<Theme> {
    constructor() {
        super('panel-demo');
    }

    create(): void {
        const { pw } = this.hudini;
        this.cameras.main.setBackgroundColor(pw.color.slate(900));

        // Create content for the panel
        const button1 = new TextButton({
            scene: this,
            x: 0,
            y: 0,
            text: 'Button 1',
            color: 'blue-500',
            textColor: 'white',
            borderRadius: 'md',
            padding: '4',
        });

        const button2 = new TextButton({
            scene: this,
            x: 0,
            y: 0,
            text: 'Button 2',
            color: 'green-500',
            textColor: 'white',
            borderRadius: 'md',
            padding: '4',
        });

        const content = new Column({
            scene: this,
            x: 0,
            y: 0,
            gap: 12,
            children: [button1, button2]
        });

        // Create panel with title and close button
        const panel = new Panel({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            title: 'Settings Panel',
            backgroundColor: 'white',
            borderRadius: 12,
            margin: 20,
            showCloseButton: true,
            onClose: () => {
                console.log('Panel closed!');
            },
            child: content,
        });
        this.add.existing(panel);
    }
}

Advanced Examples

Panel with Title Only

const panel = new Panel({
    scene: this,
    x: 400,
    y: 300,
    title: 'Information',
    backgroundColor: 'white',
    child: content,
});

Panel with Close Button

const panel = new Panel({
    scene: this,
    x: 400,
    y: 300,
    title: 'Settings',
    showCloseButton: true,
    onClose: () => {
        panel.destroy();
    },
    child: content,
});

Dynamic Updates

const panel = new Panel({
    scene: this,
    x: 400,
    y: 300,
    title: 'Panel',
    child: initialContent,
});

// Update title
panel.setTitle('Updated Title');

// Show close button
panel.setShowCloseButton(true);
panel.setOnClose(() => console.log('Closed!'));

// Update content
panel.setChild(newContent);

// Update styling
panel.setBackgroundColor('gray-100');
panel.setBorderRadius(16);
panel.setMargin(24);