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

change ui issue in new 2 varient drawing game

Browse Source
This commit is contained in:
Subhodip Ghosh
2025-06-05 21:44:57 +05:30
parent 5bdd812ecf
commit 645be371b2
2 changed files with 48 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -136,8 +136,10 @@ import Layout from '../../layouts/Layout.astro';
clipArt.classList.add('show');
}, 100);
}
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const isMobile = window.innerWidth <= 768;
const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366;
const isDesktop = window.innerWidth > 1366;
const drawingZone = {
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
// y: window.innerHeight / 4,
@@ -171,14 +173,21 @@ import Layout from '../../layouts/Layout.astro';
tickIconWidth = 1.21;
cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){
} else if (isTablet) { // Combined tablet and small laptop handling
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{
} else if(isSmallLaptop){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
} else { // Desktop
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
@@ -303,7 +312,7 @@ import Layout from '../../layouts/Layout.astro';
} else{
wrapWidth = 200;
}
const descrptText = this.add.text(screenCenterX, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
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);
// 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)
})
@@ -410,8 +419,10 @@ import Layout from '../../layouts/Layout.astro';
// }
if(isMobile){
outlineImage.setDepth(-1).setScale(0.28 );
}else if(isTab){
outlineImage.setDepth(-1).setScale(0.26);
}else if(isTablet){
outlineImage.setDepth(-1).setScale(0.30);
} else if(isSmallLaptop){
outlineImage.setDepth(-1).setScale(0.26);
} else{
outlineImage.setDepth(-1).setScale(0.4);
}
@@ -442,7 +453,7 @@ import Layout from '../../layouts/Layout.astro';
!isMobile ? colorViewButton.setVisible(false) : '';
colorContainer.style.backgroundColor = '#FFFFFF';
colorContainer.style.padding = '30px 20px';
colorContainer.style.padding = '30px 15px';
colorContainer.style.borderRadius = '80px';
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
colorContainer.style.left = '0px';
@@ -471,7 +482,8 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.className = 'color-picker';
colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px';
colorPicker.style.marginRight = '15px';
colorPicker.style.marginLeft = '15px';
colorPicker.style.marginRight = '10px';
// colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none';
if (!isMobile) {
@@ -498,8 +510,8 @@ import Layout from '../../layouts/Layout.astro';
let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
// const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000'];
const buttonSize = 60;
const buttonSpacing = 15;
const buttonSize = 45;
const buttonSpacing = 10;
// Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally