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

---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
    <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,
    };
    let draggingAllowed = false;

  const config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0xFFFFFF,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
    },
    scene: {
      preload: preload,
      create: create,
      update: update
    }
  };

  const game = new Phaser.Game(config);
  const customWidth = window.innerWidth;
  const customHeight = window.innerHeight;
  let firstLayer, secondLayer, thirdLayer;
  let isDragging =  false;
  let lineStartPosition =  {x:0 , y:0};
  let draggingLine;

  function preload() {
    this.load.svg('letterA', '/assets/letter/a.svg');
    this.load.svg('layer1', '/assets/letter/a_l1.svg');
    this.load.svg('layer2', '/assets/letter/a_l2.svg');
    this.load.svg('layer3', '/assets/letter/a_l3.svg');
    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
    this.load.audio('slide', '/assets/audio/slide.mp3');
    this.load.image('topLogo', '/assets/top_logo.png');
    this.load.image('succesImage', '/assets/svg/tick.svg');
  }

  function create() {
    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
    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, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);

    this.time.delayedCall(2000, () => {
      firstScreen.setVisible(false);
      showLayers.call(this);
    }, [], this);
    this.add.rectangle(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height, 0x000000, 0.2);
    
    draggingLine = this.add.graphics();
    draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);

    // draggingLine = this.add.graphics();
    // draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);   //o\\ 5 is the line width, 0xff0000 is the color (red)
  }

  function showLayers() {
    let textX, textY;

      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
      textY = isMobile ? customHeight / 5 : customHeight / 2;
      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
      const slantLeftAudio = this.sound.add('slantLeft');
      slantLeftAudio.play();
      firstLayer.setDepth(1);
      firstLayer.setAlpha(0.5);
      firstLayer.setInteractive({ draggable: true });

      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
      const slantRightAudio = this.sound.add('slantRight');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
      secondLayer.setAlpha(0.5);
      secondLayer.setInteractive({ draggable: true });
      secondLayer.setVisible(false);

      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
      const slideAudio = this.sound.add('slide');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
      // thirdLayer.setScale(1.15);
      thirdLayer.setAlpha(0.5);
      thirdLayer.setInteractive({ draggable: true });
      thirdLayer.setVisible(false);

      firstLayer.on('drag', (pointer) => {
        if (pointer.isDown && isWithinDrawingZone(pointer)) {
          firstTextLayer.setVisible(false);
          secondTextLayer.setVisible(true);
          slantRightAudio.play();
          secondLayer.setVisible(true);
          firstLayer.setAlpha(1);
          secondLayer.setAlpha(0.5);
          thirdLayer.setAlpha(0.5);
          draggingAllowed = true;
        } else {
          firstLayer.setAlpha(0.5);
          draggingAllowed = false;
        }
      });
  
      secondLayer.on('drag', (pointer) => {
        if (pointer.isDown && isWithinDrawingZone(pointer)) {
          secondTextLayer.setVisible(false);
          thirdTextLayer.setVisible(true);
          slideAudio.play();
          thirdLayer.setVisible(true);
          secondLayer.setAlpha(1);
          thirdLayer.setAlpha(0.5);
          draggingAllowed = true;
        } else {
          secondLayer.setAlpha(0.5);
          draggingAllowed = false;
        }
      });
  
      thirdLayer.on('drag', (pointer) => {
        if (pointer.isDown && isWithinDrawingZone(pointer)) {
          thirdLayer.setAlpha(1);
          thirdTextLayer.setVisible(false);
          draggingAllowed = true;
        } else {
          thirdLayer.setAlpha(0.5);
          draggingAllowed = false;
        }
      });
  
      this.input.on('pointerdown',  dragStart);
      this.input.on('pointerup',    dragEnd);
      this.input.on('pointermove',  drag);
  }

  function dragStart(pointer) {
      if (pointer.isDown && isWithinDrawingZone(pointer) && draggingAllowed) {
        isDragging = true;
        lineStartPosition.x = pointer.x;
        lineStartPosition.y = pointer.y;
      }
    }
  
    function drag(pointer) {
      if (isDragging) {
        // draggingLine.clear();
        draggingLine.beginPath();
        draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
        draggingLine.lineTo(pointer.x, pointer.y);
        draggingLine.strokePath();
      }
    }
  
    function dragEnd() {
      isDragging = false;
    }
  
    function update() {
      // Update any game logic if needed
    }
  
    function isWithinDrawingZone(pointer) {
      return (
        pointer.x >= drawingZone.x &&
        pointer.x <= drawingZone.x + drawingZone.width &&
        pointer.y >= drawingZone.y &&
        pointer.y <= drawingZone.y + drawingZone.height
      );
    }


</script>