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

master
Subhodip Ghosh 2025-06-05 21:44:57 +05:30
parent 5bdd812ecf
commit 645be371b2
2 changed files with 48 additions and 23 deletions
Show Stats 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'); clipArt.classList.add('show');
}, 100); }, 100);
} }
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366;
const isDesktop = window.innerWidth > 1366;
const drawingZone = { const drawingZone = {
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width // x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
// y: window.innerHeight / 4, // y: window.innerHeight / 4,
@ -171,14 +173,21 @@ import Layout from '../../layouts/Layout.astro';
tickIconWidth = 1.21; tickIconWidth = 1.21;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
galleryIconWidth = 2; galleryIconWidth = 2;
}else if(isTab){ } else if (isTablet) { // Combined tablet and small laptop handling
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.6; muteIconWidth = 1.6;
resetIconWidth = 1.43; resetIconWidth = 1.43;
tickIconWidth = 1.29; tickIconWidth = 1.29;
cancelIconWidth = 1.18; cancelIconWidth = 1.18;
galleryIconWidth = 1.81; 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; topLogoWidth = 6;
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
@ -303,7 +312,7 @@ import Layout from '../../layouts/Layout.astro';
} else{ } else{
wrapWidth = 200; 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, 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)
}) })
@ -410,8 +419,10 @@ import Layout from '../../layouts/Layout.astro';
// } // }
if(isMobile){ if(isMobile){
outlineImage.setDepth(-1).setScale(0.28 ); outlineImage.setDepth(-1).setScale(0.28 );
}else if(isTab){ }else if(isTablet){
outlineImage.setDepth(-1).setScale(0.26); outlineImage.setDepth(-1).setScale(0.30);
} else if(isSmallLaptop){
outlineImage.setDepth(-1).setScale(0.26);
} else{ } else{
outlineImage.setDepth(-1).setScale(0.4); outlineImage.setDepth(-1).setScale(0.4);
} }
@ -442,7 +453,7 @@ import Layout from '../../layouts/Layout.astro';
!isMobile ? colorViewButton.setVisible(false) : ''; !isMobile ? colorViewButton.setVisible(false) : '';
colorContainer.style.backgroundColor = '#FFFFFF'; colorContainer.style.backgroundColor = '#FFFFFF';
colorContainer.style.padding = '30px 20px'; colorContainer.style.padding = '30px 15px';
colorContainer.style.borderRadius = '80px'; colorContainer.style.borderRadius = '80px';
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170'; colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
colorContainer.style.left = '0px'; colorContainer.style.left = '0px';
@ -471,7 +482,8 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.className = 'color-picker'; colorPicker.className = 'color-picker';
colorPicker.style.marginBottom = '0px'; colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px'; colorPicker.style.marginTop = '-0px';
colorPicker.style.marginRight = '15px'; colorPicker.style.marginLeft = '15px';
colorPicker.style.marginRight = '10px';
// colorPicker.style.padding = '1px 1px'; // colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none'; // colorPicker.style.outline = 'none';
if (!isMobile) { 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']; 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', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000']; // const colors = ['#ff0000'];
const buttonSize = 60; const buttonSize = 45;
const buttonSpacing = 15; const buttonSpacing = 10;
// Create a container div for the color buttons // Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div'); const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally

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

@ -153,8 +153,10 @@ import Layout from '../../layouts/Layout.astro';
}, 100); }, 100);
} }
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366;
const isDesktop = window.innerWidth > 1366;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
@ -184,6 +186,7 @@ import Layout from '../../layouts/Layout.astro';
let audioData; let audioData;
let audioFileId = false; let audioFileId = false;
let isPlaying = false; let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.65; muteIconWidth = 1.65;
@ -191,14 +194,21 @@ import Layout from '../../layouts/Layout.astro';
tickIconWidth = 1.21; tickIconWidth = 1.21;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
galleryIconWidth = 2; galleryIconWidth = 2;
}else if(isTab){ } else if (isTablet) { // Combined tablet and small laptop handling
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.6; muteIconWidth = 1.6;
resetIconWidth = 1.43; resetIconWidth = 1.43;
tickIconWidth = 1.29; tickIconWidth = 1.29;
cancelIconWidth = 1.18; cancelIconWidth = 1.18;
galleryIconWidth = 1.81; 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; topLogoWidth = 6;
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
@ -406,11 +416,13 @@ import Layout from '../../layouts/Layout.astro';
} }
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){ if(isMobile){
outlineImage.setDepth(1).setScale(0.2); outlineImage.setDepth(-1).setScale(0.28 );
}else if(isTab){ }else if(isTablet){
outlineImage.setDepth(1).setScale(0.35); outlineImage.setDepth(-1).setScale(0.30);
} else if(isSmallLaptop){
outlineImage.setDepth(-1).setScale(0.23);
} else{ } else{
outlineImage.setDepth(1).setScale(0.34); outlineImage.setDepth(-1).setScale(0.4);
} }
const maskGraphics = this.make.graphics(); const maskGraphics = this.make.graphics();
@ -437,7 +449,7 @@ import Layout from '../../layouts/Layout.astro';
} }
colorContainer.style.backgroundColor = '#FFFFFF'; colorContainer.style.backgroundColor = '#FFFFFF';
colorContainer.style.padding = '30px 20px'; colorContainer.style.padding = '30px 15px';
colorContainer.style.borderRadius = '80px'; colorContainer.style.borderRadius = '80px';
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170'; colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
colorContainer.style.left = '0px'; colorContainer.style.left = '0px';
@ -471,7 +483,8 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.className = 'color-picker'; colorPicker.className = 'color-picker';
colorPicker.style.marginBottom = '0px'; colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px'; colorPicker.style.marginTop = '-0px';
colorPicker.style.marginRight = '15px'; colorPicker.style.marginLeft = '15px';
colorPicker.style.marginRight = '10px';
// colorPicker.style.padding = '1px 1px'; // colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none'; // colorPicker.style.outline = 'none';
if (!isMobile) { 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 = 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']; // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 45;
const buttonSpacing = 5; const buttonSpacing = 10;
// Create a container div for the color buttons // Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div'); const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally