diff --git a/src/pages/drawing/game_drawing_png.astro b/src/pages/drawing/game_drawing_png.astro index 083261b..2faf29f 100644 --- a/src/pages/drawing/game_drawing_png.astro +++ b/src/pages/drawing/game_drawing_png.astro @@ -314,12 +314,29 @@ 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; - const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; - let wrapWidth; - if(isMobile){wrapWidth = 10;} else{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); + 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 { + 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); // 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) })