Tip for developer (save game)

Whaleboobs · Oct 18, 2015

Hello, just a quick tip you might wanna consider, i might even help you with it if you're interested.

The save .txt file can be made a .html file which would be opened with a web browser. I've done it and it works for all browsers.

The advantage is that you can design the file as a regular webpage and you get the load code neat and pretty without any weird "takes nothing returns nothing
" code that could confuse people. You could add some graphics if you wanted to or even add a copy to clipboard button.

Like i said i'm more than willing to show you how it can be done.

edo494 · Oct 18, 2015

sounds very interesting, would indeed be nice to see some example of that

Whaleboobs · Oct 18, 2015

2013 i made it so i do not have any working example but here is a screenshot of what it looked like:

very straight forward to do if i recall correctly. The only problem i needed to solve was to use some CSS to hide the "dummy" code that normally would be visible.

something like this:

function PreloadFiles takes nothing returns nothing
call Preload( "")
<html><body>

<div style="width: 100%; height: 100%; background-color: #fff;">load code goes here</div>

</body></html>

//" )
call PreloadEnd( 0.0 )
endfunction

Edit: Lol noticed theres a "how to virus" in a tab! im no scum, im a white hat =)

Edit2: Now that ive tought about it. In theory it could be possible to have one single html file where all your characters are neatly in. wc3 cant append to a file but with some clever crafting it can be done another way. If i were you Gaias developer guys i would even try to make the file contact a server of yours to upload the characters to an online database. Security could be a problem since the map always can be reverse engineered / opened which would need to be accounted for, nothing is impossible tough.

edo494 · Oct 18, 2015

interesting

Zwiebelchen · Oct 18, 2015

Pretty neat, actually.

I love this idea, but won't there be issues with other browsers? Also, browsers are evil.

edo494 · Oct 18, 2015

The worst that can happen is that you get the Preload and endfunction parts printed on the screen, the HTML will be print as HTML no matter what

S0ulseeker · Oct 19, 2015

I really like this idea. You could probably add a "copy" button too in which you could click that'll copy your code for you for convenience. You could make it a 'mock website' with the code files where you can easily switch characters on the webpage by clicking links that would just load the other .html files from your folder with your character codes or even throw tutorials/suggestions built straight into the HTML files or world map, patch notes, etc. This could add a whole new element to gaias. Personalized custom websites for each player with their game codes building it.

Zwiebelchen · Oct 19, 2015

Here's the kicker, though:
I never coded HTML.

So someone else would have to do that.

SaikoDeMoN · Oct 19, 2015

I'm pretty damn sure if you backed this idea, people would contribute code for it. It's definitely interesting enough to pursue as a side project.

Zwiebelchen · Oct 19, 2015

SaikoDeMoN said:
I'm pretty damn sure if you backed this idea, people would contribute code for it. It's definitely interesting enough to pursue as a side project.

As it doesn't require much from my side (I basicly just change the input string and the filepath), I have absolutely no objections to test this.

So feel free to contribute the HTML code.
Make sure to include something that would hide the dummy code aswell... because that is actually the headache part for me.

PS: A "copy to clipboard" button would be neat, too.

oger-lord · Oct 19, 2015

Here is some code that removes the "function PreloadFiles takes nothing returns nothing" by setting the standard font size to 0. Besides I added an "Copy to Clipboard" button.

function PreloadFiles takes nothing returns nothing
call Preload( "")
<html>

<script>
function copyTextToClipboard() {
var text = "My SaveCode!";
var textArea = document.createElement("textarea");

textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';

textArea.value = text;

document.body.appendChild(textArea);
textArea.select();

try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}

document.body.removeChild(textArea);
}
</script>

<body>
<style type="text/css">
body {
font-size: 0px;
background-color: #332a25
}
h1 {
font-size: 30px;
color: white;
}
</style>

<div align=center>
<img src="http://www.hiveworkshop.com/forums/attachments/gaias-retaliation-orpg-649/148868d1443125696-project-information-gaias_retaliation_color.jpg">
<h1><p id="demo">load code goes here</p></h1>
<button type="button" onclick="copyTextToClipboard()">Copy to Clipboard</button>
</div>

</body></html>

//" )
call PreloadEnd( 0.0 )
endfunction

Now it is time for an artist to create something nice looking.
Testet with newest Firefox and Internet Explorer 11

iNfraNe · Oct 19, 2015

Or, youknow, just place a div over it. Here's something with a copy button:

Code:

function PreloadFiles takes nothing returns nothing
call Preload( "")
<html>
<script>
	function copyCode() {
		var textArea = document.getElementById("loadcode")
		textArea.style.display = "block";
		textArea.select();
		document.execCommand('copy');
		textArea.style.display = "none";		
	}
</script>
<body>

<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #152515;">
<div style="position: relative; left: 50%; top: 50%; margin-left: -512px; margin-top: -315px; height: 629px; width: 1024px; background: url('http://www.hiveworkshop.com/forums/attachments/gaias-retaliation-orpg-649/148868d1443125696-project-information-gaias_retaliation_color.jpg'); text-align: center; border: 3px solid black">

<div style="position: relative; top: 550px; font: 12px arial; line-height: 10px; color: #ddd">Load code: <textarea id="loadcode" style="display: none;">yourloadcodegoeshere</textarea><span style="background: #333; padding: 5px; color: #fff">yourloadcodegoeshere</span><input type="button" onclick="copyCode()" value="Copy Code!" /></div>

</div>
</div>

</body></html>

//" )
call PreloadEnd( 0.0 )
endfunction

edited to be a bit nicer

Whaleboobs · Oct 19, 2015

Exciting!

Placing a div over the text is a much better solution, i support iNfraNe's code. (lmao A+ for effort tough oger-lord.. that's a bit over engineered)

On another note, Is anyone interested in having the load code saved in the "cloud" connected to your battle.net nick?

I could set up a server real quick, it does not need to be anything advanced. For example if you are away from your computer you simply search this database for your nick and all your load codes are there.

I could run this server for 6 months then if we decided its a good system Gaias team would need to host it.

edo494 · Oct 19, 2015

My shot at it:

JASS:

function PreloadFiles takes nothing returns nothing
call Preload( '')
<html>
	<head>
		<link rel='stylesheet' href='https://dl.dropbox.com/s/erfaqxzanyaqyrn/bootstrap.min.css'>
		<link rel='stylesheet' href='https://dl.dropbox.com/s/934euu1ph6zo3v9/bootstrap-theme.min.css'>
		<style>
			.image{
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				display: block;
			}
			body{
				font-size: 0px;
			}
			body>div{
				font-size: 18px;
			}
		</style>
	</head>
	
	<body>
	<img src='http://www.hiveworkshop.com/forums/pastebin_data/s37p8u/Gaias_Retaliation_Color.jpg' height='60%' width='60%' class='image'>
	<div style='margin-top: 30px;'>
		<center>
			Your code:
			<input type='text' id='save_load_code' class='form-control' style='width: 50%; text-align: center;' value='your super long code goes here' readonly>
		</center>
	</div>
	
	<script>
		document.getElementById('save_load_code').select();
	</script>
	</body>
</html>

//' )
call PreloadEnd( 0.0 )
endfunction

I know it is 40 lines, but it does its job(+ auto select on load), and can be stripped by 2 lines if you pass useBootstrap as false.

It does not automatically to clipboard I know, but it selects the text in standard way, so it is runnable IE, Chrome, Firefox and probably any other browser that supports input.select(I tested these three myself).

Jass code to generate this beauty:

JASS:

library HtmlSaveLoadGenerator
/*
	Wrote by: edo494
	
	You give it a path to the image to show and pass it the save/load code as
	argument and it gives you back string that represents the HTML code as shown in the
	hiveworkshop post http://www.hiveworkshop.com/forums/gaias-retaliation-orpg-649/tip-developer-save-game-271059/#post2743568
*/
	globals
        private string slash = "/"
        private string Http = "http:/" + slash
        private string Https = "https:/" + slash
        
		string HtmlImagePath = Http + "www.hiveworkshop.com/forums/pastebin_data/s37p8u/Gaias_Retaliation_Color.jpg"
	endglobals
	
	function GenerateHTML takes string saveloadcode, boolean useBootstrap returns string
		local string s = "\n<html>\n\t<head>\n\t\t"
		
		if useBootstrap then
			set s = s + "<link rel='stylesheet' href='" + Https + "dl.dropbox.com/s/erfaqxzanyaqyrn/bootstrap.min.css'>\n" + /*
                */ "\t\t<link rel='stylesheet' href='" + Https + "dl.dropbox.com/s/934euu1ph6zo3v9/bootstrap-theme.min.css'>\n\t\t"
		endif
		
		set s = s + "<style>\n\t\t\t.image{\n\t\t\t\tmargin-left: auto;\n\t\t\t\tmargin-right: auto;\n\t\t\t\t" + /*
            */ "margin-top: 20px;\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t\tbody{\n\t\t\t\tfont-size: 0px;\n\t\t\t}" + /*
            */ "\n\t\t\tbody>div{\n\t\t\t\tfont-size: 18px;\n\t\t\t}\n\t\t</style>\n\t</head>\n\t\n\t<body>\n\t<img src='" + /*
            */ HtmlImagePath + "' height='60%' width='60%' class='image'>\n\t<div style='margin-top: 30px;'>\n\t\t<center>" + /*
            */ "\n\t\t\tYour code:\n\t\t\t<input type='text' id='save_load_code' class='form-control' style='width: " + /*
            */ "50%; text-align: center;' value='" + saveloadcode + "' readonly>\n\t\t</center>\n\t</div>\n\t\n\t<script>" + /*
            */ "\n\t\tdocument.getElementById('save_load_code').select();\n\t</script>\n\t</body>\n</html>"
        
        return s
	endfunction
endlibrary

I found out that apparently "//whatever" is not valid vJass string, what the actual fuck?

