How to store levels passed in a wordpress site

[barbara]

Hi,

I'm writting a platform game in phaser, and i want it to have 30 levels. 

I wanna post them in a wordpress page and i really don't know how can i storage the data: levels passed, lifes left, etc... so i can use it in the wordpress site to show some "leves/icons" as completed and in my phaser game to get this informacion further than the cache data i can pass throught States.

My programmer skills are few so i don't even know how to start.

Anyone can tel me where to start looking?

Many thanks!!

Barbara

[o0Corps0o]

Take a look at storing information in the sql database backend.. if you already have wordpress you should have access to a database.. alternatively you could just use localstorage if its only keeping data for each individual player.  You may have to use some php coding to get data from the database (and also to store it).

[barbara]

Hi o0Corps0o,

Thanks for your answer!

I was looking at it, and i think that i can make it work.

But, i,m not sure how to pass the data.

Inside my wordpress post i have a <div> tag and inside it runs my phaser game. So i need to pass the variables from a javascript file (where my variables are stored) to a php file (my wordpress post) or to pass it from a javascript direct to my sql database. As far as i found i can't do it directly.

Do i need ajax to make it work? or i am missing something?

Many thanks for your time!

[BobF]

I'm guessing your game's users don't have login accounts and you want to keep things simple. If that's the case then I would simply store lives, levels, and other user data in localStorage from within the game. Then you just need to include some JavaScript code with the DIV in your WordPress post to display that data. For example:
 

<div id="game-stats"></div>
<script>
    (function () {
        var statsDiv = document.getElementById('game-stats');

        statsDiv.innerHTML = 'Lives remaining: ' + localStorage.getItem('livesRemaining') + 
                        '<br/>Current level: ' + localStorage.getItem('currLevel');
    })();
</script>

 

Some users may complain they don't see their stats and it will probably be because they have cookies disabled, they're in private browsing mode, or they cleared their browser history. I hope that helps.

[barbara]

Hi BobF,

Actually i want to have a login access so i can store each user data for using it and displaying it in each case.

But maybe i can take it litlle by little and try to make work first what you told me, i'm still blocked in the same place, i don't know how to pass my data from my main.js where my phaser game is, to my localStorage, so i can keep it and store it in the browser cache, as you are telling me.

I understand i can take data from within my wordpress post by using document.getElementById to display it in this same post,  but i don't know how to take data from within the main.js wich contains my game and has my level and lives variables.

many thanks!

[BobF]

The browser provides your website's domain with a dedicated chunk of local storage that is shared by all of the pages on your site, including the Phaser game and the WordPress post (assuming they are in the same domain). So, somewhere in your game code you would have lines that look something like the following:

localStorage.setItem('livesRemaining', player.livesRemaining);
localStorage.setItem('currLevel', player.currLevel);

Once that code has run within the game then the values will be shown in the game stats of your WordPress post (see my previous post) the next time the user loads that post in the browser.

Note that some browsers may throw an exception when invoking setItem if private browsing mode is enabled or if cookies are disabled, so handle that situation. Also, browsers cap the amount of local storage available per domain, so stay under 5MB (2.5M characters) of data.

[barbara]

The localStorage works perfecty! Thanks! 

I'm now able to connect to my sql through php get the información of a user in the new column for my levels and change it.

But i'm stuck in i where hope is the last step. I wanna keep mataining my local Storage for the ones that aren't logged and if they are logged get the information from the sql data base. But i can't reach the conditional code for:  if(isLogged){checkSql}else{checkLocalStorage}.

I'm using the Ultimate Member plugin i was looking in the docs and i can't find the code for this. Any ideas? Maybe i'm looking at it from the wrong side...

Many thanks again!!

[BobF]

The plug-in probably creates a special session cookie when the user is logged in, so you can probably check for that. If you don't see info about that in their docs then you will probably need to contact their Support, or maybe they have a user forum and you can ask there.

[barbara]

Finally i found the conditional code, but now i can't update my sql as i want, these is my  code:

<script>
	//Store data in browser cache
	var lastLevelEnabled;
	function dataInLocalStorage(){
		if(localStorage.lastLevelEnabled){
			lastLevelEnabled=localStorage.lastLevelEnabled;
		}else{
			lastLevelEnabled =1;localStorage.lastLevelEnabled = lastLevelEnabled;
		}
	}
	</script>

[insert_php]
    //check if the user is logged with wp code
	if(is_user_logged_in()){
		echo "<script> console.log( 'there is a user logged' );</script>"; 

        //This is how wp gets the user data
		$current_user = wp_get_current_user(); 
		echo $current_user->user_email;

		//Connect to sql dataBase
		$conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
		if ($conn->connect_error) {
    			die("Connection failed: " . $conn->connect_error);
		} 
		echo "Connected successfully".'<br/>'; 
		
		//Select LastLevel in DataBase
		$result = mysqli_query($conn,"SELECT gnomeWishLastLevel FROM wp_users
		WHERE user_login=('$current_user->user_email')");

        //Fetch result and show it 
		$resultFetch = mysqli_fetch_array($result);
		echo $resultFetch[0].'<br/>';
		
        //Here is where i'm trying to store somehow the localStorage in js code in php so i can compare it and store it (i'm doing this in a desperate way, cause if i update here my sql data base i will need to reload the page each time user pass a level)
		$localStorage =<script>localStorage.lastLevelEnabled</script>;
       
// and here i get an error when trying to update the DataBase
		if($localStorage>$resultFetch[0]){
			mysqli_query($conn,"UPDATE wp_users set gnomeWishLastLevel = localStorage.lastLevelEnabled WHERE user_login=('$current_user->user_email')");
		}

	}
	

[/insert_php]

<script>
	function storeNewData(){
		//This function is called from SelectLevelState.js, so every time i pass a level is stored in localStorage
		localStorage.lastLevelEnabled = lastLevelEnabled;
		document.getElementById("lastLevelEnabled").innerHTML = "lastLevelEnabled  " +localStorage.lastLevelEnabled;
		//Now i need to store it in mySQL too. i've tried calling a php method but aparently i need ajax for this.
	}
</script>

While searching, all i found is that i can't do what i'm trying and that if i want to connect with sql once the page is loaded or call a php method from my js code, i need to do it through ajax.

i hope i explained my self clearly, if not ask me, please.

Any ideas?? Thanks!

[BobF]

17 hours ago, barbara said:

$localStorage =<script>localStorage.lastLevelEnabled</script>;

You can't do anything like that because the JavaScript has to run in the browser, and the page hasn't even been delivered to the browser yet.

The information you found stating ajax is necessary is correct (note that you could use jQuery's ajax since WordPress loads jQuery). Basically, you could write a simple PHP script that resides on your server and whose only job is to increment the game level value in the SQL database for a specified user. You would then add a bit of ajax code to your "storeNewData" function to call that PHP script. Note that you probably don't need ajax to read the game level from the database because the current game level value can be encoded directly into the page itself by your WordPress PHP code. You just need your JavaScript to write the game level to the database during game play, and you're on the right track in attempting to do that from storeNewData.

Note that when using ajax to increment the game level, a clever user may dig through your JavaScript code and find the PHP URL used to do that. Without a deterrence, the user could conceivably use that URL to directly increment his game level without actually playing the game to do so. Just something to think about.

[barbara]

Did it!

Finally i need to use ajax to load a php page with the conexion to the SQL DataBase and pass the variables in javascript throught the get method. In case anyone has the same problem...

Many thanks for your Help! Couldn't do it without you!