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

s1

newb
Suvodip 2024-12-12 16:36:08 +05:30
parent 8e96e7b4ba
commit cedb4ad01e
6 changed files with 247 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/drawing/drawing_phonics.astro
View File

@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
</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 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"> <div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p> <p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button> <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="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> <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> </div>
</div> </div>
@ -64,6 +59,42 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script src="/saveGameAI.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <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() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show'); clipArt.classList.add('show');
@ -93,6 +124,8 @@ import Layout from '../../layouts/Layout.astro';
let audioData; let audioData;
let audioFileId = false; let audioFileId = false;
let isPlaying = false; let isPlaying = false;
let galleryIconWidth;
let galleryButton;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
@ -100,18 +133,21 @@ import Layout from '../../layouts/Layout.astro';
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){ }else if(isTab){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.6; muteIconWidth = 1.6;
resetIconWidth = 1.43; resetIconWidth = 1.43;
tickIconWidth = 1.29; tickIconWidth = 1.29;
cancelIconWidth = 1.18; cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{ }else{
topLogoWidth = 6; topLogoWidth = 6;
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
tickIconWidth = 1.222; tickIconWidth = 1.222;
cancelIconWidth = 1.185; cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
} }
if(isMobile){ if(isMobile){
submitWidth = 250; submitWidth = 250;
@ -211,6 +247,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('colorButton', '/assets/color_button.png'); this.load.image('colorButton', '/assets/color_button.png');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
} }
function create() { function create() {
@ -253,6 +290,7 @@ import Layout from '../../layouts/Layout.astro';
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon"); muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
@ -288,6 +326,10 @@ import Layout from '../../layouts/Layout.astro';
// parentMainContainer.classList.remove('hidden'); // parentMainContainer.classList.remove('hidden');
} }
}); });
galleryButton.setInteractive().on('pointerdown', () => {
parentMainContainer.classList.remove('hidden');
gallerySliderId.classList.remove('hidden');
});
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
@ -771,10 +813,17 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setVisible(false); submitButton.setVisible(false);
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
muteIcon.setVisible(false);
retryButton.setVisible(false);
galleryButton.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
muteIcon.setVisible(true);
retryButton.setVisible(true);
galleryButton.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';
image.style.height = '120px'; image.style.height = '120px';
image.style.paddingLeft = '2px'; image.style.paddingLeft = '2px';

64
src/pages/drawing/drawing_writo.astro
View File

