guided tracing game in conditions

public/assets/letter/a.svg

@@ -0,0 +1,267 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:export-filename="a_l3.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="a_l3.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4478969"
+     inkscape:cx="172.3189"
+     inkscape:cy="215.48496"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="50.044837,106.13694"
+       orientation="1,0"
+       id="guide61"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-6.8261376,96.826178"
+       orientation="1,0"
+       id="guide65"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="34.933229,103.49635"
+       orientation="1,0"
+       id="guide67"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="74.707741,24.892522"
+       orientation="0,-1"
+       id="guide69"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="109.48582,93.369913"
+       orientation="0,-1"
+       id="guide71"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="65.121878,12.99501"
+       orientation="1,0"
+       id="guide550"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-6" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <g
+       id="g19985"
+       style="display:none">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 42.014207,78.885553 33.868367,0.105865"
+         id="path1106" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+         d="M 54.585716,79.075266 44.449435,78.916887"
+         id="path9586"
+         sodipodi:nodetypes="cc" />
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="circle9592"
+         cx="-78.125687"
+         cy="44.021099"
+         r="1.2760839"
+         transform="rotate(-88.91827)" />
+      <text
+         xml:space="preserve"
+         style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="41.672253"
+         y="79.868111"
+         id="text9761"><tspan
+           sodipodi:role="line"
+           id="tspan9759"
+           style="stroke-width:0.117792"
+           x="41.672253"
+           y="79.868111">4</tspan></text>
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
+       id="path127"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g650"
+       transform="translate(-0.41310827,-0.00731495)"
+       inkscape:transform-center-x="0.058802502"
+       inkscape:transform-center-y="-0.015142275">
+      <text
+         xml:space="preserve"
+         style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         x="46.800331"
+         y="15.960659"
+         id="text9342"
+         transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+           sodipodi:role="line"
+           id="tspan9340"
+           style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
+           x="46.800331"
+           y="15.960659">1</tspan></text>
+      <circle
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+         id="path9448"
+         cx="-48.065395"
+         cy="-13.491238"
+         r="1.2760839"
+         transform="rotate(-178.67073)" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
+       d="m 42.981079,26.489528 c 0.740859,-2.014661 3.661919,-9.743031 3.661919,-9.743031"
+       id="path13743"
+       sodipodi:nodetypes="cc"
+       inkscape:transform-center-x="1.9143729"
+       inkscape:transform-center-y="5.0531116" />
+    <g
+       id="g1238"
+       style="display:inline">
+      <path
+         style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+         d="m 36.897143,48.164759 26.507248,0.07809"
+         id="path1108" />
+      <path
+         style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
+         d="M 48.768524,48.161093 39.639351,48.31565"
+         id="path9576"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-4.8199192"
+         inkscape:transform-center-y="0.3134404" />
+      <g
+         id="g21538"
+         transform="translate(-21.46967,-27.579792)"
+         style="display:inline">
+        <ellipse
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           id="circle9582"
+           cx="-74.661598"
+           cy="60.70055"
+           transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
+           rx="1.2146922"
+           ry="1.1834064" />
+        <text
+           xml:space="preserve"
+           style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+           x="59.531094"
+           y="75.579971"
+           id="text9714"
+           transform="scale(0.98702867,1.0131418)"><tspan
+             sodipodi:role="line"
+             id="tspan9712"
+             style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+             x="59.531094"
+             y="75.579971">3</tspan></text>
+      </g>
+    </g>
+    <path
+       style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.945039,9.1516334 C 50.028779,9.4481077 73.189935,72.317745 73.189935,72.317745"
+       id="path15674"
+       sodipodi:nodetypes="cc" />
+    <g
+       id="g1205"
+       transform="translate(0.35203906,0.62379443)"
+       style="display:inline">
+      <g
+         id="g1198"
+         transform="translate(-0.48682415,0.59660565)"
+         style="display:inline">
+        <text
+           xml:space="preserve"
+           style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           x="49.768463"
+           y="10.649764"
+           id="text15678"
+           transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
+             sodipodi:role="line"
+             id="tspan15676"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
+             x="49.768463"
+             y="10.649764">2</tspan></text>
+        <circle
+           style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+           id="circle15680"
+           cx="-50.731476"
+           cy="-8.3328476"
+           r="1.2760839"
+           transform="rotate(-178.35508)" />
+      </g>
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
+         d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
+         id="path15682"
+         sodipodi:nodetypes="cc"
+         inkscape:transform-center-x="-1.6158511"
+         inkscape:transform-center-y="4.8664848" />
+    </g>
+  </g>
+</svg>

