work place dragged blocks position each next

pull/2/head
dev sp 2024-01-20 12:30:14 +00:00
parent 287d2469e6
commit ab3be22771
4 changed files with 52 additions and 61 deletions

View File

@ -112,12 +112,12 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder'); element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} }
} else { } else {
element.classList.remove('greenBorder', 'redBorder'); element.classList.remove('redBorder', 'greenBorder');
} }
} }
let url = window.location.href; let url = window.location.href;

View File

@ -137,12 +137,12 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder'); element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
} }
} else { } else {
element.classList.remove('redBorder', 'greenBorder'); element.classList.remove('greenBorder', 'redBorder');
} }
} }

View File

@ -100,12 +100,12 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder'); element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
} }
} else { } else {
element.classList.remove('redBorder', 'greenBorder'); element.classList.remove('greenBorder', 'redBorder');
} }
} }
let url = window.location.href; let url = window.location.href;

View File

@ -266,26 +266,6 @@ import Layout from '../../layouts/Layout.astro';
} }
create() { create() {
// const borderGraphics = this.add.graphics();
// const borderThickness = 6;
// 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 borderGraphicsX = this.add.graphics();
// const borderThicknessX = 6;
// borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
// const borderY = window.innerHeight / 5 - borderThickness / 2; // 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 params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
@ -480,7 +460,6 @@ import Layout from '../../layouts/Layout.astro';
newBlock.on("dragend", () => { newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2); newBlock.setScale(1.0).setDepth(-2);
let droppedOnTargetZone = false; let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => { targetZones.forEach((targetZone, targetIndex) => {
@ -490,7 +469,13 @@ import Layout from '../../layouts/Layout.astro';
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
) )
) { ) {
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // Set the position based on target zone index
const col = counter % 2;
const row = Math.floor(counter / 2);
// Adjust the x and y coordinates accordingly
newBlock.setPosition(targetZone.x + col * (newBlock.width + 10), targetZone.y + row * (newBlock.height + 10));
newBlock.disableInteractive(); newBlock.disableInteractive();
targetZone.block = newBlock; targetZone.block = newBlock;
droppedBlocks.push(newBlock); droppedBlocks.push(newBlock);
@ -503,6 +488,8 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true; droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true); targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1); targetZoneBorders[targetIndex].setAlpha(1);
counter++;
return; return;
} }
}); });
@ -519,6 +506,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {