file name small to capital

src/pages/guided-tracing/O.astro

@@ -0,0 +1,148 @@
+---
+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 isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+    const game = new Phaser.Game(config);
+    const customWidth = window.innerWidth;
+    const customHeight = window.innerHeight;
+    let firstLayer;
+    let graphics;
+    let isDrawing = false;
+    let ellipseCenter;
+    let ellipseRadiusX = 74;
+    let ellipseRadiusY = 100;
+    let angle = 0;
+    let rotationSpeed = 0.02; // Adjust rotation speed as needed
+    let rotatingObject;
+  // let hideButton;
+
+  function preload() {
+    this.load.svg('letterO', '/assets/capital-letter/o.svg');
+    this.load.svg('layer1', '/assets/capital-letter/o.svg');
+    this.load.audio('hookAroundClose', '/assets/audio/hook-arround-close.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
+
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterO');
+    firstScreen.setVisible(false);
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const hookAroundClose = this.sound.add('hookAroundClose');
+      hookAroundClose.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      
+
+      firstLayer.on('drag', (pointer) => {
+        if (pointer.isDown) {
+          firstTextLayer.setVisible(false);
+          firstLayer.setAlpha(1);
+        } else {
+          firstLayer.setAlpha(0.5);
+        }
+      });
+      graphics = this.add.graphics();
+      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
+
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        // console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+        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
+
+        let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
+        hideButton.setInteractive().on('pointerdown', () => {
+            isDemoButtonClicked = false;
+            firstScreen.setVisible(false);
+            hideButton.setVisible(false);  // Hide the "Hide" button
+            demoButton.setVisible(true);   // Show the "Demo" button
+            graphics.setVisible(true);
+            hideButton.setVisible(false);
+            rotatingObject.setVisible(false);
+        });
+        hideButton.setVisible(false);
+        rotatingObject.setVisible(false);
+            
+        let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
+        demoButton.setInteractive().on('pointerdown', () => {
+            graphics.setVisible(false);
+            firstScreen.setVisible(true);
+            demoButton.setVisible(false);  // Hide the "Demo" button
+            hideButton.setVisible(true);   // Show the "Hide" button
+            rotatingObject.setVisible(true);
+        });
+  }
+
+  function update() {
+    angle -= rotationSpeed;
+    const x = ellipseCenter.x + ellipseRadiusX * Math.cos(angle);
+    const y = ellipseCenter.y + ellipseRadiusY * Math.sin(angle);
+
+    rotatingObject.x = x;
+    rotatingObject.y = y;
+
+    // Rotate the object based on the angle (optional)
+    rotatingObject.rotation = angle;
+  }
+</script>