Add mobile support with Capacitor

[mlynch]

This PR adds mobile support for the Phaser template using Capacitor. This also makes a change that needs to be reviewed which is to set the game dimensions to window.innerWidth * window.devicePixelRatio and similarly for height, to enable fullscreen mobile apps (might need a different approach for desktop). This forces landscape mode for iOS and Android as well.

Open to feedback to make this a good fit!

[yandeu]

Hey @mlynch,

Thanks for you commit.

• I would not add the window.devicePixelRatio as default. New users will be confused if suddenly their game look x2, x3 more more times smaller on a mobile device.
• I would not set the default to landscape. It also leads to confusions the first time someone looks at the mobile version of the game.
• Wouldn't it be better to provide a script that wraps (trapeze.dev or similar) and not to add all the android/ios file into the repo?

---

I would prefere a 1000 time a config based setup instead of adding all files to the repo.

---

I have never used trapeze.dev before, but in my html2app.dev I use the following. I'm sure there is an equivalent for trapeze?

const isPortrait = options.includes('--portrait')
const isLandscape = options.includes('--landscape')

if (!isLandscape && !isPortrait) return

// https://capacitorjs.com/docs/guides/screen-orientation
// https://developer.apple.com/documentation/bundleresources/information_property_list/uisupportedinterfaceorientations
const config = {
  platforms: {
    ios: {
      targets: {
        App: {
          plist: {
            replace: true,
            entries: [
              {
                UISupportedInterfaceOrientations: isPortrait
                  ? ['UIInterfaceOrientationPortrait']
                  : ['UIInterfaceOrientationLandscapeRight', 'UIInterfaceOrientationLandscapeLeft']
              }
            ]
          }
        }
      }
    },
    android: {
      manifest: [
        {
          file: 'AndroidManifest.xml',
          target: 'manifest/application/activity',
          attrs: {
            'android:screenOrientation': isPortrait ? 'portrait' : 'landscape'
          }
        }
      ]
    }
  }
}

and for fullscreen I do:

await RUN('npm install --ignore-scripts @yandeu/capacitor-fullscreen --force')

// status bar hidden (https://stackoverflow.com/a/20536695)
const config = {
  platforms: {
    ios: {
      targets: {
        App: {
          plist: {
            replace: true,
            entries: [
              {
                UIStatusBarHidden: true
              },
              {
                UIViewControllerBasedStatusBarAppearance: false
              }
            ]
          }
        }
      }
    }
  }
}