I can also generate it in much nicer form, but precious bytes after all

edit: I added the minimal bootstrap that basically only has the forms stuff, so it is literally 40 KB of stuff, but you can disabled it with the second function's parameter if you dont want fancy input box

oger-lord · Oct 19, 2015

By the way it would be useful to write some additional information about the character and not only the savecode.
Besides I think the html should look okay even if the computer cannot load aditional information from the internet.

Whaleboobs · Oct 19, 2015

I have done this overly ambitious thing the past hour or two.. All characters are presented in one single html file. (design sucks tho)

The automatic copy to clipboard code iNfraNe posted did not work on my x64 chrome. Stackoverflow posted a pure JS version which worked better (IE11 and Chrome), however it does not seem to work in Firefox. Decide on what browsers you want to support and change the copyToClipboard() to whatever fits.

CODE

SaveCodes.html (whatever name is fine)
needs to be replaced = JASS_INSERT_PLAYER_NAME

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz">
<style TYPE="text/css">
body{
margin:0; padding:0;
}
.cover{
position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #fff;
}
.centerme{
margin-left: auto; margin-right: auto;width: 500px; font-family: 'Yanone Kaffeesatz', serif;
}
.playerinfo{
width: 100%; height: 50px; background-color: #376d35; color: #efefef; text-align: center; font-size: 30px;
}
.aCharacter {
width: 100%; height: 40px; margin-top: 5px; background-color: #ccc; cursor: pointer;
}
.classContainer{
font-size: 46px;
color: #bfc9b1;
}
.charAmount{
font-size: 20px;
}
.classContainer{
text-align: center;
}
.urlData{
display: none;
}
</style>
</head>
<body>

<div class="cover">
<div class="centerme">
<div class="playerinfo">
Load codes for <span style="font-weight: bold;">JASS_INSERT_PLAYER_NAME</span>
</div>
<div style="font-size: 36px;" id="charlist">

</div>
</div>
</div>

<script type="text/javascript">
var classCharAmount = [];
$( document ).ready(function() {
$('#CopyButton').click(function() {
copyToClipboard();
alert("lol");
});

var levels = 50;
var classes = ["Squire", "Thief", "Ranger", "Magician", "Cleric", "Crusader", "Berserker", "Assassin", "Bard", "Hunter", "Druid", "Sorceror", "Necromancer", "Bishop", "Monk"];

for(i = 0; i < classes.length; i++){
classCharAmount.push(50);

$("#charlist").append("<div class='classContainer' id='container"+i+"'>"+classes+"s <span class='charAmount' id='charAmountID"+i+"'>50</span>");
for(l = 0; l < levels; l++){

var loadFile = "";
loadFile = "_data/"+classes+"-"+l+".html";

testFileExists(loadFile, classes+l, i);

$("#charlist").append("<div class='aCharacter' id='DC"+classes+l+"'>"+classes+" level "+l+"<div class='urlData'>"+loadFile+"</div></div>");

}
$("#charlist").append("</div>");
}

$(".aCharacter").click(function(){
var finalUrl = $(this).children( ".urlData" ).html();
arrurl = finalUrl.split(".");
finalUrl = arrurl[0]+".html";
window.open(finalUrl, 'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=500,height=250');
});

});

function get_error(x,cl){
$("#DC"+x).remove();
classCharAmount[cl] = classCharAmount[cl]-1;
$("#charAmountID"+cl).html(classCharAmount[cl]);
if(classCharAmount[cl] == 0){
$("#container"+cl).remove();
}
}

function testFileExists(inurl, refid, cl){
url=inurl;
url+="?"+new Date().getTime()+Math.floor(Math.random()*1000000);
var el=document.createElement('script');
el.id=refid;
el.class="testx";
el.onerror=function(){if(el.onerror)get_error(this.id, cl)}
el.src=url;
document.body.appendChild(el);

}

</script>

</body></html>

