From cedb4ad01ecc036d40289aa7ca43cbf6e5eca662 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Thu, 12 Dec 2024 16:36:08 +0530
Subject: [PATCH] s1

---
 src/pages/drawing/drawing_phonics.astro | 61 ++++++++++++++++++++---
 src/pages/drawing/drawing_writo.astro   | 64 ++++++++++++++++++++++---
 src/pages/drawing/index.astro           | 36 ++++++--------
 src/pages/drawing/v2.astro              | 62 +++++++++++++++++++++---
 src/pages/drawing/v3.astro              | 57 +++++++++++++++++++++-
 src/pages/guided-tracing/A.astro        | 29 ++++-------
 6 files changed, 247 insertions(+), 62 deletions(-)

diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index eb737ad..848a58d 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </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="w-full max-w-3xl lg:max-w-4xl 2xl: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>
@@ -49,11 +49,6 @@ import Layout from '../../layouts/Layout.astro';
 
                         <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>
@@ -64,6 +59,42 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const jsonData = [
+        {
+            "src": "/assets/back.jpeg"
+        },
+        {
+            "src": "/assets/background.jpg"
+        },
+        {
+            "src": "/assets/backgroundImage.png"
+        },
+        {
+            "src": "/assets/beanieImage.png"
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % jsonData.length;
+        console.log(currentSlide)
+        updateSlide();
+    })
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
+        updateSlide();
+    })
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -93,6 +124,8 @@ import Layout from '../../layouts/Layout.astro';
     let audioData;
     let audioFileId = false;
     let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
 
     if(isMobile){
         topLogoWidth = 4.5;
@@ -100,18 +133,21 @@ import Layout from '../../layouts/Layout.astro';
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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;
@@ -211,6 +247,7 @@ import Layout from '../../layouts/Layout.astro';
         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');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -253,6 +290,7 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
 
             retryButton.setInteractive().on('pointerdown', () => {
@@ -288,6 +326,10 @@ import Layout from '../../layouts/Layout.astro';
                     // parentMainContainer.classList.remove('hidden');
                 }
             });
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
+            });
 
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
@@ -771,10 +813,17 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index 84d4ae4..ec5f718 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </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="w-full max-w-3xl lg:max-w-4xl 2xl: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>
@@ -49,11 +49,6 @@ import Layout from '../../layouts/Layout.astro';
 
                         <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>
@@ -64,6 +59,42 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const jsonData = [
+        {
+            "src": "/assets/back.jpeg"
+        },
+        {
+            "src": "/assets/background.jpg"
+        },
+        {
+            "src": "/assets/backgroundImage.png"
+        },
+        {
+            "src": "/assets/beanieImage.png"
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % jsonData.length;
+        console.log(currentSlide)
+        updateSlide();
+    })
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
+        updateSlide();
+    }) 
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -93,24 +124,30 @@ import Layout from '../../layouts/Layout.astro';
     let audioData;
     let audioFileId = false;
     let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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){
@@ -211,6 +248,7 @@ import Layout from '../../layouts/Layout.astro';
         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');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -255,6 +293,7 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
             if(audioFileId === true){
                 let instructionAudio = this.sound.add('instructAudio')
@@ -292,6 +331,11 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
 
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
+            });
+
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
                 // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -767,10 +811,18 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
+
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index e8698ec..c8a7ea6 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </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="w-full max-w-3xl lg:max-w-4xl 2xl: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>
@@ -49,11 +49,6 @@ import Layout from '../../layouts/Layout.astro';
 
                         <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>
@@ -61,38 +56,35 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
-    
+    <!-- http://localhost:2022/drawing/?id=525&userId=6746c2e9cd3b551fae55cb67&gameName=birdWS1 -->
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    //       const findBuddies = JSON.parse(localStorage.getItem('userChildDetails') || '{}');
+    // const buddiesName = findBuddies.metadata.sprite 
+
+    const retrievedData = localStorage.getItem('akademyPlans')
+const parsedObject = JSON.parse(retrievedData);
+
+    console.log('buddName', window.location.href);
     const jsonData = [
         {
-            "src": "/assets/back.jpeg",
-            "title": "Image Title 1",
-            "description": "Description for image 1 goes here."
+            "src": "/assets/back.jpeg"
         },
         {
-            "src": "/assets/background.jpg",
-            "title": "Image Title 2",
-            "description": "Description for image 2 goes here."
+            "src": "/assets/background.jpg"
         },
         {
-            "src": "/assets/backgroundImage.png",
-            "title": "Image Title 3",
-            "description": "Description for image 3 goes here."
+            "src": "/assets/backgroundImage.png"
         },
         {
-            "src": "/assets/beanieImage.png",
-            "title": "Image Title 4",
-            "description": "Description for image 4 goes here."
+            "src": "/assets/beanieImage.png"
         }
     ];
     let currentSlide = 0;
     function updateSlide(){
         const slide = jsonData[currentSlide];
         document.getElementById('slideImage').src = slide.src;
-        document.getElementById('imageTitle').textContent = slide.title;
-        document.getElementById('imageDescription').textContent = slide.description;
     }
     document.getElementById('nextButton').addEventListener('click', () => {
         currentSlide = (currentSlide + 1) % jsonData.length;
@@ -102,7 +94,7 @@ import Layout from '../../layouts/Layout.astro';
     document.getElementById('prevButton').addEventListener('click', () => {
         currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
         updateSlide();
-    })
+    }) 
     updateSlide();
     let parentMainContainer = document.getElementById('parentMainContainer');
     let gallerySliderId = document.getElementById('gallerySliderId');
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 2ceb22a..15eccb1 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </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="w-full max-w-3xl lg:max-w-4xl 2xl: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>
@@ -49,11 +49,6 @@ import Layout from '../../layouts/Layout.astro';
 
                         <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>
