#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    23
    Rep Power
    0

    Html5 storage help


    Hi all, am VERY new to HTML5 storage feature but want to use it for my boardgame site. In particular I need to know how to have the following sample code keep track of my moveable game tokens:

    Author's code and game here:
    http://diveintohtml5.info/examples/localstorage-halma.html

    <CODE>
    function saveGameState() {
    if (!supportsLocalStorage()) { return false; }
    localStorage["halma.game.in.progress"] = gGameInProgress;
    for (var i = 0; i < kNumPieces; i++) {
    localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
    localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
    }
    localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
    localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
    localStorage["halma.movecount"] = gMoveCount;
    return true;
    }
    </CODE>

    My naming convention for the game pieces is as follows:

    <CODE>
    <div id="CHIPS">
    <!------------START of p1 chips---------->
    <span id="p1_chip1" class="chip"><div class="drag"><img src="images/p1_owned_0_upgrades.png" width="65pt" height="20pt"></div></span>
    <span id="p1_chip2" class="chip"><div class="drag"><img src="images/p1_owned_0_upgrades.png" width="65pt" height="20pt"></div></span>
    <span id="p1_chip3" class="chip"><div class="drag"><img src="images/p1_owned_0_upgrades.png" width="65pt" height="20pt"></div></span>
    </div>
    </CODE>


    Hope this can help you guys to help me

    Thanks in advance
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    23
    Rep Power
    0
    ok after visiting w3schools.com again, this is what I'm thinking I need to do (or something like this, because this STILL isn't working):

    function save_game() {

    current_player = ""
    current_player_len = document.player_turn_form.player_turn.length

    for (i = 0; i <current_player_len; i++) {
    if (document.player_turn_form.player_turn[i].checked) {
    current_player = document.player_turn_form.player_turn[i].value;
    }
    }

    if (current_player = "player"){
    localStorage.setItem('current_player', 'player_2');}
    else if (current_player = "player"){
    localStorage.setItem('current_player', 'player_3');}
    else if (current_player = "player"){
    localStorage.setItem('current_player', 'player_4');}
    else if (current_player = "player"){
    localStorage.setItem('current_player', 'player_5');}
    else if (current_player = "player"){
    localStorage.setItem('current_player', 'player_6');}
    else{
    localStorage.setItem('current_player', 'player_1');}
    }

    function load_game() {

    if (localStorage.getItem('current_player_2') == "player_2"){
    document.player_turn_form.player_turn.selectedIndex = 1;}
    else if (localStorage.getItem('current_player_3') == "player_3"){
    document.player_turn_form.player_turn.selectedIndex = 2;}
    else if (localStorage.getItem('current_player_4') == "player_4"){
    document.player_turn_form.player_turn.selectedIndex = 3;}
    else if (localStorage.getItem('current_player_5') == "player_5"){
    document.player_turn_form.player_turn.selectedIndex = 4;}
    else if (localStorage.getItem('current_player_6') == "player_6"){
    document.player_turn_form.player_turn.selectedIndex = 5;}
    else {
    document.player_turn_form.player_turn.selectedIndex = 0;}
    }

    function reset_game() {

    localStorage.removeItem('current_player');
    }

    MY FORM:
    <!-----------Player Turn Form-------------->
    <form name="player_turn_form" id="player_turn_form" onmousedown="DetermineRadioBox(playsound('Classic_Intercom_Whistle.mp3'))">
    <tr height="50pt">
    <td colspan="6" align="left" class="hand_cursor"><img src="images/spacer.png" align="absmiddle" height="1" width="36">

    <input type="radio" name="player_turn" value="player_1" onclick="toggle_visibility_p1();" key="current_player_1">
    <img src="images/spacer.png" align="absmiddle" height="1" width="29">

    <input type="radio" name="player_turn" value="player_2" onclick="toggle_visibility_p2();" key="current_player_2">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">

    <input type="radio" name="player_turn" value="player_3" onclick="toggle_visibility_p3();" key="current_player_3">
    <img src="images/spacer.png" align="absmiddle" height="1" width="27.5">

    <input type="radio" name="player_turn" value="player_4" onclick="toggle_visibility_p4();" key="current_player_4">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">

    <input type="radio" name="player_turn" value="player_5" onclick="toggle_visibility_p5();" key="current_player_5">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">

    <input type="radio" name="player_turn" value="player_6" onclick="toggle_visibility_p6();" key="current_player_6">
    </form>

    Any help would be much appreciated.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    23
    Rep Power
    0
    OK I've dumbed it down a little (my site code is stupid huge) so here is the skinny on what I've been trying. And thanks guys again:

    THE HTML:

    Code:
    
    <html>
    <head>
    <title>Untitled</title>
    <script type="text/javascript" src="data_storage_scripts.js">
    </script>
    </head>
    
    <body bgcolor="#000000">
    <form id="travel_barons_form">
    <fieldset>
    <fieldset>
    <input type="radio" name="player_turn" id="player_turn" value="player_1">
    <img src="images/spacer.png" align="absmiddle" height="1" width="29">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_2">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_3">
    <img src="images/spacer.png" align="absmiddle" height="1" width="27.5">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_4">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_5">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_6">
    
    <span name="Hidden Player" style="position: absolute; left: 50; top: 0; height: 400; width: 340; padding: 1em; visibility:hidden; z-index: 3;">
    <input type="radio" name="player_turn" id="player_turn" value="player_7" title="PLAYER 7"checked="checked">
    </span>
    </fieldset>
    </fieldset>
    <keygen name="current_player" form="travel_barons_form">
    </form>
    <a href="javascript: void(0)" onclick="save_game();"><font color="ffff00" size="6">SAVE</font></a>&nbsp;&nbsp;
    <a href="javascript: void(0)" onclick="load_game();"><font color="ffff00" size="6">LOAD</font></a>&nbsp;&nbsp;
    <a href="javascript: void(0)" onclick="reset_game();"><font color="ffff00" size="6">RESET</font></a>
    </body>
    </html>
    THE SCRIPT:

    Code:
    function save_game() {
    
    player_turn_len = document.travel_barons_form.player_turn.length
    
    for (i = 0; i <player_turn_len; i++) {
    if (document.travel_barons_form.player_turn[i].checked) {
    player_turn_value = document.travel_barons_form.player_turn[i].value;
    localStorage.current_player = "player_turn_value";
    }
    }
    
    
    }
    
    function load_game() {
    
    localStorage.getItem('current_player');
    }
    
    function reset_game() {
    
    localStorage.removeItem('current_player');
    }
    If I can get this small script working, I'm sure I can extrapolate it to my site. I've done this dozens of times.

    Not sure what's wrong now, even after updating my forms to match html5 form stucture.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    Ok, the way you had it set-up; you were trying to get the current_player value with the form's name, but your form did not have a name... it had an id.

    So here is a demo, for you to learn from:

    Code:
    <!doctype html>
    <html>
    <head>
    
    	<title>Untitled</title>
    
    <script>
    
    var cp;
    
    function save_game()
    {
    var player_turn_len = document.travel_barons_form.player_turn.length
    for (i=0;i<player_turn_len;i++) {
     if (document.travel_barons_form.player_turn[i].checked) {
      var player_turn_value = document.travel_barons_form.player_turn[i].value;
       localStorage.current_player = player_turn_value;
      }
     }
    }
    
    function load_game()
    {
    cp = localStorage.getItem('current_player');
    if (cp != null) {
      alert(cp);
     }
    else {
      alert("You Have Not Saved Anything Yet.");
     }
    }
    
    function reset_game()
    {
    cp = localStorage.removeItem('current_player');
    if (cp == undefined) {
      alert("Storage Has Been Erased!");
     }
    }
    
    </script>
    
    </head>
    <body bgcolor="#000000">
    
    <form name="travel_barons_form">
    <fieldset>
    <fieldset>
    <input type="radio" name="player_turn" id="player_turn" value="player_1">
    <img src="images/spacer.png" align="absmiddle" height="1" width="29">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_2">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_3">
    <img src="images/spacer.png" align="absmiddle" height="1" width="27.5">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_4">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_5">
    <img src="images/spacer.png" align="absmiddle" height="1" width="28">
    
    <input type="radio" name="player_turn" id="player_turn" value="player_6">
    
    <span name="Hidden Player" style="position: absolute; left: 50; top: 0; height: 400; width: 340; padding: 1em; visibility:hidden; z-index: 3;">
    <input type="radio" name="player_turn" id="player_turn" value="player_7" title="PLAYER 7"checked="checked">
    </span>
    </fieldset>
    </fieldset>
    <keygen name="current_player" form="travel_barons_form">
    </form>
    <a href="javascript: void(0)" onclick="save_game();"><font color="ffff00" size="6">SAVE</font></a>&nbsp;&nbsp;
    <a href="javascript: void(0)" onclick="load_game();"><font color="ffff00" size="6">LOAD</font></a>&nbsp;&nbsp;
    <a href="javascript: void(0)" onclick="reset_game();"><font color="ffff00" size="6">RESET</font></a>
    
    </body>
    </html>
    Last edited by web_loone08; February 15th, 2013 at 10:00 PM.

IMN logo majestic logo threadwatch logo seochat tools logo