kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
Suvodip
2025-01-21 11:20:29 +05:30
parent eac8a4719a
commit 9809ca86d9
27 changed files with 1168 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/drag/index.astro
View File

@@ -7,6 +7,10 @@ const numberOfTimes = starNumberOfTime;
---
<Layout title="Drag Game">
<main>
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
Worksheet saved successfully
</div>
<div>
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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">
@@ -27,9 +31,9 @@ const numberOfTimes = starNumberOfTime;
</div>
</div>
</div>
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
<!-- <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div>
</div> -->
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>

98
src/pages/drawing/drawing_phonics.astro
View File

@@ -3,6 +3,14 @@ import Layout from '../../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
<main>
<audio id="savedAudioMessage">
<source src="/assets/ws-saved.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
Worksheet saved successfully
</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>
@@ -18,30 +26,31 @@ import Layout from '../../layouts/Layout.astro';
</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 onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
<button onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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>
<button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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>
</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-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>
<p id="attemptCount" class="text-[19px] font-[700]"></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">
@@ -59,35 +68,59 @@ 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"
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const akademyUserId = params.get('userId');
const akademyGameName = params.get('gameName');
const spriteNames = params.get('spriteName');
let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
function displaySprite() {
if (buddiesList.includes(spriteNames)) {
const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) {
imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src)
} else {
console.log('Element with ID "clipArtWithHand" not found.');
}
} else {
console.log('Sprite not found in the list.');
}
}
displaySprite();
let galleryData = []; // Store gallery data from the API
let currentSlide = 0; // Initialize the current slide index
fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
.then(res => res.json())
.then(data => {
galleryData = data; // Store the fetched gallery data
updateSlide(); // Call updateSlide after the data is fetched
})
.catch(err => {
console.error(err);
});
function updateSlide() {
if (galleryData.length > 0) {
document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
const slide = galleryData[currentSlide]; // Get the current slide's data
document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
}
];
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();
})
currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
updateSlide(); // Update the slide
});
document.getElementById('prevButton').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
updateSlide();
})
currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
updateSlide(); // Update the slide
});
updateSlide();
let parentMainContainer = document.getElementById('parentMainContainer');
let gallerySliderId = document.getElementById('gallerySliderId');
function closeGallery(){
@@ -187,8 +220,6 @@ import Layout from '../../layouts/Layout.astro';
// shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
@@ -320,6 +351,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setInteractive().on('pointerdown', () => {
submitUserData(this);
showAnimation();
document.getElementById('savedAudioMessage').play();
parentMainContainer.classList.remove('hidden');
if(isMobile){
colorContainer.style.display = 'none';

96
src/pages/drawing/drawing_writo.astro
View File

@@ -3,6 +3,14 @@ import Layout from '../../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
<main>
<audio id="savedAudioMessage">
<source src="/assets/ws-saved.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
Worksheet saved successfully
</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>
@@ -18,30 +26,31 @@ import Layout from '../../layouts/Layout.astro';
</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 onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
<button onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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>
<button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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>
</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-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>
<p id="attemptCount" class="text-[19px] font-[700]"></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">
@@ -59,34 +68,56 @@ 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"
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const akademyUserId = params.get('userId');
const akademyGameName = params.get('gameName');
const spriteNames = params.get('spriteName');
let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
function displaySprite() {
if (buddiesList.includes(spriteNames)) {
const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) {
imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src)
} else {
console.log('Element with ID "clipArtWithHand" not found.');
}
} else {
console.log('Sprite not found in the list.');
}
}
displaySprite();
let galleryData = []; // Store gallery data from the API
let currentSlide = 0; // Initialize the current slide index
fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
.then(res => res.json())
.then(data => {
galleryData = data; // Store the fetched gallery data
updateSlide(); // Call updateSlide after the data is fetched
})
.catch(err => {
console.error(err);
});
function updateSlide() {
if (galleryData.length > 0) {
document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
const slide = galleryData[currentSlide]; // Get the current slide's data
document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
}
];
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();
})
currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
updateSlide(); // Update the slide
});
document.getElementById('prevButton').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
updateSlide();
})
currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
updateSlide(); // Update the slide
});
updateSlide();
let parentMainContainer = document.getElementById('parentMainContainer');
let gallerySliderId = document.getElementById('gallerySliderId');
@@ -188,8 +219,6 @@ import Layout from '../../layouts/Layout.astro';
// shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
@@ -324,6 +353,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setInteractive().on('pointerdown', () => {
submitUserData(this);
showAnimation();
document.getElementById('savedAudioMessage').play();
parentMainContainer.classList.remove('hidden');
if(isMobile){
colorContainer.style.display = 'none';

172
src/pages/drawing/index.astro
View File

@@ -3,6 +3,14 @@ import Layout from '../../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
<main>
<audio id="savedAudioMessage">
<source src="/assets/ws-saved.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
Worksheet saved successfully
</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>
@@ -22,26 +30,27 @@ import Layout from '../../layouts/Layout.astro';
</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 id="clipArtWithHand" src="" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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>
<button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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>
</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-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>
<p id="attemptCount" class="text-[19px] font-[700]"></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">
@@ -56,45 +65,74 @@ 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"
},
{
"src": "/assets/background.jpg"
},
{
"src": "/assets/backgroundImage.png"
},
{
"src": "/assets/beanieImage.png"
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const akademyUserId = params.get('userId');
const akademyGameName = params.get('gameName');
const spriteNames = params.get('spriteName');
let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
function displaySprite() {
if (buddiesList.includes(spriteNames)) {
const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) {
imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src)
} else {
console.log('Element with ID "clipArtWithHand" not found.');
}
} else {
console.log('Sprite not found in the list.');
}
}
displaySprite();
// const jsonData = galleryData;
// const jsonData = [
// {
// "image": "/assets/back.jpeg"
// },
// {
// "image": "/assets/background.jpg"
// },
// {
// "image": "/assets/backgroundImage.png"
// },
// {
// "image": "/assets/beanieImage.png"
// }
// ];
let galleryData = []; // Store gallery data from the API
let currentSlide = 0; // Initialize the current slide index
fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
.then(res => res.json())
.then(data => {
galleryData = data; // Store the fetched gallery data
updateSlide(); // Call updateSlide after the data is fetched
})
.catch(err => {
console.error(err);
});
function updateSlide() {
if (galleryData.length > 0) {
document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
const slide = galleryData[currentSlide]; // Get the current slide's data
document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
}
];
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();
})
currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
updateSlide(); // Update the slide
});
document.getElementById('prevButton').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
updateSlide();
})
currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
updateSlide(); // Update the slide
});
updateSlide();
let parentMainContainer = document.getElementById('parentMainContainer');
let gallerySliderId = document.getElementById('gallerySliderId');
@@ -105,8 +143,13 @@ const parsedObject = JSON.parse(retrievedData);
}
function showAnimation() {
const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show');
// Initially set the clip-art to show after 2 seconds with a slide effect
setTimeout(() => {
clipArt.classList.add('show'); // Add the show class to trigger animation
}, 2000); // Delay animation by 2 seconds
}
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -199,8 +242,6 @@ const parsedObject = JSON.parse(retrievedData);
// shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
@@ -333,6 +374,7 @@ const parsedObject = JSON.parse(retrievedData);
submitButton.setInteractive().on('pointerdown', () => {
submitUserData(this);
showAnimation();
document.getElementById('savedAudioMessage').play();
parentMainContainer.classList.remove('hidden');
if(isMobile){
colorContainer.style.display = 'none';
@@ -944,39 +986,6 @@ const parsedObject = JSON.parse(retrievedData);
customCursor.strokePath();
}
}
// function update() {
// const slider = document.querySelector('input[type="range"]');
// if (slider && !isDrawing) {
// const sliderValue = parseInt(slider.value);
// const max = parseInt(slider.max);
// const width = slider.offsetWidth;
// const offsetX = (sliderValue - 2) / (max - 2) * width;
// slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
// }
// const cursorSize = brushSize * cursorSizeMultiplier;
// const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
// // Assuming 'this' refers to your Phaser.Scene instance
// if (!this.customCursor) {
// // Create the custom cursor sprite
// this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
// this.customCursor.setOrigin(0.3, 0.8);
// }
// // Set the tint or fill color dynamically based on the selectedColor
// const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
// this.customCursor.setTint(color);
// // Resize the cursor
// this.customCursor.setScale( cursorScale);
// // Position the cursor at the current mouse pointer coordinates
// this.customCursor.x = this.input.x;
// this.customCursor.y = this.input.y;
// }
</script>
<style>
.clear-button {
@@ -999,19 +1008,24 @@ const parsedObject = JSON.parse(retrievedData);
}
.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 */
opacity: 0; /* Initially transparent */
transform: translateX(100%); /* Start off-screen to the right */
transition: transform 1s ease, opacity 1s ease; /* Smooth transition */
}
.clip-art.show {
transform: translateX(0); /* Move the image into view */
opacity: 1; /* Fade in */
transform: translateX(0); /* Slide in from the right */
}
.slide{
display: none;
}
.active{
display: block;
}
</style>
</style>

