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

change new drawing game responsiveness

master
Subhodip Ghosh 2025-06-16 17:33:17 +05:30
parent d4a7544a6b
commit f812493f72
2 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/drawing/game_drawing_jpg.astro
View File

@ -136,6 +136,7 @@ import Layout from '../../layouts/Layout.astro';
clipArt.classList.add('show'); clipArt.classList.add('show');
}, 100); }, 100);
} }
const isSmallMobile = window.innerWidth <= 400;
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024; const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366; const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366;
@ -146,6 +147,7 @@ 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,
}; };
var assetsList = {} var assetsList = {}
var snapshotButton; var snapshotButton;
let submitButton; let submitButton;
@ -303,16 +305,19 @@ import Layout from '../../layouts/Layout.astro';
.then(response => response.json()) .then(response => response.json())
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 28;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){ // Set minimum font size for mobile
if (isMobile) {
responsiveFontSize = Math.max(responsiveFontSize, 35); // Never smaller than 42px on mobile
wrapWidth = 10; wrapWidth = 10;
} else{ } else {
wrapWidth = 200; wrapWidth = 200;
} }
const descrptText = this.add.text(screenCenterX, 80, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
const descrptText = this.add.text(screenCenterX, isSmallMobile ? 100 : isMobile ? 130 : 90, 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, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
@ -417,8 +422,11 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
// } // }
if(isMobile){
outlineImage.setDepth(-1).setScale(0.28 ); if(isSmallMobile){
outlineImage.setDepth(-1).setScale(0.25);
}else if(isMobile){
outlineImage.setDepth(-1).setScale(0.29);
}else if(isTablet){ }else if(isTablet){
outlineImage.setDepth(-1).setScale(0.30); outlineImage.setDepth(-1).setScale(0.30);
} else if(isSmallLaptop){ } else if(isSmallLaptop){
@ -474,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
// Create the color picker // Create the color picker
const colorPicker = document.createElement('input'); const colorPicker = document.createElement('input');
colorPicker.type = 'color'; colorPicker.type = 'color';

18
src/pages/drawing/game_drawing_png.astro
View File

@ -152,7 +152,7 @@ import Layout from '../../layouts/Layout.astro';
clipArt.classList.add('show'); clipArt.classList.add('show');
}, 100); }, 100);
} }
const isSmallMobile = window.innerWidth <= 400;
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024; const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366; const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366;
@ -324,7 +324,7 @@ import Layout from '../../layouts/Layout.astro';
.then(response => response.json()) .then(response => response.json())
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 28; const baseFontSize = 28;
let responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
@ -336,7 +336,7 @@ import Layout from '../../layouts/Layout.astro';
wrapWidth = 200; wrapWidth = 200;
} }
const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: { width: window.innerWidth - wrapWidth }}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, isSmallMobile ? 100 : isMobile ? 130 : 90, 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, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
@ -415,14 +415,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
} }
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){ if(isSmallMobile){
outlineImage.setDepth(1).setScale(0.28 ); outlineImage.setDepth(-1).setScale(0.23);
}else if(isMobile){
outlineImage.setDepth(-1).setScale(0.28 );
}else if(isTablet){ }else if(isTablet){
outlineImage.setDepth(1).setScale(0.30); outlineImage.setDepth(-1).setScale(0.30);
} else if(isSmallLaptop){ } else if(isSmallLaptop){
outlineImage.setDepth(1).setScale(0.23); outlineImage.setDepth(-1).setScale(0.26);
} else{ } else{
outlineImage.setDepth(1).setScale(0.4); outlineImage.setDepth(-1).setScale(0.4);
} }
const maskGraphics = this.make.graphics(); const maskGraphics = this.make.graphics();