block stacker-2.0

var drawCube = function(x, y, col, angle) {
    push();
    translate(0, camY); // Translate everything based on camera

    // Translate to the center of the physics body, then rotate
    // Matter.js bodies are centered, so we adjust p5's drawing origin
    // to the center of our isometric block's base for rotation.
    // The isometric block's base center is at (x + 30, y + 15).
    translate(x + 30, y + 15);
    rotate(angle);
    translate(-(x + 30), -(y + 15)); // Translate back for actual cube drawing

    // Top Face
    fill(col);
    quad(x, y, x + 30, y - 15, x + 60, y, x + 30, y + 15);
    // Left Face
    fill(lerpColor(col, color(0), 0.2));
    quad(x, y, x + 30, y + 15, x + 30, y + 45, x, y + 30);
    // Right Face
    fill(lerpColor(col, color(0), 0.4));
    quad(x + 30, y + 15, x + 60, y, x + 60, y + 30, x + 30, y + 45);
    
    pop();
};

function setup() {
    createCanvas(400, 600);

    // Initialize Matter.js engine and world
    engine = Matter.Engine.create();
    world = engine.world;
    world.gravity.y = 1; // Standard gravity

    // Create a static ground body for Matter.js
    // The isometric ground is at y=350. The bottom of our Matter.js block
    // (which is 30px high) will align with 350 + 30 = 380.
    // So the ground should be centered slightly below that.
    let groundThickness = 20;
    groundBody = Matter.Bodies.rectangle(width / 2, 380 + groundThickness / 2, width, groundThickness, { isStatic: true });
    Matter.World.add(world, groundBody);
    physicsBodies.push(groundBody); // Keep track for restart

    // Start base block with its Matter.js body (static)
    // The Matter.js body's center should be at (isometricX + 30, isometricY + 15)
    // Increased density for base block to make it very stable
    // Increased friction for less slipperiness
    let baseBlockBody = Matter.Bodies.rectangle(170 + 30, 350 + 15, 50, 30, { 
        isStatic: true, 
        density: 1.0, // FURTHER Increased density for base block
        friction: 0.8, // Increased friction
        frictionStatic: 1.0, // MAX Increased static friction
        restitution: 0 // No bounciness
    }); 
    Matter.World.add(world, baseBlockBody);
    physicsBodies.push(baseBlockBody);
    blocks.push({ x: 170, y: 350, color: color(100, 200, 255), body: baseBlockBody }); // Store body reference

    // Initialize p5.sound Oscillator
    blockDropSound = new p5.Oscillator('sine');
    blockDropSound.amp(0);
    blockDropSound.start();

    restartButton = createButton('Restart Game');
    restartButton.mousePressed(restartSketch);
    restartButton.style('font-size', '24px');
    restartButton.style('padding', '10px 20px');
    restartButton.style('background-color', '#4CAF50'); // Green
    restartButton.style('color', 'white');
    restartButton.style('border', 'none');
    restartButton.style('cursor', 'pointer');
    restartButton.style('border-radius', '5px');
    restartButton.hide();

    userStartAudio(); // Required for p5.sound to work
}

function draw() {
    background(25, 25, 35);
    
    if (gameOver) {
        fill(255); textSize(40); textAlign(CENTER, CENTER); text("TOWER FELL!", width / 2, height / 2 - 50);
        textSize(20); text("Final Score: " + score, width / 2, height / 2 - 10);
        
        // Position the restart button
        restartButton.position(width / 2 - restartButton.width / 2, height / 2 + 50);
        restartButton.show();
        return;
    }

    // Update Matter.js physics engine
    Matter.Engine.update(engine);

    // Camera Logic
    if (score >= 11) {
        var targetCam = (score - 10) * 30;
        camY = lerp(camY, targetCam, 0.1); 
    }

    // Draw Stack & Check Game Over
    for (var i = 0; i < blocks.length; i++) {
        let block = blocks[i];
        
        if (block.body) {
            // Update p5.js drawing coordinates from Matter.js body position
            // Convert Matter.js center (body.position) back to isometric top-left (block.x, block.y)
            block.x = block.body.position.x - 30;
            block.y = block.body.position.y - 15;
            
            // Check if block has fallen below the ground
            if (block.body.bounds.max.y > groundBody.bounds.max.y + 5) { // Add a small buffer
                gameOver = true;
                // Optional: Play game over sound
                blockDropSound.freq(100);
                blockDropSound.amp(0.8, 0.05);
                blockDropSound.amp(0, 0.5, 0.2);
                if (navigator.vibrate) {
                    navigator.vibrate([100, 50, 100]); // Longer, pulsed vibration
                }
                break; // No need to check further blocks
            }

            drawCube(block.x, block.y, block.color, block.body.angle);
        } else {
            // This case should ideally not happen if all blocks get bodies,
            // but included for robustness.
            drawCube(block.x, block.y, block.color, 0);
        }
    }

    // Logic to allow the next moving block to appear after the previous one settles
    if (isDropping && blocks.length > 1) { // Only check if we're waiting and there's more than the base block
        let lastPlacedBlock = blocks[blocks.length - 1];
        if (lastPlacedBlock.body && abs(lastPlacedBlock.body.velocity.y) < 0.1) { // If it's almost stopped moving vertically
            isDropping = false; // Allow the next block to appear
        }
    }

    // Moving Block (only moves if the previous block has settled)
    if (!isDropping) {
        currentX += speed * dir;
        if (currentX > 340 || currentX < 0) { dir *= -1; }
        
        // The height of the new block is based on how many are in the list
        var currentHeight = 350 - (blocks.length * 30);
        drawCube(currentX, currentHeight, color(255, 200, 50), 0); // Moving block has no angle yet
    }

    // UI
    fill(255); textSize(25); textAlign(LEFT, TOP);
    text("LEVEL: " + score, 20, 40);
}

