HTML5 save sub-routine

[Chen Zhen]

The code shown below is for a javascript file to be used with converting any HTML5 games to work with SMF Arcade.
This is for people that want to convert games on their own.
One can always peruse one of the existing converted games to see exactly how to do it properly.
I am always here to answer any questions about this process via the forum.

If anyone wishes to share games that have been converted please feel free to post them here.
If they check out as working + safe then I will likely add them to this arcade and perhaps a future gamepack.

file: arcadeHtml5Save.js

Code Select Expand

/*
 * Common save file
 *
 * @SMF Arcade: html5 save type
 * @PHP-Quick-Arcade: ibp save type
 * Updated August 11, 2018
 *
 */
function saveHtml5GameSmf(newhighscore, saveSystem, gamename="")
{
var checkSessid = parent.document.getElementById("gameSmfToken") ? parent.document.getElementById("gameSmfToken") : (document.getElementById("gameSmfToken") ? document.getElementById("gameSmfToken") : "");
window.myScoreTrig = typeof window.myScoreTrig == "undefined" ? 0 : window.myScoreTrig;

if (window.myScoreTrig == 1)
return false;

window.myScoreTrig = 1;
if (saveSystem == "smfhtml5" && checkSessid != "")
{
var gameSmfFullscreen = document.getElementById("gameSmfFullscreen") != undefined ? document.getElementById("gameSmfFullscreen").value : 0;
if (parseInt(gameSmfFullscreen) == 1)
{
if (typeof newhighscore != "undefined")
{
var siteUrl = parent.document.getElementById("html5smfGameUrl").value;
var sessid = document.getElementById("gameSmfToken");
var gameForm = document.getElementById("gameForm");
var vargamescore = document.createElement("INPUT");
var vargamesessid = document.createElement("INPUT");
vargamescore.type = "hidden";
vargamescore.id = "score";
vargamescore.name = "score";
vargamescore.value = parseFloat(newhighscore);
gameForm.appendChild(vargamescore);
vargamesessid.type = "hidden";
vargamesessid.id = "gamesessid";
vargamesessid.name = "gamesessid";
vargamesessid.value = sessid.value;
gameForm.appendChild(vargamesessid);
setTimeout(gameForm.submit(), 1000);
setTimeout(function(){ parent.window.location = siteUrl.split('#')[0] + "sa=highscore;#commentform3"; }, 3000);
return true;
}
else
{
var noSmfScore = document.getElementById("noSmfScore").val ? document.getElementById("noSmfScore").val : "No score to save!";
alert(noSmfScore);
return false;
}
}
else
{
if (typeof newhighscore != "undefined")
{
var siteUrl = parent.document.getElementById("html5smfGameUrl").value;
var sessid = parent.document.getElementById("gameSmfToken");
var gameForm = parent.document.getElementById("gameForm");
var vargamescore = parent.document.createElement("INPUT");
var vargamesessid = parent.document.createElement("INPUT");
vargamescore.type = "hidden";
vargamescore.id = "score";
vargamescore.name = "score";
vargamescore.value = parseFloat(newhighscore);
gameForm.appendChild(vargamescore);
vargamesessid.type = "hidden";
vargamesessid.id = "gamesessid";
vargamesessid.name = "gamesessid";
vargamesessid.value = sessid.value;
gameForm.appendChild(vargamesessid);
gameForm.submit();
setTimeout(function(){ parent.window.location = siteUrl.split('#')[0] + "sa=highscore;#commentform3"; }, 3000);
document.location.reload(true);
return true;
}
else
{
var noSmfScore = parent.document.getElementById("noSmfScore").val ? parent.document.getElementById("noSmfScore").val : "No score to save!";
alert(noSmfScore);
return false;
}
}

return false;
}
else
{
// IBP save system
var gameFrameSrc = window.frameElement ? window.frameElement.src : (parent.document.getElementById("game_name") ? parent.document.getElementById("game_name").value : "");
var gnameQuery = gameFrameSrc.substr(gameFrameSrc.lastIndexOf('/') + 1);
var gscore = parseFloat(newhighscore);
var gname = gnameQuery != "" ? gnameQuery : gamename;
var siteUrl = parent.window.location.href;
var n = siteUrl.lastIndexOf("/");
var newUrl = siteUrl.slice(0, n) + "/index.php?act=Arcade&do=newscore";
var post_data = {'gname':gname, 'gscore':gscore, 'html52': 'html5'};
//send data using Ajax
var strData = [];
for(var p in post_data){
   if (post_data.hasOwnProperty(p)) {
   strData.push(encodeURIComponent(p) + "=" + encodeURIComponent(post_data[p]));
   }
}
var strDataSend = strData.join("&");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Saving score for " + gname);
setTimeout(function(){ parent.window.location = siteUrl.split('#')[0]; }, 3000);
}
};
xhttp.open("POST", newUrl, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(strDataSend);
}
}


