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

change Ui

Browse Source
This commit is contained in:
Suvodip
2025-01-23 19:16:56 +05:30
parent 9809ca86d9
commit eb7d7e9da8
20 changed files with 2086 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/pages/tick/tick_phonics_v3.astro
View File

@@ -19,7 +19,7 @@ import Layout from "../../layouts/Layout.astro";
</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">
<div class="flex flex-col">
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> -->
@@ -76,7 +76,10 @@ import Layout from "../../layouts/Layout.astro";
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
<div class="flex flex-row space-x-4 items-center justify-center">
<div id="star-container"></div>
<div id="star-container" class="relative inline-flex items-center justify-center">
<img src="/assets/bg-star.svg" alt="" class="block" />
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
</div>
</div>
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img class="z-10" src="/assets/clip-art.svg" alt="" />
@@ -101,6 +104,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
</main>
</Layout>
<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(){
@@ -120,6 +124,8 @@ 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');
const worksheetId = params.get('worksheetId');
let startTime = Date.now();
let gameData = null;
let starValue;
@@ -127,7 +133,7 @@ import Layout from "../../layouts/Layout.astro";
let urlSplit = url.split('/');
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
let totalPoints = 0;
let maxStarValue = 5;
let maxScore = 3;
let progress = 0;
const progressBar = document.createElement('div');
@@ -236,17 +242,20 @@ import Layout from "../../layouts/Layout.astro";
totalPoints += 1;
}
});
totalPoints === 1 ? starValue = 5 : 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 = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'gameStar': starValue
};
// console.log(userData);
let starValue = Math.round((totalPoints / maxScore) * 10);
starValue = starValue === 0 ? 3 : starValue;
let feedbackMessage = '';
if (starValue >= 1 && starValue <= 3) {
feedbackMessage = "You're making progress! Let's keep going!";
} else if (starValue >= 4 && starValue <= 6) {
feedbackMessage = "Nice work! You're improving every day!";
} else if (starValue >= 7 && starValue <= 8) {
feedbackMessage = "Amazing work! Keep it up!";
} else if (starValue >= 9 && starValue <= 10) {
feedbackMessage = "Outstanding! You're a true superstar!";
} else {
feedbackMessage = "Invalid star value.";
}
progressIncrement();
addStarScalingStyles();
showClipArt();
@@ -300,51 +309,140 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.fontWeight = '600';
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (response.ok) {
setTimeout(() => {
if (response.ok) {
if (response.status == 200) {
loadingMainContainer.style.display = 'none';
loadingDiv.style.display = 'none';
starContainer.style.display = 'flex';
starContainer.style.flexDirection = 'row';
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
for (let i = 0; i < starValue; i++) {
const starDiv = document.createElement('div');
starDiv.innerHTML = starSVG;
starDiv.classList.add('star');
starContainer.appendChild(starDiv);
setTimeout(() => {
starDiv.style.opacity = '1';
starDiv.style.animationDelay = `${i * 0.5}s`;
}, i * 500);
}
for (let i = 0; i < maxStarValue - starValue; i++) {
const starDiv = document.createElement('div');
starDiv.innerHTML = blankStar;
starContainer.appendChild(starDiv);
}
scoreBoard.style.display = 'flex';
}
} else {
console.log('Something went wrong', response);
}
}, 100);
} else {
// console.log('Something Wrong', response);
let snapImage = '';
const div = document.getElementById("snapshotDiv");
const images = div.getElementsByTagName('img');
let loadedImagesCount = 0;
for (let img of images) {
if (img.complete) {
loadedImagesCount++;
} else {
img.onload = () => {
loadedImagesCount++;
if (loadedImagesCount === images.length) {
takeSnapshot();
}
};
}
}
if (loadedImagesCount === images.length) {
takeSnapshot();
}
async function takeSnapshot() {
try {
const canvas = await html2canvas(div, {
useCORS: true,
allowTaint: true,
});
snapImage = canvas.toDataURL("image/jpeg");
await saveScreenshot(snapImage);
} catch (error) {
console.error('Error in takeSnapshot:', error.message || error);
}
}
async function saveScreenshot(snapImage) {
const saveUserDataForScreenshot = {
gameName: gameName,
gameID: gameId,
screenShot: snapImage,
userId: userId,
gameTime: timeDifferenceInSeconds
};
try {
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(saveUserDataForScreenshot),
});
if (!saveResponse.ok) {
const errorDetails = await saveResponse.text();
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
console.error('Response Body:', errorDetails);
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
}
})
.catch(error => {
console.error('An error occurred', error);
});
const saveResult = await saveResponse.json();
if (saveResult.screenshotUrl) {
let userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'gameStar': starValue
};
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (response.ok) {
setTimeout(() => {
if (response.ok) {
if (response.status == 200) {
loadingMainContainer.style.display = 'none';
loadingDiv.style.display = 'none';
starContainer.style.display = 'flex';
starContainer.style.flexDirection = 'row';
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
document.getElementById('get-star-value').innerHTML = starValue;
scoreBoard.style.display = 'flex';
}
} else {
console.log('Something went wrong', response);
}
}, 100);
} else {
// console.log('Something Wrong', response);
}
})
.catch(error => {
console.error('An error occurred', error);
});
const userAnotherData = {
assignmentId: assignmentId,
worksheetId: worksheetId,
studentId: userId,
submissionFile: saveResult.screenshotUrl,
};
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
try {
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': authToken,
},
body: JSON.stringify(userAnotherData),
});
if (!submitResponse.ok) {
const errorDetails = await submitResponse.text();
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
console.error('Response Body:', errorDetails);
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
}
const submitResult = await submitResponse.json();
// console.log('SubmitWorksheet API success:', submitResult);
} catch (error) {
console.error('Error in SubmitWorksheet API call:', error.message || error);
}
} else {
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
}
} catch (error) {
console.error('Error in saveScreenshot:', error.message || error);
throw error;
}
}
}