@@ -64,6 +59,42 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const jsonData = [
+        {
+            "src": "/assets/back.jpeg"
+        },
+        {
+            "src": "/assets/background.jpg"
+        },
+        {
+            "src": "/assets/backgroundImage.png"
+        },
+        {
+            "src": "/assets/beanieImage.png"
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % jsonData.length;
+        console.log(currentSlide)
+        updateSlide();
+    })
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
+        updateSlide();
+    })
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -101,24 +132,30 @@ import Layout from '../../layouts/Layout.astro';
     let audioData;
     let audioFileId = false;
     let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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;
@@ -231,6 +268,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('waxTexture', '/assets/texture.png');
         this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -306,6 +344,7 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
             if(audioFileId === true){
                 let instructionAudio = this.sound.add('instructAudio')
@@ -340,6 +379,10 @@ import Layout from '../../layouts/Layout.astro';
                     // parentMainContainer.classList.remove('hidden');
                 }
             });
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
+            });
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             
             if(isMobile){
@@ -738,10 +781,17 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+        
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 95262da..aedef6c 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </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="w-full max-w-3xl lg:max-w-4xl 2xl: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>
@@ -64,6 +64,42 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const jsonData = [
+        {
+            "src": "/assets/back.jpeg"
+        },
+        {
+            "src": "/assets/background.jpg"
+        },
+        {
+            "src": "/assets/backgroundImage.png"
+        },
+        {
+            "src": "/assets/beanieImage.png"
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % jsonData.length;
+        console.log(currentSlide)
+        updateSlide();
+    })
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
+        updateSlide();
+    })
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -93,6 +129,8 @@ import Layout from '../../layouts/Layout.astro';
     let audioData;
     let audioFileId = false;
     let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
     
     if(isMobile){
         topLogoWidth = 4.5;
@@ -100,18 +138,21 @@ import Layout from '../../layouts/Layout.astro';
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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){
@@ -212,6 +253,7 @@ import Layout from '../../layouts/Layout.astro';
         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');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -287,7 +329,7 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
-            // galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
             
             if(audioFileId === true){
             let instructionAudio = this.sound.add('instructAudio')
@@ -322,6 +364,10 @@ import Layout from '../../layouts/Layout.astro';
                     // parentMainContainer.classList.remove('hidden');
                 }
             });
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
+            });
             // const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             // if(!isMobile){
             //     this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -778,10 +824,17 @@ import Layout from '../../layouts/Layout.astro';
         // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro
index 4497ef7..42e89c6 100644
--- a/src/pages/guided-tracing/A.astro
+++ b/src/pages/guided-tracing/A.astro
@@ -15,7 +15,7 @@ import Layout from "../../layouts/Layout.astro";
       </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="w-full max-w-3xl lg:max-w-4xl 2xl: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>
@@ -25,11 +25,6 @@ import Layout from "../../layouts/Layout.astro";
 
               <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>
@@ -38,34 +33,28 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script src="/saveTracingGameData.js" is:inline></script>
 <script is:inline>
+      const findBuddies = JSON.parse(localStorage.getItem('userChildDetails') || '{}');
+    const buddiesName = findBuddies.metadata?.sprite || 'No sprite found'
+    console.log('buddName', buddiesName)
+    // fetch(`https://preschool-curriculum.in/api/one/v1//akademy/students/668ce00ae4714c0da8c17d4e`)
       const jsonData = [
         {
-            "src": "/assets/back.jpeg",
-            "title": "Image Title 1",
-            "description": "Description for image 1 goes here."
+            "src": "/assets/back.jpeg"
         },
         {
-            "src": "/assets/background.jpg",
-            "title": "Image Title 2",
-            "description": "Description for image 2 goes here."
+            "src": "/assets/background.jpg"
         },
         {
-            "src": "/assets/backgroundImage.png",
-            "title": "Image Title 3",
-            "description": "Description for image 3 goes here."
+            "src": "/assets/backgroundImage.png"
         },
         {
-            "src": "/assets/beanieImage.png",
-            "title": "Image Title 4",
-            "description": "Description for image 4 goes here."
+            "src": "/assets/beanieImage.png"
         }
     ];
     let currentSlide = 0;
     function updateSlide(){
         const slide = jsonData[currentSlide];
         document.getElementById('slideImage').src = slide.src;
-        document.getElementById('imageTitle').textContent = slide.title;
-        document.getElementById('imageDescription').textContent = slide.description;
     }
     document.getElementById('nextButton').addEventListener('click', () => {
         currentSlide = (currentSlide + 1) % jsonData.length;