HTML5 web based google play leaderboard submission issues - javascript

I am trying to implement a Google Play leaderboard in a very basic javascript game:
I have included what I think are the necessary meta tags, signon, and scripts in my index.html file:
<meta name="google-signin-client_id" content="xxxxxxxxxxxx-xxxxxxxxxxx.apps.googleusercontent.com" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-callback" content="signinCallback" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/games" />
I've included a standard google sign on button:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
I've included the google apis:
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
In my games.js file, I've included the call to submit the scores by:
gapi.client.load('games','v1',function(response) {
var request2 = gapi.client.games.scores.submit(
{leaderboardId: "xxxxxxxxxx",
score: 50}
);
request2.execute(function(response) {
console.log(response);
// blah blah blah
});
But nothing ever shows up on the leaderboard. The console log spit out what I'm expecting. I've confirmed the clientID and leaderboardID.
For some reason the scores aren't actually being submitted (or if they are, they aren't being processed). Anyone with experience setting this up available for some pointerd? Note that this is not a chrome app/extension - it's a pure javascript game hosted on a web server.

Based on the Leaderboards for the Web, Scores.submit by using the URI request:
POST https://www.googleapis.com/games/v1/leaderboards/leaderboardId/scores
I did not see this part on your code.
Check this firewall-defense playgames sample for more code implementation.

Related

How to add the GoogleChromeLabs input-first-delay polyfill to a React app

I must be missing something simple, but can't seem to get the polyfill working for measuring the first input delay on my firebase project.
I have included the minified file as suggested here, and then in the body of my HTML I have run the code as suggested also.
So it looks like:
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
<script>
perfMetrics.onFirstInputDelay((delay, evt) => {
console.log("First Input Delay", delay)
console.log("Event details", evt)
})
</script>
</body>
When I include the console logs, the script runs as expected and console logs the data, but it never sends it to firebase. If I take out the console logs (perfMetrics.onFirstInputDelay()), the script fails with TypeError: n is not a function.
How should I be adding this to my app? Should I be sending the trace to Firebase somehow? I use performance tracing at the moment, but unsure how to send this specific event as it doesn't have a start and stop time.
Is the solution something like the below?
const performance = firebase.performance()
performance.trace(onFirstInputDelay)
So I was doing something silly. I only needed to include the polyfill and let the Firebase SDK handle the onFirstInputDelay event.
So just having this works.
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
</body>

Google One-Tap-Login - "No credentials avaliable" error

I am trying to follow the simplest of examples of how to setup up Google's "
One tap sign-up and automatic sign-in" in a web page. Just copy and pasting the code provided by google, I get an exception "No credentials available". Why? How to fix it?
This is my web page content ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script src="https://smartlock.google.com/client"></script>
<script>
console.log( "window.location.origin=" + window.location.origin);
window.onGoogleYoloLoad = (googleyolo) => {
console.log("Google one tap ready");
};
const retrievePromise = googleyolo.retrieve({
supportedAuthMethods: [
"https://accounts.google.com",
"googleyolo://id-and-password"
],
supportedIdTokenProviders: [
{
uri: "https://accounts.google.com",
clientId: "xxxx-86peetl434op89ug41lg1vv8sjspfupp.apps.googleusercontent.com"
}
]
});
</script>
</head>
<body>
Content of the document......
</body>
</html>
The Authorized JavaScript origins has been correctly setup. I am confident of that. The URL for the above content is: https://s3-ap-southeast-2.amazonaws.com/sbd-aws-sdk-delphi-22/index.html
Upon hitting the page (browser=Chrome), the resultant javascript console is ..
window.location.origin=https://s3-ap-southeast-2.amazonaws.com
Google one tap ready
index.html:1 Uncaught (in promise)
a {type: "noCredentialsAvailable", name: "OpenYoloError", message:
"noCredentialsAvailable: No credential is available for the current user."}
message:
"noCredentialsAvailable: No credential is available for the current user."
Context: When I make this web page hit, I am logged into Google.
What am I doing wrong?
The problem is that there is currently no user signed in. The library has very little support for this, as a work around, when no Google Accounts are active and no credentials are available. You can simply show the traditional Google Sign-In button and have the user click to proceed through the flow to activate their Google Account in the browser.
https://developers.google.com/identity/sign-in/web/

read markdownfile via jQuery.get()

I try to read the content of a markdown file via jQuery.get(), so that I can work with the markdown content. But it does not work.
Firebug console report the following:
start logging ondex.html:17:4
end logging ondex.html:21:4
not wellformed readme.md:1:2
not wellformed ondex.html:1:2
Somehow the file readme.md is read, but there is something not wellformed. I assume, this causes the trouble...
Heres the markdown file. Available on Github as well: readme.md
# jerik.github.io
snippset and things I want to capture / document
## todos
- Integrate Navigation dropdown with my pages. The page names should be stated in a tag ( meta-tag, own-tag.. ), so that it can be read by js.
- For Layout see: https://bootswatch.com/cerulean/
- [...]
Below the code of the html file where I call jQuery.get() to read the markdown file. Available on Github ondex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jerik's this and that</title>
<meta name="description" content="Some stuff that I want to mention" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" charset="utf-8">
// [...]
console.log( 'start logging' );
$.get( "readme.md", function( data ) {
console.log( data ); // this is not called !!
});
console.log( 'end logging' );
</script>
</head>
<body>
<center>das iste in test</center>
<textarea id="ta" theme="cerulean" style="display:none;">
hallo
</textarea>
<script src="v/0.2/strapdown.js"></script>
</body>
</html>
How do I get the content of the markdown file, so that I can work with it?
Try explicitly setting dataType to "text"
$.get( "readme.md", function( data ) {
console.log( data );
},'text');
I m able to get it fine in a plunker demo without doing that but it could be your server setting different headers for the file and jQuery guess of datatype could be handling it differently internally
when in doubt inspect the actual response body in browser dev tools network to see what is actually being received
DEMO

How to use generated "Key" in google maps

Since from 2 months I am trying to implement google maps.But still am not done with it.
Question 1,Question 2,Question 3 were my previous doubts.
After a long research I got to know that:-
"Google accepts only 10 requests/sec.If it receives more, then it generates a status 'OVER QUERY LIMIT'.Solutions are to buy that API(not sure about it completely) OR Generate a key with Google Maps which will accept 25000 req/day(Suitable for my requirement)".
Now I have a key.The issue is "It's usage".
Code snippet:
1.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
This gives an alert:
"The provided Google API key is invalid or this site is not authorized to use it"
2.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
Usage of sensor removes the alert but it still gives the status 'OVER QUERY LIMIT'.
As mentioned here I've tried editing the credentials and all but nothing works out.
Working fiddle
Kindly help me out in solving this. If possible give any direct steps, instead of so many links and indirect instruction/comments.
Thank you
I think I should stop using SO...
This answer is for the beginners like me.
1.No need of sensor in Google API V3
2.Use browser key like this - <script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
3.In Edit allowed references under credentials give the complete path.
Explained in this Answer

JQuery AJAX $.post failure to return data

I am having difficulty with a specific JQuery $.post call to a PHP-based processor. I created a test page with the code below located here: http://goo.gl/Bg7H2u
Note this is located on a subdomain, but we are not doing cross-domain posting. Everything should be included on the subdomain.
There do not seem to be any JS errors as reported in the error console.
The processor /get-data.html is the general purpose PHP processor, and, if you load the processor page with the right value, it returns a dataset from the MySQL database in JSON format. We have this working on the main domain without issue, and other $.post calls seem to work OK from this subdomain (not to this /get-data.html processor, but other processors that process form content).
See the actual processor output here: http://goo.gl/yOzrm2
I must be missing something obvious, but I am coming up empty. Thoughts?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var prices;
$(document).ready(function(){
$.post( "/get-data.html", { table: 'prices' },
function( data ) {
prices = data;
alert(prices);
}, 'json');
});
</script>
</head>
<body>
<div style="overflow-x: hidden;" id="divMain">
</div>
</body>
</html>
Thanks for any advice you can provide.
If you do View Source on the processor output, you'll see that your script is returning:
<p>{"Basic Plan":["349"],"Basic":["349"],"Premium Plan":["549"],"Premium":["549"],"Standard Plan":["429"],"Standard":["429"],"Bonus Plan":["175"],"Additional Central AC System":["99"],"Additional central heating system":["99"],"Central Vacuum":["99"],"Whole home humidifier":["49"],"Pool (in-ground)":["179"],"Spa (in-ground)":["179"],"Septic System":["99"],"Sump Pump":["99"],"Well pump":["99"],"Whole home water softener":["99"],"Lawn sprinkler system (in-ground)":["99"],"Wine refrigerator":["49"],"Ice maker (free standing)":["49"],"Home phone (unlimited)":["49"],"TV Protection (Flat screen up to 60 inches)":["99"],"PC Protection (laptop or desktop)":["49"]}</p>
There's <p> at the beginning and </p> at the end. This is not valid JSON. You need to fix the server script so that it doesn't print anything other than the JSON (whitespace is OK, that's it).
1.confirm that /get-data.html is the correct relational url for your file location.
If you navigate directly to the /get-data.html, does it produce the results that you are after.
try running the same code without , 'json' and see if it works.
hope this helps

Categories

Resources