@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
</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 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"> <div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p> <p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button> <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="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> <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> </div>
</div> </div>
@ -64,6 +59,42 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script src="/saveGameAI.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <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() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show'); clipArt.classList.add('show');
@ -93,24 +124,30 @@ import Layout from '../../layouts/Layout.astro';
let audioData; let audioData;
let audioFileId = false; let audioFileId = false;
let isPlaying = false; let isPlaying = false;
let galleryIconWidth;
let galleryButton;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){ }else if(isTab){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.6; muteIconWidth = 1.6;
resetIconWidth = 1.43; resetIconWidth = 1.43;
tickIconWidth = 1.29; tickIconWidth = 1.29;
cancelIconWidth = 1.18; cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{ }else{
topLogoWidth = 6; topLogoWidth = 6;
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
tickIconWidth = 1.222; tickIconWidth = 1.222;
cancelIconWidth = 1.185; cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
} }
if(isMobile){ if(isMobile){
@ -211,6 +248,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('colorButton', '/assets/color_button.png'); this.load.image('colorButton', '/assets/color_button.png');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
} }
function create() { function create() {
@ -255,6 +293,7 @@ import Layout from '../../layouts/Layout.astro';
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon"); muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
if(audioFileId === true){ if(audioFileId === true){
let instructionAudio = this.sound.add('instructAudio') let instructionAudio = this.sound.add('instructAudio')
@ -292,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',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
// this.add.text(customWidth / 10, 20, "Drawing", textStyle); // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@ -767,10 +811,18 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setVisible(false); submitButton.setVisible(false);
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
muteIcon.setVisible(false);
retryButton.setVisible(false);
galleryButton.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
muteIcon.setVisible(true);
retryButton.setVisible(true);
galleryButton.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';
image.style.height = '120px'; image.style.height = '120px';
image.style.paddingLeft = '2px'; image.style.paddingLeft = '2px';

36
src/pages/drawing/index.astro
View File

@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
</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 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"> <div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p> <p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button> <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="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> <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> </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" /> <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> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
<!-- http://localhost:2022/drawing/?id=525&userId=6746c2e9cd3b551fae55cb67&gameName=birdWS1 -->
</Layout> </Layout>
<script src="/saveGameAI.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <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 = [ const jsonData = [
{ {
"src": "/assets/back.jpeg", "src": "/assets/back.jpeg"
"title": "Image Title 1",
"description": "Description for image 1 goes here."
}, },
{ {
"src": "/assets/background.jpg", "src": "/assets/background.jpg"
"title": "Image Title 2",
"description": "Description for image 2 goes here."
}, },
{ {
"src": "/assets/backgroundImage.png", "src": "/assets/backgroundImage.png"
"title": "Image Title 3",
"description": "Description for image 3 goes here."
}, },
{ {
"src": "/assets/beanieImage.png", "src": "/assets/beanieImage.png"
"title": "Image Title 4",
"description": "Description for image 4 goes here."
} }
]; ];
let currentSlide = 0; let currentSlide = 0;
function updateSlide(){ function updateSlide(){
const slide = jsonData[currentSlide]; const slide = jsonData[currentSlide];
document.getElementById('slideImage').src = slide.src; document.getElementById('slideImage').src = slide.src;
document.getElementById('imageTitle').textContent = slide.title;
document.getElementById('imageDescription').textContent = slide.description;
} }
document.getElementById('nextButton').addEventListener('click', () => { document.getElementById('nextButton').addEventListener('click', () => {
currentSlide = (currentSlide + 1) % jsonData.length; currentSlide = (currentSlide + 1) % jsonData.length;
@ -102,7 +94,7 @@ import Layout from '../../layouts/Layout.astro';
document.getElementById('prevButton').addEventListener('click', () => { document.getElementById('prevButton').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length; currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
updateSlide(); updateSlide();
}) })
updateSlide(); updateSlide();
let parentMainContainer = document.getElementById('parentMainContainer'); let parentMainContainer = document.getElementById('parentMainContainer');
let gallerySliderId = document.getElementById('gallerySliderId'); let gallerySliderId = document.getElementById('gallerySliderId');

62
src/pages/drawing/v2.astro
View File

@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
</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 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"> <div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p> <p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button> <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="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> <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> </div>
</div> </div>
@ -64,6 +59,42 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script src="/saveGameAI.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <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() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show'); clipArt.classList.add('show');
@ -101,24 +132,30 @@ import Layout from '../../layouts/Layout.astro';
let audioData; let audioData;
let audioFileId = false; let audioFileId = false;
let isPlaying = false; let isPlaying = false;
let galleryIconWidth;
let galleryButton;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){ }else if(isTab){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.6; muteIconWidth = 1.6;
resetIconWidth = 1.43; resetIconWidth = 1.43;
tickIconWidth = 1.29; tickIconWidth = 1.29;
cancelIconWidth = 1.18; cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{ }else{
topLogoWidth = 6; topLogoWidth = 6;
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
tickIconWidth = 1.222; tickIconWidth = 1.222;
cancelIconWidth = 1.185; cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
} }
if(isMobile){ if(isMobile){
submitWidth = 250; submitWidth = 250;
@ -231,6 +268,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png'); this.load.image('waxTexture', '/assets/texture.png');
this.load.image('colorButton', '/assets/color_button.png'); this.load.image('colorButton', '/assets/color_button.png');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
} }
function create() { function create() {
@ -306,6 +344,7 @@ import Layout from '../../layouts/Layout.astro';
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon"); muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
if(audioFileId === true){ if(audioFileId === true){
let instructionAudio = this.sound.add('instructAudio') let instructionAudio = this.sound.add('instructAudio')
@ -340,6 +379,10 @@ import Layout from '../../layouts/Layout.astro';
// parentMainContainer.classList.remove('hidden'); // parentMainContainer.classList.remove('hidden');
} }
}); });
galleryButton.setInteractive().on('pointerdown', () => {
parentMainContainer.classList.remove('hidden');
gallerySliderId.classList.remove('hidden');
});
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(isMobile){ if(isMobile){
@ -738,10 +781,17 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setVisible(false); submitButton.setVisible(false);
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
muteIcon.setVisible(false);
retryButton.setVisible(false);
galleryButton.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
muteIcon.setVisible(true);
retryButton.setVisible(true);
galleryButton.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';
image.style.height = '120px'; image.style.height = '120px';
image.style.paddingLeft = '2px'; image.style.paddingLeft = '2px';

57
src/pages/drawing/v3.astro
View File

@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
</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 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"> <div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p> <p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button> <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@ -64,6 +64,42 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script src="/saveGameAI.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <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() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show'); clipArt.classList.add('show');
@ -93,6 +129,8 @@ import Layout from '../../layouts/Layout.astro';
let audioData; let audioData;
let audioFileId = false; let audioFileId = false;
let isPlaying = false; let isPlaying = false;
let galleryIconWidth;
let galleryButton;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
@ -100,18 +138,21 @@ import Layout from '../../layouts/Layout.astro';
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){ }else if(isTab){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.6; muteIconWidth = 1.6;
resetIconWidth = 1.43; resetIconWidth = 1.43;
tickIconWidth = 1.29; tickIconWidth = 1.29;
cancelIconWidth = 1.18; cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{ }else{
topLogoWidth = 6; topLogoWidth = 6;
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
tickIconWidth = 1.222; tickIconWidth = 1.222;
cancelIconWidth = 1.185; cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
} }
if(isMobile){ if(isMobile){
@ -212,6 +253,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('colorButton', '/assets/color_button.png'); this.load.image('colorButton', '/assets/color_button.png');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
} }
function create() { function create() {
@ -287,7 +329,7 @@ import Layout from '../../layouts/Layout.astro';
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon"); muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); 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){ if(audioFileId === true){
let instructionAudio = this.sound.add('instructAudio') let instructionAudio = this.sound.add('instructAudio')
@ -322,6 +364,10 @@ import Layout from '../../layouts/Layout.astro';
// parentMainContainer.classList.remove('hidden'); // parentMainContainer.classList.remove('hidden');
} }
}); });
galleryButton.setInteractive().on('pointerdown', () => {
parentMainContainer.classList.remove('hidden');
gallerySliderId.classList.remove('hidden');
});
// const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; // const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
// if(!isMobile){ // if(!isMobile){
// this.add.text(customWidth / 10, 20, "Drawing", textStyle); // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@ -778,10 +824,17 @@ import Layout from '../../layouts/Layout.astro';
// snapNotice.setVisible(true); // snapNotice.setVisible(true);
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
muteIcon.setVisible(false);
retryButton.setVisible(false);
galleryButton.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
muteIcon.setVisible(true);
retryButton.setVisible(true);
galleryButton.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';
image.style.height = '120px'; image.style.height = '120px';
image.style.paddingLeft = '2px'; image.style.paddingLeft = '2px';

