function retryGame(){
window.location.reload();
}
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userId');
let gameId;
let submitNotic;
console.log(userId);
let startTime = Date.now();
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
let gameVersion;
if(gameType[0] == "guided-tracing"){
gameVersion = gameType[0].split('?')[0];
gameId = gameName[4];
console.log('Type - 1');
} else if(gameName.length == 4){
gameVersion = gameName[3].split('?')[0];
gameId = urlParams.get('id');
}
else if(gameName.length == 5){
gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
gameId = urlParams.get('id');
console.log('Type - 2');
}else if(gameName.length == 6){
gameVersion = gameType[0] + '-' + gameName[4];
gameId = urlParams.get('id');
console.log('Type - 3');
}
// console.log("Here is game name ", gameType[0])
// console.log(gameVersion)
let imageCode;
let gameScore;
// if(scoreTotal){
// gameScore = scoreTotal;
// }else{
// gameScore = 0;
// }
function submitUserData(drawingZone) {
submitButton.setVisible(false);
snapshotButton.setVisible(false);
customCursor.setVisible(false);
muteIcon.setVisible(false);
retryButton.setVisible(false);
galleryButton.setVisible(false);
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
// console.log('This is from main point', scoreTotal);
drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true);
customCursor.setVisible(true);
muteIcon.setVisible(true);
retryButton.setVisible(true);
galleryButton.setVisible(true);
if(gameType[0] == 'drawing'){
// submitButton.setVisible(true);
// snapshotButton.setVisible(true);
// customCursor.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);
imageCode = image.src;
}else if( gameType[0] == "guided-tracing"){
// submitButton.setVisible(true);
// snapshotButton.setVisible(true);
// customCursor.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 = `guided-tracing-${gameId}.png`;
// link.click();
document.body.removeChild(image);
imageCode = image.src;
}
let userData = {
'gameName': gameVersion,
'gameID': gameId,
'screenShot': imageCode,
'userId' : userId,
'gameTime' : timeDifferenceInSeconds
};
console.log(userData);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
setTimeout(() => {
if (response.ok) {
if (response.status == 200) {
console.log(response.status, " Data Saved Succesfully");
}
} else {
console.log('Something went wrong', response);
}
}, 100);
})
.catch(error => {
console.error('An error occurred', error);
});
// Clear the drawing
// graphics.clear();
});
};
function calculateFromAI(){
let progress = 0;
let starValue = 4;
let maxStarValue = 5;
function progressIncrement() {
const interval = setInterval(() => {
if (progress >= 100) {
clearInterval(interval);
} else {
progress += 10;
progressBar.style.width = `${progress}%`;
}
}, 100);
}
progressIncrement();
function addStarScalingStyles() {
const style = document.createElement('style');
style.innerHTML = `
@keyframes scaleUp {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.star {
display: inline-block;
transform-origin: center;
transform: scale(0); /* Initial state before animation */
opacity: 0; /* Initial opacity */
animation: scaleUp 0.5s ease forwards;
}
`;
document.head.appendChild(style);
}
addStarScalingStyles();
const blankStar = ``
const starSVG = ``;
const starContainer = document.getElementById('star-container');
let scoreBoard = document.getElementById('scoreBoard');
let loadingMainContainer = document.getElementById('loadingMainContainer');
loadingMainContainer.style.display = 'flex';
const loadingDiv = document.getElementById('loadingState');
loadingDiv.style.display = 'flex';
const containerDiv = document.createElement('div');
containerDiv.classList.add('w-full');
containerDiv.style.display = 'flex';
containerDiv.style.flexDirection = 'column';
containerDiv.style.justifyContent = 'center';
containerDiv.style.alignItems = 'center';
const paragraph = document.createElement('p');
paragraph.textContent = 'HOLD ON.';
paragraph.style.fontSize = '16px';
paragraph.style.fontWeight = '600';
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(paragraph);
const progressBarContainer = document.createElement('div');
progressBarContainer.style.position = 'relative';
progressBarContainer.style.display = 'flex';
progressBarContainer.style.alignItems = 'center';
progressBarContainer.style.border = '1px solid #AFB8E6';
progressBarContainer.style.height = '10px';
progressBarContainer.style.width = '100%';
progressBarContainer.style.marginTop = '30px';
progressBarContainer.style.marginBottom = '30px';
containerDiv.appendChild(progressBarContainer);
const progressBar = document.createElement('div');
progressBar.style.height = '10px';
progressBar.style.backgroundColor = '#D7DCF2';
progressBar.style.width = '0%';
progressBarContainer.appendChild(progressBar);
loadingDiv.appendChild(containerDiv);
const calculationText = document.createElement('p');
calculationText.textContent = 'Your stars are being calculated...';
calculationText.style.fontSize = '14px';
calculationText.style.fontWeight = '600';
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText);
let userData = {
'name' : 'Worksheet Name Here'
};
console.log(userData);
fetch(`https://game-du.teachertrainingkolkata.in/items/test`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
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('countStar').innerHTML = starValue;
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);
})
.catch(error => {
console.error('An error occurred', error);
});
}