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

newb

Browse Source
This commit is contained in:
Suvodip
2024-10-26 18:57:45 +05:30
parent fb3ef37bad
commit 41ae75207b
4 changed files with 560 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,14 +3,75 @@ import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<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>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script src="/saveGameAI.js" is:inline></script>
<script is:inline>
function showAnimation() {
const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show');
}
const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
@@ -39,7 +100,7 @@ import Layout from "../../layouts/Layout.astro";
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let firstLayer;
let graphics;
let isDrawing = false;
let formattedDateTime;
@@ -70,23 +131,6 @@ import Layout from "../../layouts/Layout.astro";
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;
}
if(isMobile){
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
@@ -94,8 +138,39 @@ import Layout from "../../layouts/Layout.astro";
downloadWidth = 67;
downloadHeight = 200;
learningWidth = 200;
learningHeight = 400
}else {
learningHeight = 400;
letterHeight = 30;
letterScale = 1.8;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated0videoScale = 1;
animated0Height = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
submitWidth = customWidth / 2 - 100;
submitHeight = customHeight / 1.1;
noticeWidth = window.innerWidth * 0.5 - 100;
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{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
@@ -103,57 +178,29 @@ import Layout from "../../layouts/Layout.astro";
downloadWidth = 180;
downloadHeight = 70;
learningWidth = 450;
learningHeight = 400
}
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 30;
letterScale = 1.8;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated0videoScale = 1;
animated0Height = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
submitWidth = customWidth / 2 - 100;
submitHeight = customHeight / 1.1;
noticeWidth = window.innerWidth * 0.5 - 100;
noticeHeight = window.innerHeight * 0.38;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1.8;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated0videoScale = 1;
animated0Height = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
submitWidth = customWidth / 1.32;
submitHeight = customHeight / 2 - 20;
noticeWidth = window.innerWidth * 0.5 - 120;
noticeHeight = window.innerHeight * 0.32;
learningHeight = 400;
cloudeSize = 500;
cloudHeight = 250;
letterHeight = 10;
letterScale = 1.8;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated0videoScale = 1;
animated0Height = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
submitWidth = customWidth / 1.32;
submitHeight = customHeight / 2 - 20;
noticeWidth = window.innerWidth * 0.5 - 120;
noticeHeight = window.innerHeight * 0.32;
}
window.onload = function() {
currentDate = new Date();
formattedDateTime = currentDate.toLocaleString();
@@ -201,24 +248,26 @@ import Layout from "../../layouts/Layout.astro";
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 = 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.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitUserData(this);
showAnimation();
parentMainContainer.classList.remove('hidden');
})
// 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.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
}
document.getElementById('beforeStartBtn').addEventListener('click', function() {
document.getElementById('blurDisplay').classList.add('hidden');
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();
// audioOneAudio.play();
// startButton.setInteractive().on('pointerdown', () => {
// audioOneAudio.play();
// // gmStartTime();
@@ -355,9 +406,49 @@ import Layout from "../../layouts/Layout.astro";
}
// function beforeStartGame(){
// audioOneAudio.play();
// document.getElementById('blurDisplay').classList.add('hidden');
// }
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>