From ab3be2277115eb96207ed6f943f994d15c361bad Mon Sep 17 00:00:00 2001 From: dev sp Date: Sat, 20 Jan 2024 12:30:14 +0000 Subject: [PATCH] work place dragged blocks position each next --- src/pages/cross/v1.astro | 6 +-- src/pages/cross/v2.astro | 6 +-- src/pages/cross/v3.astro | 6 +-- src/pages/drag/v4.astro | 95 ++++++++++++++++++---------------------- 4 files changed, 52 insertions(+), 61 deletions(-) diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro index 317dfc5..ae1cc8c 100644 --- a/src/pages/cross/v1.astro +++ b/src/pages/cross/v1.astro @@ -112,12 +112,12 @@ import Layout from "../../layouts/Layout.astro"; if (checkbox.checked) { if (gameData[id.replace('image', 'a')] === true) { - element.classList.add('greenBorder'); - } else { element.classList.add('redBorder'); + } else { + element.classList.add('greenBorder'); } } else { - element.classList.remove('greenBorder', 'redBorder'); + element.classList.remove('redBorder', 'greenBorder'); } } let url = window.location.href; diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro index e1fa687..a13c3e7 100644 --- a/src/pages/cross/v2.astro +++ b/src/pages/cross/v2.astro @@ -137,12 +137,12 @@ import Layout from "../../layouts/Layout.astro"; if (checkbox.checked) { if (gameData[id.replace('image', 'a')] === true) { - element.classList.add('redBorder'); - } else { element.classList.add('greenBorder'); + } else { + element.classList.add('redBorder'); } } else { - element.classList.remove('redBorder', 'greenBorder'); + element.classList.remove('greenBorder', 'redBorder'); } } diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro index aa31b3b..3386af8 100644 --- a/src/pages/cross/v3.astro +++ b/src/pages/cross/v3.astro @@ -100,12 +100,12 @@ import Layout from "../../layouts/Layout.astro"; if (checkbox.checked) { if (gameData[id.replace('image', 'a')] === true) { - element.classList.add('redBorder'); - } else { element.classList.add('greenBorder'); + } else { + element.classList.add('redBorder'); } } else { - element.classList.remove('redBorder', 'greenBorder'); + element.classList.remove('greenBorder', 'redBorder'); } } let url = window.location.href; diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index b3352dc..8ee3000 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -266,26 +266,6 @@ import Layout from '../../layouts/Layout.astro'; } 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 paramsID = params.get('id'); fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) @@ -460,7 +440,7 @@ import Layout from '../../layouts/Layout.astro'; }, ]; // console.log('test blocks',blocks[0]) - let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;} + let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;} const droppedBlocks = []; const targetZoneBorders = []; targetZones.forEach((targetZone) => { @@ -479,43 +459,54 @@ import Layout from '../../layouts/Layout.astro'; }); 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) => { + if ( + Phaser.Geom.Intersects.RectangleToRectangle( + newBlock.getBounds(), + new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) + ) + ) { + // Set the position based on target zone index + const col = counter % 2; + const row = Math.floor(counter / 2); - targetZones.forEach((targetZone, targetIndex) => { - if ( - Phaser.Geom.Intersects.RectangleToRectangle( - newBlock.getBounds(), - new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) - ) - ) { - newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` - newBlock.disableInteractive(); - targetZone.block = newBlock; - droppedBlocks.push(newBlock); + // Adjust the x and y coordinates accordingly + newBlock.setPosition(targetZone.x + col * (newBlock.width + 10), targetZone.y + row * (newBlock.height + 10)); + + newBlock.disableInteractive(); + targetZone.block = newBlock; + droppedBlocks.push(newBlock); + + // Adjust isMatch function based on your requirements + if (isMatch(newBlock.texture.key, targetZone.name)) { + // Handle match logic if needed + } + + droppedOnTargetZone = true; + targetZoneBorders[targetIndex].setVisible(true); + targetZoneBorders[targetIndex].setAlpha(1); + counter++; + + return; + } + }); + + if (!droppedOnTargetZone) { + newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY); + } + + // Check if all blocks have been dropped on target zones + if (droppedBlocks.length === targetZones.length) { + displayResult(droppedBlocks); + } + }); - // Adjust isMatch function based on your requirements - 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); - } - // Check if all blocks have been dropped on target zones - if (droppedBlocks.length === targetZones.length) { - displayResult(droppedBlocks); - } - });