diff --git a/package.json b/package.json index 663a662..a0a6ebc 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "astro": "^1.7.2", "astro-eslint-parser": "^0.14.0", "eslint": "^8.44.0", - "flowbite": "^1.7.0", "flowbite-typography": "^1.0.3", "phaser": "^3.60.0", "shiki": "^0.14.3", diff --git a/public/assets/animate-clipart.gif b/public/assets/animate-clipart.gif new file mode 100644 index 0000000..3f37b96 Binary files /dev/null and b/public/assets/animate-clipart.gif differ diff --git a/public/assets/clip-art-with-hand.svg b/public/assets/clip-art-with-hand.svg new file mode 100644 index 0000000..2759aa0 --- /dev/null +++ b/public/assets/clip-art-with-hand.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/assets/clip-art.svg b/public/assets/clip-art.svg new file mode 100644 index 0000000..2c3cdb7 --- /dev/null +++ b/public/assets/clip-art.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/svg/bg-star.svg b/public/assets/svg/bg-star.svg new file mode 100644 index 0000000..9b93e43 --- /dev/null +++ b/public/assets/svg/bg-star.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/border-correct.svg b/public/assets/svg/border-correct.svg new file mode 100644 index 0000000..2e25a4b --- /dev/null +++ b/public/assets/svg/border-correct.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/svg/border-wrong.svg b/public/assets/svg/border-wrong.svg new file mode 100644 index 0000000..df4f0ba --- /dev/null +++ b/public/assets/svg/border-wrong.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/svg/border.svg b/public/assets/svg/border.svg index f58204e..680ca08 100644 --- a/public/assets/svg/border.svg +++ b/public/assets/svg/border.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/public/assets/svg/clip-art2.svg b/public/assets/svg/clip-art2.svg new file mode 100644 index 0000000..433bf07 --- /dev/null +++ b/public/assets/svg/clip-art2.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/svg/collapse.svg b/public/assets/svg/collapse.svg new file mode 100644 index 0000000..704d5be --- /dev/null +++ b/public/assets/svg/collapse.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/svg/crossIcon.svg b/public/assets/svg/crossIcon.svg new file mode 100644 index 0000000..7e4b79d --- /dev/null +++ b/public/assets/svg/crossIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/svg/gallery-icon.svg b/public/assets/svg/gallery-icon.svg new file mode 100644 index 0000000..27aab73 --- /dev/null +++ b/public/assets/svg/gallery-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/svg/leftIcon.svg b/public/assets/svg/leftIcon.svg new file mode 100644 index 0000000..6adfe67 --- /dev/null +++ b/public/assets/svg/leftIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/svg/rightIcon.svg b/public/assets/svg/rightIcon.svg new file mode 100644 index 0000000..274d1f5 --- /dev/null +++ b/public/assets/svg/rightIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/saveGameAI.js b/public/saveGameAI.js new file mode 100644 index 0000000..af9c279 --- /dev/null +++ b/public/saveGameAI.js @@ -0,0 +1,274 @@ + 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); + }); + } \ No newline at end of file diff --git a/public/saveGameData.js b/public/saveGameData.js index 41b8a77..880c051 100644 --- a/public/saveGameData.js +++ b/public/saveGameData.js @@ -1,3 +1,7 @@ +function retryGame(){ + window.location.reload(); +} + const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const userId = urlParams.get('userId'); @@ -13,7 +17,7 @@ const gameName = url.split('/'); const gameType = gameName[3].split('?id='); let gameVersion; -console.log("Here is game name ", gameName) +// console.log("Here is game name ", gameType[0]) if(gameType[0] == "guided-tracing"){ gameVersion = gameType[0].split('?')[0]; @@ -91,6 +95,93 @@ function submitUserData(drawingZone) { } else{ starValue = 3; } + let maxStarValue = 5; + + let progress = 0; + + 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 = { 'gameName': gameVersion, @@ -100,31 +191,49 @@ function submitUserData(drawingZone) { 'gameTime' : timeDifferenceInSeconds, 'score' : scoreTotal, 'star' : starValue - // 'starts': formattedDateTime, - // 'game_start' : gameStartTime, }; console.log(userData); - fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, { method: 'POST', headers: { - 'Content-Type' : 'application/json' + 'Content-Type': 'application/json' }, body: JSON.stringify(userData) }) .then(response => { - if(response.ok){ - console.log('Data Saved', response.status) - if(response.status == 200){ - submitNotic.setVisible(true); + 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 Wrong', response) + } else { + console.log('Something went wrong', response); } + }, 100); }) .catch(error => { - console.error('An error occured', error) - }); + console.error('An error occurred', error); + }); // Clear the drawing // graphics.clear(); diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro index 5e461ef..14429ce 100644 --- a/src/pages/drag/dragdrop_phonics.astro +++ b/src/pages/drag/dragdrop_phonics.astro @@ -4,53 +4,37 @@ import Layout from '../../layouts/Layout.astro';
-
- - -
-
- + + -
- -
- - - -
-
- -
-
+
+ Clip Art
- + \ No newline at end of file diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 4a000e5..839cccf 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -1,49 +1,34 @@ --- import Layout from '../../layouts/Layout.astro'; + +let starNumberOfTime = localStorage.getItem('starValue'); +console.log(starNumberOfTime); +const numberOfTimes = starNumberOfTime; ---
-
- - -
-
- + + -
- -
- - - -
-
- -
-
+
+ Clip Art
@@ -51,6 +36,10 @@ import Layout from '../../layouts/Layout.astro';
\ No newline at end of file diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index ed8acef..00f2ea2 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -4,53 +4,37 @@ import Layout from '../../layouts/Layout.astro';
-
- - -
-
- + + -
- -
- - - -
-
- -
-
+
+ Clip Art
- +
\ No newline at end of file diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 3bdb88e..08004d8 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -3,14 +3,118 @@ import Layout from '../../layouts/Layout.astro'; ---
-
+ - -
+ + + - + + + + + + + + \ No newline at end of file diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index 38836e1..15c967a 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -3,14 +3,39 @@ import Layout from '../../layouts/Layout.astro'; ---
-
+
+ +
+
+
+ Clip Art +
+
+ + - diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro index 6be104d..aa9b5d4 100644 --- a/src/pages/tick/tick_phonics_v2.astro +++ b/src/pages/tick/tick_phonics_v2.astro @@ -111,6 +111,30 @@ import Layout from "../../layouts/Layout.astro";
+