---
import Layout from '../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
    <main>
        <div>
            <p>Drawing Game</p>
            <div id="game-container"></div>
        </div>
        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
    </main>
</Layout>
<script is:inline>
// Create a new Phaser game
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};
var game = new Phaser.Game(config);

// Declare global variables
var graphics;
var lastPointer;
var color = 0xff0000;
var thickness = 5;

// Load assets
function preload() {
    // Preload any assets you need for the game, such as images or sounds
}

// Create the game world
function create() {
    // Create the graphics object
    graphics = this.add.graphics();

    // Set up the input events for the game
    this.input.on('pointerdown', function(pointer) {
        lastPointer = pointer;
    });
    this.input.on('pointermove', function(pointer) {
        if (lastPointer) {
            graphics.lineStyle(thickness, color);
            graphics.beginPath();
            graphics.moveTo(lastPointer.x, lastPointer.y);
            graphics.lineTo(pointer.x, pointer.y);
            graphics.strokePath();
            lastPointer = pointer;
        }
    });
    this.input.on('pointerup', function(pointer) {
        lastPointer = null;
    });

    // Set up the UI for the game
    var colorPicker = this.add.rectangle(50, 50, 40, 40, color);
    colorPicker.setInteractive();
    colorPicker.on('pointerdown', function() {
        // Open a color picker dialog to select a color
        var input = document.createElement('input');
        input.type = 'color';
        input.oninput = function() {
            color = Phaser.Display.Color.ValueToColor(input.value).color;
            colorPicker.fillColor = color;
        };
        input.click();
    });

    var thicknessText = this.add.text(150, 50, 'Thickness: ' + thickness, { font: '24px Arial', fill: '#ffffff' });
    var increaseButton = this.add.text(150, 100, '+', { font: '24px Arial', fill: '#ffffff' });
    increaseButton.setInteractive();
    increaseButton.on('pointerdown', function() {
        thickness++;
        thicknessText.setText('Thickness: ' + thickness);
    });
    var decreaseButton = this.add.text(200, 100, '-', { font: '24px Arial', fill: '#ffffff' });
    decreaseButton.setInteractive();
    decreaseButton.on('pointerdown', function() {
        if (thickness > 1) {
            thickness--;
            thicknessText.setText('Thickness: ' + thickness);
        }
    });
}

// Update the game world
function update() {
    // Update any game logic or animations here
}

</script>