From 41ae75207b1639c2a05a4cb8915483571b2faec4 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Sat, 26 Oct 2024 18:57:45 +0530
Subject: [PATCH] newb

---
 public/saveGameAI.js             |  19 +-
 src/pages/guided-tracing/0.astro | 295 ++++++++++++++++---------
 src/pages/guided-tracing/1.astro | 355 ++++++++++++++++++-------------
 src/pages/guided-tracing/2.astro | 308 +++++++++++++--------------
 4 files changed, 560 insertions(+), 417 deletions(-)

diff --git a/public/saveGameAI.js b/public/saveGameAI.js
index da2a630..a3f0bec 100644
--- a/public/saveGameAI.js
+++ b/public/saveGameAI.js
@@ -50,11 +50,14 @@
 
 function submitUserData(drawingZone) {
     submitButton.setVisible(false);
-    snapshotButton.setVisible(false);
-    customCursor.setVisible(false);
+    if(!gameType[0] === 'guided-tracing'){
+        snapshotButton.setVisible(false);
+        customCursor.setVisible(false);
+        galleryButton.setVisible(false);
+    }
     muteIcon.setVisible(false);
     retryButton.setVisible(false);
-    galleryButton.setVisible(false);
+    
     const endTime = Date.now();
     const timeDifference = endTime - startTime;
     const timeDifferenceInSeconds = timeDifference / 1000;
@@ -64,11 +67,15 @@ function submitUserData(drawingZone) {
     // console.log('This is from main point', scoreTotal);
     drawingZone.renderer.snapshot((image) => {
         submitButton.setVisible(true);
-        snapshotButton.setVisible(true);
-        customCursor.setVisible(true);
+        if(!gameType[0] == "guided-tracing"){
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            galleryButton.setVisible(true);
+        }
+
         muteIcon.setVisible(true);
         retryButton.setVisible(true);
-        galleryButton.setVisible(true);
+        
         if(gameType[0] == 'drawing'){
             // submitButton.setVisible(true);
             // snapshotButton.setVisible(true);
diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro
index da99dc2..f5e2b0d 100644
--- a/src/pages/guided-tracing/0.astro
+++ b/src/pages/guided-tracing/0.astro
@@ -3,14 +3,75 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
     <main>
-        <div>
+        <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+          <div class="flex justify-center items-center h-screen ">
+            <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+          </div>
         </div>
+        <div id="parentMainContainer"class="hidden">
+          <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+          </div>
+          <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                  <div class="flex flex-row space-x-4 items-center justify-center">
+                      <div id="star-container"></div>
+                  </div>
+                  <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                      <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                      <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                  </div>
+                  <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                      <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                      <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  </div>
+              </div>
+          </div>
+          <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+              <div class="flex flex-row z-50 place-items-end clip-art">
+                  <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+                  <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                      <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                      <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                      
+                      <!-- Content -->
+                      <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                          <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                          <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                          <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                      </div>
+                    </div>
+              </div>
+          </div>
+          <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+              <div class="w-full max-w-6xl bg-white rounded-lg">
+                  <div class="flex justify-between p-3">
+                      <p class="text-[19px] font-[700]">Attempt 2</p>
+                      <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                  </div>
+                  <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                      <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                      <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                      <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                      <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                          <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                          <p class="text-sm" id="imageDescription">Description goes here.</p>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
- 
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768; 
   const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
@@ -39,7 +100,7 @@ import Layout from "../../layouts/Layout.astro";
   const game = new Phaser.Game(config);
   const customWidth = window.innerWidth;
   const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
+  let firstLayer;
   let graphics;
   let isDrawing = false;
   let formattedDateTime;
@@ -70,23 +131,6 @@ import Layout from "../../layouts/Layout.astro";
         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;
@@ -94,8 +138,39 @@ import Layout from "../../layouts/Layout.astro";
         downloadWidth = 67;
         downloadHeight = 200;
         learningWidth = 200;
-        learningHeight = 400
-    }else {
+        learningHeight = 400;
+        letterHeight = 30;
+        letterScale = 1.8;
+        backgroundScale = 0.8;
+        sunScale = 0.1;
+        sunScalePlus = 0.15;
+        sunWidth = 70;
+        sunHeight = 70;
+        animated0videoScale = 1;
+        animated0Height = 32;
+        helpButtonHeight = customHeight / 1.1;
+        helpButtonWidth = customWidth / 2 + 10;
+
+        startButtonHeight = customHeight / 1.1;
+        startButtonWidth = customWidth / 2 - 100;
+        submitWidth = customWidth / 2 - 100;
+        submitHeight = customHeight / 1.1;
+        noticeWidth = window.innerWidth * 0.5 - 100;
+        noticeHeight = window.innerHeight * 0.38;
+    }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;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -103,57 +178,29 @@ import Layout from "../../layouts/Layout.astro";
         downloadWidth = 180;
         downloadHeight = 70;
         learningWidth = 450;
-        learningHeight = 400
-    }
-
-
-    if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
-      letterHeight = 30;
-      letterScale = 1.8;
-      backgroundScale = 0.8;
-      sunScale = 0.1;
-      sunScalePlus = 0.15;
-      sunWidth = 70;
-      sunHeight = 70;
-      animated0videoScale = 1;
-      animated0Height = 32;
-      helpButtonHeight = customHeight / 1.1;
-      helpButtonWidth = customWidth / 2 + 10;
-
-      startButtonHeight = customHeight / 1.1;
-      startButtonWidth = customWidth / 2 - 100;
-      submitWidth = customWidth / 2 - 100;
-      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.8;
-      backgroundScale = 1;
-      sunScale  = 0.2;
-      sunScalePlus = 0.25;
-      sunWidth = 200;
-      sunHeight = 100;
-      animated0videoScale = 1;
-      animated0Height = 20;
-      helpButtonHeight = customHeight / 2 + 40;
-      helpButtonWidth = customWidth / 1.32;
-
-      startButtonHeight = customHeight / 2 - 20;
-      startButtonWidth = customWidth / 1.32;
-      submitWidth = customWidth / 1.32;
-      submitHeight = customHeight / 2 - 20;
-      noticeWidth = window.innerWidth * 0.5 - 120;
-      noticeHeight = window.innerHeight * 0.32;
+        learningHeight = 400;
+        cloudeSize = 500;
+        cloudHeight = 250;
+        letterHeight = 10;
+        letterScale = 1.8;
+        backgroundScale = 1;
+        sunScale  = 0.2;
+        sunScalePlus = 0.25;
+        sunWidth = 200;
+        sunHeight = 100;
+        animated0videoScale = 1;
+        animated0Height = 20;
+        helpButtonHeight = customHeight / 2 + 40;
+        helpButtonWidth = customWidth / 1.32;
+
+        startButtonHeight = customHeight / 2 - 20;
+        startButtonWidth = customWidth / 1.32;
+        submitWidth = customWidth / 1.32;
+        submitHeight = customHeight / 2 - 20;
+        noticeWidth = window.innerWidth * 0.5 - 120;
+        noticeHeight = window.innerHeight * 0.32;
     }
+    
     window.onload = function() {
         currentDate = new Date();
         formattedDateTime = currentDate.toLocaleString();
@@ -201,24 +248,26 @@ import Layout from "../../layouts/Layout.astro";
       borderBottom.lineTo(x + lineWidth, y);
       borderBottom.strokePath();
       
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
+      // submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+      //   font: '900 24px Quicksand',
+      //   fill: '#05b3a4',
+      //   backgroundColor : '#7c4c23',
+      //   padding: {x: 10, y: 10},
+      //   shadow: {
+      //     offsetX : 2, 
+      //     offsetY : 2, 
+      //     color: '#000',
+      //     blur: 5,
+      //     fill: true
+      //   }
+      // });
 
-      submitButton.setVisible(false);
+      // submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
 
@@ -324,20 +373,22 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
+      demoButton.setVisible(true);
+      submitButton.setVisible(true);
     })
-    audioOneAudio.play();
+    // audioOneAudio.play();
+
+
     // startButton.setInteractive().on('pointerdown', () => {
     //   audioOneAudio.play();
     //   // gmStartTime();
@@ -355,9 +406,49 @@ import Layout from "../../layouts/Layout.astro";
 
 
   }
