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

s2

Browse Source
This commit is contained in:
Suvodip
2024-06-15 18:08:20 +05:30
parent 71c5f88b9a
commit a8277e9aad
11 changed files with 440 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/pages/drawing/v2.astro
View File

@@ -11,13 +11,31 @@ import Layout from '../../layouts/Layout.astro';
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
// const drawingZone = {
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
// y: window.innerHeight / 1,
// width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
// height: window.innerHeight / 2,
// };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let defaultColor;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
@@ -33,6 +51,11 @@ import Layout from '../../layouts/Layout.astro';
image2Height = 2;
image2Bottom = 110;
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
@@ -41,19 +64,14 @@ import Layout from '../../layouts/Layout.astro';
downloadHeight = 70;
learningWidth = 450;
learningHeight = 350;
image1Width = 4;
image1Width = 3;
image1Height = 1.8;
image2Width = 2;
image2Right = 400;
image2Right = 250;
image2Height = 1.8;
image2Bottom = 0;
}
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let defaultColor;
gameResult = [];
window.onload = function() {
currentDate = new Date();
@@ -118,10 +136,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image('image1', assetsList.image1);
this.load.image('image2', assetsList.image2);
this.load.image('topLogo', '/assets/top_logo.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.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png');
}
function create() {
@@ -132,9 +153,15 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => {
// console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){
wrapWidth = 10;
} else{
wrapWidth = 200;
}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
})
@@ -169,21 +196,39 @@ import Layout from '../../layouts/Layout.astro';
});
};
// window.load
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', ()=>{
window.location.reload();
})
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
});
submitButton.setVisible(true);
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// });
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData();
@@ -196,14 +241,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
if(isMobile){
outlineImage1.setDepth(1).setScale(0.28);
outlineImage2.setDepth(1).setScale(0.28);
}else if(isTab){
outlineImage1.setDepth(1).setScale(0.34);
outlineImage2.setDepth(1).setScale(0.34);
} else{
outlineImage1.setDepth(1).setScale(0.65);
outlineImage2.setDepth(1).setScale(0.65);
outlineImage1.setDepth(1).setScale(0.60);
outlineImage2.setDepth(1).setScale(0.60);
}
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
@@ -305,10 +352,10 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer);
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
// clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content';
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// // clearButton.style.border = '3px solid blue';
// clearButton.style.color = 'blue';
// clearButton.style.width = 'fit-content';
clearButton.style.marginLeft = '30px';
if(isMobile){
clearButton.style.padding = '2px 8px';
@@ -316,9 +363,9 @@ import Layout from '../../layouts/Layout.astro';
} else {
clearButton.style.padding = '5px 10px';
}
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
@@ -410,13 +457,14 @@ import Layout from '../../layouts/Layout.astro';
const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor);
if(isMobile){
snapWidth = 50;
snapWidth = 70;
snapHeight = 70;
} else {
snapWidth = 200;
snapHeight = 70;
}
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
// snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {
captureSnapshot(this);