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. Zwiebelchen

    Zwiebelchen

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

    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?
     
    Last edited: Oct 20, 2015
  2. edo494

    edo494

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

    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 :D
     
  3. Zwiebelchen

    Zwiebelchen

    Joined:
    Sep 17, 2009
    Messages:
    7,014
    Resources:
    12
    Models:
    5
    Maps:
    1
    Spells:
    1
    Tutorials:
    1
    JASS:
    4
    Resources:
    12
    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! :)
     
    Last edited: Oct 20, 2015
  4. oger-lord

    oger-lord

    Joined:
    Jul 24, 2006
    Messages:
    156
    Resources:
    2
    Maps:
    1
    Tutorials:
    1
    Resources:
    2
    One easy way to reduce the string length for a single file is to create additional css and javascript files.
    Is this a problem?

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

    edo494

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

    filaretos

    Joined:
    Dec 23, 2012
    Messages:
    15
    Resources:
    0
    Resources:
    0
    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 :p
     
  7. Zwiebelchen

    Zwiebelchen

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

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    My modified version is:

    Code (vJASS):

    <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 :D
     
  9. Zwiebelchen

    Zwiebelchen

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

    edo494

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

    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:
    Code (vJASS):

    <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)
     
    Last edited: Oct 20, 2015
  11. Whaleboobs

    Whaleboobs

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

    edo494

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

    Xonok

    Joined:
    Mar 27, 2012
    Messages:
    3,039
    Resources:
    8
    Spells:
    3
    Tutorials:
    5
    Resources:
    8
    I think it would be possible, with the help of a hostbot, to make a completely online save system. Thus, no codes.
     
  14. edo494

    edo494

    Joined:
    Apr 16, 2012
    Messages:
    3,846
    Resources:
    5
    Spells:
    1
    JASS:
    4
    Resources:
    5
    but that limits you to play exclusivelly on hostbot, so no LAN(real LAN) games, no solo plays, no nothing
     
  15. Whaleboobs

    Whaleboobs

    Joined:
    Jul 31, 2009
    Messages:
    89
    Resources:
    0
    Resources:
    0
    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?)

    [​IMG]
     
  16. Zwiebelchen

    Zwiebelchen

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

    edo494

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

    LordDz

    Joined:
    May 11, 2007
    Messages:
    4,303
    Resources:
    0
    Resources:
    0
    Multiple spaces, just type: &nbsp;
     
  19. edo494

    edo494

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

    Whaleboobs

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

    code

    <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. ;)
     
    Last edited by a moderator: Nov 2, 2015