change code server

src/pages/tracing/half-round.astro

@@ -3,44 +3,55 @@
 <script is:inline>
  const config = {
   type: Phaser.AUTO,
-  width: 800,
-  height: 600,
+  width: window.innerWidth,
+  height: window.innerHeight,
   scene: {
-    create: create
+    preload: preload,
+    create: create,
+    update: update
   }
 };
 
-const game = new Phaser.Game(config);
-
-let svgPath = "M100,200 C100,100 400,100 400,200";
-let points = parseSvgPath(svgPath);
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let ellipseCenter;
+  let ellipseRadiusX = 74;
+  let ellipseRadiusY = 100;
+  let angle = 0;
+  let rotationSpeed = 0.02; // Adjust rotation speed as needed
+  let rotatingObject;
 
+function preload(){
+    this.load.image('handPointer', '/assets/svg/hand.svg');
+    this.load.image('letterO', '/assets/capital-letter/o.svg')
+}
 function create() {
-  // Visualize the SVG path using Phaser graphics (optional)
-  const graphics = this.add.graphics();
-  graphics.lineStyle(2, 0xffffff);
-  for (let i = 0; i < points.length - 1; i++) {
-    graphics.lineBetween(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
-  }
+    this.add.image(customWidth / 2, customHeight / 2, 'letterO');
+    // Create an ellipse (in this case, a visual representation)
+    // const graphics = this.add.graphics();
+    // graphics.lineStyle(2, 0xffffff);
+    // graphics.strokeEllipse(customWidth / 2, customHeight / 2, ellipseRadiusX * 2, ellipseRadiusY * 2);
+
+    ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
+    rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
+    rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed 
 }
 
-function parseSvgPath(path) {
-  // Parse SVG path data to extract points
-  // This is a simple example and may not cover all SVG path commands
-  const commands = path.match(/[a-df-z]|[\-+]?\d+(\.\d+)?/ig);
-  const points = [];
-  let currentPoint = { x: 0, y: 0 };
+function update() {
+    // Update the angle for rotation
+    angle -= rotationSpeed;
 
-  commands.forEach((command, index) => {
-    if (!isNaN(command)) {
-      const isX = (index % 2 === 0);
-      currentPoint[isX ? 'x' : 'y'] = parseFloat(command);
-      points.push({ ...currentPoint });
-    }
-  });
+    // Calculate new position based on the angle and radii
+    const radius = Math.max(ellipseRadiusX, ellipseRadiusY);
+    const x = ellipseCenter.x + radius * Math.cos(angle);
+    const y = ellipseCenter.y + radius * Math.sin(angle);
 
-  return points;
+    rotatingObject.x = x;
+    rotatingObject.y = y;
+
+    // Rotate the object based on the angle (optional)
+    rotatingObject.rotation = angle;
 }
 
-
 </script>