From ff80faaf7d3ebddbae99fd27e3d76daa7a6c8879 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Fri, 18 Oct 2024 16:59:03 +0530
Subject: [PATCH] game name from get parameter

---
 public/assets/svg/cancel.svg     |   2 +-
 public/assets/svg/help_icon.svg  |   4 +
 public/saveGameAI.js             |  37 ++---
 public/saveGameData.js           |  37 ++---
 src/pages/drag/v4.astro          |   2 +-
 src/pages/drawing/index.astro    |   2 +-
 src/pages/guided-tracing/0.astro | 252 ++++++++++++++++---------------
 7 files changed, 175 insertions(+), 161 deletions(-)
 create mode 100644 public/assets/svg/help_icon.svg

diff --git a/public/assets/svg/cancel.svg b/public/assets/svg/cancel.svg
index 45697ea..1dc0730 100644
--- a/public/assets/svg/cancel.svg
+++ b/public/assets/svg/cancel.svg
@@ -1,4 +1,4 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" r="19.5" fill="white" stroke="#BB4D6A"/>
+<circle cx="20" cy="20" r="19.5" fill="#FFFFFF" stroke="#BB4D6A"/>
 <path d="M26.3002 13.71C26.1134 13.5227 25.8597 13.4175 25.5952 13.4175C25.3307 13.4175 25.077 13.5227 24.8902 13.71L20.0002 18.59L15.1102 13.7C14.9234 13.5127 14.6697 13.4075 14.4052 13.4075C14.1407 13.4075 13.887 13.5127 13.7002 13.7C13.3102 14.09 13.3102 14.72 13.7002 15.11L18.5902 20L13.7002 24.89C13.3102 25.28 13.3102 25.91 13.7002 26.3C14.0902 26.69 14.7202 26.69 15.1102 26.3L20.0002 21.41L24.8902 26.3C25.2802 26.69 25.9102 26.69 26.3002 26.3C26.6902 25.91 26.6902 25.28 26.3002 24.89L21.4102 20L26.3002 15.11C26.6802 14.73 26.6802 14.09 26.3002 13.71Z" fill="#BB4D6A"/>
 </svg>
diff --git a/public/assets/svg/help_icon.svg b/public/assets/svg/help_icon.svg
new file mode 100644
index 0000000..2e29ed8
--- /dev/null
+++ b/public/assets/svg/help_icon.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20.9062" r="20" fill="#472DAC"/>
+<path d="M15.4956 16.4422C14.7066 16.1069 14.3713 15.1305 14.8447 14.4205C15.8013 13.0003 17.3989 11.9648 19.5094 11.9648C21.8269 11.9648 23.4147 13.0201 24.2234 14.3416C24.9137 15.4757 25.3181 17.596 24.253 19.1739C23.0695 20.9195 21.9354 21.452 21.324 22.5763C21.176 22.8426 21.0873 23.0595 21.0281 23.5033C20.9393 24.2232 20.3476 24.7854 19.6178 24.7854C18.7599 24.7854 18.0597 24.0457 18.1583 23.1877C18.2175 22.6848 18.3358 22.1621 18.6119 21.669C19.3713 20.2982 20.8309 19.4895 21.679 18.2765C22.5764 17.0043 22.0735 14.6276 19.5291 14.6276C18.3752 14.6276 17.6257 15.2291 17.1622 15.9491C16.8171 16.5112 16.0971 16.6887 15.4956 16.4422ZM21.4916 28.7302C21.4916 29.815 20.604 30.7026 19.5192 30.7026C18.4344 30.7026 17.5468 29.815 17.5468 28.7302C17.5468 27.6453 18.4344 26.7578 19.5192 26.7578C20.604 26.7578 21.4916 27.6453 21.4916 28.7302Z" fill="white"/>
+</svg>
diff --git a/public/saveGameAI.js b/public/saveGameAI.js
index af9c279..da2a630 100644
--- a/public/saveGameAI.js
+++ b/public/saveGameAI.js
@@ -5,6 +5,7 @@
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     const userId = urlParams.get('userId');
+    const gameVersion = urlParams.get('gameName');
     let gameId;
     let submitNotic;
 
@@ -15,25 +16,25 @@
     const url = window.location.href;
     const gameName = url.split('/');
     const gameType = gameName[3].split('?id=');
