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

newb

pull/28/head
Suvodip 2024-10-26 18:57:45 +05:30
parent fb3ef37bad
commit 41ae75207b
4 changed files with 560 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/saveGameAI.js
View File

@ -50,11 +50,14 @@
function submitUserData(drawingZone) { function submitUserData(drawingZone) {
submitButton.setVisible(false); submitButton.setVisible(false);
if(!gameType[0] === 'guided-tracing'){
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
galleryButton.setVisible(false);
}
muteIcon.setVisible(false); muteIcon.setVisible(false);
retryButton.setVisible(false); retryButton.setVisible(false);
galleryButton.setVisible(false);
const endTime = Date.now(); const endTime = Date.now();
const timeDifference = endTime - startTime; const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000; const timeDifferenceInSeconds = timeDifference / 1000;
@ -64,11 +67,15 @@ function submitUserData(drawingZone) {
// console.log('This is from main point', scoreTotal); // console.log('This is from main point', scoreTotal);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); submitButton.setVisible(true);
if(!gameType[0] == "guided-tracing"){
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
galleryButton.setVisible(true);
}
muteIcon.setVisible(true); muteIcon.setVisible(true);
retryButton.setVisible(true); retryButton.setVisible(true);
galleryButton.setVisible(true);
if(gameType[0] == 'drawing'){ if(gameType[0] == 'drawing'){
// submitButton.setVisible(true); // submitButton.setVisible(true);
// snapshotButton.setVisible(true); // snapshotButton.setVisible(true);

229
src/pages/guided-tracing/0.astro
View File

@ -3,14 +3,75 @@ import Layout from "../../layouts/Layout.astro";
--- ---
<Layout title="Guided Letter Tracing Game"> <Layout title="Guided Letter Tracing Game">
<main> <main>
<div> <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
<div class="flex justify-center items-center h-screen ">
<button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
</div>
</div>
<div id="parentMainContainer"class="hidden">
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
</div>
<div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
<div class="flex flex-row space-x-4 items-center justify-center">
<div id="star-container"></div>
</div>
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
</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 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-10 right-10" id="bottomAnimateClipart">
<div class="flex flex-row z-50 place-items-end clip-art">
<img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
<img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
<img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
<!-- Content -->
<div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
<p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
<button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
<a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
</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 class="w-full 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 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>
<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>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <script is:inline>
function showAnimation() {
const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show');
}
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
@ -39,7 +100,7 @@ import Layout from "../../layouts/Layout.astro";
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
const customWidth = window.innerWidth; const customWidth = window.innerWidth;
const customHeight = window.innerHeight; const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer; let firstLayer;
let graphics; let graphics;
let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
@ -70,23 +131,6 @@ import Layout from "../../layouts/Layout.astro";
tickIconWidth = 1.21; tickIconWidth = 1.21;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
galleryIconWidth = 2; 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; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -94,24 +138,7 @@ import Layout from "../../layouts/Layout.astro";
downloadWidth = 67; downloadWidth = 67;
downloadHeight = 200; downloadHeight = 200;
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400;
}else {
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
noticeHeight = 0;
downloadWidth = 180;
downloadHeight = 70;
learningWidth = 450;
learningHeight = 400
}
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 30; letterHeight = 30;
letterScale = 1.8; letterScale = 1.8;
backgroundScale = 0.8; backgroundScale = 0.8;
@ -130,11 +157,30 @@ import Layout from "../../layouts/Layout.astro";
submitHeight = customHeight / 1.1; submitHeight = customHeight / 1.1;
noticeWidth = window.innerWidth * 0.5 - 100; noticeWidth = window.innerWidth * 0.5 - 100;
noticeHeight = window.innerHeight * 0.38; noticeHeight = window.innerHeight * 0.38;
}else if(isTab){
// topLogoWidth = 4.5;
// muteIconWidth = 1.6;
// resetIconWidth = 1.43;
// tickIconWidth = 1.29;
// cancelIconWidth = 1.18;
// galleryIconWidth = 1.81;
}else{ }else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
noticeHeight = 0;
downloadWidth = 180;
downloadHeight = 70;
learningWidth = 450;
learningHeight = 400;
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10; letterHeight = 10;
letterScale = 1.8; letterScale = 1.8;
backgroundScale = 1; backgroundScale = 1;
@ -154,6 +200,7 @@ import Layout from "../../layouts/Layout.astro";
noticeWidth = window.innerWidth * 0.5 - 120; noticeWidth = window.innerWidth * 0.5 - 120;
noticeHeight = window.innerHeight * 0.32; noticeHeight = window.innerHeight * 0.32;
} }
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
formattedDateTime = currentDate.toLocaleString(); formattedDateTime = currentDate.toLocaleString();
@ -201,24 +248,26 @@ import Layout from "../../layouts/Layout.astro";
borderBottom.lineTo(x + lineWidth, y); borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath(); borderBottom.strokePath();
submitButton = this.add.text(submitWidth, submitHeight, "Submit", { // submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
font: '900 24px Quicksand', // font: '900 24px Quicksand',
fill: '#05b3a4', // fill: '#05b3a4',
backgroundColor : '#7c4c23', // backgroundColor : '#7c4c23',
padding: {x: 10, y: 10}, // padding: {x: 10, y: 10},
shadow: { // shadow: {
offsetX : 2, // offsetX : 2,
offsetY : 2, // offsetY : 2,
color: '#000', // color: '#000',
blur: 5, // blur: 5,
fill: true // fill: true
} // }
}); // });
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitUserData(this); submitUserData(this);
showAnimation();
parentMainContainer.classList.remove('hidden');
}) })
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@ -324,20 +373,22 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand', document.getElementById('beforeStartBtn').addEventListener('click', function() {
fill: '#05b3a4', document.getElementById('blurDisplay').classList.add('hidden');
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
audioOneAudio.play(); audioOneAudio.play();
gamestart = new Date();
gameStartTime = gamestart.toLocaleString();
firstTextLayer.setVisible(true);
animatedLetter.setVisible(false);
firstScreen.setVisible(false);
graphics.setVisible(true);
demoButton.setVisible(true);
submitButton.setVisible(true);
})
// audioOneAudio.play();
// startButton.setInteractive().on('pointerdown', () => { // startButton.setInteractive().on('pointerdown', () => {
// audioOneAudio.play(); // audioOneAudio.play();
// // gmStartTime(); // // gmStartTime();
@ -355,9 +406,49 @@ import Layout from "../../layouts/Layout.astro";
} }
// function beforeStartGame(){
// audioOneAudio.play();
// document.getElementById('blurDisplay').classList.add('hidden');
// }
function update() { function update() {
} }
</script> </script>
<style>
.clear-button {
background-color: blue;
}
/* Animation styles */
@keyframes slideInUp {
0% {
opacity: 0;
transform: translateY(100%); /* Start below the viewport */
}
100% {
opacity: 1;
transform: translateY(0); /* End at its original position */
}
}
.clip-art-container {
overflow: hidden; /* Prevents overflow during the animation */
}
.clip-art {
transform: translateX(100%); /* Initially off-screen to the right */
opacity: 0; /* Initially hidden */
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
}
.clip-art.show {
transform: translateX(0); /* Move the image into view */
opacity: 1; /* Fade in */
}
.slide{
display: none;
}
.active{
display: block;
}
</style>

