input

4 years ago · bacbf1e437
parent 83837d5751
commit bacbf1e437
3 changed files with 38 additions and 12 deletions
--- a/tree/0_start.html
+++ b/tree/0_start.html
@ -8,18 +8,25 @@
    
 </head>
 <body>
-    <p> Hello <div id="player_img"> </div>It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late. 
+  <div id="player_img"></div>
+    <p> Hello <span id="player_name"> </span>. It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late. 
 You spot a copy of today's newspaper on the bench. Maybe you want to <a href="1_newspaper.html">give it a read</a>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>


-
 <script src="jquery.min.js"></script>
  <script>
+    //get player avatar from local storage
    console.log (localStorage.myavatar)
    var img = document.createElement("img");
    img.src = localStorage.myavatar;
    var player_img = document.querySelector("#player_img");
    player_img.appendChild(img);
+    
+    //get player name from local storage
+    document.querySelector('#player_name').innerHTML =localStorage.playerName;
+
+
+
 </script>
    
 <script type="text/javascript" src="index.js" ></script>
--- a/tree/index.html
+++ b/tree/index.html
@ -9,25 +9,27 @@
 </head>
 <body>
    <div class="introtext">
-    welcome to *name*, in this story you will be someone called <form><input type="text" placeholder="enter you name" id="player_name" name="player_name"></form>.<br>
-   You will look like         
+    welcome to *game_name*, in this story you will be someone called 
+    <form name="nameForm">
+        <input id="player_name" type="text" placeholder="enter you name" >
+    </form>.<br>
+  
+    You can decide whether you are going to look like this      
   <form id="avatar_form" >
  <input type="radio" id="player1" name="player_avatar" value="imgs/dog1.gif">
  <label for="player1"><img id="player_img_1" src="imgs/dog1.gif" width="100px"></label>
-       or like 
+       or like this
  <input type="radio" id="player2" name="player_avatar" value="imgs/dog2.gif">
  <label for="player2"> <img id="player_img_2" src="imgs/dog2.gif" width="100px"></label><br>

        </form>    
-        
-        
-
        <form action="0_start.html">
-        <input type="submit" value="start"></form>
+        <input type="submit" onclick="storeName();isEmpty();" value="start"></form>
    
    </div>

    
+
 <script src="jquery.min.js"></script>
 <script type="text/javascript" src="index.js" ></script>
    
--- a/tree/index.js
+++ b/tree/index.js
@ -7,9 +7,26 @@ document.querySelector("#player1").onchange = updateAvatar
 document.querySelector("#player2").onchange = updateAvatar

 function updateAvatar () {
-    console.log("CHANGE");
-    var fd = new FormData(f)
+    //console.log("CHANGE");
+    var fd = new FormData(f);
    var avatar=fd.get("player_avatar")
    console.log("avatar", avatar);
-    localStorage.myavatar=avatar 
+    localStorage.myavatar=avatar;
 }
+// store username in local storage + make sure the player added it 
+function storeName(){
+var inputPlayer = document.querySelector('#player_name').value;
+localStorage.playerName=inputPlayer;
+if( document.querySelector('#player_name').value === '' ){
+    alert('empty');
+
+  }
+
+}
+
+
+
+
+
+
+