-
+  // function beforeStartGame(){
+  //   audioOneAudio.play();
+  //     document.getElementById('blurDisplay').classList.add('hidden');
+  //   }
 function update() {
 
 }
 
-</script>
\ No newline at end of file
+</script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro
index 1344a0c..7b54255 100644
--- a/src/pages/guided-tracing/1.astro
+++ b/src/pages/guided-tracing/1.astro
@@ -2,15 +2,78 @@
 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>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer"class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
+    </div>
+    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
   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 +85,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,
@@ -40,24 +103,41 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "stat timr here";
+  let galleryIconWidth;
+  let noticeWidth;
+  let noticeHeight;
+  let muteIcon;
+  let retryButton;
+  let maxScore;
+  let cancelIcon;
+  let letterHeight;
+  let letterScale;
+  let animated1Height;
+  let animated1videoScale;
 
-    if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
-      letterHeight = 30;
-      letterScale = 1.1;
+
+  if(isMobile){
+      
+      submitWidth = 250;
+      submitHeight = 110;
+      noticeWidth = 100;
+      noticeHeight = 0;
+      downloadWidth = 67;
+      downloadHeight = 200;
+      learningWidth = 200;
+      learningHeight = 400;
+      letterHeight = 0;
+      letterScale = 1.8;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-         
-      animated1videoScale = 0.6;
+      animated1videoScale = 1;
       animated1Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -68,36 +148,69 @@ import Layout from "../../layouts/Layout.astro";
       submitHeight = customHeight / 1.1;
       noticeWidth = window.innerWidth * 0.5 - 100;
       noticeHeight = window.innerHeight * 0.38;
-    } else{
+  }else if(isTab){
+      animated1videoScale = 1;
+      animated1Height = 32;
+      letterHeight = 0;
+      letterScale = 1.8;  
+  }else{
+      submitWidth = 380;
+      submitHeight = 95;
+      noticeWidth = 0;
+      noticeHeight = 0;
+      downloadWidth = 180;
+      downloadHeight = 70;
+      learningWidth = 450;
+      learningHeight = 400;
       cloudeSize = 500;
       cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
-      letterHeight = 10;
-      letterScale = 1.2;
+      letterHeight = 0;
+      letterScale = 1.8;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animated1videoScale = 0.70;
+      animated1videoScale = 1;
       animated1Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
-
       startButtonHeight = customHeight / 2 - 20;
       startButtonWidth = customWidth / 1.32;
       submitWidth = customWidth / 1.32;
       submitHeight = customHeight / 2 - 20;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
-    }
+  }
+
+  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;
+  }
+
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
       // console.log("Page loaded on: " + formattedDateTime);
     };
