diff --git a/src/pages/drag/tmp.astro b/src/pages/drag/tmp.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index 6eafb06..ec8c589 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -62,33 +62,19 @@ import Layout from '../../layouts/Layout.astro';
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 {
+ retryButtonWidth = window.innerWidth / 2 - 50;
+ retryButtonHeight = window.innerHeight - 70;
+ } 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 imageElement1;
- let imageElement2;
- let imageElement3;
- let imageElement4;
- let imageElement5;
- let imageElement6;
- let imageElement7;
- let imageElement8;
- // let allElement = [element1, element2, element3, element4, element5, element6, element7, element8];
- // allElement.setVisible(false)
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -109,57 +95,33 @@ import Layout from '../../layouts/Layout.astro';
}
return result;
};
- shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
+ shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
const targetZones = [
{
- x: rightTargetZoneW,
+ x: 0,
y: 170,
name: "target1",
block: null,
},
{
- x: rightTargetZoneW,
+ x: 0,
y: 340,
name: "target2",
block: null,
},
{
- x: rightTargetZoneW,
+ x: 0,
y: 510,
name: "target3",
block: null,
},
{
- x: rightTargetZoneW,
+ x: 0,
y: 680,
name: "target4",
block: null,
},
- {
- x: leftTargetZoneW,
- y: 170,
- name: "target5",
- block: null,
- },
- {
- x: leftTargetZoneW,
- y: 340,
- name: "target6",
- block: null,
- },
- {
- x: leftTargetZoneW,
- y: 510,
- name: "target7",
- block: null,
- },
- {
- x: leftTargetZoneW,
- y: 680,
- name: "target8",
- block: null,
- },
];
const blockMatches = [
{
@@ -178,32 +140,12 @@ import Layout from '../../layouts/Layout.astro';
blockName: "blocks4",
targetName: "target4",
},
- {
- blockName: "blocks5",
- targetName: "target5",
- },
- {
- blockName: "blocks6",
- targetName: "target6",
- },
- {
- blockName: "blocks7",
- targetName: "target7",
- },
- {
- blockName: "blocks8",
- targetName: "target8",
- },
- {
- blockName: "blocks9",
- targetName: "target9",
- },
];
// console.log(blockMatches.blockName, blockMatches.targetName)
- var assetsList = {};
+ var assetsList = {}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
- const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+ const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
@@ -212,16 +154,15 @@ import Layout from '../../layouts/Layout.astro';
} else{
imageCustomWidth = "?width=100";
}
- const assetsURL = "https://management.beanstalkedu.com/assets/"
- assetsList.element1 = assetsURL + left_image1 + imageCustomWidth;
- assetsList.element2 = assetsURL + left_image2 + imageCustomWidth;
- assetsList.element3 = assetsURL + left_image3 + imageCustomWidth;
- assetsList.element4 = assetsURL + left_image4 + imageCustomWidth;
- assetsList.element5 = assetsURL + right_image1 + imageCustomWidth;
- assetsList.element6 = assetsURL + right_image2 + imageCustomWidth;
- assetsList.element7 = assetsURL + right_image3 + imageCustomWidth;
- assetsList.element8 = assetsURL + right_image4 + imageCustomWidth;
- // console.log(assetsList.left_image1)
+ const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+ assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth;
+ assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth;
+ assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth;
+ assetsList.left_image4 = assetsURL + left_image4 + imageCustomWidth;
+ assetsList.right_image1 = assetsURL + right_image1 + imageCustomWidth;
+ assetsList.right_image2 = assetsURL + right_image2 + imageCustomWidth;
+ assetsList.right_image3 = assetsURL + right_image3 + imageCustomWidth;
+ assetsList.right_image4 = assetsURL + right_image4 + imageCustomWidth;
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
@@ -306,51 +247,50 @@ import Layout from '../../layouts/Layout.astro';
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("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("blocks1", assetsList.element5,{
+ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks2", assetsList.element6,{
+ this.load.spritesheet("target2", assetsList.right_image2,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks3", assetsList.element7,{
+ this.load.spritesheet("target3", assetsList.right_image3,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks4", assetsList.element8,{
+ this.load.spritesheet("target4", assetsList.right_image4,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks5", assetsList.element1,{
+
+ this.load.spritesheet("blocks1", assetsList.left_image1,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks6", assetsList.element2, {
+ this.load.spritesheet("blocks2", assetsList.left_image2, {
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks7", assetsList.element3, {
+ this.load.spritesheet("blocks3", assetsList.left_image3, {
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks8", assetsList.element4, {
+ 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)}`)
+ fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data)
@@ -359,23 +299,23 @@ import Layout from '../../layouts/Layout.astro';
const baseFontSize = 30;
// 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, {
+ const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name
- this.add.text(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23);
- this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23);
- this.add.text(leftTargetZoneW - 45, 579, data.left_image3_name).setTint(0x7c4c23);
- this.add.text(leftTargetZoneW - 45, 750, data.left_image4_name).setTint(0x7c4c23);
+ this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
+ this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
+ this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23);
+ this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
- //Right Image Name leftTargetZoneW rightTargetZoneW
- this.add.text(rightTargetZoneW - 44, 240, data.right_image1_name).setTint(0x7c4c23);
- this.add.text(rightTargetZoneW - 44, 409, data.right_image2_name).setTint(0x7c4c23);
- this.add.text(rightTargetZoneW - 44, 579, data.right_image3_name).setTint(0x7c4c23);
- this.add.text(rightTargetZoneW - 44, 750, data.right_image4_name).setTint(0x7c4c23);
+ //Right Image Name
+ this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
+ this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
+ this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
+ this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
})
.catch(error => {
console.error('Error fetching initial data:', error);
@@ -433,76 +373,53 @@ import Layout from '../../layouts/Layout.astro';
// 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();
- // this.add.image(displayW * 0.9-32, 170, "target1"),
- // this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
- // this.add.image(displayW * 0.9-32, 340, "target2"),
- // this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
- // this.add.image(displayW * 0.9-32, 510, "target3"),
- // this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
- // this.add.image(displayW * 0.9-32, 680, "target4"),
- // this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
+ this.add.image(displayW * 0.9-32, 170, "target1"),
+ this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
+ this.add.image(displayW * 0.9-32, 340, "target2"),
+ this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
+ this.add.image(displayW * 0.9-32, 510, "target3"),
+ this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
+ this.add.image(displayW * 0.9-32, 680, "target4"),
+ this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks1",
- id: "block1",
- },
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks2",
- id: "block2",
- },
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks3",
- id: "block3",
- },
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks4",
- id: "block4",
- },
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks5",
- id: "block5",
- },
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks6",
- id: "block6",
- },
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks7",
- id: "block7",
- },
- {
- x: displayW / 2,
- y: window.innerHeight - 120,
- textureKey: "blocks8",
- id: "block8",
- },
+ {
+ x: displayW / 15 - 15,
+ y: 120,
+ textureKey: "blocks1",
+ id: "block1",
+ },
+ {
+ x: displayW / 15 - 15,
+ y: 280,
+ textureKey: "blocks2",
+ id: "block2",
+ },
+ {
+ x: displayW / 15 - 15,
+ y: 460,
+ textureKey: "blocks3",
+ id: "block3",
+ },
+ {
+ x: displayW / 15 - 15,
+ y: 640,
+ textureKey: "blocks4",
+ id: "block4",
+ },
];
- // console.log('test blocks',blocks[0])
+ this.graphics = this.add.graphics();
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(0.65);
+ const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
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);
+ 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;
@@ -511,52 +428,126 @@ import Layout from '../../layouts/Layout.astro';
newBlock.on("dragend", () => {
newBlock.setScale(1.0);
let droppedOnTargetZone = false;
+ let targetZoneMatched = null;
+
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)) {
- }
- } else {
- newBlock.setPosition(block.x, block.y);
+ if (
+ Phaser.Geom.Intersects.RectangleToRectangle(
+ newBlock.getBounds(),
+ new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+ )
+ ) {
+ droppedOnTargetZone = true;
+ targetZoneMatched = targetZone;
+ targetZoneBorders[targetIndex].setAlpha(1);
+ return;
}
- droppedOnTargetZone = true;
- targetZoneBorders[targetIndex].setVisible(true);
- targetZoneBorders[targetIndex].setAlpha(1);
- return;
- }
});
- if (!droppedOnTargetZone) {
- newBlock.setPosition(block.x, block.y);
+ if (droppedOnTargetZone) {
+ // Draw a line from the dragged block to the targetZone
+ this.graphics.lineStyle(6, 0xFF0000); // Red color
+ this.graphics.moveTo(block.x + 50, block.y + 50);
+ this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
+ this.graphics.strokePath();
+
+ newBlock.setPosition(targetZoneMatched.x - 50, targetZoneMatched.y - 50);
+ newBlock.disableInteractive();
+ targetZoneMatched.block = newBlock;
+ droppedBlocks.push(newBlock);
+
+ if (isMatch(newBlock.texture.key, targetZoneMatched.name)) {
+ // Handle matching logic
+ }
+ } else {
+ newBlock.setPosition(block.x, block.y);
}
- if (droppedBlocks.length === targetZones.length)
- {
- displayResult(droppedBlocks);
+
+ if (droppedBlocks.length === targetZones.length) {
+ // Display result or perform any other actions
+ displayResult(droppedBlocks);
}
- });
});
- // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
- // font: '600 30px Quicksand',
- // fill: '#fff',
- // backgroundColor: 'blue',
- // padding: { x: 20, y: 10 },
- // })
- let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
+ // newBlock.on("dragend", () => {
+ // newBlock.setScale(1.0);
+ // 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);
+ // }
+ // });
+ });
+ 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 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";
@@ -573,7 +564,7 @@ import Layout from '../../layouts/Layout.astro';
counter++;
// console.log(counter)
- if(counter === 8){
+ if(counter === 4){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
console.log(counter)
@@ -586,6 +577,59 @@ import Layout from '../../layouts/Layout.astro';
scoreTotal++;
// console.log(scoreTotal)
}
+ // console.log(scoreTotal)
+ // // console.log(match)
+ // if(match){
+ // score++;
+ // console.log(score)
+ // let day;
+ // switch (score) {
+ // case 0:
+ // day = "Points - 1";
+ // break;
+ // case 2:
+ // day = "Points - 2";
+ // break;
+ // case 4:
+ // day = "Points - 4";
+
+ // }
+ // console.log(day)
+ // finalDom = document.getElementById("good");
+ // finalDom.classList.add("good");
+ // document.getElementById("good").innerHTML = day;
+ // document.getElementById("good").style.color = '#7c4c23'
+ // // console.log(totalScore)
+ // // if(score === 2){
+ // // finalDom = document.getElementById("good");
+ // // finalDom.classList.add("good");
+ // // document.getElementById("good").innerHTML = " Good";
+ // // document.getElementById("good").style.color = '#7c4c23'
+
+
+ // // // let img = document.createElement("img");
+ // // // img.src = "/assets/party-feestje.gif";
+ // // // img.width = 100;
+ // // // document.getElementById('win').appendChild(img);
+ // // }
+ // // else if(score === 4) {
+ // // finalDom = document.getElementById("verryGood");
+ // // finalDom.classList.add("verryGood");
+ // // document.getElementById("verryGood").innerHTML = "Verry Good";
+ // // document.getElementById("verryGood").style.color = '#7c4c23'
+ // // }
+ // // else {
+ // // // finalDom = document.getElementById("lost");
+ // // // finalDom.classList.add("lost");
+ // // // document.getElementById("lost").innerHTML = " Lost";
+ // // // document.getElementById("lost").style.color = '#7c4c23'
+ // // // console.log("Losttttt")
+ // // }
+
+ // } else{
+ // score = score
+ // }
+ // return match !== undefined;
};
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
new file mode 100644
index 0000000..17404fd
--- /dev/null
+++ b/src/pages/drag/v3.astro
@@ -0,0 +1,659 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 96c442a..83039a0 100644
--- a/src/pages/tick/v3.astro
+++ b/src/pages/tick/v3.astro
@@ -16,7 +16,7 @@ import Layout from "../../layouts/Layout.astro";
-
![]()
+
![]()