bblz-01

by murray_3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.10/pixi.min.js"></script>
<div id="dashboard"></div>

CSS

body {
  font-family: Arial, sans-serif;
  background-color: #e0e0e0;
}

#dashboard {
  width: 800px;
  height: 600px;
  margin: 20px auto;
  border: 2px solid #ccc;
  background-color: #f0f0f0;
}

JavaScript

window.addEventListener('load', function() {
    try {
        if (typeof PIXI === "undefined") {
            throw new Error("PixiJS not loaded");
        }

        // Setup PixiJS Application
        let app = new PIXI.Application({
            width: 800,
            height: 600,
            backgroundColor: 0x1099bb,
            resolution: window.devicePixelRatio || 1,
            autoDensity: true,
            antialias: true,
        });

        document.getElementById('dashboard').appendChild(app.view);
        console.log("PixiJS Application Initialized");

        // Constants
        const BASE_RADIUS = 50;
        const GROWTH_FACTOR = 10;  // Size increase per child bubble

        // Encompassing Bubble (acts as a container for all other bubbles)
        let encompassingBubble = new PIXI.Graphics();
        let encompassingRadius = 300;

        encompassingBubble.beginFill(0xffffff, 0.3); // Semi-transparent white
        encompassingBubble.drawCircle(0, 0, encompassingRadius);
        encompassingBubble.endFill();

        encompassingBubble.x = app.screen.width / 2;
        encompassingBubble.y = app.screen.height / 2;

        // Add the encompassing bubble to the stage
        app.stage.addChild(encompassingBubble);

        // Create a Container for Nested Bubbles
        let nestedBubblesContainer = new PIXI.Container();
        encompassingBubble.addChild(nestedBubblesContainer);

        // Sample Data for Initial Bubbles
        let nestedBubblesData = [
            { name: "Bubble 1", color: 0xff6347 },
            { name: "Bubble 2", color: 0x32cd32 },
            { name: "Bubble 3", color: 0x8a2be2 }
        ];

        let activeBubble = null; // Track the bubble currently being dragged
        let dropTarget = null; // Track the drop target

        // Helper function to calculate new radius based on children count
        function calculateBubbleRadius(baseRadius, childCount) {
            return baseRadius + childCount *...