s2
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user