phaser-game-bs/src/pages/tracing/index.astro

---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="">
    <main>
        <div>
        </div>
        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
      </main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
    width: isMobile ? window.innerWidth : window.innerWidth / 2,
    height: window.innerHeight / 2,
};
var assetsList = {}
var snapshotButton;


const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
    .then(response => response.json())
    .then(({ data }) => {
        const { letter_img, icon_img } = data;
        assetsList.letter_img = "https://management.beanstalkedu.com/assets/" + letter_img;
        assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img;

        const config = {
            type: Phaser.AUTO,
            width: window.innerWidth,
            height: window.innerHeight,
            backgroundColor: '#fff',
            scale: {
                mode: Phaser.Scale.FIT,
                autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
            },
            scene: {
                preload: preload,
                create: create,
                update: update,
            },
        };
        const game = new Phaser.Game(config);
    })
    .catch(error => {
        console.error('Error fetching initial data:', error);
    });

var graphics;
var isDragging = false;
var image;
var customWidth = window.innerWidth;
var customHeight = window.innerHeight;

function preload() {
    this.load.image('letter_img', assetsList.letter_img);
    this.load.image('icon_img', assetsList.icon_img);
    this.load.image('topLogo', '/assets/top_logo.png');
}

function create() {
    const params = new URLSearchParams(window.location.search);
    const paramsID = params.get('id');
    fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
        .then(response => response.json())
        .then(({ data }) => {
            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
            const baseFontSize = 20;
            const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
            const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
            const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', };
            this.add.text(customWidth / 10, 20, data.letter_text, textStyle);
            const textStyle2 = { font: 'bold 40px quicksand', fill: '#5e17eb', };
            if (!isMobile) {
                image = this.add.image(customWidth / 4, customHeight / 2, 'letter_img');
                image.setInteractive().setDepth(1).setScale(0.6);
                // letter_img = this.add.image(customWidth / 1.5, customHeight / 2, 'icon_img');
                // letter_img.setDepth().setScale(0.6);
                // this.add.text(customWidth / 1.6, customHeight / 1.25, data.icon_name, textStyle2);
            } else {
                image = this.add.image(customWidth / 2.5, customHeight / 2.5, 'letter_img');
                image.setInteractive().setDepth(1).setScale(0.3);
                // letter_img = this.add.image(customWidth / 1.35, customHeight / 2 + 100, 'icon_img');
                // letter_img.setDepth().setScale(0.3);
                // this.add.text(customWidth / 2, customHeight / 1.3, data.icon_name, textStyle2);
            }
        })
        .catch(error => {
            console.error('Error fetching initial data:', error);
        });

    graphics = this.add.graphics();
    if (!isMobile) {
        graphics.lineStyle(50, 0x5e17eb);
    } else {
        graphics.lineStyle(25, 0x5e17eb);
    }
    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');

    this.input.on('pointerdown', function (pointer) {
        if (image.getBounds().contains(pointer.x, pointer.y)) {
            isDragging = true;
            this.children.bringToTop(graphics);
            graphics.beginPath();
            graphics.moveTo(pointer.x, pointer.y);
        }
    }, this);

    this.input.on('pointermove', function (pointer) {
        if (isDragging) {
            graphics.lineTo(pointer.x, pointer.y);
            graphics.strokePath();
        }
    }, this);

    this.input.on('pointerup', function () {
        isDragging = false;
        graphics.closePath();
    }, this);

    // // Add a "Save Snapshot" button
    // snapshotButton = this.add.text(customWidth - 150, customHeight - 80, 'SAVE', { fill: '#fff', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
    // snapshotButton.setInteractive();
    // snapshotButton.on('pointerdown', () => {
    //     captureSnapshot(this);
    // });
}

function update() {}

function captureSnapshot(game) {
    game.renderer.snapshot((image) => {
        image.style.width = '160px';
        image.style.height = '120px';
        image.style.paddingLeft = '2px';
        document.body.appendChild(image);

        // Download the snapshot as an image
        const link = document.createElement('a');
        link.href = image.src;
        link.download = 'snapshot.png';
        link.click();
        document.body.removeChild(image);

        // Clear the drawing
        // graphics.clear();
    });
}


</script>