Dismiss Notice
60,000 passwords have been reset on July 8, 2019. If you cannot login, read this.

Tip for developer (save game)

Discussion in 'Gaias Retaliation ORPG' started by Whaleboobs, Oct 18, 2015.

  1. Whaleboobs

    Whaleboobs

    Joined:
    Jul 31, 2009
    Messages:
    89
    Resources:
    0
    Resources:
    0
    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.
     
  2. edo494

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    sounds very interesting, would indeed be nice to see some example of that
     
  3. Whaleboobs

    Whaleboobs

    Joined:
    Jul 31, 2009
    Messages:
    89
    Resources:
    0
    Resources:
    0
    2013 i made it so i do not have any working example but here is a screenshot of what it looked like:

    [​IMG]

    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. :)
     
    Last edited: Oct 18, 2015
  4. edo494

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    interesting
     
  5. Zwiebelchen

    Zwiebelchen

    Joined:
    Sep 17, 2009
    Messages:
    7,014
    Resources:
    12
    Models:
    5
    Maps:
    1
    Spells:
    1
    Tutorials:
    1
    JASS:
    4
    Resources:
    12
    Pretty neat, actually.

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

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    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
     
  7. S0ulseeker

    S0ulseeker

    Joined:
    Nov 20, 2005
    Messages:
    793
    Resources:
    0
    Resources:
    0
    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.
     
  8. Zwiebelchen

    Zwiebelchen

    Joined:
    Sep 17, 2009
    Messages:
    7,014
    Resources:
    12
    Models:
    5
    Maps:
    1
    Spells:
    1
    Tutorials:
    1
    JASS:
    4
    Resources:
    12
    Here's the kicker, though:
    I never coded HTML.

    So someone else would have to do that.
     
  9. SaikoDeMoN

    SaikoDeMoN

    Joined:
    Oct 2, 2011
    Messages:
    552
    Resources:
    0
    Resources:
    0
    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.
     
  10. Zwiebelchen

    Zwiebelchen

    Joined:
    Sep 17, 2009
    Messages:
    7,014
    Resources:
    12
    Models:
    5
    Maps:
    1
    Spells:
    1
    Tutorials:
    1
    JASS:
    4
    Resources:
    12
    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.
     
  11. oger-lord

    oger-lord

    Joined:
    Jul 24, 2006
    Messages:
    156
    Resources:
    2
    Maps:
    1
    Tutorials:
    1
    Resources:
    2
    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.
    Code

    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
     
  12. iNfraNe

    iNfraNe

    Joined:
    Jun 18, 2004
    Messages:
    117
    Resources:
    2
    Maps:
    2
    Resources:
    2
    Or, youknow, just place a div over it. Here's something with a copy button:
    Code (Text):

    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
     
    Last edited: Oct 19, 2015
  13. Whaleboobs

    Whaleboobs

    Joined:
    Jul 31, 2009
    Messages:
    89
    Resources:
    0
    Resources:
    0
    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.
     
  14. edo494

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    My shot at it:

    code

    Code (vJASS):

    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 code

    Code (vJASS):

    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 https://www.hiveworkshop.com/posts/2743568/
    */

        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 :D
     
  15. oger-lord

    oger-lord

    Joined:
    Jul 24, 2006
    Messages:
    156
    Resources:
    2
    Maps:
    1
    Tutorials:
    1
    Resources:
    2
    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.
     
  16. Whaleboobs

    Whaleboobs

    Joined:
    Jul 31, 2009
    Messages:
    89
    Resources:
    0
    Resources:
    0
    I have done this overly ambitious thing the past hour or two.. All characters are presented in one single html file. (design sucks tho)

    [​IMG]

    [​IMG]

    [​IMG]


    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
    code

    <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)
    code

    <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)
     
    Last edited: Oct 19, 2015
  17. edo494

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    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
     
  18. Zwiebelchen

    Zwiebelchen

    Joined:
    Sep 17, 2009
    Messages:
    7,014
    Resources:
    12
    Models:
    5
    Maps:
    1
    Spells:
    1
    Tutorials:
    1
    JASS:
    4
    Resources:
    12
    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.
     
  19. edo494

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    Blablabla, I had a guide on how I was lowering the chars down wrote, but it was wrong :D

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

    Code (vJASS):

    <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
     
  20. Whaleboobs

    Whaleboobs

    Joined:
    Jul 31, 2009
    Messages:
    89
    Resources:
    0
    Resources:
    0
    i wonder if its OK by hive with the images:

    [​IMG]

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