335
src/pages/guided-tracing/1.astro
View File

@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
--- ---
<Layout title="Guided Letter Tracing Game"> <Layout title="Guided Letter Tracing Game">
<main> <main>
<div> <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
<div class="flex justify-center items-center h-screen ">
<button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
</div>
</div>
<div id="parentMainContainer"class="hidden">
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
</div>
<div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
<div class="flex flex-row space-x-4 items-center justify-center">
<div id="star-container"></div>
</div>
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
</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 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-10 right-10" id="bottomAnimateClipart">
<div class="flex flex-row z-50 place-items-end clip-art">
<img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
<img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
<img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
<!-- Content -->
<div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
<p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
<button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
<a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
</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 class="w-full 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 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>
<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>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <script is:inline>
function showAnimation() {
const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show');
}
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4, y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
type: Phaser.AUTO, type: Phaser.AUTO,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
backgroundColor: 0xFFFFFF, backgroundColor: 0xebedea,
scale: { scale: {
mode: Phaser.Scale.FIT, mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY, autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,24 +103,41 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let scoreTotal = 0;
let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "stat timr here"; let gameStartTime = "stat timr here";
let galleryIconWidth;
let noticeWidth;
let noticeHeight;
let muteIcon;
let retryButton;
let maxScore;
let cancelIcon;
let letterHeight;
let letterScale;
let animated1Height;
let animated1videoScale;
if(isMobile){ if(isMobile){
cloudeSize = 200;
cloudHeight = 340; submitWidth = 250;
canvasScale = 0.14 submitHeight = 110;
canvasHeight = 35; noticeWidth = 100;
letterHeight = 30; noticeHeight = 0;
letterScale = 1.1; downloadWidth = 67;
downloadHeight = 200;
learningWidth = 200;
learningHeight = 400;
letterHeight = 0;
letterScale = 1.8;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animated1videoScale = 1;
animated1videoScale = 0.6;
animated1Height = 32; animated1Height = 32;
helpButtonHeight = customHeight / 1.1; helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10; helpButtonWidth = customWidth / 2 + 10;
@ -68,23 +148,33 @@ import Layout from "../../layouts/Layout.astro";
submitHeight = customHeight / 1.1; submitHeight = customHeight / 1.1;
noticeWidth = window.innerWidth * 0.5 - 100; noticeWidth = window.innerWidth * 0.5 - 100;
noticeHeight = window.innerHeight * 0.38; noticeHeight = window.innerHeight * 0.38;
}else if(isTab){
animated1videoScale = 1;
animated1Height = 32;
letterHeight = 0;
letterScale = 1.8;
}else{ }else{
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
noticeHeight = 0;
downloadWidth = 180;
downloadHeight = 70;
learningWidth = 450;
learningHeight = 400;
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; letterHeight = 0;
canvasHeight = 20; letterScale = 1.8;
letterHeight = 10;
letterScale = 1.2;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animated1videoScale = 0.70; animated1videoScale = 1;
animated1Height = 20; animated1Height = 20;
helpButtonHeight = customHeight / 2 + 40; helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32; helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20; startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32; startButtonWidth = customWidth / 1.32;
submitWidth = customWidth / 1.32; submitWidth = customWidth / 1.32;
@ -92,12 +182,35 @@ import Layout from "../../layouts/Layout.astro";
noticeWidth = window.innerWidth * 0.5 - 120; noticeWidth = window.innerWidth * 0.5 - 120;
noticeHeight = window.innerHeight * 0.32; noticeHeight = window.innerHeight * 0.32;
} }
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.65;
resetIconWidth = 1.40;
tickIconWidth = 1.21;
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;
}
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
formattedDateTime = currentDate.toLocaleString(); formattedDateTime = currentDate.toLocaleString();
// console.log("Page loaded on: " + formattedDateTime); // console.log("Page loaded on: " + formattedDateTime);
}; };
// let hideButton;
function preload() { function preload() {
this.load.video('animated1', '/assets/animated-letter/number_1.mp4'); this.load.video('animated1', '/assets/animated-letter/number_1.mp4');
@ -112,135 +225,65 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('cloud', '/assets/cloud.png'); this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png'); this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image('canvasStand', '/assets/stand2.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
} }
function create() { function create() {
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
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); 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");
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 10, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
});
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitUserData(this); submitUserData(this);
showAnimation();
parentMainContainer.classList.remove('hidden');
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated1').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated1').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
animatedLetter.stop();
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => { demoButton.setInteractive().on('pointerdown', () => {
animatedLetter.setCurrentTime(0); animatedLetter.setCurrentTime(0);
animatedLetter.play(true); animatedLetter.play(true);
graphics.setVisible(false); graphics.setVisible(false);
firstScreen.setVisible(true); firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button if(animatedLetter.visible){
hideButton.setVisible(true); // Show the "Hide" button animatedLetter.setVisible(false);
graphics.setVisible(true);
} else{
graphics.setVisible(false);
animatedLetter.setVisible(true); animatedLetter.setVisible(true);
}
}); });
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; let responsiveFontSize = isMobile ? 16 : 32;
const baseFontSize = 24; this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 1', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
// Play the video // Play the video
@ -256,11 +299,12 @@ import Layout from "../../layouts/Layout.astro";
}); });
let textX, textY; let textX, textY;
let stepTextSize = isMobile ? 12 : 16;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
// audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
@ -293,7 +337,6 @@ import Layout from "../../layouts/Layout.astro";
graphics = this.add.graphics(); graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
@ -310,32 +353,44 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", { // let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand', // font: '900 24px Quicksand',
fill: '#05b3a4', // fill: '#05b3a4',
backgroundColor : '#7c4c23', // backgroundColor : '#7c4c23',
padding: {x: 20, y: 10}, // padding: {x: 20, y: 10},
shadow: { // shadow: {
offsetX : 2, // offsetX : 2,
offsetY : 2, // offsetY : 2,
color: '#000', // color: '#000',
blur: 5, // blur: 5,
fill: true // fill: true
} // }
}) // })
firstTextLayer.setVisible(false); firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => { document.getElementById('beforeStartBtn').addEventListener('click', function() {
document.getElementById('blurDisplay').classList.add('hidden');
audioOneAudio.play(); audioOneAudio.play();
submitButton.setVisible(true); gamestart = new Date();
gameStartTime = gamestart.toLocaleString();
firstTextLayer.setVisible(true); firstTextLayer.setVisible(true);
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
firstScreen.setVisible(false); firstScreen.setVisible(false);
graphics.setVisible(true); graphics.setVisible(true);
hideButton.setVisible(false);
demoButton.setVisible(true); demoButton.setVisible(true);
startButton.setVisible(false); submitButton.setVisible(true);
}) })
// startButton.setInteractive().on('pointerdown', () => {
// audioOneAudio.play();
// submitButton.setVisible(true);
// firstTextLayer.setVisible(true);
// animatedLetter.setVisible(false);
// firstScreen.setVisible(false);
// graphics.setVisible(true);
// hideButton.setVisible(false);
// demoButton.setVisible(true);
// startButton.setVisible(false);
// })
} }

