GPGS HTML: provide implementation

MrStahlfelge commented 6 years ago

An implementation for GPGS and HTML5 games should be provided.

Documentation:

MrStahlfelge commented 6 years ago

This is a sample web page for accessing GPGS (only works when served on a webserver). Sign in and out working.

<html>
  <head></head>
  <body>
    <script type="text/javascript">
      function handleClientLoad() {
        // Loads the client library and the auth2 library together for efficiency.
        // Loading the auth2 library is optional here since `gapi.client.init` function will load
        // it if not already loaded. Loading it upfront can save one network request.
        gapi.load('client:auth2', initClient);
      }

      function initClient() {
        // Initialize the client with API key and People API, and initialize OAuth with an
        // OAuth 2.0 client ID and scopes (space delimited string) to request access.
        gapi.client.init({
            clientId: 'xxx',
            scope: 'https://www.googleapis.com/auth/games'
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
      }

      function updateSigninStatus(isSignedIn) {
        // When signin status changes, this function is called.
        // If the signin status is changed to signedIn, we make an API call.
        if (isSignedIn) {
          document.getElementById('signin-button').style.visibility = 'hidden';
          document.getElementById('signout-button').style.visibility = 'visible';
          makeApiCall();
        } else {
          document.getElementById('signin-button').style.visibility = 'visible';
          document.getElementById('signout-button').style.visibility = 'hidden';
        }
      }

      function handleSignInClick(event) {
        // Ideally the button should only show up after gapi.client.init finishes, so that this
        // handler won't be called before OAuth is initialized.
        gapi.auth2.getAuthInstance().signIn();
      }

      function handleSignOutClick(event) {
      // einfach geschlossen -> Fehler!
        gapi.auth2.getAuthInstance().signOut();
      }

      function makeApiCall() {
        // Make an API call to the People API, and print the user's given name.
gapi.client.request({
      path: 'games/v1/players/me',
      //params: {maxResults: 5},
      callback: function(response) {
        // Do something interesting with the response
        console.log(response.displayName);
        document.getElementById('signout-button').textContent = "Sign out " + response.displayName;
      }
    });
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
    <button id="signin-button" onclick="handleSignInClick()">Sign In</button>
    <button id="signout-button" onclick="handleSignOutClick()">Sign Out</button>
  </body>
</html>

Note: User is automatically signed in when was signed in before without signing out.

MrStahlfelge commented 6 years ago

Sign in and out is working, mostof the further implementation is more or less routine piece of work.

https://developers.google.com/games/services/web/api/applications/played must be called for statistics

A tricky part could be cloud save, as Google's documentation is just for reading and writing existing game saves.

MrStahlfelge commented 6 years ago

Google confirmed that Snapshots can't be created via JS, so the Drive AppDataFolder must be used like the Desktop implementation does: https://developers.google.com/drive/v3/web/appdata

This code is working so far:

Scope for Authentication: scope: 'https://www.googleapis.com/auth/games https://www.googleapis.com/auth/drive.appdata'

Listing files in appDataFolder:

gapi.client.request({
      path: 'drive/v3/files',
      params: {spaces: 'appDataFolder'},
      callback: function(response) {
        // Do something interesting with the response
        response.files.forEach(function (file) {
           console.log('Found file:', file.name, file.id, file.mimeType);
getAppDataFileContent(file.id);

        });
      }
    });

Downloading file:


gapi.client.request({
      path: 'drive/v3/files/' + fileId,
      params: {alt: 'media'},
      callback: function(response) {
        // Do something interesting with the response
        console.log(response);

        }
    });
};```

MrStahlfelge commented 6 years ago

Listing and loading gamestates works now.

MrStahlfelge commented 6 years ago

Very valuable: https://github.com/playgameservices/management-tools

MrStahlfelge commented 6 years ago

On Firefox, loading gamestate does not work. Firefox does not follow the redirect given back from the Google API, while Chrome does it automatically.

Possible solution: do not use alt=media, but get the file information and then perform the download via downloadUrl that is given back (example https://gist.github.com/pizzapanther/8241364)

MrStahlfelge commented 6 years ago

Fixed by using v2 API

MrStahlfelge commented 6 years ago

Closing this because implementation is in a useable state. All found bugs and the (needed) enhancement for fetching achievements and leaderboards will be done on another issue.

MrStahlfelge / gdx-gamesvcs

GPGS HTML: provide implementation #17