Cleric-25.html (name is important, like the regular saves but with .html extension and inside a _data folder)
needs to be replaced = JASS_INSERT_CLASS_AND_LEVEL
needs to be replaced = JASS_INSERT_LOAD_CODE (twice)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz">
<style TYPE="text/css">
body{
margin:0; padding:0;
}
.cover{
position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #fff;
}
.loadButton{
width: 100%; height: 100px;
font-family: 'Yanone Kaffeesatz', serif;
font-size: 40px;
}
.character{
width: 100%; padding-bottom: 20px;
text-align: center;
font-family: 'Yanone Kaffeesatz', serif;
font-size: 40px;
}
.code{
width: 100%;
padding-bottom: 10px;
font-family: 'Yanone Kaffeesatz', serif;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="cover">
<div class="character">JASS_INSERT_CLASS_AND_LEVEL</div>
<div class="code">JASS_INSERT_LOAD_CODE</div>
<input type="button" class="loadButton" value="copy code to clipboard" />
</div>
<script type="text/javascript">

$( document ).ready(function() {
$(".loadButton").click(function(){
copyToClipboard();
});
});

function copyToClipboard() {
var aux = document.createElement("input");
aux.setAttribute("value", "JASS_INSERT_LOAD_CODE");
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
</script>
</body>
</html>

NOTICE

*For the code to be inserted in to JASS some thing are needed to be done with the code, maybe try compress it in to one line and there might be some special characters that needs to be escaped. edo494 might know the sorcery needed for it to be done?

*The font is loaded from google fonts, maybe the original Gaias font is there too?

*In the future maybe it could be possible to pass extra data from the game like characters inventory and gold. (prays to the Gaias gods)

edo494 · Oct 19, 2015

its almost impossible(it will not show the image and the box will not be "nicer", but it will work tho) because both the image and the bootstrap are loaded from internet, unless you go your way to write jass script that creates 40 KB worth of css.

I can very easily add additional information, even tables into that(its easy html edit), the Jass code would grow tho, but it could print staff like inventory, level, health, spells etc

Zwiebelchen · Oct 19, 2015

I appreciate all your effort... but there is a string limit in WC3.
It must be something short and effective...
I can't have it create pages of code. I think the internal string limit is 1000 characters.

I like the suggestion of iNfraNe so far. It's short and to the point.

edo494 · Oct 20, 2015

Blablabla, I had a guide on how I was lowering the chars down wrote, but it was wrong

the smallest possible functional example out of the code that I generated that I managed to get is:

JASS:

<html><head><link rel='stylesheet'href='http://aw.xf.cz/a.css'><link rel='stylesheet'href='http://aw.xf.cz/b.css'><link rel='stylesheet'href='http://aw.xf.cz/c.css'></head><body><img src='http://aw.xf.cz/g.jpg'height='60%'width='60%'class='image'><div style='margin-top:30px;'><center>Your code:<input type='text'id='s'class='form-control'style='width:50%;text-align:center;'value=''readonly></center></div><script src='http://aw.xf.cz/j.js'></script></body></html>

~~476~~ 465 characters.

Also, cant you just call Preload multiple times? and the string limit according to my personal experiment is 4095 bytes, so no fear

Whaleboobs · Oct 20, 2015

i wonder if its OK by hive with the images:

Snap so theres a char limit? my code char count is: 4,131. I could try reduce but 1000 chars aint much..

Zwiebelchen · Oct 20, 2015

edo494 said:
Also, cant you just call Preload multiple times?

I can, but it would create two lines in the generated preload text with new junk data, which means you would have to account for that in your html code.

and the string limit according to my personal experiment is 4095 bytes, so no fear

1000 is the longest you can directly enter through the editor. It might be possible to create longer strings with concatenation, though.

Anyways... why thousands of characters for just some very basic functionality? The more complicated your HTML code is, the higher the chances of browsers and addons fucking it up.
Also, there's no point to this if you need to write a tutorial for the users to use it.

Keep it simple, guys!

PS: You can leave the JASS implementation to me, that isn't a problem at all. I just need the pure HTML code.
I will wait until this afternoon (it's 8AM here right now) and then select a "winner" whose design I will implement into the game.

PS2: Yes, I can dump additional information in the file, like item names, level, gold, MCs, Saved game version, etc. if you need this for your layout.

PS3: What I think could be super cool would be hand-drawn character artworks for the generated HTML. I could upload these images to the pastebin or in these forums so that the link is always accessable. Now we only need an artist who wants to have a take on the Gaias characters... or a good commission work?

edo494 · Oct 20, 2015

I dont think having the code there multiple times would be problem, since it isnt inside <div> block it will have 0 px font, so basically invisible.

erm sorry, but there is no way browser fucks your code up, there are websites that have megabytes big htmls and they work just fine, this one is 450 bytes

I will add more "variations" to the html later today(going to school in a moment) if you dont want the users to require internet access(that means, no css, no image, but the size would go down to like 250-300 bytes maybe)

Whaleboobs's design looks pretty good

Zwiebelchen · Oct 20, 2015

Just to clarify some technical limitations from my side (consider these the official rules for your submissions):

I can not append codes into existing files (well... I can, but it requires local file support enabled, which is not the default for the bnet user); therefore every load code must create it's own file
However, it is possible to overwrite files with the same name, so I can have the system write a "master file" that uses html code to load all the sub-files in specified directory into the master ... so if you want to create a GUI for selecting the right load code (like whaleboobs did), go ahead!
I have no objections against online-requirements... this is 2015, everyone has internet anyway... also, most browsers will load images from cache anyway ... and if not, the worst thing that happens is that images show placeholder icons
it would be cool if the html file is lightweight enough to open instantly; for example, Edo's bootstrap submission takes 2 seconds to load in my browser, all other submissions were instant so far
if you reference images via links, make sure the source is stable, trustworthy and with enough quota to deal with the traffic. I recommend uploading any images directly to hive (for example as attachments or in the pastebin) to prevent any problems
Your submitted layout should have a placeholder for a last compatible game version string, as I intend to include this information into the saves to avoid confusion in the future
No more than 4k characters
Avoid non-standard fonts that not everyone has installed by default
If possible, add a "copy to clipboard" button next to any displayed savecode
savecode should be displayed anyway, for those that can't use the clipboard function (for example IE requires activeX plugins enabled for that)
The new feature to be released today has a seperate load code (1 per account that always overwrites, so unlike characters, it won't keep track of earlier versions); if you go for a "master file" design, include one single seperated code slot reserved for this

The winner will be selected this evening, when I'm done with the new release (and mentioned in the credits). Have fun!

oger-lord · Oct 20, 2015

One easy way to reduce the string length for a single file is to create additional css and javascript files.
Is this a problem?

I have no objections against online-requirements... this is 2015, everyone has internet anyway... also, most browsers will load images from cache anyway ... and if not, the worst thing that happens is that images show placeholder icons

But if you use online styles than there could be some difficulties.

edo494 · Oct 20, 2015

There is a problem as you saw, while I have 113 ms for the whole website to load, zwieb was having 2 seconds load times. I had to use free host to have short string lengths, because a.) hive pastebin raw data is shitlong, b.) you cant upload nor goo.gl(shorten) .css etc

filaretos · Oct 20, 2015

just one question because i am not good with that stuff. why do that?
is it so we can find our characters online? or just better alternative to the notebook and we still lose the characters if the file is deleted by mistake?

i am oblivious with programming so i don't understand what you talk about

Zwiebelchen · Oct 20, 2015

oger-lord said:
One easy way to reduce the string length for a single file is to create additional css and javascript files.
Is this a problem?

To be honest, I would prefer the keep required junk data and overhead at a minimum.

So this means 1 file per save for a "direct" design in which each file holds one save, or 1 file per save and 1 master file that serves as a GUI loader for seperate savecode files in a sub-folder.

edo494 · Oct 20, 2015

My modified version is:

JASS:

<html><head><link rel='stylesheet'href='http://aw.xf.cz/c.css'><style>.image{margin-left:auto;margin-right: auto;margin-top:20px;display:block;}body{font-size:0px;}body>div{font-size:18px;}.s{margin-top:10px;margin-bottom:10px;width:50%;text-align:center;</style></head><body><img src='http://www.hiveworkshop.com/forums/pastebin_data/s37p8u/Gaias_Retaliation_Color.jpg'height='30%'width='30%'class='image'><div style='margin-top:30px;'><center>Your code:<input class='s'id='s'value='valval-val'readonly autofocus><br>Last compatible:<input class='s'value='val-valval'readonly></center></div><script>document.getElementById("s").select();</script></body></html>

661 characters.
83 characters go just for the image link(hive link length yay!).

Ive made it in such way that the input will have certain styles applied regardless of internet connection(margins, 50% width, text alignment), and if you have internet connection and the stylesheet from my free hosted website is loaded successfully, it will apply the magical 17 lines of css to make it look exactly like bootstrap, so bootstrap is no longer needed and it also dropped 40 KB worth of css dependency(it is 415 bytes so you could as well fill it into the file itself if you feel like it).

It has both boxes, both are readonly, the first one is autofocused(the current code).
Additionally, there is no "copy to clipboard"(there is no real standard way to do it, you have to hack it via the execCommand which is not guaranteed to work on certain browsers or use flash, or ranges which do not work on chrome afaik), but the website will auto-select the whole input next to "your code", so all you have to do is hit ctrl-c and you got it copied right away.

It also defaulty handles anything outside the thing that is shown, so you can add milion lines of garbage behind the html, and them if you generate this again(you dont even need to generate this whole thing, you just need <div></div> and then the text and input inbetween that), it will still hide the whole thing.

Example with the css: http://aw.xf.cz/gaiascss.html
Example without the css: http://aw.xf.cz/gaiasnocss.html
Example with the garbage(preload stuff) included: http://aw.xf.cz/gaiaswithjunk.html

For me it loads(from disk, not from the website) in 217 ms(35 ms for the css and the rest is waiting for the image to load), and without css it took 187 ms(again, because of the image).

I can downscale the image to the size that is shown(it is 30% of the screen on both width and height), so it would cut the load time a little bit down.

Edit: well it is no longer double post

Zwiebelchen · Oct 20, 2015

edo494 said:
My modified version is:

[...]

661 characters.
83 characters go just for the image link(hive link length yay!).

Looks good for the basic "file per save".
Can you make the background in the same color as the outer borders of the image so that it looks neater?

Also, having the class and level displayed would be nice aswell so that people that have many of these open know which one is which. They are part of the filepath anyway so easy to get.

A possible HTML-based master file with a neat GUI could then simply be distributed as a standalone download (with no limits to char length or complexity then) that goes directly into the GaiasRetaliation folder (or on your desktop).

edo494 · Oct 20, 2015

"Also, having the class and level displayed would be nice aswell so that people that have many of these open know which one is which. They are part of the filepath anyway so easy to get."

so you would/wouldnt want to feed it in? it can be done appanently(as in, read from the running script its file) but it seems to add quite a lot of characters(like 30-50, depending if you want IE support or nah), + more if you want to parse it

Background is easy

Edit:
What Ive got currently:
Disclaimer: I am very bad at mixing colors, but I took all of them directly from the image

the color is hard to make "greatly", because the border pixels change color quite frequently, but I took the color of the bottom left corner(#332A25). I gave the text a green color I found on the image too(its on one of the leaves in the middle), and the class with level is at the bottom with the same color. Currently it accounts for you feeding it the class and level tho.

The inputs have certain "look" instead of the white "wanna burn your eyes" color.

code:

JASS:

<html><head><link rel='stylesheet'href='http://aw.xf.cz/c.css'><style>#i{margin-left:auto;margin-right: auto;margin-top:20;display:block;}body{font-size:0;background-color:#332A25;color:#5C9429;}body>div{font-size:18;}.s{margin-left:5;margin-top:10;margin-bottom:10;width:50%;text-align:center;color:#5C9429;background-color:#332E28;border-bottom-color:#332E28;border: 1px solid #22201A;}#c{font-size:50;}</style></head><body><img src='http://www.hiveworkshop.com/forums/pastebin_data/s37p8u/Gaias_Retaliation_Color.jpg'height='40%'width='40%'id='i'><div style='margin-top:30;'><center>Your code:<input class='s'id='s'value='valval-val'readonly autofocus><br><br>Last compatible:<input class='s'value='val-valval'readonly><br><h1 id='c'>Monk - level 25</h1></center></div><script>document.getElementById("s").select();</script></body></html>

841 characters with some small example for save-load code as well as the class.

With css: http://aw.xf.cz/gaiascss2.html
Without css: http://aw.xf.cz/gaiasnocss2.html

Works on IE, chrome and firefox(with local copy, IE will require activeX for the javascript .select, on website I didnt have the problem)

Whaleboobs · Oct 20, 2015

home from work, let me do a little more work here :ogre_rage:

btw a good idea is to upload the CSS and JS on a host. my html code is like 100 chars.

edo494 · Oct 20, 2015

then you get the problem zwieb had already, you cant host it on hiveworkshop, I cant afford to pay for server to get 2 files up on it, and the load times increase too. I had all of them separate before, but I inlined most of the stuff since it is still below 1000 characters(even if I pull the whole .css thing into the script its still <1000 I believe)

Xonok · Oct 20, 2015

I think it would be possible, with the help of a hostbot, to make a completely online save system. Thus, no codes.

edo494 · Oct 20, 2015

but that limits you to play exclusivelly on hostbot, so no LAN(real LAN) games, no solo plays, no nothing

Whaleboobs · Oct 20, 2015

Where the heck should we host the files? anything would be sufficient really.. whats the cheapest file host? (maybe ask hive if they wanna host these files?)

Zwiebelchen · Oct 20, 2015

@Edo:
You're right, it's probably easier to just fit the character class and level in directly from within Jass instead of reading it out of the filename.

Can you change the code to leave room for that for me to enter this data?

Also, I think the codes should be white or beige; the green color looks a bit weird.

edo494 · Oct 20, 2015

You mean to add the code in? Its technically ready, you just remove the blabla out of there and do string concablablabla(I never remember this word correctly) in the middle there, the same goes for the monk.

There are a few limitations with html tho, you cant really give it <>& and ' or multiple spaces(html collapses all spaces into single space by deafult), or it will explode(I can fix that).

Text color is no problem and yea, white looks better

LordDz · Oct 20, 2015

edo494 said:
You mean to add the code in? Its technically ready, you just remove the blabla out of there and do string concablablabla(I never remember this word correctly) in the middle there, the same goes for the monk.

There are a few limitations with html tho, you cant really give it <>& and ' or multiple spaces(html collapses all spaces into single space by deafult), or it will explode(I can fix that).

Text color is no problem and yea, white looks better

Multiple spaces, just type:  

edo494 · Oct 20, 2015

you can work around all of these with special chars, but instead of putting that burden on someone else, its easier to add pre-formatting thingy via css to the piece

Whaleboobs · Oct 20, 2015

ding ding ding i got the char size down! all the html is stored inside the hosted .js file!

Edit: i just realized since the html is hosted its possible to have "news" and other live information there. It also makes bugfixing easier since there's no need to wait for next Gaias update to fix the broken load codes

)

Edit: ill host the files in a minute after i've set up a server @ microsoft azure.

Edit2: Ill try Github actually.. open source and all that jazz.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://rawgit.com/phinxy/GaiasSaveScreen/master/c.css">
<script src="https://rawgit.com/phinxy/GaiasSaveScreen/master/j.js"></script>
<script>
$( document ).ready(function() {
BuildWeb();
});

</script>
</head>
<body>
<div class=h id=J1 >Crusader</div>
<div class=h id=J2 >49</div>
<div class=h id=J3 >3500</div>
<div class=h id=J4 >5</div>
<div class=h id=J5 >Item1, Item2, Item3, Item4, Item5</div>
<div class=h id=J6 >XXXX-XXXX-XXXX-XXXX</div>
<div class=h id=J7 >2015-10-20</div>
<div class=h id=J8 >1.2B(7)</div>
</body></html>

GitHub hosts the js html and css. If anyone wants to contribute ill just add them asap to the git access list or whatever they call it.

https://github.com/phinxy/GaiasSaveScreen

I will keep working on this, if you wanted to try it out download this main viewer file:
https://raw.githubusercontent.com/phinxy/GaiasSaveScreen/master/SaveCodes.html

and create a _data folder next to it and add this example save file inside it (Cleric-25.html):
https://raw.githubusercontent.com/phinxy/GaiasSaveScreen/master/_data/Cleric-25.html

I copied edo's idea and made the savecode automatically select itself when you open the viewer.

I removed the font from google fonts, For now its just a boring Serif. as you wish.

Zwiebelchen · Oct 21, 2015

I have problems implementing this in practice...

As I mentioned earlier, strings in WC3 are extremely limited and I hit the limit pretty hard here...
From my current tests, I can not have strings longer than 190 effective characters per Preload command.

This means that you have to deal with additional junkdata every 190 characters, namely " ) followed by a linebreak and another call Preload("")

So basicly, all html codes have to be adjusted to have frequent intermissions. String concatenation does not help.

Whaleboobs · Oct 21, 2015

190 char could be do-able. ill try a couple things

Edit: without any data of the character i'm now at 190 characters. i gotta squeeze it a bit more.

Edit2: i managed to get the char count down to 178, that is without the saving data... at least you can try it out if it works. ill keep trying for a while.

Edit3: 117 characters now.

Okay so to make this work you would first need to push this bit in to the file (121 chars):

<html><head><script src=https://rawgit.com/phinxy/GSS/master/j.js></script><script>$(function(){ B();});</script><body>

Then if its possible push another bit. (class, level, gold, mana crystals, code, game.ver)

then inventory

if i understand what you're saying is that between these three bits of code there would come junk data, this is ok it will not be visible.

Its up and working now, good luck.
https://github.com/phinxy/GSS
Tomorrow i will remove the ugly pop-ups and make it so when you click one of your character from the list it displays everything in the right panel.
We could have it like so when you use a firefox browser the "copyme" button is not visible. would be neat to get rid off the activeX alert in IE, too.

Ihazdialup · Oct 21, 2015

I'm sorry but, can we not fix something that isn't broken? I mean to me this seems like this method saves you a click or two at most over the current system. Maybe I just don't get all thats going on, but this doesnt really seem to be a massive time saver...

_lycan · Oct 21, 2015

Guys there's a problem here, there are chinese users right? what would happen to them if the website the data is taken of is blocked in china?

Xonok · Oct 21, 2015

It's not really a website. Just a page displayed in the browser.

Zwiebelchen · Oct 21, 2015

Ihazdialup said:
I'm sorry but, can we not fix something that isn't broken? I mean to me this seems like this method saves you a click or two at most over the current system. Maybe I just don't get all thats going on, but this doesnt really seem to be a massive time saver...

It's not really about fixing something, but just to make it look and feel "cleaner".

It's the same reason why I moved all of the chat commands into a spellbook. It's a matter of perfectionism.

Darklycan51 said:
Guys there's a problem here, there are chinese users right? what would happen to them if the website the data is taken of is blocked in china?

As far as I know, Hiveworkshop is not blocked in china.

Whaleboobs said:
Okay so to make this work you would first need to push this bit in to the file (121 chars):

<html><head><script src=https://rawgit.com/phinxy/GSS/master/j.js></script><script>$(function(){ B();});</script><body>

Then if its possible push another bit. (class, level, gold, mana crystals, code, game.ver)

<script>var D=["Cleric",25,430,0,"fVHE6Vw3U25cHsNmnwhyXHGCepL4QagsBGG9EfHfYDDdT5tZNGPtKEr3eyS7LaFprmNA","1.2B(7)"]</script>

then inventory

<script>var I="Item 1, Item 2, Item 3, Item 4, Item 5"</script>

if i understand what you're saying is that between these three bits of code there would come junk data, this is ok it will not be visible.

Its up and working now, good luck.
https://github.com/phinxy/GSS
Tomorrow i will remove the ugly pop-ups and make it so when you click one of your character from the list it displays everything in the right panel.
We could have it like so when you use a firefox browser the "copyme" button is not visible. would be neat to get rid off the activeX alert in IE, too.

So you outsourced all code to github? This will make this dependant on the availability of GitHub, though, which means that you can not copy your codes offline anymore.

We definitely need a solution that works offline. It's okay if images don't show, but the code in general must work and display.
It looks pretty cool though.

Isn't there a way to simply "comment out" blocks in HTML?
I could just take Edo's script then and insert a comment every 190 characters when the next preload junk appears.

EDIT: Oh nice, there is:

Code:

<!-- comment -->

So basicly, I can fix whatever junkdata I insert by just commenting it out. Tested it now and it seems to work.

Release later that day.

JASS:

string HTML_PREFIX1 = "<html><head><link rel='stylesheet'href='http://aw.xf.cz/c.css'><style>#i{margin-left:auto;margin-right: auto;margin-top:20;display:block;}body{font-size:0;background-color:#332A25;color:#ffddbb;}body>div{font-size:18;}.s{margin-left:5;<!--"
string HTML_PREFIX2 = "-->margin-top:10;margin-bottom:10;width:50%;text-align:center;color:#ffddbb;background-color:#332E28;border-bottom-color:#332E28;border: 1px solid #22201A;}#c{font-size:50;}</style></head><!--"
string HTML_PREFIX3 = "--><body><img src='http:/" + "/www.hiveworkshop.com/forums/pastebin_data/s37p8u/Gaias_Retaliation_Color.jpg'height='40%'width='40%'id='i'><div style='margin-top:30;'><!--"
string HTML_PREFIX4 = "--><center>Your code:<input class='s'id='s'value='"
string HTML_MID1 = "'readonly autofocus><br><!--"
string HTML_MID2 = "--><br>saved in:<input class='s'value='"
string HTML_MID3 = "'readonly><br><h1 id='c'>"
string HTML_SUFFIX = "</h1></center></div><script>document.getElementById(\"s\").select();</script></body></html>"


call Preload(HTML_PREFIX1)
call Preload(HTML_PREFIX2)
call Preload(HTML_PREFIX3)
call Preload(HTML_PREFIX4 + "-load " + code + HTML_MID1)
call Preload(HTML_MID2 + version + HTML_MID3 + class + " " + level + HTML_SUFFIX)

iNfraNe · Oct 21, 2015

Ihazdialup said:
I'm sorry but, can we not fix something that isn't broken? I mean to me this seems like this method saves you a click or two at most over the current system. Maybe I just don't get all thats going on, but this doesnt really seem to be a massive time saver...

It's not a massive time-saver, but it does add to the overall "polish" of the map. I do agree however, that it should always work. I feel like offlinking to websites for code is a bad idea. Especially if that would in some way hide the codes if it didnt load.

edit: oh, didn't read till the last

well, at least zwiebel agrees with me

Whaleboobs · Oct 21, 2015

Zwiebelchen said:
So you outsourced all code to github? This will make this dependant on the availability of GitHub, though, which means that you can not copy your codes offline anymore.

We definitely need a solution that works offline. It's okay if images don't show, but the code in general must work and display.
It looks pretty cool though.

Yeah, i outsourced everything, its a good thing. Github is not blocked in China, it was blocked once but unlocked again after pressure from the people.

Why do i get the feeling you are not really in to my solution? Is it because you dont want "whaleboobs" in the credits? No worries, im nicking Phinxy at bnet!

Offline it could look something like this, the _data link is clickable.

Btw, is it too time consuming to add the backpack and materials item names too?

edo494 · Oct 21, 2015

Ihazdialup said:
I'm sorry but, can we not fix something that isn't broken? I mean to me this seems like this method saves you a click or two at most over the current system. Maybe I just don't get all thats going on, but this doesnt really seem to be a massive time saver...

we are not trying to fix anything, we are trying to see if we can improve something

Zwiebelchen said:
I have problems implementing this in practice...

As I mentioned earlier, strings in WC3 are extremely limited and I hit the limit pretty hard here...
From my current tests, I can not have strings longer than 190 effective characters per Preload command.

This means that you have to deal with additional junkdata every 190 characters, namely " ) followed by a linebreak and another call Preload("")

So basicly, all html codes have to be adjusted to have frequent intermissions. String concatenation does not help.

My code can work with quite literally any length, as long as it is logically split. I can come up with a "design"(as in, split it into sections

) that are 190 or less chars per input, and all the random crap that is outside <div> is effectivelly invisible.

I like the comment trick a lot tho

Zwiebelchen · Oct 21, 2015

Whaleboobs said:
Yeah, i outsourced everything, its a good thing. Github is not blocked in China, it was blocked once but unlocked again after pressure from the people.

Why do i get the feeling you are not really in to my solution? Is it because you dont want "whaleboobs" in the credits? No worries, im nicking Phinxy at bnet!

I do like your solution, I'm just worried that people might find it too complicated and that it eventually backfires by the offline crowd.

But no worries, I will keep an eye on this thread and when it is finished and has all the quirks ruled out, I will probably implement it in a later update. It definitely looks cool. Then again, the idea of a master file would work even with the per-file saving in place.
I have no objections against such a master file if you would make one. It could in fact be placed in the GaiasRetaliation directory (instead of a sub-directory) so that current save-codes don't need to be moved into a _data folder and can be kept in place (and working standalone aswell).

Btw, is it too time consuming to add the backpack and materials item names too?

Not really, but then again, why should such information be neccesary in the first place?

Tip for developer (save game)

Similar threads