From a65cee3ba9e0c6bcc58ed760b542e57934d6e68e Mon Sep 17 00:00:00 2001 From: dev sp Date: Tue, 23 Jan 2024 13:24:00 +0000 Subject: [PATCH] change drawing v2, drag v2, drag v3 --- src/pages/drag/v2.astro | 65 ++- src/pages/drag/v20.astro | 601 ++++++++++++++++++++++ src/pages/drag/v3.astro | 336 +++++++------ src/pages/drag/v30.astro | 615 +++++++++++++++++++++++ src/pages/drag/v4.astro | 30 +- src/pages/drag/{tmp2.astro => v40.astro} | 1 - src/pages/drawing/v2.astro | 23 +- 7 files changed, 1447 insertions(+), 224 deletions(-) create mode 100644 src/pages/drag/v20.astro create mode 100644 src/pages/drag/v30.astro rename src/pages/drag/{tmp2.astro => v40.astro} (99%) diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index 7b2bae4..602ff01 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -86,9 +86,6 @@ 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'; @@ -233,11 +230,6 @@ 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, @@ -301,7 +293,6 @@ 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`, @@ -310,16 +301,21 @@ 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 - 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); + 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`}); //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); + 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`}); }) .catch(error => { console.error('Error fetching initial data:', error); @@ -375,16 +371,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, @@ -416,15 +412,16 @@ 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 * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); + const targetBorder = this.add.image(targetZone.x = displayW / 1.25, targetZone.y, targetZone.name).setAlpha(1).setScale(1); 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(0.3); + this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(1); newBlock.on("drag", (pointer, dragX, dragY) => { + newBlock.setAlpha(0) newBlock.setScale(1.3); newBlock.x = dragX; newBlock.y = dragY; @@ -533,11 +530,11 @@ import Layout from '../../layouts/Layout.astro'; \ No newline at end of file diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index a5b72bc..9df877b 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 * 0.9 - 40; - rightTargetZoneW = window.innerWidth / 6; + leftTargetZoneW = window.innerWidth / 6; + rightTargetZoneW = window.innerWidth * 0.9 - 40; } else { noticeWidth = 100; noticeHeight = 0; @@ -73,26 +73,23 @@ import Layout from '../../layouts/Layout.astro'; buttonHeight = 0; retryButtonWidth = window.innerWidth / 2 - 50; retryButtonHeight = window.innerHeight - 70; - leftTargetZoneW = window.innerWidth * 0.9 - 172; - rightTargetZoneW = window.innerWidth / 6; + leftTargetZoneW = window.innerWidth / 6; + rightTargetZoneW = window.innerWidth * 0.9 - 172; } let submitButton; let formattedDateTime; let shortUniqueID; let retryButton; let blockMatches; - let resultView; - let scoreTotal = 0; // resultView scoreTotal + let scoreTotal = 0; + let resultView; // scoreTotal resultView 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'; @@ -104,62 +101,41 @@ 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 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, - }, - ]; + 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]; // 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_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) + const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { const {image1, image2, image3, image4, image5, image6, image7, image8} = data; @@ -177,6 +153,7 @@ 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, @@ -254,6 +231,7 @@ 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'); } @@ -297,50 +275,85 @@ 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_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) + fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${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 = 30; + const baseFontSize = 22; // 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, { @@ -406,61 +419,61 @@ import Layout from '../../layouts/Layout.astro'; this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); const blocks = [ { - x: displayW / 2-400, - y: window.innerHeight - 120, + x: displayW / 2 - 200, + y: window.innerHeight - 250, textureKey: "blocks1", id: "block1", }, { - x: displayW / 2-300, - y: window.innerHeight - 120, + x: displayW / 2-100, + y: window.innerHeight - 250, textureKey: "blocks2", id: "block2", }, { - x: displayW / 2-200, - y: window.innerHeight - 120, + x: displayW / 2, + y: window.innerHeight - 250, textureKey: "blocks3", id: "block3", }, { - x: displayW / 2 - 100, - y: window.innerHeight - 120, + x: displayW / 2+100, + y: window.innerHeight - 250, textureKey: "blocks4", id: "block4", }, { - x: displayW / 2, + x: displayW / 2-200, 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+200, + x: displayW / 2, y: window.innerHeight - 120, textureKey: "blocks7", id: "block7", }, { - x: displayW / 2+300, + x: displayW / 2+100, 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, index) => { + 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 targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) + const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale); targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -471,42 +484,51 @@ import Layout from '../../layouts/Layout.astro'; newBlock.setScale(1.3); newBlock.x = dragX; newBlock.y = dragY; - }); - newBlock.on("dragend", () => { - newBlock.setScale(1.0); + }); + + newBlock.on("dragend", () => { + newBlock.setScale(1.0).setDepth(-2); 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)) { - } - } else { - newBlock.setPosition(block.x, block.y); - } - 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) + ) + ) { + // 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 (!droppedOnTargetZone) { - newBlock.setPosition(block.x, block.y); + newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY); } - if (droppedBlocks.length === targetZones.length) - { - displayResult(droppedBlocks); + + // Check if all blocks have been dropped on target zones + if (droppedBlocks.length === targetZones.length) { + displayResult(droppedBlocks); } - }); + }); + + + }); retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton.setInteractive().on('pointerdown', () => { @@ -515,26 +537,24 @@ import Layout from '../../layouts/Layout.astro'; retryButton.setVisible(false); let score = 0; let counter = 0; - const isMatch = (blockName, targetName) => { - 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){ + if(isMatch){ + counter++; // console.log(counter) - submitButton.setVisible(true); - retryButton.setVisible(true); - resultView.setVisible(true); - } + } + 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); + } }; } } diff --git a/src/pages/drag/v30.astro b/src/pages/drag/v30.astro new file mode 100644 index 0000000..a5b72bc --- /dev/null +++ b/src/pages/drag/v30.astro @@ -0,0 +1,615 @@ +--- +import Layout from '../../layouts/Layout.astro'; +--- + +
+
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + + +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index 8789b7b..d48b3c2 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -480,7 +480,6 @@ import Layout from '../../layouts/Layout.astro'; newBlock.on("dragend", () => { newBlock.setScale(1.0).setDepth(-2); - let droppedOnTargetZone = false; targetZones.forEach((targetZone, targetIndex) => { @@ -490,21 +489,24 @@ import Layout from '../../layouts/Layout.astro'; 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); + // 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 + // 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; } - - droppedOnTargetZone = true; - targetZoneBorders[targetIndex].setVisible(true); - targetZoneBorders[targetIndex].setAlpha(1); - return; - } }); if (!droppedOnTargetZone) { diff --git a/src/pages/drag/tmp2.astro b/src/pages/drag/v40.astro similarity index 99% rename from src/pages/drag/tmp2.astro rename to src/pages/drag/v40.astro index 6dc352e..d48b3c2 100644 --- a/src/pages/drag/tmp2.astro +++ b/src/pages/drag/v40.astro @@ -480,7 +480,6 @@ import Layout from '../../layouts/Layout.astro'; newBlock.on("dragend", () => { newBlock.setScale(1.0).setDepth(-2); - let droppedOnTargetZone = false; targetZones.forEach((targetZone, targetIndex) => { diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index 388260a..142224e 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -69,8 +69,6 @@ import Layout from '../../layouts/Layout.astro'; } return result; } - // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length - // console.log(shortUniqueID); const params = new URLSearchParams(window.location.search); const paramsID = params.get('id'); @@ -406,26 +404,11 @@ import Layout from '../../layouts/Layout.astro'; }); customCursor = this.add.graphics(); customCursor.setDepth(2) - // Disable the default cursor this.input.setDefaultCursor('none'); const borderThickness = 0; const borderColor = 0xffffff; // White color (you can customize this) const borderGraphics = this.add.graphics(); borderGraphics.lineStyle(borderThickness, borderColor); - // borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); - // function continueDrawing(x, y) { - // if ( - // x >= drawingZone.x && - // x <= drawingZone.x + drawingZone.width && - // y >= drawingZone.y && - // y <= drawingZone.y + drawingZone.height - // ) { - // // The pointer is within the drawing zone, so continue drawing - // graphics.lineTo(x, y); - // graphics.strokePath(); - // } - // }; - // Add a "Save Snapshot" button if(isMobile){ snapWidth = 50; snapHeight = 70; @@ -491,6 +474,7 @@ import Layout from '../../layouts/Layout.astro'; function clearDrawing() { graphics.clear(); } + let alertTriggered = false; function update() { const slider = document.querySelector('input[type="range"]'); if (slider && !isDrawing) { @@ -507,6 +491,11 @@ import Layout from '../../layouts/Layout.astro'; // Position the cursor at the current mouse pointer coordinates customCursor.x = this.input.x; customCursor.y = this.input.y; + // Check the condition for triggering the alert + if (!alertTriggered && game.input.x > game.scale.width / 2 + 200) { + alert('Alert triggered!'); + alertTriggered = true; // Ensure the alert is triggered only once + } }