kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s2

pull/15/head
Suvodip 2024-06-14 21:40:22 +05:30
parent a49742e607
commit 71c5f88b9a
9 changed files with 356 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/svg/button-icon.svg
View File

@ -1 +1 @@
<svg width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#eceaea" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ff0000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> <svg width="50px" height="50px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="2" stroke-width=""></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#BB4D6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 683 B

4
public/assets/svg/clear.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#F5F5F5"/>
<path d="M13.0528 5.25134C9.23531 5.14634 6.10781 8.21384 6.10781 12.0013H4.76531C4.42781 12.0013 4.26281 12.4063 4.50281 12.6388L6.59531 14.7313C6.74531 14.8813 6.97781 14.8813 7.12781 14.7313L9.22031 12.6388C9.45281 12.4063 9.28781 12.0013 8.95031 12.0013H7.60781C7.60781 9.07634 9.99281 6.71384 12.9328 6.75134C15.7228 6.78884 18.0703 9.13634 18.1078 11.9263C18.1453 14.8588 15.7828 17.2513 12.8578 17.2513C11.9203 17.2513 11.0428 16.9963 10.2778 16.5688C9.98531 16.4038 9.62531 16.4638 9.39281 16.7038C9.04781 17.0488 9.11531 17.6413 9.54281 17.8813C10.5253 18.4288 11.6503 18.7513 12.8578 18.7513C16.6453 18.7513 19.7128 15.6238 19.6078 11.8063C19.5103 8.28884 16.5703 5.34884 13.0528 5.25134Z" fill="#8D8D8D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 868 B

3
public/assets/svg/pointer.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#D9D9D9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 151 B

88
src/pages/drag/dragdrop_phonics.astro
View File

@ -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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -67,6 +84,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -76,13 +98,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("retryIcon", "/assets/svg/retry.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.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
@ -326,6 +344,16 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // 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){ 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 - 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 - 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`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_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: `#7C4C23`}); this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_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: `#7C4C23`}); 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; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text // 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 responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 95, data.description, { const descrptText = this.add.text(screenCenterX, 95, data.description, {
font: ` ${responsiveFontSize}px Quicksand`, font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23', fill: '#60C6CB',
}).setOrigin(0.5); }).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
@ -386,29 +414,33 @@ import Layout from '../../layouts/Layout.astro';
}; };
// window.load // 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); 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 = [ const blocks = [
{ {
x: displayW / 2 - 200, x: displayW / 2 - 200,
@ -465,7 +497,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); 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); targetZoneBorders.push(targetBorder);
targetZone.block = null; 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', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); // retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {

2
src/pages/drag/index.astro
View File

@ -85,7 +85,7 @@ import Layout from '../../layouts/Layout.astro';
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
tickIconWidth = 1.222; tickIconWidth = 1.222;
cancelIconWidth = 1.185 cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;

119
src/pages/drag/v2.astro
View File

@ -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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -65,6 +80,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -72,13 +92,6 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -100,6 +113,7 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@ -233,12 +247,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg'); this.load.image("topMatch", "/assets/top_match.jpg");
// this.load.image("target1", assetsList.right_image1); this.load.image("topLogo", "/assets/top_logo.jpg");
// this.load.image("target2", '/assets/hay.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
// this.load.image("target3", '/assets/mat.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
// this.load.image("target4", '/assets/star.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 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 responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 76, data.description, { const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`, font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23', fill: '#60C6CB',
}).setOrigin(0.5); }).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // 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); // 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) 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); 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 = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
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 * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); 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); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@ -451,7 +484,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color 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.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@ -473,12 +506,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}) // })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })

84
src/pages/drag/v3.astro
View File

@ -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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -67,6 +84,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 40; leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -76,13 +98,7 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 172; leftTargetZoneW = window.innerWidth * 0.9 - 172;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); 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("border", '/assets/squar.png'); 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,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 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 responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 95, data.description, { const descrptText = this.add.text(screenCenterX, 95, data.description, {
font: ` ${responsiveFontSize}px Quicksand`, font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23', fill: '#60C6CB',
}).setOrigin(0.5); }).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
@ -381,29 +402,42 @@ import Layout from '../../layouts/Layout.astro';
}; };
// window.load // 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); 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 = [ const blocks = [
{ {
x: displayW / 2-400, x: displayW / 2-400,
@ -459,8 +493,8 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone, index) => { targetZones.forEach((targetZone, index) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); 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 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: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) 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); targetZoneBorders.push(targetBorder);
targetZone.block = null; 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', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); // retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;

110
src/pages/drag/v4.astro
View File

@ -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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -67,6 +84,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -76,13 +98,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); // 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("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -266,25 +289,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');
@ -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`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_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: `#7C4C23`}); this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_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: `#7C4C23`}); 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; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text // 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 responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 95, data.description, { const descrptText = this.add.text(screenCenterX, 95, data.description, {
font: ` ${responsiveFontSize}px Quicksand`, font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23', fill: '#60C6CB',
}).setOrigin(0.5); }).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
@ -386,29 +390,44 @@ import Layout from '../../layouts/Layout.astro';
}; };
// window.load // 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData();
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); // 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 = [ const blocks = [
{ {
x: displayW / 2 - 200, x: displayW / 2 - 200,
@ -486,7 +505,7 @@ import Layout from '../../layouts/Layout.astro';
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(), 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` // 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', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {

130
src/pages/drawing/v3.astro
View File

File diff suppressed because one or more lines are too long