s1
This commit is contained in:
Suvodip
@@ -4,53 +4,37 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</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>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
@@ -445,6 +429,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
|
||||
|
||||
@@ -621,69 +606,35 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* 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 */
|
||||
}
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.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 */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +1,34 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
|
||||
let starNumberOfTime = localStorage.getItem('starValue');
|
||||
console.log(starNumberOfTime);
|
||||
const numberOfTimes = starNumberOfTime;
|
||||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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="" 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>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
@@ -51,6 +36,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
@@ -282,6 +271,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.image("border", '/assets/svg/border.svg');
|
||||
this.load.image("borderCorrect", '/assets/svg/border-correct.svg');
|
||||
this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
|
||||
this.load.spritesheet("target1", assetsList.right_image1,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
@@ -459,28 +450,54 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
|
||||
|
||||
});
|
||||
|
||||
let counter = 0;
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
if (match !== undefined) {
|
||||
scoreTotal++;
|
||||
counter++;
|
||||
return 'borderCorrect';
|
||||
} else {
|
||||
console.log(`Score Total: ${scoreTotal}`);
|
||||
return 'borderWrong';
|
||||
}
|
||||
};
|
||||
|
||||
// Create target zones and their borders
|
||||
targetZones.forEach((targetZone) => {
|
||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.5).setScale(1);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, 'border');
|
||||
|
||||
blocks.forEach((block, index) => {
|
||||
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
});
|
||||
|
||||
// Add interactive blocks and handle drag events
|
||||
blocks.forEach((block) => {
|
||||
const newBlock = this.add
|
||||
.sprite(block.x, block.y, block.textureKey, 1)
|
||||
.setOrigin(0, 0)
|
||||
.setInteractive({ draggable: true });
|
||||
|
||||
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
|
||||
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setScale(1.3);
|
||||
newBlock.x = dragX;
|
||||
newBlock.y = dragY;
|
||||
});
|
||||
|
||||
newBlock.on("dragend", () => {
|
||||
newBlock.setScale(1.0);
|
||||
let droppedOnTargetZone = false;
|
||||
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
@@ -493,77 +510,39 @@ import Layout from '../../layouts/Layout.astro';
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
// console.log(isMatch(newBlock.texture.key, targetZone.name))
|
||||
|
||||
// if(isMatch(newBlock.texture.key, targetZone.name)){
|
||||
// score++;
|
||||
// // console.log(score);
|
||||
// if(score === 4){
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// let finalDom;
|
||||
// }
|
||||
// console.log(score)
|
||||
// if(score >= 2){
|
||||
// console.log("Win")
|
||||
// } else{
|
||||
// console.log("Loose")
|
||||
// }
|
||||
// }
|
||||
//counter++; // Increment the counter when a match is found
|
||||
|
||||
// Check if the block matches the target and update the specific border
|
||||
const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
|
||||
targetZoneBorders[targetIndex].setTexture(borderCondition); // Update only the matched border
|
||||
|
||||
if (counter === 4) {
|
||||
submitButton.setVisible(true); // Show submit button if required counter reached
|
||||
}
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
targetZoneBorders[targetIndex].setVisible(true); // Make the border visible
|
||||
targetZoneBorders[targetIndex].setAlpha(1); // Set border to fully visible
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
newBlock.setPosition(block.x, block.y); // Reset position if not dropped on any target zone
|
||||
}
|
||||
if (droppedBlocks.length === targetZones.length)
|
||||
{
|
||||
displayResult(droppedBlocks);
|
||||
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks); // Display results when all blocks are dropped
|
||||
}
|
||||
});
|
||||
});
|
||||
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// })
|
||||
});
|
||||
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
// console.log("Score Total", scoreTotal)
|
||||
// resultView.setVisible(false);
|
||||
}
|
||||
if(counter === 4){
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
// const footerBorder = this.add.graphics();
|
||||
// const footerX = 0; const footerY = window.innerHeight / 1.07;
|
||||
// const footerLineWidth = window.innerWidth;
|
||||
@@ -615,64 +594,30 @@ import Layout from '../../layouts/Layout.astro';
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
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 */
|
||||
}
|
||||
</style>
|
||||
@@ -4,53 +4,38 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
@@ -425,6 +410,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
|
||||
const blocks = [
|
||||
@@ -545,12 +531,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 4){
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -586,64 +568,18 @@ import Layout from '../../layouts/Layout.astro';
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
.clip-art-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -4,53 +4,38 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
@@ -424,6 +409,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
|
||||
const blocks = [
|
||||
@@ -535,7 +521,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
console.log(counter)
|
||||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
@@ -544,30 +530,13 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 4){
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
// 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)
|
||||
// }
|
||||
// });
|
||||
const displayResult = (droppedBlocks) => {
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
@@ -585,64 +554,30 @@ import Layout from '../../layouts/Layout.astro';
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
/* 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 */
|
||||
}
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.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 */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
@@ -2,55 +2,40 @@
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
@@ -296,6 +281,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
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.image("borderCorrect", '/assets/svg/border-correct.svg');
|
||||
this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
|
||||
|
||||
// this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/svg/border.svg');
|
||||
@@ -452,6 +439,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
|
||||
|
||||
@@ -506,6 +494,34 @@ import Layout from '../../layouts/Layout.astro';
|
||||
},
|
||||
];
|
||||
// console.log('test blocks',blocks[0])
|
||||
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if (match !== undefined) {
|
||||
scoreTotal++;
|
||||
counter++;
|
||||
return 'borderCorrect';
|
||||
} else {
|
||||
console.log(`Score Total: ${scoreTotal}`);
|
||||
return 'borderWrong';
|
||||
}
|
||||
|
||||
// if(counter === 8){
|
||||
// // console.log(counter)
|
||||
// submitButton.setVisible(true);
|
||||
// retryButton.setVisible(true);
|
||||
// }
|
||||
};
|
||||
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone, index) => {
|
||||
@@ -528,7 +544,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let droppedOnTargetZone = false;
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (
|
||||
Phaser.Geom .Intersects.RectangleToRectangle(
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)
|
||||
@@ -540,6 +556,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
droppedBlocks.push(newBlock);
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
}
|
||||
const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
|
||||
targetZoneBorders[targetIndex].setTexture(borderCondition);
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
@@ -564,29 +582,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
window.location.reload();
|
||||
})
|
||||
// retryButton.setVisible(false);
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if(match){
|
||||
scoreTotal++;
|
||||
// console.log(scoreTotal)
|
||||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
const displayResult = (droppedBlocks) => {
|
||||
@@ -598,69 +594,35 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
/* 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 */
|
||||
}
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.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 */
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
@@ -4,53 +4,37 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</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>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
@@ -436,6 +420,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
|
||||
@@ -592,10 +577,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -609,69 +592,35 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
/* 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 */
|
||||
}
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.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 */
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
@@ -3,14 +3,118 @@ import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
<Layout title='Drawing Game'>
|
||||
<main>
|
||||
<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>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</main>
|
||||
<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>
|
||||
const jsonData = [
|
||||
{
|
||||
"src": "/assets/back.jpeg",
|
||||
"title": "Image Title 1",
|
||||
"description": "Description for image 1 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/background.jpg",
|
||||
"title": "Image Title 2",
|
||||
"description": "Description for image 2 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/backgroundImage.png",
|
||||
"title": "Image Title 3",
|
||||
"description": "Description for image 3 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/beanieImage.png",
|
||||
"title": "Image Title 4",
|
||||
"description": "Description for image 4 goes here."
|
||||
}
|
||||
];
|
||||
let currentSlide = 0;
|
||||
function updateSlide(){
|
||||
const slide = jsonData[currentSlide];
|
||||
document.getElementById('slideImage').src = slide.src;
|
||||
document.getElementById('imageTitle').textContent = slide.title;
|
||||
document.getElementById('imageDescription').textContent = slide.description;
|
||||
}
|
||||
document.getElementById('nextButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide + 1) % jsonData.length;
|
||||
console.log(currentSlide)
|
||||
updateSlide();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
parentMainContainer.classList.add('hidden');
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
|
||||
@@ -22,12 +126,14 @@ import Layout from '../../layouts/Layout.astro';
|
||||
};
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let galleryIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
var assetsList = {}
|
||||
var snapshotButton;
|
||||
let submitButton;
|
||||
let galleryButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
@@ -38,22 +144,25 @@ import Layout from '../../layouts/Layout.astro';
|
||||
let maxScore;
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
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;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
@@ -146,6 +255,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||||
this.load.image('colorButton', '/assets/color_button.png');
|
||||
}
|
||||
@@ -185,10 +295,12 @@ import Layout from '../../layouts/Layout.astro';
|
||||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
|
||||
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
// window.location.reload();
|
||||
graphics.clear();
|
||||
});
|
||||
|
||||
|
||||
@@ -203,8 +315,18 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// });
|
||||
submitButton.setVisible(true);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
// parentMainContainer.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
galleryButton.setInteractive().on('pointerdown', () => {
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
gallerySliderId.classList.remove('hidden');
|
||||
});
|
||||
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
@@ -225,6 +347,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
graphics = this.add.graphics();
|
||||
const colorContainer = document.createElement('div');
|
||||
colorContainer.style.zIndex = '1';
|
||||
colorContainer.style.position = 'absolute';
|
||||
colorContainer.style.top = '13%';
|
||||
colorContainer.style.left = '10px';
|
||||
@@ -236,7 +359,23 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
colorContainer.style.flexDirection = 'row';
|
||||
|
||||
}
|
||||
colorContainer.style.backgroundColor = '#FFFFFF';
|
||||
colorContainer.style.padding = '30px 20px';
|
||||
colorContainer.style.borderRadius = '80px';
|
||||
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
|
||||
colorContainer.style.left = '0px';
|
||||
colorContainer.style.top = '50%';
|
||||
colorContainer.style.transform = 'translate(0, -50%)';
|
||||
colorContainer.style.border = '1px solid #F9F9F9';
|
||||
|
||||
let colorEraserCont = document.createElement('div');
|
||||
colorEraserCont.style.display = 'flex';
|
||||
colorEraserCont.style.flexDirection = 'row';
|
||||
|
||||
colorContainer.appendChild(colorEraserCont);
|
||||
|
||||
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
|
||||
if(!isMobile){
|
||||
@@ -278,7 +417,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Append the color picker to the color container data
|
||||
colorContainer.appendChild(colorPicker);
|
||||
|
||||
// const colors = data.colors;
|
||||
// var colors = colorList;
|
||||
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
|
||||
@@ -326,7 +465,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
button.style.height = `45px`;
|
||||
}
|
||||
button.innerHTML = `
|
||||
<svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="125" height="25" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
|
||||
<g style="mix-blend-mode:multiply">
|
||||
<path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
|
||||
@@ -493,8 +632,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
buttonsContainer.style.position = 'absolute';
|
||||
buttonsContainer.style.display = 'flex';
|
||||
buttonsContainer.style.flexDirection = 'row';
|
||||
buttonsContainer.style.top = '0%';
|
||||
buttonsContainer.style.marginTop = '30px';
|
||||
buttonsContainer.style.top = '50%';
|
||||
// buttonsContainer.style.transform = 'translate(0, -50%)';
|
||||
// buttonsContainer.style.marginTop = '30px';
|
||||
|
||||
|
||||
if(!isMobile){
|
||||
// buttonsContainer.style.position = 'fixed';
|
||||
buttonsContainer.style.top = '10%';
|
||||
@@ -527,16 +669,19 @@ import Layout from '../../layouts/Layout.astro';
|
||||
clearDrawing();
|
||||
});
|
||||
colorViewButton.setInteractive().on('pointerdown', () => {
|
||||
if(clearButton.style.display === 'block') {
|
||||
clearButton.style.display = 'none';
|
||||
if(eraserButton.style.display === 'block') {
|
||||
eraserButton.style.display = 'none';
|
||||
}else{
|
||||
clearButton.style.display = 'block';
|
||||
eraserButton.style.display = 'block';
|
||||
}
|
||||
})
|
||||
// Create the Eraser button
|
||||
const eraserButton = document.createElement('button');
|
||||
if(isMobile){
|
||||
eraserButton.style.display = 'none';
|
||||
}
|
||||
// eraserButton.textContent = 'Eraser';
|
||||
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"> </i>';
|
||||
eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
|
||||
eraserButton.style.color = 'blue';
|
||||
// eraserButton.style.border = '3px solid blue';
|
||||
// eraserButton.style.color = 'white';
|
||||
@@ -547,8 +692,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
if(isMobile){
|
||||
eraserButton.style.padding = '4px 4px';
|
||||
}else{
|
||||
eraserButton.style.padding = '5px 5px';
|
||||
eraserButton.style.marginTop = '0px';
|
||||
eraserButton.style.padding = '5px 9px';
|
||||
eraserButton.style.top = '50%';
|
||||
eraserButton.style.marginBottom = '15px';
|
||||
}
|
||||
eraserButton.style.fontWeight = 'bold';
|
||||
@@ -557,9 +702,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
eraserButton.addEventListener('click', () => {
|
||||
isErasing = !isErasing;
|
||||
if (isErasing) {
|
||||
// eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
|
||||
eraserButton.style.color = 'red';
|
||||
eraserButton.style.border = '3px solid red';
|
||||
eraserButton.style.border = '2px solid #0348A8';
|
||||
} else {
|
||||
// Return to drawing mode
|
||||
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
|
||||
@@ -568,10 +711,13 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
// Add the Clear and Eraser buttons to the container
|
||||
buttonsContainer.appendChild(clearButton);
|
||||
colorPicker.appendChild(clearButton);
|
||||
buttonsContainer.appendChild(eraserButton).setVisible;
|
||||
|
||||
// colorPicker.appendChild(eraserButton);
|
||||
// colorPicker.appendChild(eraserButton);
|
||||
// colorPicker.appendChild(eraserButton);
|
||||
|
||||
colorEraserCont.append(colorPicker);
|
||||
colorEraserCont.append(eraserButton);
|
||||
// colorContainer.appendChild(eraserButton);
|
||||
const sliderContainer = document.createElement('div');
|
||||
sliderContainer.style.backgroundColor = '#fff';
|
||||
|
||||
@@ -664,6 +810,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
customCursor.setVisible(false);
|
||||
muteIcon.setVisible(false);
|
||||
retryButton.setVisible(false);
|
||||
galleryButton.setVisible(false);
|
||||
|
||||
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
@@ -672,6 +819,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
customCursor.setVisible(true);
|
||||
muteIcon.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
galleryButton.setVisible(true);
|
||||
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
@@ -849,5 +997,37 @@ import Layout from '../../layouts/Layout.astro';
|
||||
.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>
|
||||
<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
|
||||
852
src/pages/drawing/test.astro
Normal file
852
src/pages/drawing/test.astro
Normal file
File diff suppressed because one or more lines are too long
@@ -3,14 +3,39 @@ import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
<Layout title='Drawing Game'>
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</main>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
// const drawingZone = {
|
||||
@@ -248,6 +273,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
// windowLoad();
|
||||
// submitUserData();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
if(!isMobile){
|
||||
@@ -710,4 +736,30 @@ import Layout from '../../layouts/Layout.astro';
|
||||
.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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
0
src/pages/menu.astro
Normal file
0
src/pages/menu.astro
Normal file
@@ -87,6 +87,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
@@ -101,6 +125,48 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -152,6 +218,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 2) {
|
||||
@@ -199,6 +266,61 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -208,11 +330,35 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -230,159 +376,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- <script is:inline>
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
// console.log(gameData);
|
||||
document.getElementById("gameDescription").innerHTML = gameData.game_description;
|
||||
const assetsURL = 'https://management.beanstalkedu.com/assets/';
|
||||
document.getElementById("image1").src = assetsURL + gameData.image1;
|
||||
document.getElementById("image2").src = assetsURL + gameData.image2;
|
||||
document.getElementById("image3").src = assetsURL + gameData.image3;
|
||||
document.getElementById("image4").src = assetsURL + gameData.image4;
|
||||
document.getElementById("image5").src = assetsURL + gameData.image5;
|
||||
document.getElementById("image6").src = assetsURL + gameData.image6;
|
||||
});
|
||||
function checkResult2(id){
|
||||
// console.log(gameData.a1)
|
||||
// alert("Matched")
|
||||
if(id == 'image1'){
|
||||
if( gameData.a1 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
// console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
// console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image2'){
|
||||
if(gameData.a2 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
// console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
// console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image3'){
|
||||
if(gameData.a3 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
// console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
// console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image4'){
|
||||
if(gameData.a4 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
// console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
// console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image5'){
|
||||
if(gameData.a5 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
// console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
// console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image6'){
|
||||
if(gameData.a6 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
// console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
// console.log('Value False')
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/')
|
||||
let gameName = urlSplit[3] +`-`+ urlSplit[4];
|
||||
let formatedDateTime;
|
||||
|
||||
window.onload = function () {
|
||||
let currentTime = new Date();
|
||||
formatedDateTime = currentTime.toLocaleString();
|
||||
// console.log(formatedDateTime);
|
||||
|
||||
// Create userData object inside the onload event
|
||||
let userData = {
|
||||
'f2': formatedDateTime,
|
||||
};
|
||||
// console.log(userData); // Now, f1 and f2 should have values
|
||||
};
|
||||
function generateShortUniqueID(length) {
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * characters.length);
|
||||
result += characters.charAt(randomIndex);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
|
||||
// console.log(shortUniqueID);
|
||||
function saveUserData() {
|
||||
// Move the userData object creation inside the saveUserData function if needed
|
||||
let userData = {
|
||||
'status' : 'published',
|
||||
'user_id': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'game_open': formatedDateTime,
|
||||
};
|
||||
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
// console.log('Data Saved', response);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
|
||||
body{
|
||||
@@ -394,12 +387,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border: 4px solid #49B76E;
|
||||
border-radius: 10%;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
.redBorder{
|
||||
border: 4px solid red;
|
||||
border: 4px solid #BB4D6A;
|
||||
border-radius: 10%;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
@@ -434,4 +427,54 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
border-radius: 4px;
|
||||
background-color: #E6FDFE;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
content: "\2713";
|
||||
color: #49B76E;
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -111,6 +111,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
@@ -124,6 +148,48 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -183,6 +249,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
|
||||
function saveUserData(){
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 3) {
|
||||
@@ -229,6 +296,60 @@ import Layout from "../../layouts/Layout.astro";
|
||||
};
|
||||
// console.log(userData);
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -238,12 +359,35 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
// console.log("Response", response.status);
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -310,4 +454,54 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
border-radius: 4px;
|
||||
background-color: #E6FDFE;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
content: "\2713";
|
||||
color: #49B76E;
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,24 +34,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="flex flex-row gap-x-4 place-content-between">
|
||||
<div class="flex flex-col">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,6 +69,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
@@ -76,6 +106,48 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let urlSplit = url.split('/');
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -115,6 +187,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
@@ -147,6 +220,59 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -156,11 +282,35 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -230,4 +380,54 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
border-radius: 4px;
|
||||
background-color: #E6FDFE;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
content: "\2713";
|
||||
color: #49B76E;
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,7 +31,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label1"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox " value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -39,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label2"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox " value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
@@ -48,7 +48,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label3"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox " value="a3"/>
|
||||
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -56,7 +56,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label4"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox " value="a4"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
@@ -65,7 +65,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label5"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox " value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -73,17 +73,41 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label6"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox " value="a6"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center pt-8">
|
||||
<p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
|
||||
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
|
||||
<!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
@@ -98,6 +122,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -133,6 +160,45 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
});
|
||||
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
const element = document.getElementById(id);
|
||||
@@ -148,8 +214,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 2) {
|
||||
@@ -195,7 +262,60 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'score': totalPoints,
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
// console.log(userData);let progress = 0;
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -205,11 +325,36 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -232,19 +377,14 @@ import Layout from "../../layouts/Layout.astro";
|
||||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
border: 4px solid #49B76E;
|
||||
border-radius: 10px;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
.redBorder{
|
||||
border: 4px solid red;
|
||||
border-radius: 10%;
|
||||
border: 4px solid #BB4D6A;
|
||||
border-radius: 10px;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
#image1, #image2, #image3, #image4, #image5, #image6{
|
||||
@@ -278,4 +418,54 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
border-radius: 4px;
|
||||
background-color: #E6FDFE;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
content: "\2713";
|
||||
color: #49B76E;
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,7 +34,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox " value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -42,7 +42,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox " value="a2"/>
|
||||
|
||||
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -50,7 +50,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox " value="a3"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
@@ -59,7 +59,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox " value="a4"/>
|
||||
|
||||
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -67,7 +67,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox " value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -75,7 +75,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox " value="a6"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
@@ -84,7 +84,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label7" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
|
||||
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox " value="a7"/>
|
||||
|
||||
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -92,7 +92,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label8" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
|
||||
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox " value="a8"/>
|
||||
|
||||
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
@@ -100,7 +100,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<p id="label9" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
|
||||
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox " value="a9"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center pt-8">
|
||||
@@ -111,6 +111,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
@@ -123,7 +147,48 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
@@ -183,6 +248,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 3) {
|
||||
@@ -238,6 +304,60 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -247,11 +367,35 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -273,18 +417,13 @@ import Layout from "../../layouts/Layout.astro";
|
||||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border: 4px solid #49B76E;
|
||||
border-radius: 10%;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
.redBorder{
|
||||
border: 4px solid red;
|
||||
border: 4px solid #BB4D6A;
|
||||
border-radius: 10%;
|
||||
}
|
||||
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
|
||||
@@ -318,4 +457,54 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
border-radius: 4px;
|
||||
background-color: #E6FDFE;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
content: "\2713";
|
||||
color: #49B76E;
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,24 +34,31 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="flex flex-row gap-x-4 place-content-between">
|
||||
<div class="flex flex-col">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none w-[70%]" />
|
||||
<p id="label1"></p>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none w-[70%]" />
|
||||
<p id="label1"></p>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox " value="a1"/>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none w-[70%]" />
|
||||
<p id="label2"></p>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none w-[70%]" />
|
||||
<p id="label2"></p>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox " value="a2"/>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none w-[70%]" />
|
||||
<p id="label3"></p>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none w-[70%]" />
|
||||
<p id="label3"></p>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox " value="a3"/>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,6 +70,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" 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=" 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/clip-art.svg" alt="" />
|
||||
<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 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-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
@@ -76,6 +107,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let urlSplit = url.split('/');
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -110,6 +144,44 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
}
|
||||
});
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
@@ -159,6 +231,58 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
@@ -169,11 +293,35 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -196,11 +344,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
/* width: 40px; */
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
@@ -226,6 +369,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.round-checkbox-label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
@@ -243,4 +387,55 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
border-radius: 4px;
|
||||
background-color: #E6FDFE;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border: 2px solid #60C6CB;
|
||||
background-color: #E6FDFE;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
content: "\2713";
|
||||
color: #49B76E;
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user