little changes

src/pages/tracing/tracing3.astro

@@ -10,32 +10,36 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
-const drawingZone = {
+  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 = {
+  const config = {
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-  backgroundColor: 0xffffff,
+    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 game = new Phaser.Game(config);
-const customWidth = window.innerWidth;
+  const customWidth = window.innerWidth;
-const customHeight = window.innerHeight;
+  const customHeight = window.innerHeight;
-let firstLayer, secondLayer, thirdLayer;
+  let firstLayer, secondLayer, thirdLayer;
-let graphics;
+  let graphics;
 
-function preload() {
+  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');
@@ -44,18 +48,18 @@ function preload() {
     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');
-}
+  }
 
-function create() {
+  function create() {
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
 
     this.time.delayedCall(2000, () => {
       firstScreen.setVisible(false);
       showLayers.call(this);
     }, [], this);
-}
+  }
 
-function showLayers() {
+  function showLayers() {
     let textX, textY;
 
     firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
@@ -125,10 +129,10 @@ function showLayers() {
         thirdLayer.setAlpha(0.5);
       }
     });
-}
+  }
 
-function update() {
+  function update() {
     // Update any game logic if needed
-}
+  }
 
 </script>