work place dragged blocks position each next
parent
287d2469e6
commit
ab3be22771
|
@ -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;
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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', () => {
|
||||||
|
|
Loading…
Reference in New Issue