s1

package.json

@@ -17,6 +17,7 @@
     "astro-eslint-parser": "^0.14.0",
     "eslint": "^8.44.0",
     "flowbite-typography": "^1.0.3",
+    "html2canvas": "^1.4.1",
     "phaser": "^3.60.0",
     "shiki": "^0.14.3",
     "tailwind-scrollbar": "^3.0.4",

public/saveGameAI.js

@@ -5,7 +5,7 @@
     const urlParams = new URLSearchParams(queryString);
     const userId = urlParams.get('userId');
     const gameVersion = urlParams.get('gameName');
-    let gameId;
+    const gameId = urlParams.get('id');
     let submitNotic;
 
     console.log(userId);
@@ -118,7 +118,7 @@ function submitUserData(drawingZone) {
         
         };
         console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'

public/saveGameData.js

@@ -194,7 +194,7 @@ function submitUserData(drawingZone) {
             'gameStar' : starValue
         };
         console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'

public/saveTracingGameData.js

@@ -6,7 +6,7 @@ const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const userId = urlParams.get('userId');
 const gameVersion = urlParams.get('gameName');
-let gameId;
+const gameId = urlParams.get('id');
 let submitNotic;
 
 console.log(userId);
@@ -16,13 +16,7 @@ let startTime = Date.now();
 const url = window.location.href;
 const gameName = url.split('/');
 const gameType = gameName[3].split('?id=');
-// let gameVersion;
+// let gameVersion;iVBORw0KGgoAAAANSUhEUgAAB4A
-
-// console.log("Here is game name ", gameType[0])
-
-// if(gameType[0] == "guided-tracing"){
-//     gameVersion = gameType[0].split('?')[0];
-//     gameId = gameName[4];
 //     console.log('Type - 1');
 
 // } else if(gameName.length == 4){
@@ -105,8 +99,8 @@ function submitUserData(drawingZone) {
             'score' : scoreTotal,
             'gameStar' : starValue
         };
-        // console.log(userData);
+        console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'

src/pages/buzzboard.astro

@@ -219,7 +219,25 @@ import Layout from '../layouts/Layout.astro';
     // .catch(error => {
     //   console.error('Error fetching initial data:', error);
     // });
-
+    function captureSnapshot(scene) {
+        customCursor.setVisible(false);
+    if (scene.game.renderer) {
+        scene.game.renderer.snapshot((image) => {
+            customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            const link = document.createElement('a');
+            link.href = image.src;
+            link.download = 'my_drawing.png';
+            link.click();
+            document.body.removeChild(image);
+        });
+    } else {
+        console.error('Renderer is not available.');
+    }
+}
     const config = {
         type: Phaser.AUTO,
         width: window.innerWidth,
@@ -262,6 +280,7 @@ import Layout from '../layouts/Layout.astro';
     }
 
     function create() {
+        const scene = this;
         // const params = new URLSearchParams(window.location.search);
         // const paramsID = params.get('id');
         // fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
@@ -361,14 +380,8 @@ import Layout from '../layouts/Layout.astro';
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
             colorContainer.style.marginBottom = '0';
-            if(!isMobile){
+            colorContainer.style.flexDirection = 'row'; 
-                colorContainer.style.flexDirection = 'row'; 
+            
-            }
-            if(isMobile){
-                colorContainer.style.display = 'none';
-                colorContainer.style.flexDirection = 'row'; 
-                
-            }
             colorContainer.style.backgroundColor = '#FFFFFF';
             colorContainer.style.padding = '1px 10px';
             colorContainer.style.borderRadius = '30px';
@@ -382,10 +395,27 @@ import Layout from '../layouts/Layout.astro';
             colorEraserCont.style.display = 'flex';
             colorEraserCont.style.flexDirection = 'row';
 
+            let clearAndDownloadContainer = document.createElement('div');
+            clearAndDownloadContainer.style.display = 'flex';
+            clearAndDownloadContainer.style.flexDirection = 'row';
+            clearAndDownloadContainer.style.gap = '15px';
+
+            let downloadButton = document.createElement('button');
+            downloadButton.innerHTML = '<svg fill="#394FC0" width="48px" height="48px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>save</title> <path d="M12.188 4.469v4.656h2.438l-4.875 5.875-4.875-5.875h2.563v-4.656h4.75zM16.313 12l2.844 4.5c0.156 0.375 0.344 1.094 0.344 1.531v8.656c0 0.469-0.375 0.813-0.813 0.813h-17.844c-0.469 0-0.844-0.344-0.844-0.813v-8.656c0-0.438 0.156-1.156 0.313-1.531l2.844-4.5c0.156-0.406 0.719-0.75 1.125-0.75h1.281l1.313 1.594h-2.625l-2.531 4.625c-0.031 0-0.031 0.031-0.031 0.063 0 0.063 0 0.094-0.031 0.125h16.156v-0.125c0-0.031-0.031-0.063-0.031-0.094l-2.531-4.594h-2.625l1.313-1.594h1.25c0.438 0 0.969 0.344 1.125 0.75zM7.469 21.031h4.594c0.406 0 0.781-0.375 0.781-0.813 0-0.406-0.375-0.781-0.781-0.781h-4.594c-0.438 0-0.813 0.375-0.813 0.781 0 0.438 0.375 0.813 0.813 0.813z"></path> </g></svg>'
+            downloadButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            downloadButton.style.borderRadius = '8px';
+
+            downloadButton.addEventListener('click', () => {
+                captureSnapshot(scene);
+            });
+
             let clearBoard = document.createElement('button');
             clearBoard.innerHTML ='<svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#0348A8"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M6 12h12M4 16h12M8 8h12" stroke="#0348A8" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path></g></svg>';
             clearBoard.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearBoard.style.borderRadius = '8px';
+
+            clearAndDownloadContainer.appendChild(clearBoard);
+            clearAndDownloadContainer.appendChild(downloadButton);
             colorContainer.appendChild(colorEraserCont);
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
@@ -634,8 +664,9 @@ import Layout from '../layouts/Layout.astro';
             colorPreview.style.width = '40px';
             colorPreview.style.height = '40px';
             colorPreview.style.backgroundColor = 'blue';
-            // Append the color buttons container to the color container
+            // Append the color buttons container to the color container downloadButton
-            colorButtonsContainer.appendChild(clearBoard);
+            
+            colorButtonsContainer.appendChild(clearAndDownloadContainer);
             colorContainer.appendChild(colorButtonsContainer);
             
             // Append the color container to the document body 
@@ -825,39 +856,8 @@ import Layout from '../layouts/Layout.astro';
             snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
             snapNotice.setVisible(false);
     }
-    function captureSnapshot(drawingZone) {
-        // snapNotice.setVisible(true);
-        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';
-            document.body.appendChild(image);
-            // Download the snapshot as an image
-            const link = document.createElement('a');
-            link.href = image.src;
-            link.download = 'my_drawing.png';
-            link.click();
-            document.body.removeChild(image);
-            // Clear the drawing
-            // graphics.clear();
-        });
-    }
-
     function startDrawing(x, y) {
         if (!isErasing) {
             graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);