pull/2/head
dev sp
parent
4864274169
commit
c229800e73
|
|
@ -1,169 +1,5 @@
|
|||
<footer class="text-center lg:text-left bg-gray-100 text-gray-600">
|
||||
<div class="flex justify-center items-center lg:justify-between p-6 border-b border-gray-300">
|
||||
<div class="mr-12 hidden lg:block">
|
||||
<span>Get connected with us on social networks:</span>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f"
|
||||
class="w-2.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512">
|
||||
<path fill="currentColor"
|
||||
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
|
||||
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
|
||||
<path fill="currentColor"
|
||||
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github"
|
||||
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor"
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-6 py-10 text-center md:text-left">
|
||||
<div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="">
|
||||
<h6 class="
|
||||
uppercase
|
||||
font-semibold
|
||||
mb-4
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
md:justify-start
|
||||
">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cubes"
|
||||
class="w-4 mr-3" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z">
|
||||
</path>
|
||||
</svg>
|
||||
Tailwind ELEMENTS
|
||||
</h6>
|
||||
<p>
|
||||
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor
|
||||
sit amet, consectetur adipisicing elit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Products
|
||||
</h6>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Angular</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">React</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Vue</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#!" class="text-gray-600">Laravel</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Useful links
|
||||
</h6>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Pricing</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Settings</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Orders</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#!" class="text-gray-600">Help</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Contact
|
||||
</h6>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path fill="currentColor"
|
||||
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
|
||||
</path>
|
||||
</svg>
|
||||
New York, NY 10012, US
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
|
||||
</path>
|
||||
</svg>
|
||||
info@example.com
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
|
||||
</path>
|
||||
</svg>
|
||||
+ 01 234 567 88
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="print"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
|
||||
</path>
|
||||
</svg>
|
||||
+ 01 234 567 89
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-200">
|
||||
<span>© 2021 Copyright:</span>
|
||||
<a class="text-gray-600 font-semibold" href="https://tailwind-elements.com/">Tailwind Elements</a>
|
||||
</div>
|
||||
</footer>
|
||||
<main>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -7,7 +7,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<div class="flex flex-row place-content-between pt-2">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
|
|
@ -16,12 +16,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<!-- <p id="LearningSubArea"></p> -->
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center ">
|
||||
<img style="width: 30%" draggable="false" id="descImage" src="" alt="" />
|
||||
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-6 select-none " id="gameLabel"></p>
|
||||
<img class="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" />
|
||||
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
|
||||
</div>
|
||||
<form id="contactForm" class="">
|
||||
<div id="itemForm" class="">
|
||||
<div class="flex flex-row gap-6 place-content-between">
|
||||
<div class="flex flex-row gap-4 place-content-between">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
|
|
@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-center pt-8">
|
||||
<div class="flex flex-col place-items-center justify-center pt-4">
|
||||
<p id="savedMessage"></p>
|
||||
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,272 +0,0 @@
|
|||
import { assetsList, submitButton, targetZones, isMatch, displayResult } from "./index.astro.inline.mjs";
|
||||
|
||||
export class MyGame extends Phaser.Scene {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
preload() {
|
||||
var progressBar = this.add.graphics();
|
||||
var progressBox = this.add.graphics();
|
||||
progressBox.fillStyle(2236962, 0.8);
|
||||
progressBox.fillRect(240, 270, 320, 50);
|
||||
|
||||
var width = this.cameras.main.width;
|
||||
var height = this.cameras.main.height;
|
||||
var loadingText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 50,
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
font: '20px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
loadingText.setOrigin(0.5, 0.5);
|
||||
var percentText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 5,
|
||||
text: '0%',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
percentText.setOrigin(0.5, 0.5);
|
||||
var assetText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 + 50,
|
||||
text: '',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
assetText.setOrigin(0.5, 0.5);
|
||||
this.load.on('progress', function (value) {
|
||||
percentText.setText(parseInt(value * 100) + '%');
|
||||
progressBar.clear();
|
||||
progressBar.fillStyle(16777215, 1);
|
||||
progressBar.fillRect(250, 280, 300 * value, 30);
|
||||
});
|
||||
this.load.on('fileprogress', function (file) {
|
||||
assetText.setText('Loading asset: ' + file.key);
|
||||
});
|
||||
this.load.on('complete', function () {
|
||||
progressBar.destroy();
|
||||
progressBox.destroy();
|
||||
loadingText.destroy();
|
||||
percentText.destroy();
|
||||
assetText.destroy();
|
||||
});
|
||||
// this.load.image('logo', 'zenvalogo.png');
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo' + i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
// this.load.image("bg", '/assets/bgwhite.jpg');
|
||||
// this.load.image("target1", assetsList.right_image1);
|
||||
// this.load.image("target2", '/assets/hay.png');
|
||||
// this.load.image("target3", '/assets/mat.png');
|
||||
// this.load.image("target4", '/assets/star.png');
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
this.load.spritesheet("target1", assetsList.right_image1, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("target2", assetsList.right_image2, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("target3", assetsList.right_image3, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("target4", assetsList.right_image4, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
|
||||
this.load.spritesheet("blocks1", assetsList.left_image1, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks2", assetsList.left_image2, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks3", assetsList.left_image3, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks4", assetsList.left_image4, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
}
|
||||
create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 20;
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 70, data.description, {
|
||||
font: `600 ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14, 240, data.left_image1_name).setTint(8145955);
|
||||
this.add.text(displayW / 14, 409, data.left_image2_name).setTint(8145955);
|
||||
this.add.text(displayW / 14, 579, data.left_image3_name).setTint(8145955);
|
||||
this.add.text(displayW / 14, 750, data.left_image4_name).setTint(8145955);
|
||||
|
||||
//Right Image Name
|
||||
this.add.text(displayW * 0.9 - 50, 240, data.right_image1_name).setTint(8145955);
|
||||
this.add.text(displayW * 0.9 - 50, 409, data.right_image2_name).setTint(8145955);
|
||||
this.add.text(displayW * 0.9 - 50, 579, data.right_image3_name).setTint(8145955);
|
||||
this.add.text(displayW * 0.9 - 50, 750, data.right_image4_name).setTint(8145955);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
async; submitUserData(); {
|
||||
try {
|
||||
const response = await fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify('Test submission')
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// console.log('Data Saved', response);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error occurred', error);
|
||||
}
|
||||
}
|
||||
submitButton = this.add.text(window.innerWidth / 2, window.innerHeight / 2, "Submit", {
|
||||
font: '600 40px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: '#05b3a4',
|
||||
});
|
||||
submitButton.setVisible(true);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
});
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.8 - 5, 30, "topLogo").setScale();
|
||||
this.add.image(displayW * 0.9 - 32, 170, "target1"),
|
||||
this.add.image(displayW * 0.9 - 32, 170, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9 - 32, 340, "target2"),
|
||||
this.add.image(displayW * 0.9 - 32, 340, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9 - 32, 510, "target3"),
|
||||
this.add.image(displayW * 0.9 - 32, 510, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9 - 32, 680, "target4"),
|
||||
this.add.image(displayW * 0.9 - 32, 680, "border").setAlpha(0.4).setScale(0.7);
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 120,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 280,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 460,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 640,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
];
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
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.2).setScale(0.7);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
||||
blocks.forEach((block, index) => {
|
||||
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);
|
||||
let droppedOnTargetZone = false;
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)) {
|
||||
if (targetZone.block === null) {
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
|
||||
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
|
||||
}
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,636 @@
|
|||
---
|
||||
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>
|
||||
<!-- <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>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
buttonHeight = 0;
|
||||
retryButtonWidth = window.innerWidth / 2 - 140;
|
||||
retryButtonHeight = window.innerHeight - 50;
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||
} else {
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
buttonHeight = 0;
|
||||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let scoreTotal = 0;
|
||||
let resultView; // scoreTotal resultView
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
currentDate = new Date();
|
||||
|
||||
formattedDateTime = currentDate.toLocaleString();
|
||||
|
||||
};
|
||||
function generateShortUniqueID(length) {14
|
||||
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;
|
||||
};
|
||||
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
|
||||
const leftTargetZones = [
|
||||
{
|
||||
x: window.innerWidth / 4,
|
||||
y: window.innerHeight / 2.5,
|
||||
name: "target1",
|
||||
block: null,
|
||||
},
|
||||
// Add more left target zones as needed
|
||||
];
|
||||
const centerTargetZones = [
|
||||
{
|
||||
x: window.innerWidth / 2,
|
||||
y: window.innerHeight / 2.5,
|
||||
name: "target2",
|
||||
block: null,
|
||||
},
|
||||
// Add more right target zones as needed
|
||||
];
|
||||
|
||||
const rightTargetZones = [
|
||||
{
|
||||
x: window.innerWidth / 1.33,
|
||||
y: window.innerHeight / 2.5,
|
||||
name: "target3",
|
||||
block: null,
|
||||
},
|
||||
// Add more right target zones as needed
|
||||
];
|
||||
|
||||
const targetZones = [...leftTargetZones, ...centerTargetZones, ...rightTargetZones];
|
||||
// console.log(blockMatches.blockName, blockMatches.targetName)
|
||||
var assetsList = {};
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
} else{
|
||||
imageCustomWidth = "?width=100";
|
||||
}
|
||||
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
|
||||
assetsList.element1 = assetsURL + image1 + imageCustomWidth;
|
||||
assetsList.element2 = assetsURL + image2 + imageCustomWidth;
|
||||
assetsList.element3 = assetsURL + image3 + imageCustomWidth;
|
||||
assetsList.element4 = assetsURL + image4 + imageCustomWidth;
|
||||
assetsList.element5 = assetsURL + image5 + imageCustomWidth;
|
||||
assetsList.element6 = assetsURL + image6 + imageCustomWidth;
|
||||
assetsList.element7 = assetsURL + image7 + imageCustomWidth;
|
||||
assetsList.element8 = assetsURL + image8 + imageCustomWidth;
|
||||
// console.log(assetsList.left_image1)
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: '#ffffff',
|
||||
parent: "phaser-example",
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
},
|
||||
scene: MyGame,
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
class MyGame extends Phaser.Scene {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
preload() {
|
||||
var progressBar = this.add.graphics();
|
||||
var progressBox = this.add.graphics();
|
||||
progressBox.fillStyle(0x222222, 0.8);
|
||||
progressBox.fillRect(240, 270, 320, 50);
|
||||
|
||||
var width = this.cameras.main.width;
|
||||
var height = this.cameras.main.height;
|
||||
var loadingText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 50,
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
font: '20px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
loadingText.setOrigin(0.5, 0.5);
|
||||
var percentText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 5,
|
||||
text: '0%',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
percentText.setOrigin(0.5, 0.5);
|
||||
var assetText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 + 50,
|
||||
text: '',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
assetText.setOrigin(0.5, 0.5);
|
||||
this.load.on('progress', function (value) {
|
||||
percentText.setText(parseInt(value * 100) + '%');
|
||||
progressBar.clear();
|
||||
progressBar.fillStyle(0xffffff, 1);
|
||||
progressBar.fillRect(250, 280, 300 * value, 30);
|
||||
});
|
||||
this.load.on('fileprogress', function (file) {
|
||||
assetText.setText('Loading asset: ' + file.key);
|
||||
});
|
||||
this.load.on('complete', function () {
|
||||
progressBar.destroy();
|
||||
progressBox.destroy();
|
||||
loadingText.destroy();
|
||||
percentText.destroy();
|
||||
assetText.destroy();
|
||||
});
|
||||
// this.load.image('logo', 'zenvalogo.png');
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
this.load.spritesheet("blocks1", assetsList.element5,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks2", assetsList.element6,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks3", assetsList.element7,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks4", assetsList.element8,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks5", assetsList.element1,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks6", assetsList.element2, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks7", assetsList.element3, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks8", assetsList.element4, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
}
|
||||
|
||||
create() {
|
||||
// const borderGraphics = this.add.graphics();
|
||||
// borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
|
||||
// const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
|
||||
// borderGraphics.beginPath();
|
||||
// borderGraphics.moveTo(borderX, 130);
|
||||
// borderGraphics.lineTo(borderX, window.innerHeight - 260);
|
||||
// borderGraphics.strokePath();
|
||||
// borderGraphics.closePath();
|
||||
const borderThickness = 6;
|
||||
const borderGraphicsX = this.add.graphics();
|
||||
const borderThicknessX = 6;
|
||||
borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
|
||||
const borderY = window.innerHeight / 1.5; // Center the border vertically on the screen
|
||||
borderGraphicsX.beginPath();
|
||||
borderGraphicsX.moveTo(0, borderY);
|
||||
borderGraphicsX.lineTo(window.innerWidth, borderY);
|
||||
borderGraphicsX.strokePath();
|
||||
borderGraphicsX.closePath();
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
blockMatches = [
|
||||
{
|
||||
blockName: "blocks1",
|
||||
targetName: `target${data.match_with1}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks2",
|
||||
targetName: `target${data.match_with2}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks3",
|
||||
targetName: `target${data.match_with3}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks4",
|
||||
targetName: `target${data.match_with4}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks5",
|
||||
targetName: `target${data.match_with5}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks6",
|
||||
targetName: `target${data.match_with6}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks7",
|
||||
targetName: `target${data.match_with7}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks8",
|
||||
targetName: `target${data.match_with8}`,
|
||||
}
|
||||
];
|
||||
// console.log(data)
|
||||
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
|
||||
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
|
||||
}
|
||||
if(isMobile){
|
||||
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
|
||||
} else{
|
||||
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
|
||||
}
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 22;
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 95, data.description, {
|
||||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if(response.ok){
|
||||
// console.log('Data Saved', response)
|
||||
} else{
|
||||
// console.log('Something Wrong', response)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error)
|
||||
});
|
||||
};
|
||||
// window.load
|
||||
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 2 - 200,
|
||||
y: window.innerHeight - 250,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-100,
|
||||
y: window.innerHeight - 250,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 250,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 2+100,
|
||||
y: window.innerHeight - 250,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-200,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks5",
|
||||
id: "block5",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-100,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks6",
|
||||
id: "block6",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks7",
|
||||
id: "block7",
|
||||
},
|
||||
{
|
||||
x: displayW / 2+100,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks8",
|
||||
id: "block8",
|
||||
},
|
||||
];
|
||||
// console.log('test blocks',blocks[0])
|
||||
let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.2;}
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
blocks.forEach((block, index) => {
|
||||
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
|
||||
// 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).setDepth(-2);
|
||||
let droppedOnTargetZone = false;
|
||||
|
||||
// Get the Y position from the first target zone
|
||||
const baseY = targetZones[0].y - 50;
|
||||
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)
|
||||
) {
|
||||
const col = counter % 2;
|
||||
const row = Math.floor(counter / 2);
|
||||
newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), row * (newBlock.height + 10));
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
// Handle match logic if needed
|
||||
}
|
||||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
|
||||
}
|
||||
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
retryButton.setVisible(false);
|
||||
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++;
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
const displayResult = (droppedBlocks) => {
|
||||
droppedBlocks.forEach((block) => {
|
||||
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
|
||||
});
|
||||
};
|
||||
|
||||
</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%;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -465,7 +465,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0).setScale(borderScale);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
|
@ -492,7 +492,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
|
||||
const col = counter % 2;
|
||||
const row = Math.floor(counter / 2);
|
||||
newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
|
||||
// newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
|
|
@ -504,7 +505,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
targetZoneBorders[targetIndex].setAlpha(0);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<div class="flex flex-row place-content-between pt-2">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
|
|
@ -15,13 +15,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
|
||||
<!-- <p id="LearningSubArea"></p> -->
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center ">
|
||||
<img class="w-[800px]" draggable="false" id="descImage" src="" alt="" />
|
||||
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-6 select-none " id="gameLabel"></p>
|
||||
<div class="flex flex-col justify-center place-items-center">
|
||||
<img class="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" />
|
||||
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
|
||||
</div>
|
||||
<form id="contactForm" class="">
|
||||
<div id="itemForm" class="">
|
||||
<div class="flex flex-row gap-6 place-content-between">
|
||||
<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" />
|
||||
|
|
@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-center pt-8">
|
||||
<div class="flex flex-col place-items-center justify-center pt-4">
|
||||
<p id="savedMessage"></p>
|
||||
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
|
||||
</div>
|
||||
|
|
@ -194,7 +194,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
#image1, #image2, #image3, #image4, #image5, #image6{
|
||||
width: 250px;
|
||||
width: 240px;
|
||||
}
|
||||
#label1, #label2, #label3, #label4, #label5, #label6{
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue