From 36d18e0e76e55d236e30363e067fe24ccbe4b704 Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Wed, 27 Sep 2023 11:21:08 +0530
Subject: [PATCH] little changes

---
 src/pages/tracing/tracing3.astro | 222 ++++++++++++++++---------------
 1 file changed, 113 insertions(+), 109 deletions(-)

diff --git a/src/pages/tracing/tracing3.astro b/src/pages/tracing/tracing3.astro
index dc11d47..f1c5806 100644
--- a/src/pages/tracing/tracing3.astro
+++ b/src/pages/tracing/tracing3.astro
@@ -9,126 +9,130 @@ import Layout from "../../layouts/Layout.astro";
     </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,
-};
+  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,
+  };
 
-const config = {
-  type: Phaser.AUTO,
-  width: window.innerWidth,
-  height: window.innerHeight,
-  backgroundColor: 0xffffff,
-  scene: {
-    preload: preload,
-    create: create,
-    update: update
+  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 graphics;
+
+  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('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
+    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');
   }
-};
 
-const game = new Phaser.Game(config);
-const customWidth = window.innerWidth;
-const customHeight = window.innerHeight;
-let firstLayer, secondLayer, thirdLayer;
-let graphics;
+  function create() {
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
 
-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('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
-  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.time.delayedCall(2000, () => {
+      firstScreen.setVisible(false);
+      showLayers.call(this);
+    }, [], this);
+  }
 
-function create() {
-  const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
+  function showLayers() {
+    let textX, textY;
 
-  this.time.delayedCall(2000, () => {
-    firstScreen.setVisible(false);
-    showLayers.call(this);
-  }, [], this);
-}
+    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').setTint(0x05b3a4);
+    const slantLeftAudio = this.sound.add('slantLeft');
+    slantLeftAudio.play();
+    firstLayer.setDepth(1);
+    firstLayer.setAlpha(0.5);
+    firstLayer.setInteractive({ draggable: true });
 
-function showLayers() {
-  let textX, textY;
+    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').setTint(0x05b3a4);
+    const slantRightAudio = this.sound.add('slantRight');
+    secondTextLayer.setVisible(false);
+    secondLayer.setDepth(1);
+    secondLayer.setAlpha(0.5);
+    secondLayer.setInteractive({ draggable: true });
+    secondLayer.setVisible(false);
 
-  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').setTint(0x05b3a4);
-  const slantLeftAudio = this.sound.add('slantLeft');
-  slantLeftAudio.play();
-  firstLayer.setDepth(1);
-  firstLayer.setAlpha(0.5);
-  firstLayer.setInteractive({ draggable: true });
+    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').setTint(0x05b3a4);
+    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);
 
-  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').setTint(0x05b3a4);
-  const slantRightAudio = this.sound.add('slantRight');
-  secondTextLayer.setVisible(false);
-  secondLayer.setDepth(1);
-  secondLayer.setAlpha(0.5);
-  secondLayer.setInteractive({ draggable: true });
-  secondLayer.setVisible(false);
+    firstLayer.on('drag', (pointer) => {
+      if (pointer.isDown) {
+        firstTextLayer.setVisible(false);
+        secondTextLayer.setVisible(true);
+        slantRightAudio.play();
+        secondLayer.setVisible(true);
+        firstLayer.setAlpha(1);
+        secondLayer.setAlpha(0.5);
+        thirdLayer.setAlpha(0.5);
+      } else {
+        firstLayer.setAlpha(0.5);
+      }
+    });
 
-  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').setTint(0x05b3a4);
-  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);
+    secondLayer.on('drag', (pointer) => {
+      if (pointer.isDown) {
+        graphics = this.add.graphics();
+        graphics.lineStyle(50, 0x5e17eb);
+        secondTextLayer.setVisible(false);
+        thirdTextLayer.setVisible(true);
+        slideAudio.play();
+        thirdLayer.setVisible(true);
+        secondLayer.setAlpha(1);
+        thirdLayer.setAlpha(0.5);
+      } else {
+        secondLayer.setAlpha(0.5);
+      }
+    });
 
-  firstLayer.on('drag', (pointer) => {
-    if (pointer.isDown) {
-      firstTextLayer.setVisible(false);
-      secondTextLayer.setVisible(true);
-      slantRightAudio.play();
-      secondLayer.setVisible(true);
-      firstLayer.setAlpha(1);
-      secondLayer.setAlpha(0.5);
-      thirdLayer.setAlpha(0.5);
-    } else {
-      firstLayer.setAlpha(0.5);
-    }
-  });
+    thirdLayer.on('drag', (pointer) => {
+      if (pointer.isDown) {
+        thirdLayer.setAlpha(1);
+      } else {
+        thirdLayer.setAlpha(0.5);
+      }
+    });
+  }
 
-  secondLayer.on('drag', (pointer) => {
-    if (pointer.isDown) {
-      graphics = this.add.graphics();
-      graphics.lineStyle(50, 0x5e17eb);
-      secondTextLayer.setVisible(false);
-      thirdTextLayer.setVisible(true);
-      slideAudio.play();
-      thirdLayer.setVisible(true);
-      secondLayer.setAlpha(1);
-      thirdLayer.setAlpha(0.5);
-    } else {
-      secondLayer.setAlpha(0.5);
-    }
-  });
-
-  thirdLayer.on('drag', (pointer) => {
-    if (pointer.isDown) {
-      thirdLayer.setAlpha(1);
-    } else {
-      thirdLayer.setAlpha(0.5);
-    }
-  });
-}
-
-function update() {
-  // Update any game logic if needed
-}
+  function update() {
+    // Update any game logic if needed
+  }
 
 </script>
\ No newline at end of file