diff --git a/public/assets/svg/button-icon.svg b/public/assets/svg/button-icon.svg index 10eb6c0..17a6e4c 100644 --- a/public/assets/svg/button-icon.svg +++ b/public/assets/svg/button-icon.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/public/assets/svg/clear.svg b/public/assets/svg/clear.svg new file mode 100644 index 0000000..d075449 --- /dev/null +++ b/public/assets/svg/clear.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/pointer.svg b/public/assets/svg/pointer.svg new file mode 100644 index 0000000..93f3f1d --- /dev/null +++ b/public/assets/svg/pointer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro index 51bac51..d0c25b4 100644 --- a/src/pages/drag/dragdrop_phonics.astro +++ b/src/pages/drag/dragdrop_phonics.astro @@ -57,7 +57,24 @@ import Layout from '../../layouts/Layout.astro'; width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2, }; + let submitButton; + let formattedDateTime; + let shortUniqueID; + let scoreTotal = 0; + let resultView; + let topLogoWidth; + let muteIconWidth; + let resetIconWidth; + let tickIconWidth; + let cancelIconWidth; + let retryButton; + let blockMatches; if(isMobile){ + topLogoWidth = 5; + muteIconWidth = 2; + resetIconWidth = 1.6; + tickIconWidth = 1.34; + cancelIconWidth = 1.16; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -67,6 +84,11 @@ import Layout from '../../layouts/Layout.astro'; leftTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth * 0.9 - 40; } else { + topLogoWidth = 6; + muteIconWidth = 1.3; + resetIconWidth = 1.26; + tickIconWidth = 1.222; + cancelIconWidth = 1.185; noticeWidth = 100; noticeHeight = 0; buttonWidth = 100; @@ -76,13 +98,6 @@ import Layout from '../../layouts/Layout.astro'; leftTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth * 0.9 - 172; } - let submitButton; - let formattedDateTime; - let shortUniqueID; - let retryButton; - let blockMatches; - let scoreTotal = 0; - let resultView; // scoreTotal resultView gameResult = []; window.onload = function() { // Get the current date and time @@ -228,8 +243,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("retryIcon", "/assets/svg/retry.svg") + this.load.image("tickIcon", '/assets/svg/tick2.svg'); + this.load.image("muteIcon", '/assets/svg/mute.svg'); + this.load.image("cancelIcon", '/assets/svg/cancel.svg'); + this.load.image("resetIcon", '/assets/svg/reset.svg'); + this.load.image("border", '/assets/squar.png'); this.load.spritesheet("blocks1", assetsList.element5,{ frameWidth: 100, @@ -326,6 +344,16 @@ import Layout from '../../layouts/Layout.astro'; } ]; // console.log(data) + const graphics = this.add.graphics(); + const x = 0; const y = 54; + const lineWidth = window.innerWidth; + graphics.lineStyle(1, 0x0348A8); + graphics.setAlpha(0.2); + graphics.beginPath(); + graphics.moveTo(x, y); + graphics.lineTo(x + lineWidth, y); + graphics.strokePath(); + 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`}) @@ -337,11 +365,11 @@ import Layout from '../../layouts/Layout.astro'; 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`}); + this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`}); + this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`}); } 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`}); + this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`}); + this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; // Base font size for your text @@ -350,7 +378,7 @@ import Layout from '../../layouts/Layout.astro'; const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width const descrptText = this.add.text(screenCenterX, 95, data.description, { font: ` ${responsiveFontSize}px Quicksand`, - fill: '#7c4c23', + fill: '#60C6CB', }).setOrigin(0.5); }) .catch(error => { @@ -386,29 +414,33 @@ import Layout from '../../layouts/Layout.astro'; }; // window.load + this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); + this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale(); + submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); + this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); + const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue' }).setDepth(1); submitNotic.setVisible(false); - submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { - font: '600 30px Quicksand', - fill: '#fff', - backgroundColor: 'blue', - padding: { x: 20, y: 10 }, - }).setDepth(1); - submitButton.setVisible(false); + // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { + // font: '600 30px Quicksand', + // fill: '#fff', + // backgroundColor: 'blue', + // padding: { x: 20, y: 10 }, + // }).setDepth(1); + // submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { // console.log('Clicked'); - submitButton.setVisible(false); + // submitButton.setVisible(false); submitNotic.setVisible(true); // window.location.reload(); // windowLoad(); 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(); + const blocks = [ { x: displayW / 2 - 200, @@ -465,7 +497,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.05).setScale(borderScale); targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -524,11 +556,11 @@ import Layout from '../../layouts/Layout.astro'; }); - retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') + // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton.setInteractive().on('pointerdown', () => { window.location.reload(); }) - retryButton.setVisible(false); + // retryButton.setVisible(false); let score = 0; let counter = 0; const isMatch = (blockName, targetName) => { diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 0047571..748f431 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -85,7 +85,7 @@ import Layout from '../../layouts/Layout.astro'; muteIconWidth = 1.3; resetIconWidth = 1.26; tickIconWidth = 1.222; - cancelIconWidth = 1.185 + cancelIconWidth = 1.185; noticeWidth = 100; noticeHeight = 0; buttonWidth = 100; diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index e0a9e3b..6185276 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -57,7 +57,22 @@ import Layout from '../../layouts/Layout.astro'; width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2, }; + let submitButton; + let formattedDateTime; + let shortUniqueID; + let scoreTotal = 0; + let resultView; + let topLogoWidth; + let muteIconWidth; + let resetIconWidth; + let tickIconWidth; + let cancelIconWidth; if(isMobile){ + topLogoWidth = 5; + muteIconWidth = 2; + resetIconWidth = 1.6; + tickIconWidth = 1.34; + cancelIconWidth = 1.16; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -65,6 +80,11 @@ import Layout from '../../layouts/Layout.astro'; retryButtonWidth = window.innerWidth / 2 - 50; retryButtonHeight = window.innerHeight - 70; } else { + topLogoWidth = 6; + muteIconWidth = 1.3; + resetIconWidth = 1.26; + tickIconWidth = 1.222; + cancelIconWidth = 1.185; noticeWidth = 100; noticeHeight = 0; buttonWidth = 100; @@ -72,13 +92,6 @@ import Layout from '../../layouts/Layout.astro'; retryButtonWidth = window.innerWidth / 2 - 50; retryButtonHeight = window.innerHeight - 70; } - let submitButton; - let formattedDateTime; - let shortUniqueID; - let blockMatches; - let resultView; - let scoreTotal = 0; - gameResult = []; window.onload = function() { // Get the current date and time @@ -100,6 +113,7 @@ import Layout from '../../layouts/Layout.astro'; return result; }; shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length + let blockMatches; const targetZones = [ { @@ -233,12 +247,13 @@ 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.image("topMatch", "/assets/top_match.jpg"); + this.load.image("topLogo", "/assets/top_logo.jpg"); + this.load.image("tickIcon", '/assets/svg/tick2.svg'); + this.load.image("muteIcon", '/assets/svg/mute.svg'); + this.load.image("cancelIcon", '/assets/svg/cancel.svg'); + this.load.image("resetIcon", '/assets/svg/reset.svg'); + this.load.image("border", '/assets/svg/pointer.svg'); this.load.spritesheet("target1", assetsList.right_image1,{ frameWidth: 100, frameHeight: 100, @@ -305,7 +320,7 @@ import Layout from '../../layouts/Layout.astro'; 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`, - fill: '#7c4c23', + fill: '#60C6CB', }).setOrigin(0.5); // 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); @@ -352,77 +367,95 @@ import Layout from '../../layouts/Layout.astro'; console.error('An error occured', error) }); }; - // window.load + this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); + this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale(); + submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); + this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); + this.add.image(displayW * 0.9-32, 170, "target1"); + // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1); + this.add.image(displayW * 0.9-32, 340, "target2"); + // this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1); + this.add.image(displayW * 0.9-32, 510, "target3"); + // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1); + this.add.image(displayW * 0.9-32, 680, "target4"); + // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1); + + const graphics = this.add.graphics(); + const x = 0; const y = 54; + const lineWidth = window.innerWidth; + graphics.lineStyle(1, 0x0348A8); + graphics.setAlpha(0.2); + graphics.beginPath(); + graphics.moveTo(x, y); + graphics.lineTo(x + lineWidth, y); + graphics.strokePath(); const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue' }).setDepth(1); submitNotic.setVisible(false); - submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { - font: '600 30px Quicksand', - fill: '#fff', - backgroundColor: 'blue', - padding: { x: 20, y: 10 }, - }).setDepth(1); - submitButton.setVisible(false); + // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { + // font: '600 30px Quicksand', + // fill: '#fff', + // backgroundColor: 'blue', + // padding: { x: 20, y: 10 }, + // }).setDepth(1); + // submitButton.setVisible(false); submitButton.setInteractive().on('pointerdown', () => { // console.log('Clicked'); - submitButton.setVisible(false); + // submitButton.setVisible(false); submitNotic.setVisible(true); // window.location.reload(); // windowLoad(); 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); + const blocks = [ { x: displayW / 15 - 15, y: 120, textureKey: "blocks1", id: "block1", + blockPointer: 'border', }, { x: displayW / 15 - 15, y: 280, textureKey: "blocks2", id: "block2", + blockPointer: 'border', }, { x: displayW / 15 - 15, y: 460, textureKey: "blocks3", id: "block3", + blockPointer: 'border', }, { x: displayW / 15 - 15, y: 640, textureKey: "blocks4", id: "block4", + blockPointer: 'border', }, ]; this.graphics = this.add.graphics(); const droppedBlocks = []; 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 targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1); + const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").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+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true }); + this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.setScale(1.3); @@ -451,7 +484,7 @@ import Layout from '../../layouts/Layout.astro'; if (droppedOnTargetZone) { // Draw a line from the dragged block to the targetZone this.graphics.lineStyle(6, 0xFF0000); // Red color - this.graphics.moveTo(block.x + 50, block.y + 50); + this.graphics.moveTo(block.x + 105, block.y + 47); this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y); this.graphics.strokePath(); @@ -473,12 +506,12 @@ import Layout from '../../layouts/Layout.astro'; } }); }); - let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { - font: '600 30px Quicksand', - fill: '#fff', - backgroundColor: 'blue', - padding: { x: 20, y: 10 }, - }) + // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { + // font: '600 30px Quicksand', + // fill: '#fff', + // backgroundColor: 'blue', + // padding: { x: 20, y: 10 }, + // }) retryButton.setInteractive().on('pointerdown', () => { window.location.reload(); }) diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index a5b72bc..eef3113 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -57,7 +57,24 @@ import Layout from '../../layouts/Layout.astro'; width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2, }; + let submitButton; + let formattedDateTime; + let shortUniqueID; + let scoreTotal = 0; + let resultView; + let topLogoWidth; + let muteIconWidth; + let resetIconWidth; + let tickIconWidth; + let cancelIconWidth; + let retryButton; + let blockMatches; if(isMobile){ + topLogoWidth = 5; + muteIconWidth = 2; + resetIconWidth = 1.6; + tickIconWidth = 1.34; + cancelIconWidth = 1.16; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -67,6 +84,11 @@ import Layout from '../../layouts/Layout.astro'; leftTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth / 6; } else { + topLogoWidth = 6; + muteIconWidth = 1.3; + resetIconWidth = 1.26; + tickIconWidth = 1.222; + cancelIconWidth = 1.185; noticeWidth = 100; noticeHeight = 0; buttonWidth = 100; @@ -76,13 +98,7 @@ import Layout from '../../layouts/Layout.astro'; leftTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth / 6; } - let submitButton; - let formattedDateTime; - let shortUniqueID; - let retryButton; - let blockMatches; - let resultView; - let scoreTotal = 0; // resultView scoreTotal + gameResult = []; window.onload = function() { // Get the current date and time @@ -260,8 +276,13 @@ 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("retryIcon", "/assets/svg/retry.svg") - this.load.image("border", '/assets/squar.png'); + this.load.image("tickIcon", '/assets/svg/tick2.svg'); + this.load.image("muteIcon", '/assets/svg/mute.svg'); + this.load.image("cancelIcon", '/assets/svg/cancel.svg'); + this.load.image("resetIcon", '/assets/svg/reset.svg'); + + // this.load.image("retryIcon", "/assets/svg/retry.svg") + this.load.image("border", '/assets/svg/border.svg'); this.load.spritesheet("blocks1", assetsList.element5,{ frameWidth: 100, frameHeight: 100, @@ -345,7 +366,7 @@ import Layout from '../../layouts/Layout.astro'; const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width const descrptText = this.add.text(screenCenterX, 95, data.description, { font: ` ${responsiveFontSize}px Quicksand`, - fill: '#7c4c23', + fill: '#60C6CB', }).setOrigin(0.5); }) .catch(error => { @@ -381,29 +402,42 @@ import Layout from '../../layouts/Layout.astro'; }; // window.load + const graphics = this.add.graphics(); + const x = 0; const y = 54; + const lineWidth = window.innerWidth; + graphics.lineStyle(1, 0x0348A8); + graphics.setAlpha(0.2); + graphics.beginPath(); + graphics.moveTo(x, y); + graphics.lineTo(x + lineWidth, y); + graphics.strokePath(); + + this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); + this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale(); + submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); + this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); + const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue' }).setDepth(1); submitNotic.setVisible(false); - submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { - font: '600 30px Quicksand', - fill: '#fff', - backgroundColor: 'blue', - padding: { x: 20, y: 10 }, - }).setDepth(1); - submitButton.setVisible(false); + // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { + // font: '600 30px Quicksand', + // fill: '#fff', + // backgroundColor: 'blue', + // padding: { x: 20, y: 10 }, + // }).setDepth(1); submitButton.setInteractive().on('pointerdown', () => { // console.log('Clicked'); - submitButton.setVisible(false); submitNotic.setVisible(true); // window.location.reload(); // windowLoad(); 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(); + + const blocks = [ { x: displayW / 2-400, @@ -459,8 +493,8 @@ import Layout from '../../layouts/Layout.astro'; const targetZoneBorders = []; 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(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.7).setScale(1); + const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -508,11 +542,11 @@ import Layout from '../../layouts/Layout.astro'; } }); }); - retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') + // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton.setInteractive().on('pointerdown', () => { window.location.reload(); }) - retryButton.setVisible(false); + // retryButton.setVisible(false); let score = 0; let counter = 0; diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index d7a293e..952ecc2 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -57,7 +57,24 @@ import Layout from '../../layouts/Layout.astro'; width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2, }; + let submitButton; + let formattedDateTime; + let shortUniqueID; + let scoreTotal = 0; + let resultView; + let topLogoWidth; + let muteIconWidth; + let resetIconWidth; + let tickIconWidth; + let cancelIconWidth; + let retryButton; + let blockMatches; if(isMobile){ + topLogoWidth = 5; + muteIconWidth = 2; + resetIconWidth = 1.6; + tickIconWidth = 1.34; + cancelIconWidth = 1.16; noticeWidth = 100; noticeHeight = 0; buttonWidth = 67; @@ -67,6 +84,11 @@ import Layout from '../../layouts/Layout.astro'; leftTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth * 0.9 - 40; } else { + topLogoWidth = 6; + muteIconWidth = 1.3; + resetIconWidth = 1.26; + tickIconWidth = 1.222; + cancelIconWidth = 1.185; noticeWidth = 100; noticeHeight = 0; buttonWidth = 100; @@ -76,13 +98,6 @@ import Layout from '../../layouts/Layout.astro'; leftTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth * 0.9 - 172; } - let submitButton; - let formattedDateTime; - let shortUniqueID; - let retryButton; - let blockMatches; - let scoreTotal = 0; - let resultView; // scoreTotal resultView gameResult = []; window.onload = function() { // Get the current date and time @@ -228,9 +243,17 @@ 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("retryIcon", "/assets/svg/retry.svg") + // this.load.image("tick", '/assets/tick.png'); + + this.load.image("tickIcon", '/assets/svg/tick2.svg'); + this.load.image("muteIcon", '/assets/svg/mute.svg'); + this.load.image("cancelIcon", '/assets/svg/cancel.svg'); + this.load.image("resetIcon", '/assets/svg/reset.svg'); + + // this.load.image("retryIcon", "/assets/svg/retry.svg") this.load.image("border", '/assets/squar.png'); + + this.load.spritesheet("blocks1", assetsList.element5,{ frameWidth: 100, frameHeight: 100, @@ -266,25 +289,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'); @@ -337,11 +341,11 @@ import Layout from '../../layouts/Layout.astro'; 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`}); + this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`}); + this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`}); } 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`}); + this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`}); + this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); } const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; // Base font size for your text @@ -350,7 +354,7 @@ import Layout from '../../layouts/Layout.astro'; const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width const descrptText = this.add.text(screenCenterX, 95, data.description, { font: ` ${responsiveFontSize}px Quicksand`, - fill: '#7c4c23', + fill: '#60C6CB', }).setOrigin(0.5); }) .catch(error => { @@ -386,29 +390,44 @@ import Layout from '../../layouts/Layout.astro'; }; // window.load + const graphics = this.add.graphics(); + const x = 0; const y = 54; + const lineWidth = window.innerWidth; + graphics.lineStyle(1, 0x0348A8); + graphics.setAlpha(0.2); + graphics.beginPath(); + graphics.moveTo(x, y); + graphics.lineTo(x + lineWidth, y); + graphics.strokePath(); + + this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); + this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale(); + submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); + this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); + const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue' }).setDepth(1); submitNotic.setVisible(false); - submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { - font: '600 30px Quicksand', - fill: '#fff', - backgroundColor: 'blue', - padding: { x: 20, y: 10 }, - }).setDepth(1); - submitButton.setVisible(false); + // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { + // font: '600 30px Quicksand', + // fill: '#fff', + // backgroundColor: 'blue', + // padding: { x: 20, y: 10 }, + // }).setDepth(1); submitButton.setInteractive().on('pointerdown', () => { // console.log('Clicked'); - submitButton.setVisible(false); submitNotic.setVisible(true); // window.location.reload(); // windowLoad(); 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(); + + + const blocks = [ { x: displayW / 2 - 200, @@ -486,7 +505,7 @@ import Layout from '../../layouts/Layout.astro'; if ( Phaser.Geom.Intersects.RectangleToRectangle( newBlock.getBounds(), - new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) + new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 50, 25) ) ) { // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` @@ -524,11 +543,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', () => { window.location.reload(); }) - retryButton.setVisible(false); let score = 0; let counter = 0; const isMatch = (blockName, targetName) => { diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index 23287e4..742b3b7 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -11,13 +11,31 @@ import Layout from '../../layouts/Layout.astro'; - \ No newline at end of file