public/assets/letter/a_l1.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.925556,10.09664 22.308074,75.026486"
+       id="path127" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 75.756485,74.942739 50.166178,10.127525"
+       id="path3061" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 63.210757,47.79348 36.256704,48.025633"
+       id="path3063" />
+  </g>
+</svg>

public/assets/letter/a_l2.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.925556,10.09664 22.308074,75.026486"
+       id="path127" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 75.756485,74.942739 50.166178,10.127525"
+       id="path3061" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 63.210757,47.79348 36.256704,48.025633"
+       id="path3063" />
+  </g>
+</svg>

public/assets/letter/a_l3.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.925556,10.09664 22.308074,75.026486"
+       id="path127" />
+    <path
+       style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 75.756485,74.942739 50.166178,10.127525"
+       id="path3061" />
+    <path
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 63.210757,47.79348 36.256704,48.025633"
+       id="path3063" />
+  </g>
+</svg>

src/layouts/Layout.astro

@@ -33,7 +33,7 @@ const { title } = Astro.props;
 		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 			Bitstream Vera Sans Mono, Courier New, monospace;
 	} */
-	body{
+	/* body{
         font-family: quicksand;
         animation: fadeInAnimation ease 6s;
         animation-iteration-count: 1;
@@ -46,5 +46,5 @@ const { title } = Astro.props;
             100% {
                 opacity: 1;
             }
-    }
+    } */
 </style>

src/pages/tracing/temp.astro

@@ -1,49 +1,29 @@
+<main>
+    <div>
+        <button onclick="useDiv()">Use Div</button>
+        <div id="myDiv">
+          This is the div to hide.
+        </div>
+    </div>
+</main>
 <script is:inline>
-    const config = {
+   let usageCount = 0;
-    type: Phaser.AUTO,
+const maxUsage = 3;  // Change this to the desired limit
-    width: 800, // Replace with your game width
+
-    height: 600, // Replace with your game height
+function useDiv() {
-    scene: {
+  usageCount++;
-        preload: preload,
+
-        create: create,
+  if (usageCount >= maxUsage) {
-        update: update
+    hideDiv();
   }
-};
-
-const game = new Phaser.Game(config);
-
-let snapshotButton;
-
-function preload() {
-    // Load your game assets here
 }
 
-function create() {
+function hideDiv() {
-    // Create your game objects and setup your scene
+  const divToHide = document.getElementById('myDiv');
-
+  if (divToHide) {
-    // Create a button to take a snapshot
+    divToHide.style.display = 'none';
-    snapshotButton = this.add.text(10, 10, 'Snapshot', { fontSize: '24px', fill: '#fff' });
+  }
-    snapshotButton.setInteractive();
-    snapshotButton.on('pointerdown', takeSnapshot, this);
 }
 
-function update() {
-    // Update your game logic here
-}
-
-function takeSnapshot() {
-    // Capture a snapshot of the game canvas
-    game.renderer.snapshot(snapshot => {
-        const snapshotImage = snapshot.image;
-        
-        // Create a temporary HTML anchor element for downloading
-        const a = document.createElement('a');
-        a.href = snapshotImage.src;
-        a.download = 'snapshot.png';
-
-        // Trigger a click event to download the snapshot
-        a.dispatchEvent(new MouseEvent('click'));
-    });
-}
 
 </script>

src/pages/tracing/tracing3.astro

@@ -9,100 +9,126 @@ 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 config = {
   type: Phaser.AUTO,
-  width: 800,
+  width: window.innerWidth,
-  height: 600,
+  height: window.innerHeight,
+  backgroundColor: 0xffffff,
   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;
 
-let predefinedPath;
+function preload() {
-let dragGraphics;
+  this.load.svg('letterA', '/assets/letter/a.svg');
-let isDragging = false;
+  this.load.svg('layer1', '/assets/letter/a_l1.svg');
-let polygon;
+  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');
+}
 
 function create() {
-  // Define the predefined path (letter 'A' in this example)
+  const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-  predefinedPath = new Phaser.Curves.Path(100, 300);
-  predefinedPath.lineTo(300, 100);
-  predefinedPath.lineTo(500, 300);
-  predefinedPath.moveTo(200, 200);
-  predefinedPath.lineTo(400, 200);
 
-  // Create graphics for the predefined path (letter 'A' in this example)
+  this.time.delayedCall(2000, () => {
-  const graphics = this.add.graphics();
+    firstScreen.setVisible(false);
-  graphics.lineStyle(2, 0x00ff00);  // Green color for the predefined path
+    showLayers.call(this);
-  predefinedPath.draw(graphics);
+  }, [], this);
-
-  // Create a polygon from the predefined path points
-  polygon = new Phaser.Geom.Polygon(predefinedPath.curves.flatMap(curve => calculateSpacedPoints(curve, 0.02)));
-
-  dragGraphics = this.add.graphics();
-  this.input.on('pointerdown', startDragging);
-  this.input.on('pointerup', stopDragging);
-  this.input.on('pointermove', dragWithinPath);
 }
 
-function calculateSpacedPoints(curve, spacing) {
+function showLayers() {
-  const spacedPoints = [];
+  let textX, textY;
 
-  for (let t = 0; t <= 1; t += spacing) {
+  firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-    const point = curve.getPoint(t);
+  textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-    spacedPoints.push({ x: point.x, y: point.y });
+  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 });
 
-  return spacedPoints;
+  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);
 
-function isInsidePath(x, y) {
+  thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
-  const pathBounds = predefinedPath.getBounds();
+  textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-  return pathBounds.contains(x, y);
+  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);
 
-function dragWithinPath(pointer) {
+  firstLayer.on('drag', (pointer) => {
-  if (isDragging) {
+    if (pointer.isDown) {
-    const dragX = pointer.x;
+      firstTextLayer.setVisible(false);
-    const dragY = pointer.y;
+      secondTextLayer.setVisible(true);
-
+      slantRightAudio.play();
-    // Check if the dragged point is within the predefined path
+      secondLayer.setVisible(true);
-    const isInside = isInsidePath(dragX, dragY);
+      firstLayer.setAlpha(1);
-
+      secondLayer.setAlpha(0.5);
-    if (isInside) {
+      thirdLayer.setAlpha(0.5);
-      // Draw a line to represent the dragged path
-      dragGraphics.lineStyle(4, 0xff0000); // Set red color for the dragging path
-      dragGraphics.lineTo(dragX, dragY);
-      dragGraphics.strokePath();
     } else {
-      // If dragged point is outside the predefined path, stop dragging
+      firstLayer.setAlpha(0.5);
-      stopDragging();
     }
-  }
+  });
-}
 
-function startDragging(pointer) {
+  secondLayer.on('drag', (pointer) => {
-  if (!isDragging && predefinedPath) {
+    if (pointer.isDown) {
-    isDragging = true;
+      graphics = this.add.graphics();
-    // dragGraphics.clear();
+      graphics.lineStyle(50, 0x5e17eb);
-    dragGraphics.lineStyle(4, 0xff0000); // Red color for the dragging path
+      secondTextLayer.setVisible(false);
-    dragGraphics.beginPath();
+      thirdTextLayer.setVisible(true);
-    dragGraphics.moveTo(pointer.x, pointer.y);
+      slideAudio.play();
+      thirdLayer.setVisible(true);
+      secondLayer.setAlpha(1);
+      thirdLayer.setAlpha(0.5);
+    } else {
+      secondLayer.setAlpha(0.5);
     }
-}
+  });
 
-function stopDragging() {
+  thirdLayer.on('drag', (pointer) => {
-  if (isDragging) {
+    if (pointer.isDown) {
-    isDragging = false;
+      thirdLayer.setAlpha(1);
-    dragGraphics.closePath();
+    } else {
+      thirdLayer.setAlpha(0.5);
     }
+  });
 }
 
 function update() {
-  // TODO: Update any game logic if needed
+  // Update any game logic if needed
 }
 
 </script>

src/pages/tracing/tracing4.astro

@@ -0,0 +1,146 @@
+---
+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 config = {
+  type: Phaser.AUTO,
+  width: window.innerWidth,
+  height: window.innerHeight,
+  backgroundColor: 0xffffff,
+  scene: {
+    preload: preload,
+    create: create,
+    update: update
+  }
+};
+
+const game = new Phaser.Game(config);
+
+const customWidth = window.innerWidth;
+const customHeight = window.innerHeight;
+
+let predefinedPath;
+let dragGraphics;
+let isDragging = false;
+
+function preload() {
+  this.load.svg('layer1', '/assets/a_l1.svg');
+  this.load.svg('layer2', '/assets/a_l2.svg');
+  this.load.svg('layer3', '/assets/a_l3.svg');
+}
+function create() {
+    firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+    firstLayer.setDepth(1);
+    firstLayer.setAlpha(0.5);
+    firstLayer.setInteractive();
+
+    secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
+    secondLayer.setDepth(1);
+    secondLayer.setAlpha(0.5);
+    secondLayer.setInteractive();
+
+    thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
+    thirdLayer.setDepth(1.1);
+    thirdLayer.setScale(1.15);
+    thirdLayer.setAlpha(0.5);
+    thirdLayer.setInteractive();
+    
+    dragGraphics = this.add.graphics();
+    this.input.on('pointerdown',  startDragging);
+    this.input.on('pointerup',    stopDragging);
+    this.input.on('pointermove',  dragWithinPath);
+}
+
+function calculateSpacedPoints(curve, spacing) {
+  const spacedPoints = [];
+
+  for (let t = 0; t <= 1; t += spacing) {
+    const point = curve.getPoint(t);
+    spacedPoints.push({ x: point.x, y: point.y });
+  }
+
+  return spacedPoints;
+}
+function dragWithinPath(pointer) {
+  if (isDragging) {
+    const dragX = pointer.x;
+    const dragY = pointer.y;
+
+    // Check if the dragged point is inside the predefined path
+    const isInsidePath = predefinedPath.contains(dragX, dragY);
+
+    if (isInsidePath) {
+      // Draw a line to represent the dragged path
+      dragGraphics.lineTo(dragX, dragY);
+      dragGraphics.strokePath();
+    }
+  }
+}
+
+function startDragging(pointer) {
+  if (!isDragging && predefinedPath) {
+    firstLayer.setAlpha(1);
+      let isNearPath = false;
+
+    // Iterate through the curves of the predefined path
+    for (let i = 0; i < predefinedPath.curves.length; i++) {
+      const curve = predefinedPath.curves[i];
+      const spacedPoints = calculateSpacedPoints(curve, spacing);
+
+      // Check if the pointer is within a certain distance to any of the spaced points
+      for (let j = 0; j < spacedPoints.length; j++) {
+        const point = spacedPoints[j];
+        const distance = Phaser.Math.Distance.Between(point.x, point.y, pointer.x, pointer.y);
+
+        if (distance < distanceThreshold) {
+          isNearPath = true;
+          break;
+        }
+      }
+
+      if (isNearPath) {
+        break;
+      }
+    }
+
+    if (isNearPath) {
+      isDragging = true;
+      dragGraphics.clear();
+      dragGraphics.beginPath();
+      dragGraphics.moveTo(pointer.x, pointer.y);
+    }
+  }
+}
+
+function stopDragging() {
+  if (isDragging) {
+    isDragging = false;
+    isDraggingInsidePath = false;  // Reset the flag when dragging stops
+    dragGraphics.closePath();
+  }
+}
+
+function dragWithinPath(pointer) {
+  if (isDragging) {
+    // TODO: Fill the dragged area within the predefined path with red color
+    // You can add the logic to fill the dragged area within the predefined path with red color here.
+    // The logic will depend on how you want to fill the area.
+    // For simplicity, you can just draw a line as shown below:
+    dragGraphics.lineTo(pointer.x, pointer.y);
+    dragGraphics.strokePath();
+  }
+}
+
+function update() {
+  // TODO: Update any game logic if needed
+}
+
+
+</script>