function mousePressed() {
    // Only allow interaction if game is not over and no block is currently settling
    if (gameOver || isDropping) { 
        return; 
    }
    
    var lastBlock = blocks[blocks.length - 1];
    var accuracy = abs(currentX - lastBlock.x);

    // Hit detection (must be within 45 pixels of the block below)
    if (accuracy < 45) {
        // Create a new Matter.js body for the block
        // It's non-static, so it will fall down.
        // Start it slightly above its target isometric Y.
        // Increased density for falling blocks
        // Increased friction for less slipperiness
        let bodyCenterX = currentX + 30;
        let bodyCenterY = (350 - (blocks.length * 30)) + 15 - 80; // Isometric target Y + 15 (center) - 80 (initial drop offset)
        let newBlockBody = Matter.Bodies.rectangle(bodyCenterX, bodyCenterY, 50, 30, { 
            density: 0.8, // FURTHER Increased density
            friction: 0.8, // Increased friction
            frictionStatic: 1.0, // MAX Increased static friction
            restitution: 0 // No bounciness
        }); 
        Matter.World.add(world, newBlockBody);
        physicsBodies.push(newBlockBody); // Add to our list for cleanup

        blocks.push({
            x: currentX, // This will be updated by the physics engine in draw()
            y: (350 - (blocks.length * 30)), // This is the isometric target Y, but physics will take over
            color: color(random(100, 255), 100, random(100, 255)),
            body: newBlockBody // Store reference to Matter.js body
        });
        score++;
        speed += 0.25; // Speed up

        // Trigger sound effect
        blockDropSound.freq(random(300, 600));
        blockDropSound.amp(0.5, 0.05);
        blockDropSound.amp(0, 0.2, 0.1);

        // Trigger haptic feedback (vibration)
        if (navigator.vibrate) {
            navigator.vibrate(50);
        }

        isDropping = true; // Set flag: a block is currently settling
        currentX = 0;      // Reset currentX for the next moving block
        dir = 1;           // Reset direction for the next moving block
    } else {
        gameOver = true;
        // Play game over sound and vibration (already in draw's gameOver check now)
    }
}

function restartSketch() {
    score = 0;
    gameOver = false;
    speed = 4;
    currentX = 0;
    dir = 1;
    camY = 0;
    blocks = [];
    
    // Clear all physics bodies from the world except the ground
    for (let i = physicsBodies.length - 1; i >= 0; i--) {
        if (physicsBodies[i] !== groundBody) { // Don't remove the ground
            Matter.World.remove(world, physicsBodies[i]);
            physicsBodies.splice(i, 1);
        }
    }

    // Re-add the base block with its Matter.js body (static)
    // Use the same increased density and friction for the base block
    let baseBlockBody = Matter.Bodies.rectangle(170 + 30, 350 + 15, 50, 30, { 
        isStatic: true, 
        density: 1.0, // FURTHER Increased density
        friction: 0.8, // Increased friction
        frictionStatic: 1.0, // MAX Increased static friction
        restitution: 0 // No bounciness
    });
    Matter.World.add(world, baseBlockBody);
    physicsBodies.push(baseBlockBody);
    blocks.push({ x: 170, y: 350, color: color(100, 200, 255), body: baseBlockBody });

    restartButton.hide();
    isDropping = false; // Reset dropping flag
}