96
src/pages/drawing/v2.astro
View File

@@ -3,6 +3,14 @@ import Layout from '../../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
<main>
<audio id="savedAudioMessage">
<source src="/assets/ws-saved.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
Worksheet saved successfully
</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>
@@ -18,30 +26,31 @@ import Layout from '../../layouts/Layout.astro';
</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 onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
<button onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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>
<button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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>
</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-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>
<p id="attemptCount" class="text-[19px] font-[700]"></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">
@@ -59,34 +68,56 @@ 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"
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const akademyUserId = params.get('userId');
const akademyGameName = params.get('gameName');
const spriteNames = params.get('spriteName');
let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
function displaySprite() {
if (buddiesList.includes(spriteNames)) {
const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) {
imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src)
} else {
console.log('Element with ID "clipArtWithHand" not found.');
}
} else {
console.log('Sprite not found in the list.');
}
}
displaySprite();
let galleryData = []; // Store gallery data from the API
let currentSlide = 0; // Initialize the current slide index
fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
.then(res => res.json())
.then(data => {
galleryData = data; // Store the fetched gallery data
updateSlide(); // Call updateSlide after the data is fetched
})
.catch(err => {
console.error(err);
});
function updateSlide() {
if (galleryData.length > 0) {
document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
const slide = galleryData[currentSlide]; // Get the current slide's data
document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
}
];
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();
})
currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
updateSlide(); // Update the slide
});
document.getElementById('prevButton').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
updateSlide();
})
currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
updateSlide(); // Update the slide
});
updateSlide();
let parentMainContainer = document.getElementById('parentMainContainer');
let gallerySliderId = document.getElementById('gallerySliderId');
@@ -205,8 +236,6 @@ import Layout from '../../layouts/Layout.astro';
return result;
}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
@@ -373,6 +402,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setInteractive().on('pointerdown', () => {
submitUserData(this);
showAnimation();
document.getElementById('savedAudioMessage').play();
parentMainContainer.classList.remove('hidden');
if(isMobile){
colorContainer.style.display = 'none';

101
src/pages/drawing/v3.astro
View File

@@ -3,6 +3,14 @@ import Layout from '../../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
<main>
<audio id="savedAudioMessage">
<source src="/assets/ws-saved.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
Worksheet saved successfully
</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>
@@ -18,30 +26,31 @@ import Layout from '../../layouts/Layout.astro';
</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 onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
<button onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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>
<button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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>
</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-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>
<p id="attemptCount" class="text-[19px] font-[700]"></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">
@@ -49,11 +58,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,34 +68,56 @@ 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"
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const akademyUserId = params.get('userId');
const akademyGameName = params.get('gameName');
const spriteNames = params.get('spriteName');
let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
function displaySprite() {
if (buddiesList.includes(spriteNames)) {
const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) {
imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src)
} else {
console.log('Element with ID "clipArtWithHand" not found.');
}
} else {
console.log('Sprite not found in the list.');
}
}
displaySprite();
let galleryData = []; // Store gallery data from the API
let currentSlide = 0; // Initialize the current slide index
fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
.then(res => res.json())
.then(data => {
galleryData = data; // Store the fetched gallery data
updateSlide(); // Call updateSlide after the data is fetched
})
.catch(err => {
console.error(err);
});
function updateSlide() {
if (galleryData.length > 0) {
document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
const slide = galleryData[currentSlide]; // Get the current slide's data
document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
}
];
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();
})
currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
updateSlide(); // Update the slide
});
document.getElementById('prevButton').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
updateSlide();
})
currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
updateSlide(); // Update the slide
});
updateSlide();
let parentMainContainer = document.getElementById('parentMainContainer');
let gallerySliderId = document.getElementById('gallerySliderId');
@@ -193,8 +219,6 @@ import Layout from '../../layouts/Layout.astro';
// shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
@@ -358,6 +382,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setInteractive().on('pointerdown', () => {
submitUserData(this);
showAnimation();
document.getElementById('savedAudioMessage').play();
parentMainContainer.classList.remove('hidden');
if(isMobile){
colorContainer.style.display = 'none';

109
src/pages/tick/v1.astro
View File

@@ -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');