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

@@ -1,6 +1,5 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
 import MainHeader from '../components/MainHeader.vue';
 import Footer from '../components/Footer.astro';
 ---
@@ -8,43 +7,18 @@ import Footer from '../components/Footer.astro';
 <Layout title="Welcome to Astro.">
 	<MainHeader />
 	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions">
-			<code>To get started, open the directory src/pages</code> in your project.<br />
-			<code>Code Challenge: Tweak the "Welcome to Astro" message above.</code> 
-		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
+		<div>
+			<p class="text-center text-white py-96 text-8xl font-bold">Beanstalkedu Games</p>
+		</div>
 	</main>
 	<Footer />
 </Layout>
 
 <style>
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
+	body{
+		background-color: #ffd3ea;
+		background-image: linear-gradient(315deg, #ffd3ea 0%, #403020 74%);
+	}		
 	h1 {
 		font-size: 3rem;
 		font-weight: 800;

src/pages/tracing/index.astro

@@ -10,80 +10,113 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script is:inline>
-var config = {
-  type: Phaser.AUTO,
-  width: window.innerWidth,
-  height: window.innerHeight,
-  backgroundColor: '#ffffff',
-  parent: 'game-container',
-  scene: {
-    preload: preload,
-    create: create
-  }
-};
+    const config = {
+        width: 800,
+        height: 600,
+        scene: {
+            create: create,
+            update: update
+        }
+    };
+    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;
-var lastX;
-var lastY;
-var graphics;
-var isTracing = false;
+    function create() {
+        path = new Phaser.Curves.Path(50, 500);
+        path.splineTo([164, 446, 274, 542, 412, 457, 522, 541, 664, 464]);
+        // path.lineTo(700, 300);
+        // 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() {
-  this.load.image('letter', '/assets/A.png');
-}
+        sprite = this.add.circle(0, 0, 16, red, 0.5);
+        path.getPoint(t, pathPosition);
+        sprite.copyPosition(pathPosition);
 
-function create() {
-  // 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);
-}
+        graphics = this.add.graphics();
 
-function startTracing(pointer) {
-  // Set tracing flag to true
-  isTracing = true;
-  
-  // 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);
-}
+        this.input.on("pointerdown", startTracing);
+        this.input.on("pointermove", continueTracing);
+        this.input.on("pointerup", stopTracing);
 
-function endTracing() {
-  // Set tracing flag to false
-  isTracing = false;
-  
-  // Clear graphics object
-  graphics.clear();
-  
-  // Reset tint of letter sprite to indicate tracing has ended
-  letter.clearTint();
-}
+        // this.add.text(300, 150, '👆 Press to move the ball', { font: 'large system-ui' });
+    }
+
+    function update() {
+        const { activePointer } = this.input;
+
+        path.getPoint(t, pathPosition);
+        path.getTangent(t, pathTangent);
+        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>