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,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
 import MainHeader from '../components/MainHeader.vue';
 import Footer from '../components/Footer.astro';
 ---
@@ -7,17 +8,42 @@ import Footer from '../components/Footer.astro';
 <Layout title="Welcome to Astro.">
 	<MainHeader />
 	<main>
-		<div>
+		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-			<p class="text-center text-white py-96 text-8xl font-bold">Beanstalkedu Games</p>
+		<p class="instructions">
-		</div>
+			<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>
 	</main>
 	<Footer />
 </Layout>
 
 <style>
-	body{
+	main {
-		background-color: #ffd3ea;
+		margin: auto;
-		background-image: linear-gradient(315deg, #ffd3ea 0%, #403020 74%);
+		padding: 1.5rem;
+		max-width: 60ch;
 	}
 	h1 {
 		font-size: 3rem;

src/pages/tracing/index.astro

@@ -10,113 +10,80 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script is:inline>
-    const config = {
+var config = {
-        width: 800,
+  type: Phaser.AUTO,
-        height: 600,
+  width: window.innerWidth,
+  height: window.innerHeight,
+  backgroundColor: '#ffffff',
+  parent: 'game-container',
   scene: {
-            create: create,
+    preload: preload,
-            update: update
+    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();
 
-    let t = 0.75;
+var game = new Phaser.Game(config);
-    let path;
-    let graphics;
-    let sprite;
 
-    function create() {
+var letter;
-        path = new Phaser.Curves.Path(50, 500);
+var lastX;
-        path.splineTo([164, 446, 274, 542, 412, 457, 522, 541, 664, 464]);
+var lastY;
-        // path.lineTo(700, 300);
+var graphics;
-        // path.lineTo(600, 350);
+var isTracing = false;
-        path.ellipseTo(200, 100, 100, 250, false, 0);
-        path.cubicBezierTo(222, 119, 308, 107, 208, 368);
-        path.ellipseTo(60, 60, 0, 360, true);
 
-        sprite = this.add.circle(0, 0, 16, red, 0.5);
+function preload() {
-        path.getPoint(t, pathPosition);
+  this.load.image('letter', '/assets/A.png');
-        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);
+}
+
+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);
+function endTracing() {
-        this.input.on("pointermove", continueTracing);
+  // Set tracing flag to false
-        this.input.on("pointerup", stopTracing);
+  isTracing = false;
-
-        // 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);
   
+  // Clear graphics object
   graphics.clear();
-        graphics.lineStyle(5, red);
-        path.draw(graphics);
-        draw(distanceToPointer, sprite, green);
-        draw(pathProjection, sprite, yellow);
   
-        if (activePointer.isDown) {
+  // Reset tint of letter sprite to indicate tracing has ended
-            t += scalarProjection * SPEED;
+  letter.clearTint();
+}
+
+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;
   }
-    }
+}
-
-    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);
-
 </script>
 <style>
 </style>