#27 using flex-width as scale method

melonjs-client/package.json

@@ -26,16 +26,15 @@
     "docker-build": "docker build -f src/main/docker/Dockerfile.nginx -t quay.io/wpernath/grumpycat-melonjs:latest .",
     "docker-push": "docker push quay.io/wpernath/grumpycat-melonjs -a"
   },
-
-  "browserslist": "defaults", 
-
-  "dependencies": {    
+  "browserslist": "defaults",
+  "dependencies": {
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "core-js": "^3.24.1",
     "css-loader": "^6.7.1",
     "melonjs": "^13.3.0",
     "rollup": "^2.75.7",
+    "screenfull": "^6.0.2",
     "style-loader": "^3.3.1"
   }
 }

melonjs-client/src/main/client/index.js

@@ -42,7 +42,7 @@ import MultiplayerGameOverScreen from './js/stage/multiplayer/mp-game-over';
 import { MultiplayerMessage } from './js/util/multiplayer';
 
 import HowToPlayScreen from './js/stage/how-to-play'
-
+import screenfull from "screenfull";
 
 
 
@@ -52,7 +52,7 @@ device.onReady(() => {
     //video.
     if (!video.init(1024, 768, { 
         parent: "screen", 
-        scaleMethod: "fit", 
+        scaleMethod: "flex-width", 
         renderer: video.AUTO, 
         subPixel: false, 
         //doubleBuffering: true 
@@ -61,6 +61,7 @@ device.onReady(() => {
 		return;
 	}
 
+
     // initialize the debug plugin in development mode.
     if (process.env.NODE_ENV === 'development') {
         import('js/plugin/debug/debugPanel.js').then((debugPlugin) => {
@@ -72,6 +73,13 @@ device.onReady(() => {
     // Initialize the audio.
     audio.init("mp3,ogg");
 
+    if( device.isMobile ) {
+        if( screenfull.isEnabled ) {
+            console.log("INFO: Requesting full screen...");
+            screenfull.request();
+        }
+    }
+
     // allow cross-origin for image/texture loading
     let environment = CONFIG.environment;
     let baseURL;