418 lines
18 KiB
Plaintext
418 lines
18 KiB
Plaintext
---
|
||
import Layout from "../../layouts/Layout.astro";
|
||
---
|
||
<Layout title="Guided Letter Tracing Game">
|
||
<main>
|
||
<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="/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 = {
|
||
x: isMobile ? 0 : window.innerWidth / 4,
|
||
y: window.innerHeight / 4,
|
||
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
||
height: window.innerHeight / 2,
|
||
};
|
||
|
||
const config = {
|
||
type: Phaser.AUTO,
|
||
width: window.innerWidth,
|
||
height: window.innerHeight,
|
||
backgroundColor: 0xeaeae8,
|
||
scale: {
|
||
mode: Phaser.Scale.FIT,
|
||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||
},
|
||
scene: {
|
||
preload: preload,
|
||
create: create,
|
||
update: update
|
||
}
|
||
};
|
||
// backgroundImage.png
|
||
const game = new Phaser.Game(config);
|
||
const customWidth = window.innerWidth;
|
||
const customHeight = window.innerHeight;
|
||
let firstLayer, secondLayer, thirdLayer;
|
||
let graphics;
|
||
let animatedLetter;
|
||
let scoreTotal = 0;
|
||
let isDrawing = false;
|
||
let formattedDateTime;
|
||
let gameStartTime = "start time here";
|
||
let demoButton;
|
||
|
||
if(isMobile){
|
||
cloudeSize = 200;
|
||
cloudHeight = 340;
|
||
canvasScale = 0.14
|
||
canvasHeight = 35;
|
||
letterHeight = 70;
|
||
letterScale = 1.2;
|
||
backgroundScale = 0.8;
|
||
sunScale = 0.1;
|
||
sunScalePlus = 0.15;
|
||
sunWidth = 70;
|
||
sunHeight = 70;
|
||
|
||
animatedVideoScale = 0.75;
|
||
animatedHHeight = 35;
|
||
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 = 70;
|
||
letterScale = 1.2;
|
||
backgroundScale = 1;
|
||
sunScale = 0.2;
|
||
sunScalePlus = 0.25;
|
||
sunWidth = 200;
|
||
sunHeight = 100;
|
||
|
||
animatedVideoScale = 0.75;
|
||
animatedHHeight = 35;
|
||
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;
|
||
}
|
||
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() {
|
||
currentDate = new Date();
|
||
formattedDateTime = currentDate.toLocaleString();
|
||
// console.log("Page loaded on: " + formattedDateTime);
|
||
};
|
||
// let hideButton;
|
||
|
||
function preload() {
|
||
this.load.video('animatedH', '/assets/animated-letter/small_h.mp4');
|
||
this.load.svg('letterH', '/assets/small-letter/hs.svg');
|
||
this.load.svg('layer1', '/assets/small-letter/hs_l1.svg');
|
||
this.load.svg('layer2', '/assets/small-letter/hs_l2.svg');
|
||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||
this.load.audio('audioTwo', '/assets/audio/roll-down.mp3');
|
||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||
|
||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||
this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
|
||
}
|
||
|
||
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);
|
||
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.setInteractive().on('pointerdown', () => {
|
||
// console.log('Clicked');
|
||
// windowLoad();
|
||
submitUserData(this);
|
||
showAnimation();
|
||
parentMainContainer.classList.remove('hidden');
|
||
})
|
||
this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||
const firstScreen = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale);
|
||
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedH').setDepth(2); canvasStand
|
||
firstScreen.setVisible(false);
|
||
|
||
demoButton.setInteractive().on('pointerdown', () => {
|
||
animatedLetter.setCurrentTime(0);
|
||
animatedLetter.play(true);
|
||
graphics.setVisible(false);
|
||
firstScreen.setVisible(true);
|
||
if(animatedLetter.visible){
|
||
animatedLetter.setVisible(false);
|
||
graphics.setVisible(true);
|
||
firstScreen.setVisible(false);
|
||
} else{
|
||
graphics.setVisible(false);
|
||
animatedLetter.setVisible(true);
|
||
firstScreen.setVisible(true);
|
||
|
||
}
|
||
});
|
||
|
||
retryButton.setInteractive().on('pointerdown', () => {
|
||
window.location.reload();
|
||
})
|
||
const maskGraphics = this.make.graphics();
|
||
maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
|
||
const mask = maskGraphics.createGeometryMask();
|
||
let responsiveFontSize = isMobile ? 16 : 32;
|
||
this.add.text(window.innerWidth / 2, 80, 'Letter: h', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
|
||
const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : h', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale);
|
||
|
||
// Play the video
|
||
// animatedLetter.play();
|
||
animatedLetter.setVisible(false);
|
||
|
||
// You can set additional properties for the video, such as loop and mute:
|
||
animatedLetter.setLoop(true); // Loop the video
|
||
animatedLetter.setMute(false); // Unmute the video
|
||
animatedLetter.on('complete', function () {
|
||
// Video playback is complete
|
||
// You can add your code here for what to do when the video finishes.
|
||
});
|
||
|
||
let textX, textY;
|
||
let stepTextSize = isMobile ? 12 : 16;
|
||
firstLayer = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||
textY = isMobile ? customHeight / 5 : customHeight / 2.4;
|
||
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');
|
||
audioOneAudio.play();
|
||
firstLayer.setDepth(1);
|
||
firstLayer.setAlpha(0.5);
|
||
firstLayer.setInteractive({ draggable: true });
|
||
|
||
secondLayer = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
|
||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||
const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
|
||
const audioTwoAudio = this.sound.add('audioTwo');
|
||
secondTextLayer.setVisible(false);
|
||
secondLayer.setDepth(1);
|
||
secondLayer.setAlpha(0.5);
|
||
secondLayer.setInteractive({ draggable: true });
|
||
secondLayer.setVisible(false);
|
||
|
||
// Add these variables to keep track of start points
|
||
let firstDragStartPoint = { x: 0, y: 0 };
|
||
let secondDragStartPoint = { x: 0, y: 0 };
|
||
|
||
// Add this code for firstLayer
|
||
firstLayer.on('dragstart', (pointer) => {
|
||
firstDragStartPoint.x = pointer.x;
|
||
firstDragStartPoint.y = pointer.y;
|
||
});
|
||
|
||
firstLayer.on('drag', (pointer) => {
|
||
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
|
||
|
||
if (distance >= 100) {
|
||
|
||
firstTextLayer.setVisible(false);
|
||
secondTextLayer.setVisible(true);
|
||
audioTwoAudio.play();
|
||
secondLayer.setVisible(true);
|
||
firstLayer.setAlpha(1);
|
||
secondLayer.setAlpha(0.5);
|
||
} else {
|
||
firstLayer.setAlpha(0.5);
|
||
}
|
||
});
|
||
// Repeat the above code for secondLayer and thirdLayer
|
||
|
||
// Add this code for secondLayer
|
||
secondLayer.on('dragstart', (pointer) => {
|
||
secondDragStartPoint.x = pointer.x;
|
||
secondDragStartPoint.y = pointer.y;
|
||
});
|
||
|
||
secondLayer.on('drag', (pointer) => {
|
||
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
|
||
|
||
if (distance >=100) {
|
||
secondTextLayer.setVisible(false);
|
||
secondLayer.setAlpha(1);
|
||
} else {
|
||
secondLayer.setAlpha(0.5);
|
||
}
|
||
});
|
||
|
||
|
||
graphics = this.add.graphics();
|
||
graphics.setMask(mask);
|
||
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
||
this.input.on('pointerdown', function (pointer) {
|
||
isDrawing = true;
|
||
graphics.moveTo(pointer.x, pointer.y);
|
||
});
|
||
|
||
this.input.on('pointerup', function () {
|
||
isDrawing = false;
|
||
});
|
||
|
||
this.input.on('pointermove', function (pointer) {
|
||
if (!isDrawing) return;
|
||
|
||
graphics.lineTo(pointer.x, pointer.y);
|
||
graphics.strokePath();
|
||
});
|
||
|
||
firstTextLayer.setVisible(false);
|
||
document.getElementById('beforeStartBtn').addEventListener('click', function() {
|
||
document.getElementById('blurDisplay').classList.add('hidden');
|
||
audioOneAudio.play();
|
||
firstTextLayer.setVisible(true);
|
||
animatedLetter.setVisible(false);
|
||
firstScreen.setVisible(false);
|
||
graphics.setVisible(true);
|
||
})
|
||
}
|
||
|
||
function update() {
|
||
|
||
}
|
||
|
||
</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> |