block stacker

var drawCube = function(x, y, col) {
    push(); // Use push() and pop() for 2D drawing state
    translate(0, camY); // Move everything based on camera
    
    // 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(); // Restore drawing state
};

function setup() {
    createCanvas(400, 600); // Create a canvas (adjust size as needed)
    // Start base block (now safe to call color() inside setup())
    blocks.push({x: 170, y: 350, color: color(100, 200, 255)});

    // Create the restart button
    restartButton = createButton('Restart Game');
    restartButton.mousePressed(restartSketch); // Attach the restart function
    
    // Style the button
    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(); // Hide it initially

    // Good practice for audio or WEBGL fonts
    userStartAudio(); 
}

function draw() {
    background(25, 25, 35); // Dark space theme
    
    // 1. Camera Logic
    // If score is > 10, start pushing the camera down
    if (score >= 11) {
        var targetCam = (score - 10) * 30;
        camY = lerp(camY, targetCam, 0.1); 
    }

    // 2. Draw Stack
    for (var i = 0; i < blocks.length; i++) {
        drawCube(blocks[i].x, blocks[i].y, blocks[i].color);
    }

    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);
        
        // Show and position the restart button when game is over
        restartButton.position(width / 2 - restartButton.width / 2, height / 2 + 50);
        restartButton.show();
        return;
    }

    // 3. Moving Block
    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));

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

function mousePressed() {
    if (gameOver) { 
        // If game is over, we only allow mouse clicks on the restart button
        // Not on the canvas itself to place new blocks
        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) {
        blocks.push({
            x: currentX,
            y: 350 - (blocks.length * 30),
            color: color(random(100, 255), 100, random(100, 255))
        });
        score++;
        speed += 0.25; // Speed up
    } else {
        gameOver = true;
    }
}

function restartSketch() {
    score = 0;
    gameOver = false;
    speed = 4;
    currentX = 0;
    dir = 1;
    camY = 0;
    blocks = [];
    blocks.push({x: 170, y: 350, color: color(100, 200, 255)}); // Re-add the base block
    restartButton.hide(); // Hide the button after restart
}