s1
This commit is contained in:
Suvodip
@@ -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>
|
||||
Reference in New Issue
Block a user