29
src/pages/guided-tracing/A.astro
View File

@ -15,7 +15,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
</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 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"> <div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p> <p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button> <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@ -25,11 +25,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="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> <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> </div>
</div> </div>
@ -38,34 +33,28 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script src="/saveTracingGameData.js" is:inline></script> <script src="/saveTracingGameData.js" is:inline></script>
<script is:inline> <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 = [ const jsonData = [
{ {
"src": "/assets/back.jpeg", "src": "/assets/back.jpeg"
"title": "Image Title 1",
"description": "Description for image 1 goes here."
}, },
{ {
"src": "/assets/background.jpg", "src": "/assets/background.jpg"
"title": "Image Title 2",
"description": "Description for image 2 goes here."
}, },
{ {
"src": "/assets/backgroundImage.png", "src": "/assets/backgroundImage.png"
"title": "Image Title 3",
"description": "Description for image 3 goes here."
}, },
{ {
"src": "/assets/beanieImage.png", "src": "/assets/beanieImage.png"
"title": "Image Title 4",
"description": "Description for image 4 goes here."
} }
]; ];
let currentSlide = 0; let currentSlide = 0;
function updateSlide(){ function updateSlide(){
const slide = jsonData[currentSlide]; const slide = jsonData[currentSlide];
document.getElementById('slideImage').src = slide.src; document.getElementById('slideImage').src = slide.src;
document.getElementById('imageTitle').textContent = slide.title;
document.getElementById('imageDescription').textContent = slide.description;
} }
document.getElementById('nextButton').addEventListener('click', () => { document.getElementById('nextButton').addEventListener('click', () => {
currentSlide = (currentSlide + 1) % jsonData.length; currentSlide = (currentSlide + 1) % jsonData.length;