Hudini Card Component

A flexible card component that adapts to its child content size, using phaser-wind tokens for styling.

Card Component

A flexible card component that adapts to its child content size, using phaser-wind tokens for styling.

Features

  • đŸŽ¯ Adaptable: Automatically adjusts to child size
  • 🎨 Stylable: Uses phaser-wind tokens for colors, border radius, and margins
  • 🔄 Flexible: Supports any Phaser GameObject as child
  • ✨ Double Stroke: Beautiful white border with black stroke effect
  • 📏 Sized: Uses ContainerInteractive for proper sizing support

Props

  • backgroundColor - Background color token or CSS color string
  • borderRadius - Border radius token or pixel value
  • margin - Spacing token or pixel value for internal padding
  • child - Any Phaser GameObject to be contained within the card

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    Color,
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    Card,
    TextButton
} from 'hudini';

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

class PreviewScene extends SceneWithHudini<Theme> {
    constructor() {
        super('preview');
    }

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

        // Create a button to put inside the card
        const button = new TextButton({
            scene: this,
            x: 0,
            y: 0,
            text: 'Click Me!',
            color: 'blue-500',
            textColor: 'white',
            borderRadius: 'md',
            padding: '4',
        });

        // Create a card containing the button
        const card = new Card({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            backgroundColor: 'white',
            borderRadius: 'lg',
            margin: '6',
            child: button,
        });
        this.add.existing(card);
    }
}