From f812493f72fc38500325f04739c5269e35385abb Mon Sep 17 00:00:00 2001 From: Suvodip Ghosh Date: Mon, 16 Jun 2025 17:33:17 +0530 Subject: [PATCH] change new drawing game responsiveness --- src/pages/drawing/game_drawing_jpg.astro | 28 +++++++++++++++--------- src/pages/drawing/game_drawing_png.astro | 18 ++++++++------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/pages/drawing/game_drawing_jpg.astro b/src/pages/drawing/game_drawing_jpg.astro index ff867c1..21603a9 100644 --- a/src/pages/drawing/game_drawing_jpg.astro +++ b/src/pages/drawing/game_drawing_jpg.astro @@ -136,6 +136,7 @@ import Layout from '../../layouts/Layout.astro'; clipArt.classList.add('show'); }, 100); } + const isSmallMobile = window.innerWidth <= 400; const isMobile = window.innerWidth <= 768; const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024; 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 // height: window.innerHeight / 2, }; + var assetsList = {} var snapshotButton; let submitButton; @@ -303,16 +305,19 @@ import Layout from '../../layouts/Layout.astro'; .then(response => response.json()) .then(({ data }) => { // console.log(data.colors) - const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 20; - const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; - let wrapWidth; - if(isMobile){ + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + const baseFontSize = 28; + let responsiveFontSize = (window.innerWidth / 940) * baseFontSize; + + // Set minimum font size for mobile + if (isMobile) { + responsiveFontSize = Math.max(responsiveFontSize, 35); // Never smaller than 42px on mobile wrapWidth = 10; - } else{ + } else { 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 + 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.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){ outlineImage.setDepth(-1).setScale(0.30); } else if(isSmallLaptop){ @@ -474,7 +482,7 @@ import Layout from '../../layouts/Layout.astro'; } }); - + // Create the color picker const colorPicker = document.createElement('input'); colorPicker.type = 'color'; diff --git a/src/pages/drawing/game_drawing_png.astro b/src/pages/drawing/game_drawing_png.astro index c020458..216d22d 100644 --- a/src/pages/drawing/game_drawing_png.astro +++ b/src/pages/drawing/game_drawing_png.astro @@ -152,7 +152,7 @@ import Layout from '../../layouts/Layout.astro'; clipArt.classList.add('show'); }, 100); } - + const isSmallMobile = window.innerWidth <= 400; const isMobile = window.innerWidth <= 768; const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024; const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366; @@ -324,7 +324,7 @@ import Layout from '../../layouts/Layout.astro'; .then(response => response.json()) .then(({ data }) => { // 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; let responsiveFontSize = (window.innerWidth / 940) * baseFontSize; @@ -336,7 +336,7 @@ import Layout from '../../layouts/Layout.astro'; 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 + 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'); } const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); - if(isMobile){ - outlineImage.setDepth(1).setScale(0.28 ); + if(isSmallMobile){ + outlineImage.setDepth(-1).setScale(0.23); + }else if(isMobile){ + outlineImage.setDepth(-1).setScale(0.28 ); }else if(isTablet){ - outlineImage.setDepth(1).setScale(0.30); + outlineImage.setDepth(-1).setScale(0.30); } else if(isSmallLaptop){ - outlineImage.setDepth(1).setScale(0.23); + outlineImage.setDepth(-1).setScale(0.26); } else{ - outlineImage.setDepth(1).setScale(0.4); + outlineImage.setDepth(-1).setScale(0.4); } const maskGraphics = this.make.graphics();