ADD 30 features ont his make the css better make the soldiers and stuff stay and way better

(function () {
    // Create main UI elements
    const settingsBox = document.createElement('div');
    const infoBox = document.createElement('div');
    const container = document.createElement('div');
    let currentBox = null;
    let isDraggingEnabled = true;
    let isResizingEnabled = false;
    let isRotatingEnabled = false;
    let is3DView = false;

    // Styles for UI elements
    Object.assign(settingsBox.style, {
        position: 'fixed',
        top: '10px',
        left: '10px',
        background: 'rgba(255, 255, 255, 0.9)',
        padding: '20px',
        border: '1px solid #ccc',
        borderRadius: '5px',
        zIndex: '10',
        maxHeight: '80vh',
        overflowY: 'auto'
    });

    Object.assign(infoBox.style, {
        position: 'fixed',
        bottom: '10px',
        left: '10px',
        background: 'rgba(255, 255, 255, 0.9)',
        padding: '10px',
        borderRadius: '5px',
        zIndex: '10'
    });

    Object.assign(container.style, {
        width: '100vw',
        height: '100vh',
        position: 'relative',
        overflow: 'hidden',
        background: '#f0f0f0',
        border: '1px solid #000'
    });

    document.body.appendChild(container);
    document.body.appendChild(settingsBox);
    document.body.appendChild(infoBox);

    // Initialize the settings box
    function initializeSettings() {
        settingsBox.innerHTML = `
            <h3>Box Settings</h3>
            <label for="objectType">Select Object Type:</label>
            <select id="objectType">
                <option value="box">3D Box</option>
                <option value="text">Text Block</option>
                <option value="image">Image Block</option>
                <option value="gif">GIF Block</option>
            </select>
            <br />

            <label for="boxSize">Box Size:</label>
            <input type="range" id="boxSize" min="50" max="300" value="100" onchange="changeBoxSize(this.value)">
            <label for="boxRotation">Box Rotation:</label>
            <input type="range" id="boxRotation" min="0" max="360" value="0" onchange="changeBoxRotation(this.value)">
            <label for="boxColor">Box Color:</label>
            <input type="color" id="boxColor" onchange="changeBoxColor(this.value)">
            <button onclick="spawnObject()">Spawn Object</button>
            <button onclick="removeCurrentBox()">Remove Current Box</button>
            <button onclick="toggle3DView()">Toggle 3D View</button>
            <label>
                <input type="checkbox" id="toggleDrag" checked onchange="toggleDragging(this.checked)"> Enable Dragging
            </label>
            <label>
                <input type="checkbox" id="toggleResize" onchange="toggleResizing(this.checked)"> Enable Resizing
            </label>
        `;
    }

    // Change Box Size
    window.changeBoxSize = function (size) {
        if (currentBox) {
            currentBox.style.width = size + 'px';
            currentBox.style.height = size + 'px';
            updateResizeHandles(currentBox);
        }
    };

    // Change Box Rotation
    window.changeBoxRotation = function (rotation) {
        if (currentBox) {
            currentBox.style.transform = `rotate(${rotation}deg)`;
        }
    };

    // Change Box Color
    window.changeBoxColor = function (color) {
        if (currentBox) {
            currentBox.style.backgroundColor = color;
        }
    };

    // Spawn Object based on selection
    window.spawnObject = function () {
        const objectType = document.getElementById('objectType').value;
        switch(objectType) {
            case 'box':
                addBox();
                break;
            case 'text':
                addTextBlock();
                break;
            case 'image':
                addImageBlock();
                break;
            case 'gif':
                addGifBlock();
                break;
        }
    };

    // Add a new Box
    function addBox() {
        const box = document.createElement('div');
        box.className = 'box';
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.position = 'absolute';
        box.style.backgroundColor = 'coral';
        positionRandom(box);
        
        box.addEventListener('mousedown', () => {
            currentBox = box; // Select this box
            infoBox.textContent = "Selected Box!";
            initializeSettings();
            createResizeHandles(box);
            createRotationHandles(box);
        });

        container.appendChild(box);
        updateResizeHandles(box);
    }

    function positionRandom(box) {
        box.style.left = Math.random() * 80 + 'vw';
        box.style.top = Math.random() * 80 + 'vh';
    }

    // Add a Text Block
    function addTextBlock() {
        const box = document.createElement('div');
        box.className = 'text-block';
        box.style.width = '100px';
        box.style.height = '50px';
        box.style.position = 'absolute';
        box.style.backgroundColor = 'lightblue';
        box.style.textAlign = 'center';
        box.style.lineHeight = '50px';  // center the text vertically
        box.innerText = "Editable Text";
        positionRandom(box);
        
        box.contentEditable = true; // Make the text block editable
        box.addEventListener('mousedown', () => {
            currentBox = box; // Select this box
            infoBox.textContent = "Selected Text Block!";
            initializeSettings();
            createResizeHandles(box);
            createRotationHandles(box);
        });

        container.appendChild(box);
        updateResizeHandles(box);
    }

    // Add an Image Block
    function addImageBlock() {
        const box = document.createElement('div');
        box.className = 'image-block';
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.position = 'absolute';
        box.style.backgroundColor = 'lightgreen';
        positionRandom(box);
        
        const img = document.createElement('img');
        img.src = prompt("Enter the image URL", "https://via.placeholder.com/100");
        img.style.width = '100%';
        img.style.height = '100%';
        img.style.objectFit = 'cover';

        box.appendChild(img);
        box.addEventListener('mousedown', () => {
            currentBox = box; // Select this box
            infoBox.textContent = "Selected Image Block!";
            initializeSettings();
            createResizeHandles(box);
            createRotationHandles(box);
        });

        container.appendChild(box);
        updateResizeHandles(box);
    }

    // Add a GIF Block
    function addGifBlock() {
        const box = document.createElement('div');
        box.className = 'gif-block';
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.position = 'absolute';
        box.style.backgroundColor = 'lightcoral';
        positionRandom(box);
        
        const img = document.createElement('img');
        img.src = prompt("Enter the GIF URL", "https://example.com/your-gif.gif");
        img.style.width = '100%';
        img.style.height = '100%';
        img.style.objectFit = 'cover';

        box.appendChild(img);
        box.addEventListener('mousedown', () => {
            currentBox = box; // Select this box
            infoBox.textContent = "Selected GIF Block!";
            initializeSettings();
            createResizeHandles(box);
            createRotationHandles(box);
        });

        container.appendChild(box);
        updateResizeHandles(box);
    }

    // Create resize handles around the selected box
    function createResizeHandles(box) {
        removeResizeHandles(); // Remove existing handles
        const size = parseInt(box.style.width);
        const corners = [
            { x: -5, y: -5, cursor: 'nwse-resize' },  // Top left
            { x: size - 5, y: -5, cursor: 'nesw-resize' },  // Top right
            { x: -5, y: size - 5, cursor: 'nesw-resize' },  // Bottom left
            { x: size - 5, y: size - 5, cursor: 'nwse-resize' },  // Bottom right
        ];

        corners.forEach(corner => {
            const handle = document.createElement('div');
            handle.style.position = 'absolute';
            handle.style.width = '10px';
            handle.style.height = '10px';
            handle.style.backgroundColor = 'blue';
            handle.style.cursor = corner.cursor;
            handle.style.left = corner.x + 'px';
            handle.style.top = corner.y + 'px';

            // Add resizing logic
            handle.addEventListener('mousedown', (e) => {
                let startX = e.clientX;
                let startY = e.clientY;

                const resize = (event) => {
                    const dx = event.clientX - startX;
                    const dy = event.clientY - startY;

                    if (corner.cursor === 'nwse-resize') {
                        box.style.width = Math.max(50, size + dx) + 'px';
                        box.style.height = Math.max(50, size + dy) + 'px';
                    }

                    if (corner.cursor === 'nesw-resize') {
                        box.style.width = Math.max(50, size - dx) + 'px';
                        box.style.height = Math.max(50, size + dy) + 'px';
                    }

                    updateResizeHandles(box); // Update handles on resize
                };

                const stopResize = () => {
                    document.removeEventListener('mousemove', resize);
                    document.removeEventListener('mouseup', stopResize);
                };

                document.addEventListener('mousemove', resize);
                document.addEventListener('mouseup', stopResize);
            });

            container.appendChild(handle);
        });
    }

    // Remove all resize handles
    function removeResizeHandles() {
        const handles = container.querySelectorAll('.resize-handle');
        handles.forEach(handle => container.removeChild(handle));
    }

    // Remove current selected box
    window.removeCurrentBox = function () {
        if (currentBox) {
            container.removeChild(currentBox);
            currentBox = null;
            infoBox.textContent = "Click a box to select it!";
            removeResizeHandles();
        }
    };

    // Reset the current view of the box
    window.resetView = function () {
        if (currentBox) {
            currentBox.style.transform = 'rotate(0deg)';
            currentBox.style.left = '0px';
            currentBox.style.top = '0px';
            initializeSettings();
        }
    };

    // Toggle dragging functionality
    window.toggleDragging = function (checked) {
        isDraggingEnabled = checked;
    };

    // Toggle 3D View
    window.toggle3DView = function () {
        is3DView = !is3DView;
        if (is3DView) {
            enable3DView();
        } else {
            disable3DView();
        }
    };

    // 3D View
    function enable3DView() {
        infoBox.textContent = "3D View Active: Use WASD to move.";
        // Placeholder for 3D movement implementation
        document.addEventListener('keydown', handle3DMovement);
    }

    function disable3DView() {
        infoBox.textContent = "2D View Active: Click and interact with boxes.";
        document.removeEventListener('keydown', handle3DMovement);
    }

    function handle3DMovement(e) {
        const speed = 5; // Define movement speed
        // Temporary implementation for moving the selected box (if any)
        if (currentBox) {
            switch (e.key) {
                case 'w':
                    currentBox.style.top = (parseInt(currentBox.style.top) - speed) + 'px';
                    break;
                case 's':
                    currentBox.style.top = (parseInt(currentBox.style.top) + speed) + 'px';
                    break;
                case 'a':
                    currentBox.style.left = (parseInt(currentBox.style.left) - speed) + 'px';
                    break;
                case 'd':
                    currentBox.style.left = (parseInt(currentBox.style.left) + speed) + 'px';
                    break;
            }
        }
    }

    // Initialize the settings box on page load
    initializeSettings();
    console.log("3D manipulation tool is ready!");

})();