-    let gameVersion;
-    if(gameType[0] == "guided-tracing"){
-        gameVersion = gameType[0].split('?')[0];
-        gameId = gameName[4];
-        console.log('Type - 1');
+    // let gameVersion;
+    // if(gameType[0] == "guided-tracing"){
+    //     gameVersion = gameType[0].split('?')[0];
+    //     gameId = gameName[4];
+    //     console.log('Type - 1');
 
-    } else if(gameName.length == 4){
-        gameVersion = gameName[3].split('?')[0];
-        gameId = urlParams.get('id');
-    }
-    else if(gameName.length == 5){
-        gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
-        gameId = urlParams.get('id');
-        console.log('Type - 2');
-    }else if(gameName.length == 6){
-        gameVersion = gameType[0] + '-' + gameName[4];
-        gameId = urlParams.get('id');
-        console.log('Type - 3');
-    }
+    // } else if(gameName.length == 4){
+    //     gameVersion = gameName[3].split('?')[0];
+    //     gameId = urlParams.get('id');
+    // }
+    // else if(gameName.length == 5){
+    //     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+    //     gameId = urlParams.get('id');
+    //     console.log('Type - 2');
+    // }else if(gameName.length == 6){
+    //     gameVersion = gameType[0] + '-' + gameName[4];
+    //     gameId = urlParams.get('id');
+    //     console.log('Type - 3');
+    // }
     // console.log("Here is game name ", gameType[0])
 
     // console.log(gameVersion)
diff --git a/public/saveGameData.js b/public/saveGameData.js
index f01c837..d01bea7 100644
--- a/public/saveGameData.js
+++ b/public/saveGameData.js
@@ -5,6 +5,7 @@ function retryGame(){
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const userId = urlParams.get('userId');
+const gameVersion = urlParams.get('gameName');
 let gameId;
 let submitNotic;
 
@@ -15,28 +16,28 @@ let startTime = Date.now();
 const url = window.location.href;
 const gameName = url.split('/');
 const gameType = gameName[3].split('?id=');
-let gameVersion;
+// let gameVersion;
 
 // console.log("Here is game name ", gameType[0])
 
-if(gameType[0] == "guided-tracing"){
-    gameVersion = gameType[0].split('?')[0];
-    gameId = gameName[4];
-    console.log('Type - 1');
+// if(gameType[0] == "guided-tracing"){
+//     gameVersion = gameType[0].split('?')[0];
+//     gameId = gameName[4];
+//     console.log('Type - 1');
 
-} else if(gameName.length == 4){
-    gameVersion = gameName[3].split('?')[0];
-    gameId = urlParams.get('id');
-}
-else if(gameName.length == 5){
-    gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
-    gameId = urlParams.get('id');
-    console.log('Type - 2');
-}else if(gameName.length == 6){
-    gameVersion = gameType[0] + '-' + gameName[4];
-    gameId = urlParams.get('id');
-    console.log('Type - 3');
-}
+// } else if(gameName.length == 4){
+//     gameVersion = gameName[3].split('?')[0];
+//     gameId = urlParams.get('id');
+// }
+// else if(gameName.length == 5){
+//     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 2');
+// }else if(gameName.length == 6){
+//     gameVersion = gameType[0] + '-' + gameName[4];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 3');
+// }
 
 console.log(gameVersion)
 
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index 7419de5..4df130c 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -573,7 +573,7 @@ import Layout from '../../layouts/Layout.astro';
           // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            // console.log("Score Total", scoreTotal)
+            console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index bfea7ed..e5127dd 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -254,8 +254,8 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("muteIcon", '/assets/svg/mute.svg');
         this.load.image("cancelIcon", '/assets/svg/cancel.svg');
         this.load.image("resetIcon", '/assets/svg/reset.svg');
-        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
+        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('colorButton', '/assets/color_button.png');
     }
diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro
index dba59f5..da99dc2 100644
--- a/src/pages/guided-tracing/0.astro
+++ b/src/pages/guided-tracing/0.astro
@@ -9,8 +9,10 @@ import Layout from "../../layouts/Layout.astro";
     </main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
-<script is:inline> 
+<script is:inline>
+ 
   const isMobile = window.innerWidth <= 768; 
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +24,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -44,10 +46,65 @@ import Layout from "../../layouts/Layout.astro";
   let animatedLetter;
   let scoreTotal = 0;
   
