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

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

@@ -153,8 +153,10 @@ import Layout from '../../layouts/Layout.astro';
}, 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: 0,
@@ -184,6 +186,7 @@ import Layout from '../../layouts/Layout.astro';
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.65;
@@ -191,14 +194,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;
@@ -406,11 +416,13 @@ import Layout from '../../layouts/Layout.astro';
}
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.2);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.35);
outlineImage.setDepth(-1).setScale(0.28 );
}else if(isTablet){
outlineImage.setDepth(-1).setScale(0.30);
} else if(isSmallLaptop){
outlineImage.setDepth(-1).setScale(0.23);
} else{
outlineImage.setDepth(1).setScale(0.34);
outlineImage.setDepth(-1).setScale(0.4);
}
const maskGraphics = this.make.graphics();
@@ -437,7 +449,7 @@ import Layout from '../../layouts/Layout.astro';
}
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 +483,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) {
@@ -497,8 +510,8 @@ import Layout from '../../layouts/Layout.astro';
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60;
const buttonSpacing = 5;
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