work n new tracing game

src/pages/drawing/index.astro

@@ -339,13 +339,13 @@ import Layout from '../../layouts/Layout.astro';
                         graphics.strokePath();
                     }
                 };
-                // // Add a "Save Snapshot" button
+                // Add a "Save Snapshot" button
-                // snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons');
+                snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons');
-                // // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
+                // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
-                // snapshotButton.setInteractive();
+                snapshotButton.setInteractive();
-                // snapshotButton.on('pointerdown', () => {
+                snapshotButton.on('pointerdown', () => {
-                //     captureSnapshot(this);
+                    captureSnapshot(this);
-                // });
+                });
     }
     function captureSnapshot(drawingZone) {
         drawingZone.renderer.snapshot((image) => {
@@ -357,7 +357,7 @@ import Layout from '../../layouts/Layout.astro';
             // Download the snapshot as an image
             const link = document.createElement('a');
             link.href = image.src;
-            link.download = 'snapshot.png';
+            link.download = 'my_drawing.png';
             link.click();
             document.body.removeChild(image);
 

src/pages/tick/v1.astro

@@ -46,7 +46,7 @@
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    fetch(`https://management.beanstalkedu.com/items/game_tick6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(res => res.json())
     .then(data => {
         gameData = data.data;

src/pages/tick/v2.astro

@@ -11,9 +11,11 @@
                 <form id="contactForm">
                     <div id="" class="flex flex-row place-content-between">
                         <div class="flex flex-col gap-6 place-items-center">
-                            <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                            <!-- <img id="image1" src="" alt="" draggable="false" class="select-none" /> -->
                             <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
-                            <label for="a1" class="round-checkbox-label"></label>
+                            <label for="a1" class="round-checkbox-label">
+                                <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                            </label>
 
                             <img id="image2" src="" alt="" draggable="false" class="select-none" />
                             <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
@@ -223,7 +225,7 @@
         border-radius: 10%;
     }
     #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
-        width: 200px;
+        width: 150px;
         /* border: 4px solid red;
         border-radius: 5%; */
     }
@@ -232,29 +234,29 @@
     }
     .round-checkbox-label {
         display: inline-block;
-        width: 30px;
+        /* width: 30px; */
-        height: 30px;
+        /* height: 30px; */
-        border-radius: 10%;
+        /* border-radius: 10%; */
-        background-color: #ccc;
+        /* background-color: #ccc; */
-        border: 2px solid #007bff;
+        /* border: 2px solid #007bff; */
         cursor: pointer;
         position: relative;
         transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
     }
     .round-checkbox-input:checked + .round-checkbox-label {
-        background-color: #007bff;
+        /* background-color: #007bff; */
-        border-color: #007bff;
+        /* border-color: #007bff; */
         transform: scale(1.2);
         border-radius: 30%;
     }
     .round-checkbox-input:checked + .round-checkbox-label::after {
-        content: '\2713';
+        /* content: '\2713'; */
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 40px;
-        color: white;
+        /* color: white; */
         display: block;
     }
 </style>

src/pages/tracing/tracing2.astro

@@ -0,0 +1,134 @@
+---
+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: 800,
+  height: 600,
+  scene: {
+    create: create,
+    update: update
+  }
+};
+
+const game = new Phaser.Game(config);
+
+let predefinedPath;
+let dragGraphics;
+let isDragging = false;
+
+function create() {
+  // Define the predefined path (letter 'A' in this example)
+  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)
+  const graphics = this.add.graphics();
+  graphics.lineStyle(2, 0x00ff00);  // Green color for the predefined path
+  predefinedPath.draw(graphics);
+
+  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) {
+    const spacing = 0.02; // Adjust this value as needed
+    const distanceThreshold = 10; // Adjust this value as needed
+    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.lineStyle(4, 0xff0000); // Red color for the dragging path
+      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>

src/pages/tracing/tracing3.astro

@@ -0,0 +1,108 @@
+---
+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: 800,
+  height: 600,
+  scene: {
+    create: create,
+    update: update
+  }
+};
+
+const game = new Phaser.Game(config);
+
+let predefinedPath;
+let dragGraphics;
+let isDragging = false;
+let polygon;
+
+function create() {
+  // Define the predefined path (letter 'A' in this example)
+  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)
+  const graphics = this.add.graphics();
+  graphics.lineStyle(2, 0x00ff00);  // Green color for the predefined path
+  predefinedPath.draw(graphics);
+
+  // 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) {
+  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 isInsidePath(x, y) {
+  const pathBounds = predefinedPath.getBounds();
+  return pathBounds.contains(x, y);
+}
+
+function dragWithinPath(pointer) {
+  if (isDragging) {
+    const dragX = pointer.x;
+    const dragY = pointer.y;
+
+    // Check if the dragged point is within the predefined path
+    const isInside = isInsidePath(dragX, dragY);
+
+    if (isInside) {
+      // 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
+      stopDragging();
+    }
+  }
+}
+
+function startDragging(pointer) {
+  if (!isDragging && predefinedPath) {
+    isDragging = true;
+    // dragGraphics.clear();
+    dragGraphics.lineStyle(4, 0xff0000); // Red color for the dragging path
+    dragGraphics.beginPath();
+    dragGraphics.moveTo(pointer.x, pointer.y);
+  }
+}
+
+function stopDragging() {
+  if (isDragging) {
+    isDragging = false;
+    dragGraphics.closePath();
+  }
+}
+
+function update() {
+  // TODO: Update any game logic if needed
+}
+
+</script>