+
diff --git a/src/pages/drag/MyGame.mjs b/src/pages/drag/MyGame.mjs
deleted file mode 100644
index 1cee03e..0000000
--- a/src/pages/drag/MyGame.mjs
+++ /dev/null
@@ -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);
-}
-});
-});
-}
-}
diff --git a/src/pages/drag/tmp2.astro b/src/pages/drag/tmp2.astro
new file mode 100644
index 0000000..83afa36
--- /dev/null
+++ b/src/pages/drag/tmp2.astro
@@ -0,0 +1,636 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index d48b3c2..a3bf45d 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -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;
}
});
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 83039a0..6653014 100644
--- a/src/pages/tick/v3.astro
+++ b/src/pages/tick/v3.astro
@@ -7,7 +7,7 @@ import Layout from "../../layouts/Layout.astro";
-
+
Tick
@@ -15,13 +15,13 @@ import Layout from "../../layouts/Layout.astro";
-
-
![]()
-
+
+
![]()
+