s1

src/pages/tick/v1.astro

@@ -13,14 +13,14 @@ import Layout from "../../layouts/Layout.astro";
                         <div class="flex flex-row space-x-1 pb-2">
                             <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
                             <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
-                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
+                            <button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
                             <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                     <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
 
                 </div>
-                <div class="container mx-auto px-4">
+                <div class="container mx-auto px-4" id="snapshotDiv">
                     <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
@@ -117,6 +117,10 @@ import Layout from "../../layouts/Layout.astro";
         </div>  
     </main>
 </Layout>
+<!-- <script is:inline src="/html2canvas.min.js"></script> -->
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+
+
 <script is:inline>
     let isPlaying = false;
     function audioPlayAndPause(){
@@ -136,6 +140,7 @@ import Layout from "../../layouts/Layout.astro";
     const gameId = params.get('id');
     const userId = params.get('userId');
     const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
     let startTime = Date.now();
     let gameData = null;
     let totalPoints = 0;
@@ -278,7 +283,101 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
-        // Move the userData object creation inside the saveUserData function if needed
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+
+        // Check if all images in the div are loaded
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+
+        // If images are already loaded
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+
+        function takeSnapshot() {
+            html2canvas(div, {
+                useCORS: true,
+                allowTaint: true,
+            })
+                .then((canvas) => {
+                    snapImage = canvas.toDataURL("image/jpeg");
+
+                    // Automatically download the snapshot
+                    const link = document.createElement("a");
+                    link.href = snapImage;
+                    link.download = "snapshot.jpg";
+                    link.click();
+
+                    // Call the function to save the screenshot after it is generated
+                    saveScreenshot(snapImage);
+                })
+                .catch((error) => {
+                    console.error('Error taking snapshot:', error);
+                });
+        }
+
+        function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName,
+                gameID: gameId,
+                screenShot: snapImage,
+                userId,
+                gameTime: timeDifferenceInSeconds,
+            };
+
+            fetch('http://localhost:5175/api/saveGalleryImage', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(saveUserDataForScreenshot),
+            })
+                .then((response) => response.json())
+                .then((res) => {
+                    if (res.status === 200) {
+                        const userAnotherData = {
+                            assignmentId,
+                            worksheetId: gameId,
+                            studentId: userId,
+                            submissionFile: res.screenshotUrl,
+                        };
+
+                        return fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                    } else {
+                        throw new Error('Failed to save the screenshot');
+                    }
+                })
+                .then((response) => response.json())
+                .then((data) => {
+                    console.log('Successfully submitted:', data);
+                })
+                .catch((error) => {
+                    console.error('Error saving or submitting the screenshot:', error);
+                });
+        }
+
+
+
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
@@ -289,7 +388,7 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
             'gameStar': starValue
         };
-        // console.log(userData);let progress = 0;
+
         progressIncrement();
         addStarScalingStyles();
         showClipArt();
@@ -396,6 +495,8 @@ import Layout from "../../layouts/Layout.astro";
             event.preventDefault();
         });
     });
+
+    // document.getElementById("downloadBtn").addEventListener("click", function() {});
 </script>
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');