-  // let hideButton;
 
   function preload() {
     this.load.video('animated1', '/assets/animated-letter/number_1.mp4');
@@ -112,136 +225,66 @@ import Layout from "../../layouts/Layout.astro";
     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',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 1", { 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 - 10, customHeight / 2 + letterHeight, 'number1').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated1').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);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+      }
     });
 
 
-      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 : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 1', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
 
       // Play the video
       // animatedLetter.play();
@@ -256,11 +299,12 @@ import Layout from "../../layouts/Layout.astro";
       });
 
     let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
 
       firstLayer = this.add.image(customWidth / 2 - 10, 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. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -293,7 +337,6 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -310,32 +353,44 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+    //   let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+    //   font: '900 24px Quicksand',
+    //   fill: '#05b3a4',
+    //   backgroundColor : '#7c4c23',
+    //   padding: {x: 20, y: 10},
+    //   shadow: {
+    //     offsetX : 2, 
+    //     offsetY : 2, 
+    //     color: '#000',
+    //     blur: 5,
+    //     fill: true
+    //   }
+    // })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
       demoButton.setVisible(true);
-      startButton.setVisible(false);
-
+      submitButton.setVisible(true);
     })
+    // startButton.setInteractive().on('pointerdown', () => {
+    //   audioOneAudio.play();
+    //   submitButton.setVisible(true);
+    //   firstTextLayer.setVisible(true);
+    //   animatedLetter.setVisible(false);     
+    //   firstScreen.setVisible(false);
+    //   graphics.setVisible(true);
+    //   hideButton.setVisible(false);
+    //   demoButton.setVisible(true);
+    //   startButton.setVisible(false);
+
+    // })
 
 
   }
diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro
index b363c00..e64553f 100644
--- a/src/pages/guided-tracing/2.astro
+++ b/src/pages/guided-tracing/2.astro
@@ -2,15 +2,78 @@
 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>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer"class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
+    </div>
+    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   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 +85,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,
@@ -40,24 +103,21 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
       letterHeight = 58;
-      letterScale = 1;
+      letterScale = 1.5;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animated2Scale = 0.55;
+      animated2Scale = 0.85;
       animated2Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -69,18 +129,14 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 100;
       noticeHeight = window.innerHeight * 0.38;
     } else{
-      cloudeSize = 500;
-      cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.5;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animated2Scale = 0.55;
+      animated2Scale = 0.85;
       animated2Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -91,158 +147,108 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
       // console.log("Page loaded on: " + formattedDateTime);
     };
-  // let hideButton;
 
   function preload() {
     this.load.video('animated2', '/assets/animated-letter/number_2.mp4');
     this.load.svg('number2', '/assets/numeric/n2.svg');
-    this.load.svg('layer1', '/assets/numeric/n2.svg');
-    this.load.svg('layer2', '/assets/numeric/n2.svg');
+    this.load.svg('layer1', '/assets/numeric/n2_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n2_l2.svg');
     this.load.audio('audioOne', '/assets/audio/roll-slant.mp3');
     this.load.audio('audioTwo', '/assets/audio/slide.mp3');
     this.load.image('topLogo', '/assets/top_logo.svg');
     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");
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
+      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.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 2", { 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 - 10, customHeight / 2 + letterHeight, 'number2').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated2').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);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
     });
 
 
-    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 : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 2', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);
 
     // Play the video
@@ -260,9 +266,8 @@ submitUserData(this);
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 - 10, 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. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      let stepTextSize = isMobile ? 12 : 16;
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Roll Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +276,8 @@ submitUserData(this);
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -284,7 +290,6 @@ submitUserData(this);
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
 
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
@@ -307,7 +312,6 @@ submitUserData(this);
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -329,7 +333,6 @@ submitUserData(this);
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -346,33 +349,20 @@ submitUserData(this);
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
+  
 
 function update() {