Have the HTML of the game load the file and adjust the game code to fire the function with the score, save-system and game-name variables.
The game should include a properly configured xml file that instructs the arcade to set it as HTML5 type.
HTML5 v2 requires a properly configured PHP file.
If the game requires fullscreen mode this can be set in the XML file.
Look at existing HTML5 game XML markup for examples by editing a game and using that view option.

HTML5 v2 requires a different file scenario, please look at existing games using that save type or ask about it if attempting to use that system. Games using that system are compatible with PHP-Quick-Arcade with HTML5 support.

The above routine was adjusted to not be jQuery dependent for the Ajax request as of September 10, 2018.

[karim]

hello chen

any chance to have a tutorial how to adapt HTML V2 games to smf??

Origon games don't work on smf arcade???

i do adapt v32 and v2 for my phpbb website , but not HTML

please let me know??

thanks

[Chen Zhen]

Origon games will work on the next release.
They already work fine on the beta.

To convert games you need to include a php file and icon in its main directory.
For html5v2 all the games files go into the gamedata/gamename folder.
You include/load a js file with the above code in it.
Then you find where the game ends or saves score and have it use the above save function.

[karim]

hello

that great to hear , i will wait the next release of the arcade ,

i understand, i will try to adapt some games , and insert them here if you are ok

thanks a lot

[Tech]

Very Nice conversion to newer HTML5 games.  Looking forward to going to this arcade and learning to convert HTML5 games.  Did a lot of v2, v32 games and would love to get started on these.  IS there any recommended software I will need specifically for HTML5 conversions?  Any beginner guides?

[Chen Zhen]

The majority of HTML5 games are written in javascript (and jQuery libraries) which only requires a proper script editor.
I suggest Notepad plus plus (Notepad++) which is not to be confused with Notepad from Microsoft.
ref. https://notepad-plus-plus.org/

Make sure to adjust and save default settings for Linux line endings and learn to use commands to delete empty spaces at end of lines after you do edits.

Sometimes people that write games tend to use minor compression on their js files.
You can use online tools to decompress those files.
Most of the time it will work good enough to put in your save codes.
Then you can compress them again afterward in some cases if it reduces the file size as intended.

Imo a bit of javascript knowledge will be preferred but this is something you can dabble with to get the knack.
It is a very similar language to Actionscript which you seem to grasp a bit by having applied save types you mentioned.

It beats having to use flash editors.

 

[Vincent Titus]

where wouold this code go ? in the gamedata folder ? i have alot of phpbb html games id like to convert to smf

[Chen Zhen]

For flash games the arcade should already accept phpbb games.
For HTML5 games you have to edit the games themselves to add this save type. Also a proper config file is needed to tell the arcade of the save type.

Your other solution for me to adjust the arcade for phpbb HTML5 games is better. I am still waiting for you to upload some sample games for me to test.

[Vincent Titus]

html5 v2 from phpbb arcade

[wulfx01]

HTML5 game type homemade

[wulfx01]