From cdc95734ec8f0546a6041675e659ba1ffe5a1fef Mon Sep 17 00:00:00 2001 From: Suvodip Date: Tue, 1 Oct 2024 20:26:37 +0530 Subject: [PATCH] s1 --- package.json | 1 - public/assets/animate-clipart.gif | Bin 0 -> 8352 bytes public/assets/clip-art-with-hand.svg | 11 + public/assets/clip-art.svg | 14 + public/assets/svg/bg-star.svg | 4 + public/assets/svg/border-correct.svg | 5 + public/assets/svg/border-wrong.svg | 5 + public/assets/svg/border.svg | 5 +- public/assets/svg/clip-art2.svg | 26 + public/assets/svg/collapse.svg | 3 + public/assets/svg/crossIcon.svg | 3 + public/assets/svg/gallery-icon.svg | 5 + public/assets/svg/leftIcon.svg | 3 + public/assets/svg/rightIcon.svg | 3 + public/saveGameAI.js | 274 +++++++++ public/saveGameData.js | 135 +++- src/pages/drag/dragdrop_phonics.astro | 149 ++--- src/pages/drag/index.astro | 259 +++----- src/pages/drag/match_phonics.astro | 134 ++-- src/pages/drag/v2.astro | 159 ++--- src/pages/drag/v3.astro | 204 +++--- src/pages/drag/v4.astro | 147 ++--- src/pages/drawing/index.astro | 232 ++++++- src/pages/drawing/test.astro | 852 ++++++++++++++++++++++++++ src/pages/drawing/v2.astro | 60 +- src/pages/menu.astro | 0 src/pages/tick/tick_phonics_v1.astro | 363 ++++++----- src/pages/tick/tick_phonics_v2.astro | 206 ++++++- src/pages/tick/tick_phonics_v3.astro | 228 ++++++- src/pages/tick/v1.astro | 238 ++++++- src/pages/tick/v2.astro | 233 ++++++- src/pages/tick/v3.astro | 233 ++++++- yarn.lock | 18 - 33 files changed, 3216 insertions(+), 996 deletions(-) create mode 100644 public/assets/animate-clipart.gif create mode 100644 public/assets/clip-art-with-hand.svg create mode 100644 public/assets/clip-art.svg create mode 100644 public/assets/svg/bg-star.svg create mode 100644 public/assets/svg/border-correct.svg create mode 100644 public/assets/svg/border-wrong.svg create mode 100644 public/assets/svg/clip-art2.svg create mode 100644 public/assets/svg/collapse.svg create mode 100644 public/assets/svg/crossIcon.svg create mode 100644 public/assets/svg/gallery-icon.svg create mode 100644 public/assets/svg/leftIcon.svg create mode 100644 public/assets/svg/rightIcon.svg create mode 100644 public/saveGameAI.js create mode 100644 src/pages/drawing/test.astro create mode 100644 src/pages/menu.astro 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 0000000000000000000000000000000000000000..3f37b966f7eee757f6d9ca3fb5cd11bded8d3237 GIT binary patch literal 8352 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 + + + + + + + + + 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";
+