new

4 years ago · c001d02020
parent db114c6443
commit c001d02020
48 changed files with 147 additions and 46 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/tree/.DS_Store
+++ b/tree/.DS_Store
--- a/tree/0_start.html
+++ b/tree/0_start.html
@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
      <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>bench</title>
    <link rel="stylesheet" href="index.css">
 </head>
 <body>
  <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>
 </body>
--- a/tree/imgs/.DS_Store
+++ b/tree/imgs/.DS_Store
--- a/tree/imgs/avatars/.DS_Store
+++ b/tree/imgs/avatars/.DS_Store
--- a/tree/imgs/avatars/avatar1.gif
+++ b/tree/imgs/avatars/avatar1.gif
--- a/tree/imgs/avatars/avatar10.gif
+++ b/tree/imgs/avatars/avatar10.gif
--- a/tree/imgs/avatars/avatar11.gif
+++ b/tree/imgs/avatars/avatar11.gif
--- a/tree/imgs/avatars/avatar12.gif
+++ b/tree/imgs/avatars/avatar12.gif
--- a/tree/imgs/avatars/avatar2.gif
+++ b/tree/imgs/avatars/avatar2.gif
--- a/tree/imgs/avatars/avatar3.gif
+++ b/tree/imgs/avatars/avatar3.gif
--- a/tree/imgs/avatars/avatar4.gif
+++ b/tree/imgs/avatars/avatar4.gif
--- a/tree/imgs/avatars/avatar5.gif
+++ b/tree/imgs/avatars/avatar5.gif
--- a/tree/imgs/avatars/avatar6.gif
+++ b/tree/imgs/avatars/avatar6.gif
--- a/tree/imgs/avatars/avatar7.gif
+++ b/tree/imgs/avatars/avatar7.gif
--- a/tree/imgs/avatars/avatar8.gif
+++ b/tree/imgs/avatars/avatar8.gif
--- a/tree/imgs/avatars/avatar9.gif
+++ b/tree/imgs/avatars/avatar9.gif
--- a/tree/imgs/park/.DS_Store
+++ b/tree/imgs/park/.DS_Store
--- a/tree/imgs/park/bench1.gif
+++ b/tree/imgs/park/bench1.gif
--- a/tree/imgs/park/bench2.gif
+++ b/tree/imgs/park/bench2.gif
--- a/tree/imgs/park/bench3.gif
+++ b/tree/imgs/park/bench3.gif
--- a/tree/imgs/park/dog1.gif
+++ b/tree/imgs/park/dog1.gif
--- a/tree/imgs/park/flower1.gif
+++ b/tree/imgs/park/flower1.gif
--- a/tree/imgs/park/flower2.gif
+++ b/tree/imgs/park/flower2.gif
--- a/tree/imgs/park/flower3.gif
+++ b/tree/imgs/park/flower3.gif
--- a/tree/imgs/park/flower4.gif
+++ b/tree/imgs/park/flower4.gif
--- a/tree/imgs/park/flower5gif.gif
+++ b/tree/imgs/park/flower5gif.gif
--- a/tree/imgs/park/fountain1.gif
+++ b/tree/imgs/park/fountain1.gif
--- a/tree/imgs/park/fountain2.gif
+++ b/tree/imgs/park/fountain2.gif
--- a/tree/imgs/park/gardener1.gif
+++ b/tree/imgs/park/gardener1.gif
--- a/tree/imgs/park/gardener2.gif
+++ b/tree/imgs/park/gardener2.gif
--- a/tree/imgs/park/grass1.gif
+++ b/tree/imgs/park/grass1.gif
--- a/tree/imgs/park/newspaper1.gif
+++ b/tree/imgs/park/newspaper1.gif
--- a/tree/imgs/park/newspaper2.gif
+++ b/tree/imgs/park/newspaper2.gif
--- a/tree/imgs/park/pond.gif
+++ b/tree/imgs/park/pond.gif
--- a/tree/imgs/park/sun.gif
+++ b/tree/imgs/park/sun.gif
--- a/tree/imgs/park/sun1.gif
+++ b/tree/imgs/park/sun1.gif
--- a/tree/imgs/park/sunglow.png
+++ b/tree/imgs/park/sunglow.png
--- a/tree/imgs/park/trash_bin.gif
+++ b/tree/imgs/park/trash_bin.gif
--- a/tree/imgs/park/tree1.gif
+++ b/tree/imgs/park/tree1.gif
--- a/tree/imgs/park/tree2.gif
+++ b/tree/imgs/park/tree2.gif
--- a/tree/imgs/park/tree3.gif
+++ b/tree/imgs/park/tree3.gif
--- a/tree/imgs/park/tree4.gif
+++ b/tree/imgs/park/tree4.gif
--- a/tree/index.css
+++ b/tree/index.css
@ -1,5 +1,5 @@
 div.introtext {
-    font-size: 45px;    
+    font-size: 5vw;;    
 }
 form {
--- a/tree/index.html
+++ b/tree/index.html
@ -14,18 +14,48 @@
        <input id="player_name" type="text" placeholder="enter you name" >
    </form>.<br>
-    You can decide whether you are going to look like this      
+    You can decide whether you are going to look like     
   <form id="avatar_form" >
-  <input type="radio" id="player1" name="player_avatar" value="imgs/dog1.gif">
+  <input type="radio" id="player1" name="player_avatar" value="imgs/avatars/avatar1.gif">
-  <label for="player1"><img id="player_img_1" src="imgs/dog1.gif" width="100px"></label>
+  <label for="player1"><img id="player_img_1" src="imgs/avatars/avatar1.gif" height="70px"></label>
-       or like this
+       ,
-  <input type="radio" id="player2" name="player_avatar" value="imgs/dog2.gif">
+  <input type="radio" id="player2" name="player_avatar" value="imgs/avatars/avatar2.gif">
-  <label for="player2"> <img id="player_img_2" src="imgs/dog2.gif" width="100px"></label><br>
+  <label for="player2"> <img id="player_img_2" src="imgs/avatars/avatar2.gif" height="70px"></label>
-
+        ,
 <input type="radio" id="player3" name="player_avatar" value="imgs/avatars/avatar3.gif">
 <label for="player3"> <img id="player_img_3" src="imgs/avatars/avatar3.gif" height="70px"></label>
    ,
 <input type="radio" id="player4" name="player_avatar" value="imgs/avatars/avatar4.gif">
 <label for="player4"> <img id="player_img_4" src="imgs/avatars/avatar4.gif" height="70px"></label>
 ,
 <input type="radio" id="player5" name="player_avatar" value="imgs/avatars/avatar5.gif">
 <label for="player5"> <img id="player_img_5" src="imgs/avatars/avatar5.gif" height="70px"></label>
 ,
 <input type="radio" id="player6" name="player_avatar" value="imgs/avatars/avatar6.gif">
 <label for="player6"> <img id="player_img_6" src="imgs/avatars/avatar6.gif" height="70px"></label>
 ,
 <input type="radio" id="player7" name="player_avatar" value="imgs/avatars/avatar7.gif">
 <label for="player7"> <img id="player_img_7" src="imgs/avatars/avatar7.gif" height="70px"></label>
 ,
 <input type="radio" id="player8" name="player_avatar" value="imgs/avatars/avatar8.gif">
 <label for="player8"> <img id="player_img_8" src="imgs/avatars/avatar8.gif" height="70px"></label>
 ,
 <input type="radio" id="player9" name="player_avatar" value="imgs/avatars/avatar9.gif">
 <label for="player9"> <img id="player_img_9" src="imgs/avatars/avatar9.gif" height="70px"></label>
 ,
 <input type="radio" id="player10" name="player_avatar" value="imgs/avatars/avatar10.gif">
 <label for="player10"> <img id="player_img_10" src="imgs/avatars/avatar10.gif" height="70px"></label>
 ,
 <input type="radio" id="player11" name="player_avatar" value="imgs/avatars/avatar11.gif">
 <label for="player11"> <img id="player_img_11" src="imgs/avatars/avatar11.gif" height="70px"></label>
 or like 
 <input type="radio" id="player12" name="player_avatar" value="imgs/avatars/avatar12.gif">
 <label for="player12"> <img id="player_img_12" src="imgs/avatars/avatar12.gif" height="70px"></label>
 .
 </form>    
-        <!-- <form action="0_start.html">
+You can press 
        <input type="submit" onclick="storeName()" value="start"></form>-->
            <button id="gotostart" onclick="storeName()">start</button>
            when you are ready. 
    </div>
--- a/tree/index.js
+++ b/tree/index.js
@ -5,6 +5,16 @@ f.onchange = updateAvatar
 document.querySelector("#player1").onchange = updateAvatar
 document.querySelector("#player2").onchange = updateAvatar
 document.querySelector("#player3").onchange = updateAvatar
 document.querySelector("#player4").onchange = updateAvatar
 document.querySelector("#player5").onchange = updateAvatar
 document.querySelector("#player6").onchange = updateAvatar
 document.querySelector("#player7").onchange = updateAvatar
 document.querySelector("#player8").onchange = updateAvatar
 document.querySelector("#player9").onchange = updateAvatar
 document.querySelector("#player10").onchange = updateAvatar
 document.querySelector("#player11").onchange = updateAvatar
 document.querySelector("#player12").onchange = updateAvatar
 function updateAvatar () {
    //console.log("CHANGE");
@ -25,7 +35,7 @@ if (document.querySelector('#player_name').value === '') {
    alert('Please make sure you declared your preferences');
  }
 else  {
-  window.location.href = "0_start.html";
+  window.location.href = "park.html";
 }
 }
--- a/tree/park.css
+++ b/tree/park.css
@ -0,0 +1,55 @@
 #groundline {
    position: fixed;
    bottom:0px;
    height:75%;
    width: 100%;
    border-top: 0.15vw solid;
 }
 p.text_container {
    bottom: 3%;
    left:3%;
    right:3%;
    position:fixed;
    /*border: 1px solid;*/
    font-size: 1.5vw;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 1em;
    margin-inline-end: 1em;
 }
 #player_img {
    bottom: 22%;
    left: 35%;
    position: fixed;
    z-index: 10;
 }
 #bench {
    bottom: 30%;
    left: 20%;
    position: fixed;
    z-index:1;
 }
 #tree1 {
    top:8%;
    right: 10%;
    position: fixed;
 }
 #tree2 {
    bottom:40%;
    left: 5%;
    position: fixed;
 }
 #flower1 {
    bottom:40%;
    left: 31%;
    position: fixed;
 }
--- a/tree/park.html
+++ b/tree/park.html
@ -0,0 +1,40 @@
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
      <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>park</title>
    <link rel="stylesheet" href="park.css">
 </head>
 <body>
 <div id="groundline"></div>
    <div id="player_img"></div>
    <img id="bench" src="imgs/park/bench1.gif" height="160px">
    <img id="tree1" src="imgs/park/tree1.gif" height="300px">
    <img id="tree2" src="imgs/park/tree4.gif" height="200px">
    <img id="flower1" src="imgs/park/flower1.gif" height="50px">
    <p class="text_container"> Hello <span id="player_name"> </span>. It's Saturday morning. You are 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 close to you. 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>
 </body>