Compare commits
13 Commits
399186819c
...
newb
| Author | SHA1 | Date | |
|---|---|---|---|
|
eac8a4719a | ||
|
|
cedb4ad01e | ||
|
|
8e96e7b4ba | ||
|
|
4372f87838 | ||
|
|
4a303849ad | ||
|
|
c999045fe4 | ||
|
|
2d6e01e184 | ||
|
|
f3dd30e909 | ||
|
|
12aeec0947 | ||
|
|
e4dc874374 | ||
|
|
7e44149a4a | ||
|
|
b8444a361a | ||
|
|
d64bc840bc |
8139
package-lock.json
generated
8139
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,7 @@
|
||||
"astro-eslint-parser": "^0.14.0",
|
||||
"eslint": "^8.44.0",
|
||||
"flowbite-typography": "^1.0.3",
|
||||
"html2canvas": "^1.4.1",
|
||||
"phaser": "^3.60.0",
|
||||
"shiki": "^0.14.3",
|
||||
"tailwind-scrollbar": "^3.0.4",
|
||||
|
||||
4
public/assets/brainstrom-logo.svg
Normal file
4
public/assets/brainstrom-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
4
public/assets/svg/draw-cursor.svg
Normal file
4
public/assets/svg/draw-cursor.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12.832" cy="12.6328" r="12" fill="#F7A915"/>
|
||||
<path d="M12.834 3.76953L12.834 21.9905" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 285 B |
6
public/assets/svg/eraser-cursor.svg
Normal file
6
public/assets/svg/eraser-cursor.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.9375" width="23" height="23" fill="white"/>
|
||||
<rect x="0.5" y="0.9375" width="23" height="23" stroke="black"/>
|
||||
<path d="M12.1367 3.52344L12.1367 22.1211" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
|
||||
<path d="M2.83594 12.8242H21.4336" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 477 B |
45
public/galleryFunction.js
Normal file
45
public/galleryFunction.js
Normal file
@@ -0,0 +1,45 @@
|
||||
const jsonData = [
|
||||
{
|
||||
"src": "/assets/back.jpeg",
|
||||
"title": "Image Title 1",
|
||||
"description": "Description for image 1 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/background.jpg",
|
||||
"title": "Image Title 2",
|
||||
"description": "Description for image 2 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/backgroundImage.png",
|
||||
"title": "Image Title 3",
|
||||
"description": "Description for image 3 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/beanieImage.png",
|
||||
"title": "Image Title 4",
|
||||
"description": "Description for image 4 goes here."
|
||||
}
|
||||
];
|
||||
let currentSlide = 0;
|
||||
function updateSlide(){
|
||||
const slide = jsonData[currentSlide];
|
||||
document.getElementById('slideImage').src = slide.src;
|
||||
document.getElementById('imageTitle').textContent = slide.title;
|
||||
document.getElementById('imageDescription').textContent = slide.description;
|
||||
}
|
||||
document.getElementById('nextButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide + 1) % jsonData.length;
|
||||
console.log(currentSlide)
|
||||
updateSlide();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
const gameVersion = urlParams.get('gameName');
|
||||
let gameId;
|
||||
const gameId = urlParams.get('id');
|
||||
let submitNotic;
|
||||
|
||||
console.log(userId);
|
||||
@@ -118,7 +118,7 @@ function submitUserData(drawingZone) {
|
||||
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
@@ -6,7 +6,7 @@ const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
const gameVersion = urlParams.get('gameName');
|
||||
let gameId;
|
||||
const gameId = urlParams.get('id');
|
||||
let submitNotic;
|
||||
|
||||
console.log(userId);
|
||||
@@ -194,7 +194,7 @@ function submitUserData(drawingZone) {
|
||||
'gameStar' : starValue
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
@@ -6,7 +6,7 @@ const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
const gameVersion = urlParams.get('gameName');
|
||||
let gameId;
|
||||
const gameId = urlParams.get('id');
|
||||
let submitNotic;
|
||||
|
||||
console.log(userId);
|
||||
@@ -16,13 +16,7 @@ let startTime = Date.now();
|
||||
const url = window.location.href;
|
||||
const gameName = url.split('/');
|
||||
const gameType = gameName[3].split('?id=');
|
||||
// let gameVersion;
|
||||
|
||||
// console.log("Here is game name ", gameType[0])
|
||||
|
||||
// if(gameType[0] == "guided-tracing"){
|
||||
// gameVersion = gameType[0].split('?')[0];
|
||||
// gameId = gameName[4];
|
||||
// let gameVersion;iVBORw0KGgoAAAANSUhEUgAAB4A
|
||||
// console.log('Type - 1');
|
||||
|
||||
// } else if(gameName.length == 4){
|
||||
@@ -105,8 +99,8 @@ function submitUserData(drawingZone) {
|
||||
'score' : scoreTotal,
|
||||
'gameStar' : starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
1012
src/pages/buzzboard.astro
Normal file
1012
src/pages/buzzboard.astro
Normal file
File diff suppressed because one or more lines are too long
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea_copy"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<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">
|
||||
@@ -90,8 +90,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,9 +99,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -122,6 +143,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
@@ -143,7 +168,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById("label6").innerHTML = gameData.label6;
|
||||
}
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
|
||||
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
@@ -311,7 +336,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -430,7 +455,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea_copy"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-2 select-none" id="gameDescription"></p>
|
||||
<form id="contactForm">
|
||||
@@ -108,18 +108,39 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -139,6 +160,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
@@ -169,7 +194,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById("label9").innerHTML = gameData.label9;
|
||||
}
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
const imageId = `image${i}`;
|
||||
@@ -345,7 +370,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -464,7 +489,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea_copy"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<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">
|
||||
@@ -90,8 +90,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,9 +99,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -123,6 +144,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
@@ -144,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById("label6").innerHTML = gameData.label6;
|
||||
}
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
|
||||
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
@@ -312,7 +337,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -431,7 +456,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
<button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,8 +103,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,9 +112,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -135,6 +156,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
@@ -331,7 +356,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -451,7 +476,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -12,10 +12,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -78,8 +78,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,9 +87,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -109,6 +130,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameLabel").innerHTML = gameData.label;
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
@@ -282,7 +307,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
@@ -17,7 +17,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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="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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,6 +56,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let cancelIconWidth;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
@@ -142,6 +145,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=80";
|
||||
@@ -239,6 +246,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
@@ -410,10 +420,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// window.load
|
||||
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
|
||||
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
@@ -432,7 +442,19 @@ import Layout from '../../layouts/Layout.astro';
|
||||
showAnimation();
|
||||
})
|
||||
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
soundButton.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
blocks1Width1 = 180;
|
||||
|
||||
@@ -22,7 +22,7 @@ const numberOfTimes = starNumberOfTime;
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button onclick="" 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="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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,6 +59,9 @@ const numberOfTimes = starNumberOfTime;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
@@ -168,6 +171,11 @@ const numberOfTimes = starNumberOfTime;
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
// console.log(audioData)
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
@@ -264,6 +272,9 @@ const numberOfTimes = starNumberOfTime;
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
@@ -340,7 +351,7 @@ const numberOfTimes = starNumberOfTime;
|
||||
},
|
||||
];
|
||||
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
@@ -397,18 +408,11 @@ const numberOfTimes = starNumberOfTime;
|
||||
graphics.strokePath();
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// }).setDepth(1);
|
||||
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
|
||||
this.add.image(displayW * 0.9-32, 170, "target1");
|
||||
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 340, "target2");
|
||||
@@ -417,6 +421,20 @@ const numberOfTimes = starNumberOfTime;
|
||||
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 680, "target4");
|
||||
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
soundButton.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const blocks = [
|
||||
{
|
||||
|
||||
@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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="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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,6 +55,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
@@ -147,6 +150,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
@@ -243,6 +250,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
@@ -327,7 +337,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||||
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
@@ -372,10 +382,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// });
|
||||
// };
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
|
||||
this.add.image(displayW * 0.9-32, 170, "target1");
|
||||
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 340, "target2");
|
||||
@@ -385,6 +395,19 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.add.image(displayW * 0.9-32, 680, "target4");
|
||||
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
soundButton.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const graphics = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
|
||||
@@ -365,7 +365,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
|
||||
// Left Image Name
|
||||
this.add.text(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
|
||||
@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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="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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,6 +56,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
@@ -147,6 +151,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
@@ -243,6 +252,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
@@ -327,7 +339,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||||
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
@@ -372,10 +384,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// });
|
||||
// };
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
|
||||
this.add.image(displayW * 0.9-32, 170, "target1");
|
||||
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 340, "target2");
|
||||
@@ -384,7 +396,19 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 680, "target4");
|
||||
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
soundButton.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const graphics = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
|
||||
@@ -309,7 +309,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
|
||||
@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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="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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,6 +59,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let blockMatches;
|
||||
let retryButtonWidth;
|
||||
let leftTargetZoneW;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
@@ -179,6 +182,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
@@ -274,6 +281,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
@@ -422,12 +432,25 @@ import Layout from '../../layouts/Layout.astro';
|
||||
graphics.strokePath();
|
||||
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
|
||||
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
soundButton.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
|
||||
@@ -17,7 +17,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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="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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,6 +59,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let leftTargetZoneW;
|
||||
let rightTargetZoneW;
|
||||
let retryButtonWidth;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
@@ -145,6 +148,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
|
||||
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
|
||||
@@ -238,6 +245,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
// this.load.image("tick", '/assets/tick.png');
|
||||
@@ -249,8 +259,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
|
||||
// this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
|
||||
|
||||
this.load.spritesheet("blocks1", assetsList.element5,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
@@ -405,10 +413,23 @@ import Layout from '../../layouts/Layout.astro';
|
||||
graphics.strokePath();
|
||||
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
soundButton.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
|
||||
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</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-6xl bg-white rounded-lg">
|
||||
<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>
|
||||
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
|
||||
@@ -49,11 +49,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,6 +59,42 @@ 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"
|
||||
}
|
||||
];
|
||||
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();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
parentMainContainer.classList.add('hidden');
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
@@ -89,24 +120,34 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let maxScore;
|
||||
let erase;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
let galleryIconWidth;
|
||||
let galleryButton;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
galleryIconWidth = 2;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
galleryIconWidth = 1.81;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
galleryIconWidth = 1.345;
|
||||
}
|
||||
if(isMobile){
|
||||
submitWidth = 250;
|
||||
@@ -151,6 +192,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
// console.log(data)
|
||||
// colorList = data.colors;
|
||||
const {image} = data;
|
||||
@@ -190,6 +235,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let colorList;
|
||||
|
||||
function preload() {
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
@@ -199,6 +247,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
||||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||||
this.load.image('colorButton', '/assets/color_button.png');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
}
|
||||
|
||||
function create() {
|
||||
@@ -241,11 +290,25 @@ import Layout from '../../layouts/Layout.astro';
|
||||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
|
||||
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
graphics.clear();
|
||||
});
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
muteIcon.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
@@ -263,6 +326,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// parentMainContainer.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
galleryButton.setInteractive().on('pointerdown', () => {
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
gallerySliderId.classList.remove('hidden');
|
||||
});
|
||||
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
if(!isMobile){
|
||||
@@ -301,7 +368,16 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
colorContainer.style.flexDirection = 'row';
|
||||
}
|
||||
colorContainer.style.backgroundColor = '#FFFFFF';
|
||||
colorContainer.style.padding = '30px 20px';
|
||||
colorContainer.style.borderRadius = '80px';
|
||||
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
|
||||
colorContainer.style.left = '0px';
|
||||
colorContainer.style.top = '50%';
|
||||
colorContainer.style.transform = 'translate(0, -50%)';
|
||||
colorContainer.style.border = '1px solid #F9F9F9';
|
||||
|
||||
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
|
||||
if(!isMobile){
|
||||
@@ -317,6 +393,14 @@ import Layout from '../../layouts/Layout.astro';
|
||||
|
||||
|
||||
// Create the color picker
|
||||
let colorAndClearContainer = document.createElement('div');
|
||||
colorAndClearContainer.style.display = 'flex';
|
||||
colorAndClearContainer.flexDirection = 'row';
|
||||
colorAndClearContainer.style.alignItems = 'center';
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
||||
clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
|
||||
|
||||
const colorPicker = document.createElement('input');
|
||||
colorPicker.type = 'color';
|
||||
colorPicker.value = selectedColor;
|
||||
@@ -343,7 +427,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Append the color picker to the color container data
|
||||
colorContainer.appendChild(colorPicker);
|
||||
|
||||
colorAndClearContainer.appendChild(colorPicker)
|
||||
colorAndClearContainer.appendChild(clearButton)
|
||||
colorContainer.appendChild(colorAndClearContainer);
|
||||
// const colors = data.colors;
|
||||
// var colors = colorList;
|
||||
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
|
||||
@@ -571,20 +658,19 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
|
||||
document.body.appendChild(buttonsContainer);
|
||||
// Create the Clear button
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
||||
|
||||
// clearButton.style.border = '3px solid blue';
|
||||
// clearButton.style.color = 'blue';
|
||||
// clearButton.style.width = 'fit-content';
|
||||
// clearButton.style.marginRight = '10px';
|
||||
if(isMobile){
|
||||
clearButton.style.padding = '2px 8px';
|
||||
clearButton.style.display = 'none';
|
||||
buttonsContainer.style.top = '9.5%';
|
||||
buttonsContainer.style.marginLeft = '30px';
|
||||
} else {
|
||||
clearButton.style.padding = '5px 10px';
|
||||
}
|
||||
// if(isMobile){
|
||||
// clearButton.style.padding = '2px 8px';
|
||||
// clearButton.style.display = 'none';
|
||||
// buttonsContainer.style.top = '9.5%';
|
||||
// buttonsContainer.style.marginLeft = '30px';
|
||||
// } else {
|
||||
// clearButton.style.padding = '5px 10px';
|
||||
// }
|
||||
// clearButton.style.fontWeight = 'bold';
|
||||
// clearButton.style.borderRadius = '20%';
|
||||
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
@@ -597,7 +683,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}else{
|
||||
clearButton.style.display = 'block';
|
||||
}
|
||||
})
|
||||
})
|
||||
// Create the Eraser button
|
||||
const eraserButton = document.createElement('button');
|
||||
// eraserButton.textContent = 'Eraser';
|
||||
@@ -633,7 +719,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Add the Clear and Eraser buttons to the container
|
||||
buttonsContainer.appendChild(clearButton);
|
||||
// buttonsContainer.appendChild(clearButton);
|
||||
// colorPicker.appendChild(clearButton);
|
||||
// buttonsContainer.appendChild(eraserButton).setVisible;
|
||||
|
||||
@@ -727,10 +813,17 @@ import Layout from '../../layouts/Layout.astro';
|
||||
submitButton.setVisible(false);
|
||||
snapshotButton.setVisible(false);
|
||||
customCursor.setVisible(false);
|
||||
muteIcon.setVisible(false);
|
||||
retryButton.setVisible(false);
|
||||
galleryButton.setVisible(false);
|
||||
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
submitButton.setVisible(true);
|
||||
snapshotButton.setVisible(true);
|
||||
customCursor.setVisible(true);
|
||||
muteIcon.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
galleryButton.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
@@ -862,12 +955,49 @@ import Layout from '../../layouts/Layout.astro';
|
||||
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||||
};
|
||||
const cursorSize = brushSize * cursorSizeMultiplier;
|
||||
customCursor.clear(); // Clear the previous frame
|
||||
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(1.5, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
// Position the cursor at the current mouse pointer coordinates
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
|
||||
if (erase === true) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
} else if (erase === false) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
// function update() {
|
||||
|
||||
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</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-6xl bg-white rounded-lg">
|
||||
<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>
|
||||
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
|
||||
@@ -49,11 +49,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,6 +59,42 @@ 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"
|
||||
}
|
||||
];
|
||||
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();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
parentMainContainer.classList.add('hidden');
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
@@ -89,24 +120,34 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let maxScore;
|
||||
let erase;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
let galleryIconWidth;
|
||||
let galleryButton;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
galleryIconWidth = 2;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
galleryIconWidth = 1.81;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
galleryIconWidth = 1.345;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
@@ -152,6 +193,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
// console.log(data)
|
||||
// colorList = data.colors;
|
||||
const {image} = data;
|
||||
@@ -191,6 +236,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let colorList;
|
||||
|
||||
function preload() {
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
@@ -200,6 +248,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
||||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||||
this.load.image('colorButton', '/assets/color_button.png');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
}
|
||||
|
||||
function create() {
|
||||
@@ -244,10 +293,24 @@ import Layout from '../../layouts/Layout.astro';
|
||||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
muteIcon.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
graphics.clear();
|
||||
});
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
|
||||
@@ -268,6 +331,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
|
||||
galleryButton.setInteractive().on('pointerdown', () => {
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
gallerySliderId.classList.remove('hidden');
|
||||
});
|
||||
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
if(!isMobile){
|
||||
// this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
||||
@@ -313,7 +381,16 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
colorContainer.style.flexDirection = 'row';
|
||||
}
|
||||
colorContainer.style.backgroundColor = '#FFFFFF';
|
||||
colorContainer.style.padding = '30px 20px';
|
||||
colorContainer.style.borderRadius = '80px';
|
||||
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
|
||||
colorContainer.style.left = '0px';
|
||||
colorContainer.style.top = '50%';
|
||||
colorContainer.style.transform = 'translate(0, -50%)';
|
||||
colorContainer.style.border = '1px solid #F9F9F9';
|
||||
|
||||
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
|
||||
if(!isMobile){
|
||||
@@ -327,6 +404,14 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
|
||||
let colorAndClearContainer = document.createElement('div');
|
||||
colorAndClearContainer.style.display = 'flex';
|
||||
colorAndClearContainer.flexDirection = 'row';
|
||||
colorAndClearContainer.style.alignItems = 'center';
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
||||
clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
|
||||
|
||||
|
||||
// Create the color picker
|
||||
const colorPicker = document.createElement('input');
|
||||
@@ -355,7 +440,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Append the color picker to the color container data
|
||||
colorContainer.appendChild(colorPicker);
|
||||
colorAndClearContainer.appendChild(colorPicker)
|
||||
colorAndClearContainer.appendChild(clearButton)
|
||||
colorContainer.appendChild(colorAndClearContainer);
|
||||
// const colors = data.colors;
|
||||
// var colors = colorList;
|
||||
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
|
||||
@@ -581,22 +668,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
buttonsContainer.style.left = '20px';
|
||||
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
|
||||
document.body.appendChild(buttonsContainer);
|
||||
// Create the Clear button
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
||||
// clearButton.style.border = '3px solid blue';
|
||||
// clearButton.style.color = 'blue';
|
||||
// clearButton.style.width = 'fit-content';
|
||||
// clearButton.style.marginRight = '10px';
|
||||
if(isMobile){
|
||||
clearButton.style.padding = '2px 8px';
|
||||
clearButton.style.display = 'none';
|
||||
buttonsContainer.style.top = '9.5%';
|
||||
buttonsContainer.style.marginLeft = '30px';
|
||||
} else {
|
||||
clearButton.style.padding = '5px 10px';
|
||||
}
|
||||
document.body.appendChild(buttonsContainer);
|
||||
// clearButton.style.fontWeight = 'bold';
|
||||
// clearButton.style.borderRadius = '20%';
|
||||
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
@@ -645,7 +717,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Add the Clear and Eraser buttons to the container
|
||||
buttonsContainer.appendChild(clearButton);
|
||||
// buttonsContainer.appendChild(clearButton);
|
||||
// colorPicker.appendChild(clearButton);
|
||||
// buttonsContainer.appendChild(eraserButton).setVisible;
|
||||
|
||||
@@ -739,10 +811,18 @@ import Layout from '../../layouts/Layout.astro';
|
||||
submitButton.setVisible(false);
|
||||
snapshotButton.setVisible(false);
|
||||
customCursor.setVisible(false);
|
||||
muteIcon.setVisible(false);
|
||||
retryButton.setVisible(false);
|
||||
galleryButton.setVisible(false);
|
||||
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
submitButton.setVisible(true);
|
||||
snapshotButton.setVisible(true);
|
||||
customCursor.setVisible(true);
|
||||
muteIcon.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
galleryButton.setVisible(true);
|
||||
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
@@ -874,46 +954,50 @@ import Layout from '../../layouts/Layout.astro';
|
||||
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||||
};
|
||||
const cursorSize = brushSize * cursorSizeMultiplier;
|
||||
customCursor.clear(); // Clear the previous frame
|
||||
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(1.5, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
// Position the cursor at the current mouse pointer coordinates
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
}
|
||||
|
||||
// function update() {
|
||||
// const slider = document.querySelector('input[type="range"]');
|
||||
customCursor.moveTo(0, - cursorSize + 3);
|
||||
customCursor.lineTo(0, cursorSize - 3);
|
||||
|
||||
// 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%)`;
|
||||
// }
|
||||
customCursor.moveTo(- cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize - 3, 0);
|
||||
customCursor.strokePath();
|
||||
|
||||
if (erase === true) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
// 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;
|
||||
// }
|
||||
customCursor.moveTo(0, - cursorSize + 3);
|
||||
customCursor.lineTo(0, cursorSize - 3);
|
||||
|
||||
customCursor.moveTo(- cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize - 3, 0);
|
||||
customCursor.strokePath();
|
||||
} else if (erase === false) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, - cursorSize + 3);
|
||||
customCursor.lineTo(0, cursorSize - 3);
|
||||
|
||||
customCursor.moveTo(- cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize - 3, 0);
|
||||
customCursor.strokePath();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Animation styles */
|
||||
|
||||
@@ -18,7 +18,7 @@ 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>
|
||||
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</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-6xl bg-white rounded-lg">
|
||||
<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>
|
||||
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
|
||||
@@ -49,11 +49,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>
|
||||
@@ -61,38 +56,35 @@ 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",
|
||||
"title": "Image Title 1",
|
||||
"description": "Description for image 1 goes here."
|
||||
"src": "/assets/back.jpeg"
|
||||
},
|
||||
{
|
||||
"src": "/assets/background.jpg",
|
||||
"title": "Image Title 2",
|
||||
"description": "Description for image 2 goes here."
|
||||
"src": "/assets/background.jpg"
|
||||
},
|
||||
{
|
||||
"src": "/assets/backgroundImage.png",
|
||||
"title": "Image Title 3",
|
||||
"description": "Description for image 3 goes here."
|
||||
"src": "/assets/backgroundImage.png"
|
||||
},
|
||||
{
|
||||
"src": "/assets/beanieImage.png",
|
||||
"title": "Image Title 4",
|
||||
"description": "Description for image 4 goes here."
|
||||
"src": "/assets/beanieImage.png"
|
||||
}
|
||||
];
|
||||
let currentSlide = 0;
|
||||
function updateSlide(){
|
||||
const slide = jsonData[currentSlide];
|
||||
document.getElementById('slideImage').src = slide.src;
|
||||
document.getElementById('imageTitle').textContent = slide.title;
|
||||
document.getElementById('imageDescription').textContent = slide.description;
|
||||
}
|
||||
document.getElementById('nextButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide + 1) % jsonData.length;
|
||||
@@ -102,7 +94,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
@@ -142,6 +134,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let muteIcon;
|
||||
let retryButton;
|
||||
let maxScore;
|
||||
let erase;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.65;
|
||||
@@ -208,6 +204,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
// console.log(data)
|
||||
// colorList = data.colors;
|
||||
const {image} = data;
|
||||
@@ -248,6 +248,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let colorList;
|
||||
|
||||
function preload() {
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
@@ -297,6 +300,19 @@ import Layout from '../../layouts/Layout.astro';
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
muteIcon.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
// window.location.reload();
|
||||
@@ -708,7 +724,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
|
||||
eraserButton.addEventListener('click', () => {
|
||||
isErasing = !isErasing;
|
||||
erase = false;
|
||||
if (isErasing) {
|
||||
erase = true;
|
||||
eraserButton.style.border = '3px solid #0348A8';
|
||||
eraserButton.style.backgroundColor = '#0348A820';
|
||||
} else {
|
||||
@@ -845,85 +863,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
});
|
||||
}
|
||||
|
||||
// const url = window.location.href;
|
||||
// const gameName = url.split('/');
|
||||
// const gameType = gameName[3].split('?id=');
|
||||
// function submitUserData(drawingZone) {
|
||||
// let imageCode;
|
||||
// // console.log(drawingZone);
|
||||
// drawingZone.renderer.snapshot((image) => {
|
||||
// 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 = 'my_drawing.png';
|
||||
// link.click();
|
||||
// document.body.removeChild(image);
|
||||
// imageCode = image.src;
|
||||
|
||||
|
||||
// let userData = {
|
||||
// 'userID': 'drawing@beanstalkedu.com',
|
||||
// 'gameType': gameType[0],
|
||||
// 'gameID': gameType[1],
|
||||
// 'screenShot': imageCode
|
||||
// // 'starts': formattedDateTime,
|
||||
// // 'game_start' : gameStartTime,
|
||||
// };
|
||||
// console.log(userData);
|
||||
|
||||
// fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type' : 'application/json'
|
||||
// },
|
||||
// body: JSON.stringify(userData)
|
||||
// })
|
||||
// .then(response => {
|
||||
// if(response.ok){
|
||||
// console.log('Data Saved', response)
|
||||
// } else{
|
||||
// // console.log('Something Wrong', response)
|
||||
// }
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.error('An error occured', error)
|
||||
// });
|
||||
|
||||
// // Clear the drawing
|
||||
// // graphics.clear();
|
||||
// });
|
||||
// };
|
||||
// function captureSnapshot(drawingZone) {
|
||||
// submitButton.setVisible(false);
|
||||
// // snapNotice.setVisible(true);
|
||||
// snapshotButton.setVisible(false);
|
||||
// customCursor.setVisible(false);
|
||||
// drawingZone.renderer.snapshot((image) => {
|
||||
// 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 = 'my_drawing.png';
|
||||
// link.click();
|
||||
// document.body.removeChild(image);
|
||||
|
||||
// // Clear the drawing
|
||||
// // graphics.clear();
|
||||
// });
|
||||
// }
|
||||
function startDrawing(x, y) {
|
||||
if (!isErasing) {
|
||||
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
|
||||
@@ -961,12 +900,49 @@ import Layout from '../../layouts/Layout.astro';
|
||||
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||||
};
|
||||
const cursorSize = brushSize * cursorSizeMultiplier;
|
||||
customCursor.clear(); // Clear the previous frame
|
||||
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(1.5, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
// Position the cursor at the current mouse pointer coordinates
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
|
||||
if (erase === true) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
} else if (erase === false) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
// function update() {
|
||||
|
||||
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</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-6xl bg-white rounded-lg">
|
||||
<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>
|
||||
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
|
||||
@@ -49,11 +49,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,6 +59,42 @@ 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"
|
||||
}
|
||||
];
|
||||
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();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
parentMainContainer.classList.add('hidden');
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
@@ -97,24 +128,34 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let noticeWidth;
|
||||
let noticeHeight;
|
||||
let maxScore;
|
||||
let erase;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
let galleryIconWidth;
|
||||
let galleryButton;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
galleryIconWidth = 2;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
galleryIconWidth = 1.81;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
galleryIconWidth = 1.345;
|
||||
}
|
||||
if(isMobile){
|
||||
submitWidth = 250;
|
||||
@@ -169,6 +210,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
colorList = data.colors;
|
||||
defaultColor = colorList[0];
|
||||
const {image1, image2} = data;
|
||||
@@ -209,6 +254,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let colorList;
|
||||
|
||||
function preload() {
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image('image1', assetsList.image1);
|
||||
this.load.image('image2', assetsList.image2);
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
@@ -220,6 +268,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||||
this.load.image('waxTexture', '/assets/texture.png');
|
||||
this.load.image('colorButton', '/assets/color_button.png');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
}
|
||||
|
||||
function create() {
|
||||
@@ -295,9 +344,23 @@ import Layout from '../../layouts/Layout.astro';
|
||||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
muteIcon.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
retryButton.setInteractive().on('pointerdown', ()=>{
|
||||
window.location.reload();
|
||||
graphics.clear();
|
||||
})
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
||||
@@ -316,14 +379,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// parentMainContainer.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
galleryButton.setInteractive().on('pointerdown', () => {
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
gallerySliderId.classList.remove('hidden');
|
||||
});
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
if(!isMobile){
|
||||
// this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
||||
// this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||
} else {
|
||||
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
|
||||
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
outlineImage1.setDepth(-5).setScale(0.28);
|
||||
@@ -340,31 +400,41 @@ import Layout from '../../layouts/Layout.astro';
|
||||
maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
|
||||
const mask = maskGraphics.createGeometryMask();
|
||||
|
||||
|
||||
graphics = this.add.graphics();
|
||||
graphics.setMask(mask);
|
||||
const colorContainer = document.createElement('div');
|
||||
colorContainer.style.zIndex = '1';
|
||||
colorContainer.style.position = 'absolute';
|
||||
colorContainer.style.top = '13%';
|
||||
if(isMobile){
|
||||
colorContainer.style.marginTop = '13%';
|
||||
}
|
||||
colorContainer.style.left = '10px';
|
||||
colorContainer.style.display = 'flex';
|
||||
colorContainer.style.marginBottom = '15px';
|
||||
colorContainer.style.marginBottom = '0';
|
||||
if(!isMobile){
|
||||
colorContainer.style.top = '25%';
|
||||
colorContainer.style.top = '10%';
|
||||
colorContainer.style.flexDirection = 'column';
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
colorContainer.style.flexDirection = 'row';
|
||||
|
||||
}
|
||||
colorContainer.style.backgroundColor = '#FFFFFF';
|
||||
colorContainer.style.padding = '30px 20px';
|
||||
colorContainer.style.borderRadius = '80px';
|
||||
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
|
||||
colorContainer.style.left = '0px';
|
||||
colorContainer.style.top = '50%';
|
||||
colorContainer.style.transform = 'translate(0, -50%)';
|
||||
colorContainer.style.border = '1px solid #F9F9F9';
|
||||
|
||||
let colorEraserCont = document.createElement('div');
|
||||
colorEraserCont.style.display = 'flex';
|
||||
colorEraserCont.style.flexDirection = 'row';
|
||||
|
||||
colorContainer.appendChild(colorEraserCont);
|
||||
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
|
||||
if(!isMobile){
|
||||
colorViewButton.setVisible(false);
|
||||
}
|
||||
!isMobile ? colorViewButton.setVisible(false) : '';
|
||||
// if(!isMobile){colorViewButton.setVisible(false);}
|
||||
|
||||
colorViewButton.setInteractive().on('pointerdown', () => {
|
||||
if(colorContainer.style.display === 'block') {
|
||||
@@ -381,17 +451,47 @@ import Layout from '../../layouts/Layout.astro';
|
||||
buttonsContainer.style.display = 'block';
|
||||
}
|
||||
});
|
||||
const eraserButton = document.createElement('button');
|
||||
eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
|
||||
eraserButton.style.color = 'blue';
|
||||
// eraserButton.style.border = '3px solid blue';
|
||||
// eraserButton.style.color = 'white';
|
||||
eraserButton.style.width = 'fit-content';
|
||||
eraserButton.style.marginRight = '15px';
|
||||
// eraserButton.style.marginTop = '0px';
|
||||
eraserButton.style.marginBottom = '0px';
|
||||
if(isMobile){
|
||||
eraserButton.style.padding = '4px 4px';
|
||||
}else{
|
||||
eraserButton.style.padding = '5px 9px';
|
||||
eraserButton.style.top = '50%';
|
||||
eraserButton.style.marginBottom = '15px';
|
||||
}
|
||||
eraserButton.style.fontWeight = 'bold';
|
||||
eraserButton.style.borderRadius = '20%';
|
||||
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
|
||||
eraserButton.addEventListener('click', () => {
|
||||
isErasing = !isErasing;
|
||||
erase = false;
|
||||
if (isErasing) {
|
||||
erase = true;
|
||||
eraserButton.style.border = '3px solid #0348A8';
|
||||
eraserButton.style.backgroundColor = '#0348A820';
|
||||
} else {
|
||||
// Return to drawing mode
|
||||
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
|
||||
eraserButton.style.color = 'blue';
|
||||
eraserButton.style.border = 'none';
|
||||
eraserButton.style.backgroundColor = 'transparent';
|
||||
}
|
||||
});
|
||||
var colors = colorList;
|
||||
const buttonSize = 60;
|
||||
const buttonSpacing = 15;
|
||||
const clearEraserContainer = document.createElement('div');
|
||||
clearEraserContainer.style.display = 'flex';
|
||||
clearEraserContainer.style.flexDirection = 'row';
|
||||
if(isMobile){
|
||||
clearEraserContainer.style.marginTop = '-60px';
|
||||
}else{
|
||||
clearEraserContainer.style.marginTop = '40px';
|
||||
}
|
||||
isMobile ? clearEraserContainer.style.marginTop = '-60px' : clearEraserContainer.style.marginTop = '40px';
|
||||
const colorButtonsContainer = document.createElement('div');
|
||||
colorButtonsContainer.style.display = 'flex';
|
||||
colorButtonsContainer.style.flexDirection = 'column';
|
||||
@@ -596,51 +696,15 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// Create the Clear button
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
||||
// // clearButton.style.border = '3px solid blue';
|
||||
// clearButton.style.color = 'blue';
|
||||
// clearButton.style.width = 'fit-content';
|
||||
// clearButton.style.marginLeft = '30px';
|
||||
if(isMobile){
|
||||
clearButton.style.padding = '2px 8px';
|
||||
buttonsContainer.style.top = '17%';
|
||||
} else {
|
||||
clearButton.style.padding = '5px 10px';
|
||||
}
|
||||
// clearButton.style.fontWeight = 'bold';
|
||||
// clearButton.style.borderRadius = '20%';
|
||||
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
|
||||
clearButton.addEventListener('click', () => {
|
||||
clearDrawing();
|
||||
});
|
||||
// Create the Eraser button
|
||||
const eraserButton = document.createElement('button');
|
||||
// eraserButton.textContent = 'Eraser';
|
||||
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
|
||||
eraserButton.style.color = 'blue';
|
||||
eraserButton.style.width = 'fit-content';
|
||||
eraserButton.style.marginLeft = '30px';
|
||||
|
||||
eraserButton.style.fontWeight = 'bold';
|
||||
eraserButton.style.borderRadius = '20%';
|
||||
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
|
||||
eraserButton.addEventListener('click', () => {
|
||||
isErasing = !isErasing;
|
||||
if (isErasing) {
|
||||
// eraserButton.style.backgroundColor = 'red';
|
||||
eraserButton.style.color = 'red';
|
||||
eraserButton.style.border = '3px solid red';
|
||||
} else {
|
||||
// Return to drawing mode
|
||||
// eraserButton.style.backgroundColor = 'green';
|
||||
eraserButton.style.color = 'blue';
|
||||
eraserButton.style.border = 'none';
|
||||
}
|
||||
});
|
||||
// Add the Clear and Eraser buttons to the container
|
||||
clearEraserContainer.appendChild(eraserButton);
|
||||
clearEraserContainer.appendChild(clearButton);
|
||||
// buttonsContainer.appendChild(clearButton);
|
||||
buttonsContainer.appendChild(clearEraserContainer);
|
||||
|
||||
colorEraserCont.append(eraserButton);
|
||||
colorEraserCont.append(clearButton);
|
||||
// buttonsContainer.appendChild(clearEraserContainer);
|
||||
|
||||
|
||||
const sliderContainer = document.createElement('div');
|
||||
sliderContainer.className = 'slider-container';
|
||||
@@ -717,10 +781,17 @@ import Layout from '../../layouts/Layout.astro';
|
||||
submitButton.setVisible(false);
|
||||
snapshotButton.setVisible(false);
|
||||
customCursor.setVisible(false);
|
||||
muteIcon.setVisible(false);
|
||||
retryButton.setVisible(false);
|
||||
galleryButton.setVisible(false);
|
||||
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
submitButton.setVisible(true);
|
||||
snapshotButton.setVisible(true);
|
||||
customCursor.setVisible(true);
|
||||
muteIcon.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
galleryButton.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
@@ -772,12 +843,49 @@ import Layout from '../../layouts/Layout.astro';
|
||||
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||||
};
|
||||
const cursorSize = brushSize * cursorSizeMultiplier;
|
||||
customCursor.clear(); // Clear the previous frame
|
||||
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(1.5, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
// Position the cursor at the current mouse pointer coordinates
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(defaultColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
|
||||
if (erase === true) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
} else if (erase === false) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(defaultColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</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-6xl bg-white rounded-lg">
|
||||
<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>
|
||||
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
|
||||
@@ -64,6 +64,42 @@ 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"
|
||||
}
|
||||
];
|
||||
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();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
parentMainContainer.classList.add('hidden');
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
@@ -89,6 +125,12 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
let maxScore;
|
||||
let erase;
|
||||
let audioData;
|
||||
let audioFileId = false;
|
||||
let isPlaying = false;
|
||||
let galleryIconWidth;
|
||||
let galleryButton;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
@@ -96,18 +138,21 @@ import Layout from '../../layouts/Layout.astro';
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
galleryIconWidth = 2;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
galleryIconWidth = 1.81;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
galleryIconWidth = 1.345;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
@@ -153,6 +198,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
|
||||
// console.log(data)
|
||||
// colorList = data.colors;
|
||||
const {image} = data;
|
||||
@@ -192,6 +241,9 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let colorList;
|
||||
|
||||
function preload() {
|
||||
if(audioFileId === true){
|
||||
this.load.audio('instructAudio', audioData)
|
||||
}
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
@@ -201,6 +253,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
||||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||||
this.load.image('colorButton', '/assets/color_button.png');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
}
|
||||
|
||||
function create() {
|
||||
@@ -276,10 +329,23 @@ import Layout from '../../layouts/Layout.astro';
|
||||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
// galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
|
||||
if(audioFileId === true){
|
||||
let instructionAudio = this.sound.add('instructAudio')
|
||||
muteIcon.setInteractive().on('pointerdown', () => {
|
||||
if(isPlaying === false){
|
||||
instructionAudio.play()
|
||||
isPlaying = true
|
||||
} else if(isPlaying === true) {
|
||||
instructionAudio.stop();
|
||||
isPlaying = false
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
graphics.clear();
|
||||
})
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
||||
@@ -298,6 +364,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// parentMainContainer.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
galleryButton.setInteractive().on('pointerdown', () => {
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
gallerySliderId.classList.remove('hidden');
|
||||
});
|
||||
// const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
// if(!isMobile){
|
||||
// this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
||||
@@ -333,13 +403,26 @@ import Layout from '../../layouts/Layout.astro';
|
||||
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
colorContainer.style.flexDirection = 'row';
|
||||
}
|
||||
|
||||
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
|
||||
if(!isMobile){
|
||||
colorViewButton.setVisible(false);
|
||||
}
|
||||
|
||||
!isMobile ? colorViewButton.setVisible(false) : '';
|
||||
|
||||
colorContainer.style.backgroundColor = '#FFFFFF';
|
||||
colorContainer.style.padding = '30px 20px';
|
||||
colorContainer.style.borderRadius = '80px';
|
||||
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
|
||||
colorContainer.style.left = '0px';
|
||||
colorContainer.style.top = '50%';
|
||||
colorContainer.style.transform = 'translate(0, -50%)';
|
||||
colorContainer.style.border = '1px solid #F9F9F9';
|
||||
|
||||
let colorEraserCont = document.createElement('div');
|
||||
colorEraserCont.style.display = 'flex';
|
||||
colorEraserCont.style.flexDirection = 'row';
|
||||
|
||||
colorContainer.appendChild(colorEraserCont);
|
||||
colorViewButton.setInteractive().on('pointerdown', () => {
|
||||
if(colorContainer.style.display === 'block') {
|
||||
colorContainer.style.display = 'none';
|
||||
@@ -376,7 +459,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Append the color picker to the color container data
|
||||
colorContainer.appendChild(colorPicker);
|
||||
|
||||
// colorContainer.appendChild(colorPicker);
|
||||
// const colors = data.colors;
|
||||
// var colors = colorList;
|
||||
let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
|
||||
@@ -600,39 +684,14 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// Create the Clear button
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
||||
// clearButton.style.border = '3px solid blue';
|
||||
// clearButton.style.color = 'blue';
|
||||
// clearButton.style.width = 'fit-content';
|
||||
// clearButton.style.marginRight = '10px';
|
||||
if(isMobile){
|
||||
clearButton.style.padding = '2px 8px';
|
||||
buttonsContainer.style.top = '100px';
|
||||
buttonsContainer.style.marginLeft = '30px';
|
||||
clearButton.style.marginTop = '-15px';
|
||||
|
||||
}else if(isTab){
|
||||
clearButton.style.marginTop = '-100px';
|
||||
} else {
|
||||
clearButton.style.padding = '5px 10px';
|
||||
clearButton.style.marginTop = '-115px';
|
||||
}
|
||||
// clearButton.style.fontWeight = 'bold';
|
||||
// clearButton.style.borderRadius = '20%';
|
||||
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
|
||||
|
||||
clearButton.addEventListener('click', () => {
|
||||
clearDrawing();
|
||||
});
|
||||
|
||||
if(isMobile){
|
||||
clearButton.style.display = 'none';
|
||||
}
|
||||
|
||||
colorViewButton.setInteractive().on('pointerdown', () => {
|
||||
if(clearButton.style.display === 'block') {
|
||||
clearButton.style.display = 'none';
|
||||
}else{
|
||||
clearButton.style.display = 'block';
|
||||
}
|
||||
clearButton.style.display === 'block' ? clearButton.style.display = 'none' : clearButton.style.display = 'block';
|
||||
});
|
||||
|
||||
// Create the Eraser button
|
||||
@@ -670,7 +729,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Add the Clear and Eraser buttons to the container
|
||||
buttonsContainer.appendChild(clearButton);
|
||||
colorEraserCont.append(colorPicker);
|
||||
colorEraserCont.append(clearButton);
|
||||
// buttonsContainer.appendChild(eraserButton).setVisible;
|
||||
|
||||
const sliderContainer = document.createElement('div');
|
||||
@@ -764,10 +824,17 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// snapNotice.setVisible(true);
|
||||
snapshotButton.setVisible(false);
|
||||
customCursor.setVisible(false);
|
||||
muteIcon.setVisible(false);
|
||||
retryButton.setVisible(false);
|
||||
galleryButton.setVisible(false);
|
||||
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
submitButton.setVisible(true);
|
||||
snapshotButton.setVisible(true);
|
||||
customCursor.setVisible(true);
|
||||
muteIcon.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
galleryButton.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
@@ -821,12 +888,49 @@ import Layout from '../../layouts/Layout.astro';
|
||||
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||||
};
|
||||
const cursorSize = brushSize * cursorSizeMultiplier;
|
||||
customCursor.clear(); // Clear the previous frame
|
||||
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(1.5, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
// Position the cursor at the current mouse pointer coordinates
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
|
||||
if (erase === true) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
} else if (erase === false) {
|
||||
customCursor.clear();
|
||||
customCursor.lineStyle(3, 0x000000);
|
||||
customCursor.strokeCircle(0, 0, cursorSize);
|
||||
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
|
||||
customCursor.fillCircle(0, 0, cursorSize);
|
||||
customCursor.x = this.input.x;
|
||||
customCursor.y = this.input.y;
|
||||
|
||||
customCursor.moveTo(0, -cursorSize+3);
|
||||
customCursor.lineTo(0, cursorSize-3);
|
||||
|
||||
customCursor.moveTo(-cursorSize + 3, 0);
|
||||
customCursor.lineTo(cursorSize-3, 0);
|
||||
customCursor.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
// function update() {
|
||||
|
||||
@@ -14,11 +14,64 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/tracing-done.svg" alt="Clip Art" class="clip-art">
|
||||
</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>
|
||||
<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">
|
||||
<img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveTracingGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const findBuddies = JSON.parse(localStorage.getItem('userChildDetails') || '{}');
|
||||
const buddiesName = findBuddies.metadata?.sprite || 'No sprite found'
|
||||
console.log('buddName', buddiesName);
|
||||
// fetch(`https://preschool-curriculum.in/api/one/v1//akademy/students/668ce00ae4714c0da8c17d4e`)
|
||||
const jsonData = [
|
||||
{
|
||||
"src": "/assets/back.jpeg"
|
||||
},
|
||||
{
|
||||
"src": "/assets/background.jpg"
|
||||
},
|
||||
{
|
||||
"src": "/assets/backgroundImage.png"
|
||||
},
|
||||
{
|
||||
"src": "/assets/beanieImage.png"
|
||||
}
|
||||
];
|
||||
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();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
@@ -60,6 +113,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let gameStartTime = "start time here";
|
||||
let demoButton;
|
||||
let maxScore;
|
||||
let galleryButton;
|
||||
|
||||
if(isMobile){
|
||||
cloudeSize = 200;
|
||||
@@ -149,6 +203,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
@@ -165,6 +220,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
const borderBottom = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
const lineWidth = window.innerWidth;
|
||||
@@ -181,7 +237,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
// parentMainContainer.classList.remove('hidden');
|
||||
})
|
||||
});
|
||||
galleryButton.setInteractive().on('pointerdown', () => {
|
||||
// parentMainContainer.classList.remove('hidden');
|
||||
gallerySliderId.classList.remove('hidden');
|
||||
});
|
||||
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
|
||||
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
|
||||
|
||||
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="audioPlayAndPause();" id="instructionButton"><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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea_copy"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<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">
|
||||
@@ -102,8 +102,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,9 +111,31 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -173,7 +195,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
// console.log(gameData)
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
|
||||
// console.log(audioLink)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
document.getElementById("label1").innerHTML = gameData.label1;
|
||||
@@ -193,14 +220,13 @@ import Layout from "../../layouts/Layout.astro";
|
||||
if(gameData.label6){
|
||||
document.getElementById("label6").innerHTML = gameData.label6;
|
||||
}
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
const imageId = `image${i}`;
|
||||
document.getElementById(imageId).src = assetsURL + gameData[imageId];
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function checkResult2(id) {
|
||||
@@ -324,7 +350,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -408,7 +434,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea_copy"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<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" class="flex flex-col justify-center">
|
||||
@@ -126,8 +126,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,9 +135,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -196,6 +217,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
@@ -226,7 +251,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById("label9").innerHTML = gameData.label9;
|
||||
}
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
const imageId = `image${i}`;
|
||||
@@ -353,7 +378,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -435,7 +460,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -12,11 +12,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
<button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</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>
|
||||
@@ -84,8 +83,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,9 +92,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -154,6 +174,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameLabel").innerHTML = gameData.label;
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
@@ -276,7 +300,7 @@ 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/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -99,18 +99,39 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -131,6 +152,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
@@ -152,7 +177,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById("label6").innerHTML = gameData.label6;
|
||||
}
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
|
||||
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
@@ -318,7 +343,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -396,7 +421,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea_copy"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<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" class="flex flex-col justify-center">
|
||||
@@ -125,8 +125,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p> </div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,9 +134,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -193,6 +214,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
@@ -223,7 +248,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById("label9").innerHTML = gameData.label9;
|
||||
}
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
const imageId = `image${i}`;
|
||||
@@ -360,7 +385,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -437,7 +462,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -13,9 +13,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.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><img src="/assets/svg/cancel.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"> -->
|
||||
@@ -84,8 +84,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p> </div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button 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 class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,9 +93,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
if(isPlaying === false){
|
||||
document.getElementById('audioPlayer').play();
|
||||
isPlaying = true;
|
||||
}else if(isPlaying === true){
|
||||
document.getElementById('audioPlayer').pause();
|
||||
document.getElementById('audioPlayer').currentTime = 0;
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
@@ -121,6 +142,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
|
||||
document.getElementById('instrucAudio1').src = audioLink;
|
||||
document.getElementById('instrucAudio2').src = audioLink;
|
||||
document.querySelector('audio').load();
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameLabel").innerHTML = gameData.label;
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
@@ -287,7 +312,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<div>
|
||||
<audio controls>
|
||||
<source src="horse.ogg" type="audio/ogg">
|
||||
<source id="audioFile" src="horse.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
fetch('https://game-du.teachertrainingkolkata.in/items/game_drag/19')
|
||||
.then(response => response.json())
|
||||
.then(responseData => {
|
||||
console.log(responseData); // Log the full response
|
||||
|
||||
// Check if the data contains the 'instruction' field
|
||||
const instructionId = responseData.data.instruction;
|
||||
|
||||
// Assuming you need to build the full URL from this instruction ID
|
||||
const audioUrl = `https://game-du.teachertrainingkolkata.in/assets/${instructionId}.mp3`;
|
||||
console.log(audioUrl)
|
||||
|
||||
// Set the audio source dynamically
|
||||
document.getElementById('audioFile').src = audioUrl;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching audio source:', error);
|
||||
});
|
||||
</script>
|
||||
|
||||
2
task/27.11.2024.txt
Normal file
2
task/27.11.2024.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
Gallery Implement in all drawing games?
|
||||
The new design for Buzzboard is hard to achieve so its need to develope from base lavel
|
||||
Reference in New Issue
Block a user