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

add label in tick v1,v2

Browse Source
This commit is contained in:
dev sp
2023-12-19 14:31:48 +00:00
parent 9edeb97f67
commit 9dd93344dd
3 changed files with 126 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,6 +57,21 @@ 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,
};
if(isMobile){
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
} else {
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
@@ -71,7 +86,7 @@ import Layout from '../../layouts/Layout.astro';
// Log the formatted date and time to the console
// // console.log("Page loaded on: " + formattedDateTime);
};
function generateShortUniqueID(length) {
function generateShortUniqueID(length) {14
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
@@ -81,17 +96,6 @@ import Layout from '../../layouts/Layout.astro';
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
if(isMobile){
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
buttonHeight = 0;
} else {
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
buttonHeight = 0;
}
const targetZones = [
{
@@ -299,16 +303,16 @@ import Layout from '../../layouts/Layout.astro';
fill: '#7c4c23',
}).setOrigin(0.5);
// Left Image Name
this.add.text(displayW / 14, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23);
this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23);
this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
//Right Image Name
this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
})
.catch(error => {
console.error('Error fetching initial data:', error);
@@ -367,34 +371,34 @@ import Layout from '../../layouts/Layout.astro';
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-32, 170, "border").setAlpha(0.4).setScale(0.7),
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-32, 340, "border").setAlpha(0.4).setScale(0.7),
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-32, 510, "border").setAlpha(0.4).setScale(0.7),
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-32, 680, "border").setAlpha(0.4).setScale(0.7);
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [
{
x: displayW / 15 - 10,
x: displayW / 15 - 15,
y: 120,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 15 - 10,
x: displayW / 15 - 15,
y: 280,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 15 - 10,
x: displayW / 15 - 15,
y: 460,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 15 - 10,
x: displayW / 15 - 15,
y: 640,
textureKey: "blocks4",
id: "block4",
@@ -404,7 +408,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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@@ -470,7 +474,16 @@ import Layout from '../../layouts/Layout.astro';
displayResult(droppedBlocks);
}
});
});
});
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();
})
}
}
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {