work on tracing game

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/drawing/index.astro

@@ -89,22 +89,16 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.style.top = '10%';
             colorContainer.style.left = '20px';
             colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally
+
             // Create the color picker
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
             colorPicker.value = selectedColor;
             colorPicker.className = 'color-picker';
-            colorPicker.style.marginTop = '-0px';
+            colorPicker.style.marginTop = '-5px';
-            colorPicker.style.marginRight = '15px';
+            colorPicker.style.marginRight = '5px';
-            colorPicker.style.padding = '1px 1px';
+            colorPicker.style.width = '45px';
-            colorPicker.style.outline = 'none';
+            colorPicker.style.height = '48px';
-            colorPicker.style.width = '46px';
-            colorPicker.style.height = '46px';
-            colorPicker.style.border = '3px solid #05b3a4';
-            colorPicker.style.backgroundColor = '#05b3a4';
-            colorPicker.style.borderRadius = '50%';
-            colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
-
 
             colorPicker.addEventListener('input', (event) => {
                 if (!isErasing) {
@@ -116,8 +110,8 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
 
             const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
-            const buttonSize = 50;
+            const buttonSize = 40;
-            const buttonSpacing = 15;
+            const buttonSpacing = 10;
 
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
@@ -136,15 +130,13 @@ import Layout from '../../layouts/Layout.astro';
                 button.style.backgroundColor = color;
                 button.style.width = `${buttonSize}px`;
                 button.style.height = `${buttonSize}px`;
-                button.style.border = '3px solid #05b3a4';
+                button.style.border = 'none';
-                button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                button.style.borderRadius = '50%'
                 button.style.marginRight = `${buttonSpacing}px`;
 
                 button.addEventListener('click', () => {
                     // Remove the mark from the previously selected button, if any
                     if (selectedButton) {
-                         // Remove the border
+                        selectedButton.style.border = 'none'; // Remove the border
                     }
                     // Set the new selected color
                     selectedColor = color;
@@ -168,24 +160,21 @@ import Layout from '../../layouts/Layout.astro';
         // Create a container div for both buttons
         const buttonsContainer = document.createElement('div');
         buttonsContainer.style.position = 'absolute';
-        buttonsContainer.style.left = '20px';
+        buttonsContainer.style.top = '15%';
-        buttonsContainer.style.top = '17%';
+        buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
-        // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
         document.body.appendChild(buttonsContainer);
 
         // Create the Clear button
         const clearButton = document.createElement('button');
         clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
-        clearButton.style.border = '3px solid blue';
         // clearButton.textContent = 'Clear';
         clearButton.style.color = 'blue';
         // clearButton.style.color = 'white';
-        clearButton.style.marginRight = '10px';
         clearButton.style.padding = '5px 10px';
         clearButton.style.fontSize = '16px';
         clearButton.style.fontWeight = 'bold';
         clearButton.style.borderRadius = '50%';
-        clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+        clearButton.style.boxShadow = '5px 20px 30px #7c4c2390';
         clearButton.addEventListener('click', () => {
             clearDrawing();
         });
@@ -195,9 +184,7 @@ import Layout from '../../layouts/Layout.astro';
         // eraserButton.textContent = 'Eraser';
         eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
         eraserButton.style.color = '#7c4c23';
-        eraserButton.style.border = '3px solid #7c4c23';
         // eraserButton.style.color = 'white';
-        eraserButton.style.marginRight = '15px';
         eraserButton.style.padding = '5px 5px';
         eraserButton.style.fontSize = '16px';
         eraserButton.style.fontWeight = 'bold';
@@ -232,7 +219,6 @@ import Layout from '../../layouts/Layout.astro';
         slider.max = '80';
         slider.value = brushSize.toString();
         slider.className = 'slider';
-        // slider.style.width = `${window.innerWidth / 2}px`;
 
         slider.addEventListener('input', (event) => {
             brushSize = parseInt(event.target.value);

src/pages/tracing/index.astro

@@ -10,80 +10,113 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script is:inline>
-var config = {
+    const config = {
-  type: Phaser.AUTO,
+        width: 800,
-  width: window.innerWidth,
+        height: 600,
-  height: window.innerHeight,
+        scene: {
-  backgroundColor: '#ffffff',
+            create: create,
-  parent: 'game-container',
+            update: update
-  scene: {
+        }
-    preload: preload,
+    };
-    create: create
+    const colors = {
-  }
+        hexColors: {
-};
+            white: 0xffffff,
+            red: 0xff0000,
+            yellow: 0xffff00,
+            blue: 0x0000ff,
+            green: 0x00ff00
+        }
+    };
+    const { white, red, yellow, blue, green } = colors.hexColors;
+    const { Vector2 } = Phaser.Math;
+    const SPEED = 0.0005; // Adjust the speed as needed
+    const pathPosition = new Vector2();
+    const pathTangent = new Vector2();
+    const distanceToPointer = new Vector2();
+    const pathProjection = new Vector2();
 
-var game = new Phaser.Game(config);
+    let t = 0.75;
+    let path;
+    let graphics;
+    let sprite;
 
-var letter;
+    function create() {
-var lastX;
+        path = new Phaser.Curves.Path(50, 500);
-var lastY;
+        path.splineTo([164, 446, 274, 542, 412, 457, 522, 541, 664, 464]);
-var graphics;
+        // path.lineTo(700, 300);
-var isTracing = false;
+        // path.lineTo(600, 350);
+        path.ellipseTo(200, 100, 100, 250, false, 0);
+        path.cubicBezierTo(222, 119, 308, 107, 208, 368);
+        path.ellipseTo(60, 60, 0, 360, true);
 
-function preload() {
+        sprite = this.add.circle(0, 0, 16, red, 0.5);
-  this.load.image('letter', '/assets/A.png');
+        path.getPoint(t, pathPosition);
-}
+        sprite.copyPosition(pathPosition);
 
-function create() {
+        graphics = this.add.graphics();
-  // Add letter sprite to game
-  letter = this.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'letter');
-  
-  // Set interactive property of letter sprite to true
-  letter.setInteractive();
-  
-  // Add event listeners for mouse down and up events on letter sprite
-  this.input.on('pointerdown', startTracing);
-  this.input.on('pointerup', endTracing);
-}
 
-function startTracing(pointer) {
+        this.input.on("pointerdown", startTracing);
-  // Set tracing flag to true
+        this.input.on("pointermove", continueTracing);
-  isTracing = true;
+        this.input.on("pointerup", stopTracing);
-  
-  // Set last coordinates to current pointer coordinates
-  lastX = pointer.x;
-  lastY = pointer.y;
-  
-  // Set tint of letter sprite to indicate tracing has started
-  letter.setTint(0xff0000);
-  
-  // Create graphics object and set line style
-  graphics = this.add.graphics();
-  graphics.lineStyle(10, 0xffffff);
-}
 
-function endTracing() {
+        // this.add.text(300, 150, '👆 Press to move the ball', { font: 'large system-ui' });
-  // Set tracing flag to false
+    }
-  isTracing = false;
+
-  
+    function update() {
-  // Clear graphics object
+        const { activePointer } = this.input;
-  graphics.clear();
+
-  
+        path.getPoint(t, pathPosition);
-  // Reset tint of letter sprite to indicate tracing has ended
+        path.getTangent(t, pathTangent);
-  letter.clearTint();
+        distanceToPointer.set(activePointer.worldX, activePointer.worldY).subtract(pathPosition);
-}
+
+        const scalarProjection = distanceToPointer.dot(pathTangent);
+
+        pathProjection.copy(pathTangent).scale(scalarProjection);
+
+        sprite.copyPosition(pathPosition);
+
+        graphics.clear();
+        graphics.lineStyle(5, red);
+        path.draw(graphics);
+        draw(distanceToPointer, sprite, green);
+        draw(pathProjection, sprite, yellow);
+
+        if (activePointer.isDown) {
+            t += scalarProjection * SPEED;
+        }
+    }
+
+    function draw(vector, start, color) {
+        graphics
+            .lineStyle(10, color)
+            .lineBetween(
+                start.x,
+                start.y,
+                start.x + vector.x,
+                start.y + vector.y
+            );
+    }
+
+    function startTracing(pointer) {
+        // Implement logic to start tracing
+        // For example, set up a tracing path or drawing context
+        // You can also add your logic to determine if the tracing is correct
+    }
+
+    function continueTracing(pointer) {
+        // Implement logic to continue tracing
+        // For example, draw the tracing path or update the drawing context
+    }
+
+    function stopTracing() {
+        // Implement logic to stop tracing
+        // For example, check if the tracing matches a predefined letter shape
+    }
+
+    // document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;
+
+    const game = new Phaser.Game(config);
 
-function update() {
-  // If tracing is in progress, draw line from last coordinates to current pointer coordinates
-  if (isTracing) {
-    graphics.beginPath();
-    graphics.moveTo(lastX, lastY);
-    graphics.lineTo(this.input.activePointer.x, this.input.activePointer.y);
-    graphics.strokePath();
-    lastX = this.input.activePointer.x;
-    lastY = this.input.activePointer.y;
-  }
-}
 </script>
 <style>
 </style>