290
src/pages/guided-tracing/2.astro
View File

@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
--- ---
<Layout title="Guided Letter Tracing Game"> <Layout title="Guided Letter Tracing Game">
<main> <main>
<div> <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
<div class="flex justify-center items-center h-screen ">
<button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
</div>
</div>
<div id="parentMainContainer"class="hidden">
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
</div>
<div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
<div class="flex flex-row space-x-4 items-center justify-center">
<div id="star-container"></div>
</div>
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
</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 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-10 right-10" id="bottomAnimateClipart">
<div class="flex flex-row z-50 place-items-end clip-art">
<img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
<div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
<img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
<img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
<!-- Content -->
<div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
<p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
<button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
<a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
</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 class="w-full 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 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>
<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>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script> <script src="/saveGameAI.js" is:inline></script>
<script is:inline> <script is:inline>
function showAnimation() {
const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show');
}
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4, y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
type: Phaser.AUTO, type: Phaser.AUTO,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
backgroundColor: 0xFFFFFF, backgroundColor: 0xebedea,
scale: { scale: {
mode: Phaser.Scale.FIT, mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY, autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -43,21 +106,18 @@ import Layout from "../../layouts/Layout.astro";
let scoreTotal = 0; let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
let demoButton;
if(isMobile){ if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 58; letterHeight = 58;
letterScale = 1; letterScale = 1.5;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animated2Scale = 0.55; animated2Scale = 0.85;
animated2Height = 32; animated2Height = 32;
helpButtonHeight = customHeight / 1.1; helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10; helpButtonWidth = customWidth / 2 + 10;
@ -69,18 +129,14 @@ let scoreTotal = 0; let isDrawing = false;
noticeWidth = window.innerWidth * 0.5 - 100; noticeWidth = window.innerWidth * 0.5 - 100;
noticeHeight = window.innerHeight * 0.38; noticeHeight = window.innerHeight * 0.38;
} else{ } else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 50; letterHeight = 50;
letterScale = 1; letterScale = 1.5;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animated2Scale = 0.55; animated2Scale = 0.85;
animated2Height = 20; animated2Height = 20;
helpButtonHeight = customHeight / 2 + 40; helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32; helpButtonWidth = customWidth / 1.32;
@ -91,158 +147,108 @@ let scoreTotal = 0; let isDrawing = false;
noticeWidth = window.innerWidth * 0.5 - 120; noticeWidth = window.innerWidth * 0.5 - 120;
noticeHeight = window.innerHeight * 0.32; noticeHeight = window.innerHeight * 0.32;
} }
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.65;
resetIconWidth = 1.40;
tickIconWidth = 1.21;
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;
}
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
formattedDateTime = currentDate.toLocaleString(); formattedDateTime = currentDate.toLocaleString();
// console.log("Page loaded on: " + formattedDateTime); // console.log("Page loaded on: " + formattedDateTime);
}; };
// let hideButton;
function preload() { function preload() {
this.load.video('animated2', '/assets/animated-letter/number_2.mp4'); this.load.video('animated2', '/assets/animated-letter/number_2.mp4');
this.load.svg('number2', '/assets/numeric/n2.svg'); this.load.svg('number2', '/assets/numeric/n2.svg');
this.load.svg('layer1', '/assets/numeric/n2.svg'); this.load.svg('layer1', '/assets/numeric/n2_l1.svg');
this.load.svg('layer2', '/assets/numeric/n2.svg'); this.load.svg('layer2', '/assets/numeric/n2_l2.svg');
this.load.audio('audioOne', '/assets/audio/roll-slant.mp3'); this.load.audio('audioOne', '/assets/audio/roll-slant.mp3');
this.load.audio('audioTwo', '/assets/audio/slide.mp3'); this.load.audio('audioTwo', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.svg('succesImage', '/assets/svg/tick.svg'); this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg'); this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg'); this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image('canvasStand', '/assets/stand2.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
} }
function create() { function create() {
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
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); 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");
submitButton = this.add.text(submitWidth, submitHeight, "Submit", { const borderBottom = this.add.graphics();
font: '900 24px Quicksand', const x = 0; const y = 54;
fill: '#05b3a4', const lineWidth = window.innerWidth;
backgroundColor : '#7c4c23', borderBottom.lineStyle(1, 0x0348A8);
padding: {x: 10, y: 10}, borderBottom.setAlpha(0.2);
shadow: { borderBottom.beginPath();
offsetX : 2, borderBottom.moveTo(x, y);
offsetY : 2, borderBottom.lineTo(x + lineWidth, y);
color: '#000', borderBottom.strokePath();
blur: 5,
fill: true
}
});
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData(this);
showAnimation();
parentMainContainer.classList.remove('hidden');
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number2').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number2').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated2').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated2').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
animatedLetter.stop();
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => { demoButton.setInteractive().on('pointerdown', () => {
animatedLetter.setCurrentTime(0); animatedLetter.setCurrentTime(0);
animatedLetter.play(true); animatedLetter.play(true);
graphics.setVisible(false); graphics.setVisible(false);
firstScreen.setVisible(true); firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button if(animatedLetter.visible){
hideButton.setVisible(true); // Show the "Hide" button animatedLetter.setVisible(false);
graphics.setVisible(true);
firstScreen.setVisible(false);
} else{
graphics.setVisible(false);
animatedLetter.setVisible(true); animatedLetter.setVisible(true);
firstScreen.setVisible(true);
}
}); });
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; let responsiveFontSize = isMobile ? 16 : 32;
const baseFontSize = 24; this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 2', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);
// Play the video // Play the video
@ -260,9 +266,8 @@ submitUserData(this);
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; let stepTextSize = isMobile ? 12 : 16;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Roll Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
// audioOneAudio.play(); // audioOneAudio.play();
firstLayer.setDepth(1); firstLayer.setDepth(1);
@ -271,7 +276,8 @@ submitUserData(this);
secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false); secondTextLayer.setVisible(false);
secondLayer.setDepth(1); secondLayer.setDepth(1);
@ -284,7 +290,6 @@ submitUserData(this);
let firstDragStartPoint = { x: 0, y: 0 }; let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer // Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => { firstLayer.on('dragstart', (pointer) => {
@ -307,7 +312,6 @@ submitUserData(this);
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -329,7 +333,6 @@ submitUserData(this);
graphics = this.add.graphics(); graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
@ -346,34 +349,21 @@ submitUserData(this);
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false); firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => { document.getElementById('beforeStartBtn').addEventListener('click', function() {
document.getElementById('blurDisplay').classList.add('hidden');
audioOneAudio.play(); audioOneAudio.play();
submitButton.setVisible(true); gamestart = new Date();
gameStartTime = gamestart.toLocaleString();
firstTextLayer.setVisible(true); firstTextLayer.setVisible(true);
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
firstScreen.setVisible(false); firstScreen.setVisible(false);
graphics.setVisible(true); graphics.setVisible(true);
hideButton.setVisible(false);
demoButton.setVisible(true);
startButton.setVisible(false);
}) })
} }
function update() { function update() {
} }