From 9fff1e4a296e6b94fce477a7d469ed3c9175925f Mon Sep 17 00:00:00 2001 From: dev sp Date: Thu, 8 Feb 2024 15:48:41 +0000 Subject: [PATCH] reverse drag v3 and v4 --- src/pages/drag/v2.astro | 55 +++---- src/pages/drag/v3.astro | 336 +++++++++++++++++++--------------------- src/pages/drag/v4.astro | 11 +- 3 files changed, 193 insertions(+), 209 deletions(-) diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index 602ff01..1ea9beb 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -86,6 +86,9 @@ import Layout from '../../layouts/Layout.astro'; // Format the date and time as a string formattedDateTime = currentDate.toLocaleString(); + + // Log the formatted date and time to the console + // // console.log("Page loaded on: " + formattedDateTime); }; function generateShortUniqueID(length) {14 const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; @@ -230,6 +233,11 @@ 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("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, @@ -293,6 +301,7 @@ import Layout from '../../layouts/Layout.astro'; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; // Base font size for your text 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, 76, data.description, { font: ` ${responsiveFontSize}px Quicksand`, @@ -301,21 +310,16 @@ import Layout from '../../layouts/Layout.astro'; // 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 - let customWidth = window.innerWidth; - let customHeight = window.innerHeight; - let nameTextSize; - let namePosition; - if(isMobile){nameTextSize = `10px`; namePosition = 30}else{nameTextSize = `15px`; namePosition = 0} - this.add.text(customWidth / 20, 240, data.left_image1_name, {font: nameTextSize, fill: `#7c4c23`}); - this.add.text(customWidth / 20, 409, data.left_image2_name, {font: nameTextSize, fill: `#7c4c23`}); - this.add.text(customWidth / 20, 579, data.left_image3_name, {font: nameTextSize, fill: `#7c4c23`}); - this.add.text(customWidth / 20, 750, data.left_image4_name, {font : nameTextSize, fill: `#7c4c23`}); + 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 - this.add.text(customWidth / 1.3 - namePosition, 240, data.right_image1_name, {font: nameTextSize, fill: `#7c4c23`}); - this.add.text(customWidth / 1.3 - namePosition, 409, data.right_image2_name, {font: nameTextSize, fill: `#7c4c23`}); - this.add.text(customWidth / 1.3 - namePosition, 579, data.right_image3_name, {font: nameTextSize, fill: `#7c4c23`}); - this.add.text(customWidth / 1.3 - namePosition, 750, data.right_image4_name, {font: nameTextSize, fill: `#7c4c23`}); + 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); @@ -371,16 +375,16 @@ import Layout from '../../layouts/Layout.astro'; submitUserData(); }) // 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 / 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); const blocks = [ { x: displayW / 15 - 15, @@ -412,16 +416,15 @@ 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 = displayW / 1.25, targetZone.y, targetZone.name).setAlpha(1).setScale(1); + 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, 1).setOrigin(0, 0).setInteractive({ draggable: true }); - this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(1); + this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); newBlock.on("drag", (pointer, dragX, dragY) => { - newBlock.setAlpha(0) newBlock.setScale(1.3); newBlock.x = dragX; newBlock.y = dragY; diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index 9df877b..a5b72bc 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -64,8 +64,8 @@ import Layout from '../../layouts/Layout.astro'; buttonHeight = 0; retryButtonWidth = window.innerWidth / 2 - 140; retryButtonHeight = window.innerHeight - 50; - leftTargetZoneW = window.innerWidth / 6; - rightTargetZoneW = window.innerWidth * 0.9 - 40; + leftTargetZoneW = window.innerWidth * 0.9 - 40; + rightTargetZoneW = window.innerWidth / 6; } else { noticeWidth = 100; noticeHeight = 0; @@ -73,23 +73,26 @@ import Layout from '../../layouts/Layout.astro'; buttonHeight = 0; retryButtonWidth = window.innerWidth / 2 - 50; retryButtonHeight = window.innerHeight - 70; - leftTargetZoneW = window.innerWidth / 6; - rightTargetZoneW = window.innerWidth * 0.9 - 172; + leftTargetZoneW = window.innerWidth * 0.9 - 172; + rightTargetZoneW = window.innerWidth / 6; } let submitButton; let formattedDateTime; let shortUniqueID; let retryButton; let blockMatches; - let scoreTotal = 0; - let resultView; // scoreTotal resultView + let resultView; + let scoreTotal = 0; // resultView scoreTotal gameResult = []; window.onload = function() { // Get the current date and time currentDate = new Date(); + // Format the date and time as a string formattedDateTime = currentDate.toLocaleString(); - + + // Log the formatted date and time to the console + // // console.log("Page loaded on: " + formattedDateTime); }; function generateShortUniqueID(length) {14 const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; @@ -101,41 +104,62 @@ import Layout from '../../layouts/Layout.astro'; return result; }; shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 - const leftTargetZones = [ - { - x: window.innerWidth / 4, - y: window.innerHeight / 2.5, - name: "target1", - block: null, - }, - // Add more left target zones as needed - ]; - const centerTargetZones = [ - { - x: window.innerWidth / 2, - y: window.innerHeight / 2.5, - name: "target2", - block: null, - }, - // Add more right target zones as needed - ]; - const rightTargetZones = [ - { - x: window.innerWidth / 1.33, - y: window.innerHeight / 2.5, - name: "target3", - block: null, - }, - // Add more right target zones as needed - ]; - - const targetZones = [...leftTargetZones, ...centerTargetZones, ...rightTargetZones]; + const targetZones = [ + { + x: rightTargetZoneW, + y: 170, + name: "target1", + block: null, + }, + { + x: rightTargetZoneW, + y: 340, + name: "target2", + block: null, + }, + { + x: rightTargetZoneW, + y: 510, + name: "target3", + block: null, + }, + { + x: rightTargetZoneW, + 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, + }, + ]; // console.log(blockMatches.blockName, blockMatches.targetName) var assetsList = {}; const params = new URLSearchParams(window.location.search); const paramsID = params.get('id'); - const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) + const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { const {image1, image2, image3, image4, image5, image6, image7, image8} = data; @@ -153,7 +177,6 @@ import Layout from '../../layouts/Layout.astro'; assetsList.element6 = assetsURL + image6 + imageCustomWidth; assetsList.element7 = assetsURL + image7 + imageCustomWidth; assetsList.element8 = assetsURL + image8 + imageCustomWidth; - // console.log(assetsList.left_image1) const config = { type: Phaser.AUTO, width: window.innerWidth, @@ -231,7 +254,6 @@ import Layout from '../../layouts/Layout.astro'; 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'); } @@ -275,85 +297,50 @@ import Layout from '../../layouts/Layout.astro'; } create() { - // const borderGraphics = this.add.graphics(); - // 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 borderThickness = 6; - const borderGraphicsX = this.add.graphics(); - const borderThicknessX = 6; - borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6 - const borderY = window.innerHeight / 1.5; // 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_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) + fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({ data }) => { + console.log(data) blockMatches = [ - { - blockName: "blocks1", - targetName: `target${data.match_with1}`, - }, - { - blockName: "blocks2", - targetName: `target${data.match_with2}`, - }, - { - blockName: "blocks3", - targetName: `target${data.match_with3}`, - }, - { - blockName: "blocks4", - targetName: `target${data.match_with4}`, - }, - { - blockName: "blocks5", - targetName: `target${data.match_with5}`, - }, - { - blockName: "blocks6", - targetName: `target${data.match_with6}`, - }, - { - blockName: "blocks7", - targetName: `target${data.match_with7}`, - }, - { - blockName: "blocks8", - targetName: `target${data.match_with8}`, - } + { + blockName: "blocks1", + targetName: `target${data.match_with1}`, + }, + { + blockName: "blocks2", + targetName: `target${data.match_with2}`, + }, + { + blockName: "blocks3", + targetName: `target${data.match_with3}`, + }, + { + blockName: "blocks4", + targetName: `target${data.match_with4}`, + }, + { + blockName: "blocks5", + targetName: `target${data.match_with5}`, + }, + { + blockName: "blocks6", + targetName: `target${data.match_with6}`, + }, + { + blockName: "blocks7", + targetName: `target${data.match_with7}`, + }, + { + blockName: "blocks8", + targetName: `target${data.match_with8}`, + } ]; // console.log(data) - if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){ - this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`}) - this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`}) - } - if(isMobile){ - this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`}); - this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`}); - } else{ - this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`}); - this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`}); - } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; // Base font size for your text - const baseFontSize = 22; + 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, { @@ -419,61 +406,61 @@ import Layout from '../../layouts/Layout.astro'; this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); const blocks = [ { - x: displayW / 2 - 200, - y: window.innerHeight - 250, + x: displayW / 2-400, + y: window.innerHeight - 120, textureKey: "blocks1", id: "block1", }, { - x: displayW / 2-100, - y: window.innerHeight - 250, + x: displayW / 2-300, + y: window.innerHeight - 120, textureKey: "blocks2", id: "block2", }, { - x: displayW / 2, - y: window.innerHeight - 250, + x: displayW / 2-200, + y: window.innerHeight - 120, textureKey: "blocks3", id: "block3", }, { - x: displayW / 2+100, - y: window.innerHeight - 250, + x: displayW / 2 - 100, + y: window.innerHeight - 120, textureKey: "blocks4", id: "block4", }, { - x: displayW / 2-200, + x: displayW / 2, y: window.innerHeight - 120, textureKey: "blocks5", id: "block5", }, { - x: displayW / 2-100, + x: displayW / 2+100, y: window.innerHeight - 120, textureKey: "blocks6", id: "block6", }, { - x: displayW / 2, + x: displayW / 2+200, y: window.innerHeight - 120, textureKey: "blocks7", id: "block7", }, { - x: displayW / 2+100, + x: displayW / 2+300, y: window.innerHeight - 120, textureKey: "blocks8", id: "block8", }, ]; // console.log('test blocks',blocks[0]) - let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.2;} const droppedBlocks = []; const targetZoneBorders = []; - targetZones.forEach((targetZone) => { + targetZones.forEach((targetZone, index) => { 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.2).setScale(0.65); + const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -484,51 +471,42 @@ import Layout from '../../layouts/Layout.astro'; newBlock.setScale(1.3); newBlock.x = dragX; newBlock.y = dragY; - }); - - newBlock.on("dragend", () => { - newBlock.setScale(1.0).setDepth(-2); + }); + 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) - ) - ) { - // 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.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); - return; - } + 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); + } + droppedOnTargetZone = true; + targetZoneBorders[targetIndex].setVisible(true); + targetZoneBorders[targetIndex].setAlpha(1); + return; + } }); if (!droppedOnTargetZone) { - newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY); + newBlock.setPosition(block.x, block.y); } - - // Check if all blocks have been dropped on target zones - if (droppedBlocks.length === targetZones.length) { - displayResult(droppedBlocks); + if (droppedBlocks.length === targetZones.length) + { + displayResult(droppedBlocks); } - }); - - - + }); }); retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton.setInteractive().on('pointerdown', () => { @@ -537,24 +515,26 @@ import Layout from '../../layouts/Layout.astro'; retryButton.setVisible(false); let score = 0; let counter = 0; + const isMatch = (blockName, targetName) => { - if(isMatch){ - counter++; + if(isMatch){ + counter++; + // console.log(counter) + } + //resultView scoreTotal + const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); + console.log(match) + if(match){ + scoreTotal++; + resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); + // console.log(scoreTotal) + } + if(counter === 8){ // console.log(counter) - } - const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); - console.log(match) - if(match !== undefined){ - scoreTotal++; - resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); - console.log("Score Total", scoreTotal) - } - if(counter === 8){ - // console.log(counter) - submitButton.setVisible(true); - retryButton.setVisible(true); - resultView.setVisible(true); - } + submitButton.setVisible(true); + retryButton.setVisible(true); + resultView.setVisible(true); + } }; } } diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index a3bf45d..df6d75b 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).setScale(borderScale); + const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale); targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -492,8 +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 - 50, targetZone.y - 50); + + newBlock.setPosition(targetZone.x - 50, targetZone.y -50); newBlock.disableInteractive(); targetZone.block = newBlock; droppedBlocks.push(newBlock); @@ -505,18 +505,19 @@ import Layout from '../../layouts/Layout.astro'; droppedOnTargetZone = true; targetZoneBorders[targetIndex].setVisible(true); - targetZoneBorders[targetIndex].setAlpha(0); + 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); + newBlock.setVisible(false); } });