-  // const urls = window.location.href;
-  // const gameNames = urls.split('/');
-  // const gameTypes = gameNames[3].split('?id=');
-  // console.log(gameTypes[0]);
+    let topLogoWidth;
+    let muteIconWidth;
+    let galleryIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth;
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let demoButtonButton;
+    let shortUniqueID;
+    let noticeWidth;
+    let noticeHeight;
+    let muteIcon;
+    let retryButton;
+    let maxScore;
+    let cancelIcon;
+    if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
+        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
+    }
+    
+    if(isMobile){
+        submitWidth = 250;
+        submitHeight = 110;
+        noticeWidth = 100;
+        noticeHeight = 0;
+        downloadWidth = 67;
+        downloadHeight = 200;
+        learningWidth = 200;
+        learningHeight = 400
+    }else {
+        submitWidth = 380;
+        submitHeight = 95;
+        noticeWidth = 0;
+        noticeHeight = 0;
+        downloadWidth = 180;
+        downloadHeight = 70;
+        learningWidth = 450;
+        learningHeight = 400
+    }
 
 
     if(isMobile){
@@ -56,13 +113,13 @@ import Layout from "../../layouts/Layout.astro";
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 30;
-      letterScale = 1.1;
+      letterScale = 1.8;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animated0videoScale = 0.6;
+      animated0videoScale = 1;
       animated0Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -73,20 +130,19 @@ import Layout from "../../layouts/Layout.astro";
       submitHeight = customHeight / 1.1;
       noticeWidth = window.innerWidth * 0.5 - 100;
       noticeHeight = window.innerHeight * 0.38;
-
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 10;
-      letterScale = 1.2;
+      letterScale = 1.8;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animated0videoScale = 0.70;
+      animated0videoScale = 1;
       animated0Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -119,17 +175,32 @@ import Layout from "../../layouts/Layout.astro";
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
   function create() {
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
+      
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -149,103 +220,39 @@ import Layout from "../../layouts/Layout.astro";
         // console.log('Clicked');
         submitUserData(this);
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-    const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-    const duration = 3000; // Duration of the animation in milliseconds
-
-    // Create a scaling tween
-    this.tweens.add({
-      targets: sun,
-      scaleX: scaleFactor,
-      scaleY: scaleFactor,
-      duration: duration,
-      ease: 'Linear',
-      yoyo: true, // Makes the animation play in reverse
-      repeat: -1 // Repeat indefinitely
-    });
     
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
-    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const number0 = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated0').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
+    
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
+      // animatedLetter.setVisible(true);
+
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+      }
+      // animatedLetter.visible ? animatedLetter.setVisible(false): animatedLetter.setVisible(true);
     });
 
+    
+      // const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+      // const baseFontSize = 16;
+      // const responsiveFontSize = (window.innerWidth / 550) * baseFontSize;
+      
+      let responsiveFontSize = isMobile ? 16 : 32;
+      this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
 
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 0', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
             animatedLetter.setLoop(true);
       // Play the video
@@ -261,11 +268,13 @@ import Layout from "../../layouts/Layout.astro";
       });
 
     let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
+
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Close',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -288,7 +297,7 @@ import Layout from "../../layouts/Layout.astro";
 
         if (distance >= 0) {
           
-            firstTextLayer.setVisible(false);
+            // firstTextLayer.setVisible(false);
             firstLayer.setAlpha(1);
         } else {
             firstLayer.setAlpha(0.5);
@@ -298,7 +307,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+      // graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -328,22 +337,21 @@ import Layout from "../../layouts/Layout.astro";
         fill: true
       }
     })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-      // gmStartTime();
-      gamestart = new Date();
-      gameStartTime = gamestart.toLocaleString();
-      // console.log("Page loaded on: " + gameStartTime);
-      firstTextLayer.setVisible(true);
-      animatedLetter.setVisible(false);     
-      firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-      submitButton.setVisible(true);
-    })
+    audioOneAudio.play();
+    // startButton.setInteractive().on('pointerdown', () => {
+    //   audioOneAudio.play();
+    //   // gmStartTime();
+    //   gamestart = new Date();
+    //   gameStartTime = gamestart.toLocaleString();
+    //   // console.log("Page loaded on: " + gameStartTime);
+    //   firstTextLayer.setVisible(true);
+    //   animatedLetter.setVisible(false);     
+    //   firstScreen.setVisible(false);
+    //   graphics.setVisible(true);
+    //   demoButton.setVisible(true);
+    //   startButton.setVisible(false);
+    //   submitButton.setVisible(true);
+    // })
 
 
   }