snake

tree/park.css

@@ -106,9 +106,9 @@ span.button_text{
 }
 
 .close {
-    position:relative;
+    position:absolute;
-    top:25px;
+    top:6.5%;
-    left:80%;
+    left:85%;
 }
 
 
@@ -116,8 +116,8 @@ span.button_text{
     position:fixed;
    /* border: solid black 2px;*/
     left:20%;
-    top:12%;
+    top:15%;
-    bottom:18%;
+    bottom:16%;
     right:20%;
     font-family: sinistre;
     z-index:30;
@@ -235,7 +235,7 @@ a:hover {
     font-size: 1vw;
     text-align: center;
     left: 15%;
-    top:4%;
+    top:8%;
     position:absolute;
     z-index: 50;
   }
@@ -277,6 +277,7 @@ a:hover {
     left: 24%;
     position: absolute;
     z-index:18;
+    cursor:pointer;
 }
 
 #tree1 {
@@ -344,6 +345,7 @@ a:hover {
     left: 57%;
     position: absolute;
     z-index:2;
+    cursor: pointer;
 }
 
 .bubble1 {
@@ -401,7 +403,7 @@ a:hover {
     line-height: 17px;
     text-align: center;
     width: 160px;
-    height: 100px;
+    height: 108px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;

tree/park.html

@@ -122,7 +122,8 @@
 
          <div class="comic_div">
           <div class="bubble1" style="display: none;" >Sorry, no fries today</div>
-          <div class="bubble2" style="display: none;" >I went to the market this early morning but by the time I was there someone already bought all the potatoes. </div>        </div>
+          <div class="bubble2" style="display: none;" > Have you heard about the cat shelter?It looks like the cats disappeared during the night. They say they left no traces.</div>        
+        </div>
 
     </div>
       
@@ -130,19 +131,18 @@
     <div class="text_container"> 
     <div class="message1">
     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 <button class="open_newspaper_index"><span class="button_text">give it a read</span></button> . You can also <button onclick="location.href='park_dream.html';"><span class="button_text">go for a little walk</span></button> or just <button class="wait_for_amanda"><span class="button_text">wait for Amanda</span></button>. 
+    You spot a copy of today's newspaper on the bench close to you: maybe you want to give it a read. You can also <button onclick="location.href='park_N_clues.html';"><span class="button_text">go for a little walk</span></button> or just <button class="wait_for_amanda"><span class="button_text">wait for Amanda</span></button>. 
     </div>
  
     <div class="message4" style="display:none;">
-      It looks like Amanda is not able to join you. 
+      It looks like Amanda is not able to join you ( ͡❛ ︹ ͡❛). 
-      There is a nice kiosk close by: <button id="fries"><span class="button_text">go there to get fries</span></button> . You can still <button class="open_newspaper_index"><span class="button_text">have a look at the news</span></button> or <button onclick="location.href='park_dream.html';"><span class="button_text">go for a walk</span></button> .
+      There is a nice kiosk close by: go there to get fries. You can still have a look at the news or <button onclick="location.href='park_N_clues.html';"><span class="button_text">go for a walk</span></button> .
     </div>
-    <div class="message5 instructions" style="display:none;">
+    <div class="message5 " style="display:none;">
-    <span class="instructions_arrow">→</span> Click on the kiosk to get the fries.
+      Amanda often volunteers for the cat shelter, maybe she went there to help. 
+      Can this be the reason why she is late? <button onclick="location.href='cat_shelter.html';"><span class="button_text">Look for her at the cat shelter!</span></button>
     </div>
-    <div class="message6" style="display:none;">
+
-      Pity! It looks like you are left with no option but to <button onclick="location.href='park_dream.html';"><span class="button_text">go for a walk</span></button> . 
-     </div>
   </div>
 
  </div>
@@ -168,8 +168,8 @@
     }
     // open newspaper 
 
-    $(".open_newspaper_index").click (function(){
+    $("#bench").click (function(){
-      $(".message1, .message4").hide();
+      $(".message1, .message4, .bubble1, .bubble2").hide();
       $("#newspaper, .close").show();
       $(".blur"). addClass("blur_background");
       //saves that u opened the newspaper in the local storage 
@@ -216,6 +216,7 @@
       $(".message1").hide();
       $("#newspaper,#baloon1, #baloon2, #baloon3, #baloon4, .close").hide();
       $(".message4").show();
+      $("#kiosk").show();
 
     });
 
@@ -229,6 +230,7 @@
       $(".message1").hide();
       $(".message4").show();
       $(".blur"). removeClass("blur_background");
+      $("#kiosk ").show();
     });
 
     $("#fries").click (function(){
@@ -238,14 +240,14 @@
     });
 
     $("#kiosk").click (function(){
-      $(".message5").hide();
       $(".bubble1").show();
       setTimeout (function () {
-                $(".bubble2").show();
+        $(".bubble2").show();
-                  setTimeout (function () {
+        setTimeout (function () {
-                  $(".message6").show();
+          $(".message4").hide();
-                  },2000);
+          $(".message5").show();
-                },2000);
+          },2000);
+      },2000);
     });
    
  </script>

tree/park_N.html

@@ -53,7 +53,7 @@
 
     <div class="text_container"> 
       <div class="message1 instructions">
-      <span class="instructions_arrow">→</span> Move around the park with the arrows ←↑↓→ and click on the people to ask them if they saw the newspaper's owner.  
+      <span class="instructions_arrow">→</span> Move around the park with the arrows ←↑↓→   
     </div>
     <div class="message2" style="display: none;">
       You found him! <button class="ned_more"><span class="button_text">Hear more from Ned</span></button> . 
@@ -122,19 +122,23 @@ $(document).keydown(function(e) {
             offset.left -= 20;
              console.log("left");
              $div.addClass("flipped");
+             $(".message1").hide();
             break;
         case 38:
              offset.top -= 20;
              console.log("top");
+             $(".message1").hide();
               break;
         case 39:
              offset.left += 20;
              console.log("right");
              $div.removeClass("flipped");
+             $(".message1").hide();
               break;
         case 40:
              offset.top += 20;
              console.log("down");
+             $(".message1").hide();
               break;
        } 
           //check the offset and prevent the character to exceed the screen dimension 

tree/park_N_clues.css

@@ -0,0 +1,740 @@
+
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-S†Caroline.woff),
+    url(fonts/Sinistre-S†Caroline.otf);
+}
+@font-face {
+    font-family: jolybolditalic;
+    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
+    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
+}
+
+@font-face {
+    font-family: jolyregularitalic;
+    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
+    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
+}
+@font-face {
+    font-family: jolyregular;
+    src: url(fonts/JolyDisplay-RegularDisplay.woff),
+    url(fonts/JolyDisplay-RegularDisplay.otf);
+}
+
+@font-face {
+    font-family: jolybold;
+    src: url(fonts/JolyDisplay-BoldDisplay.woff),
+    url(fonts/JolyDisplay-BoldDisplay.otf);
+}
+
+ body {
+     font-family: jolyregular;
+     font-size: 1.8vw;
+     overflow-y: hidden;
+
+ }
+
+ .instructions{
+    font-family:jolyregularitalic;
+
+ }
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
+
+
+
+ ::-moz-selection { /* Code for Firefox */   
+    background: transparent;
+  }
+  ::selection {
+    background: transparent;
+  }
+
+    div#player_img {
+        bottom: 20%;
+        left: 12%;
+        position:absolute ;
+        z-index: 3;
+        }
+
+
+
+#ground{
+    position:absolute;
+    height:100%;
+    width:5000px;
+
+    
+}
+
+#groundline {
+    position: fixed;
+    top:130px;
+    height:0%;
+    width: 100%;
+    border-top: 1px solid;
+}
+
+
+div.text_container {
+    bottom: 40px;
+    left:40px;
+    right:40px;
+    position:fixed;
+    margin: auto; 
+    line-height: 1.4em;   
+}
+
+button{
+    -webkit-appearance: none;
+    background-color: white;
+    border: 0.1em black solid;
+    border-radius: 25em;
+    color:black;
+    cursor:pointer;
+    font-family: jolybolditalic;
+}
+
+button:hover{
+border: 0.1em transparent solid;
+-webkit-box-shadow: 0px 0px 8px 1px  black;
+-moz-box-shadow: 0px 0px 8px 1px  black;
+box-shadow: 0px 0px 8px 1px  black;
+    
+}
+
+span.button_text{
+    font-size: 1.6vw;
+    padding: 8px;
+}
+
+#player_name{
+    font-family: jolybolditalic;
+}
+
+
+
+/*images*/ 
+
+
+
+#bench {
+    bottom: 32%;
+    left: 6%;
+    position: absolute;
+    z-index:2;
+}
+
+#tree1 {
+    top:8%;
+    left: 10%;
+    position: absolute;
+    z-index:0;
+
+}
+#tree2 {
+    bottom:40%;
+    left: 2.5%;
+    position: absolute;
+    z-index:2;
+}
+#tree3 {
+    bottom:45%;
+    left: 18%;
+    position: absolute;
+    z-index:2;
+}
+#tree3_5 {
+    bottom:45%;
+    left: 35%;
+    position: absolute;
+    z-index:2;
+}
+
+
+#flower1 {
+    bottom:68%;
+    left: 5%;
+    position: absolute;
+    z-index:0;
+}
+
+#flower2{
+    bottom: 28%;
+    left: 1.5%;
+    position: absolute;
+    z-index:17;
+}
+
+#flower3{
+    bottom: 50%;
+    left: 13%;
+    position: absolute;
+    z-index:2;
+}
+#flower4{
+    bottom: 35%;
+    left: 22%;
+    position: absolute;
+    z-index:2;
+}
+#flower5{
+    bottom: 65%;
+    left: 17%;
+    position: absolute;
+    z-index:0;
+}
+
+#grass1{
+    bottom: 15%;
+    left: 40%;
+    position: absolute;
+    z-index:4;
+}
+
+#grass2{
+    bottom: 15%;
+    left: 82%;
+    position: absolute;
+    z-index:4;
+}
+
+#statue{
+    top: 5%;
+    left: 60%;
+    position: absolute;
+    z-index:0;
+}
+
+#tree4{
+    bottom: 20%;
+    left: 70%;
+    position: absolute;
+    z-index:4;
+}
+#cat{
+    bottom: 20%;
+    left: 70%;
+    position: absolute;
+    z-index:3;
+}
+#snake{
+    bottom:44%;
+    left: 18%;
+    position: absolute;
+    z-index:2;
+}
+
+#flower6{
+    bottom: 65%;
+    left: 80%;
+    position: absolute;
+    z-index:2;
+}
+
+#flower7{
+    bottom: 50%;
+    left: 55%;
+    position: absolute;
+    z-index:0;
+}
+
+#flower8{
+    bottom: 30%;
+    left: 97%;
+    position: absolute;
+    z-index:1;
+ }
+
+#dog{
+    bottom: 21%;
+    left: 38%;
+    position: absolute;
+    z-index:4;
+    cursor:pointer;
+}
+
+#tree5{
+    top: 10%;
+    right: 4%;
+    position: absolute;
+    z-index:1;
+}
+#flower9{
+    top: 23%;
+    left: 32%;
+    position: absolute;
+    cursor: pointer;
+    z-index:0;
+}
+
+
+/* looking for ned scene*/
+
+    #woman{
+        top: 20%;
+        left: 30%;
+        position: absolute;
+        cursor: pointer;
+        z-index:0;
+    }
+    #newspaper_seller{
+        bottom: 55%;
+        left: 47%;
+        position: absolute;
+        cursor: pointer;
+        z-index:0;
+    }
+    #woman2{
+        bottom: 20%;
+        left: 55%;
+        position: absolute;
+        cursor: pointer;
+        z-index:5;
+    }
+
+    #sport1{
+        bottom: 20%;
+        left: 66%;
+        position: absolute;
+        cursor: pointer;
+        z-index:5;
+   
+    }
+    #sport2{
+        bottom: 65%;
+        left: 63%;
+        position: absolute;
+        cursor: pointer;
+        z-index:0;
+    }
+
+    #ned {
+        top: 25%;
+        right: 8%;
+        position: absolute;
+        cursor: pointer;
+        z-index:2;
+    }
+
+    .woman_bubble {
+        top:13%;
+        left: 31.5%;
+        position: absolute;
+        background: #ffffff;
+        color: #000000;
+        font-family: sinistre;
+        font-size: 16px;
+        line-height: 17px;
+        text-align: center;
+        width: 250px;
+        height: 75px;
+        border-radius: 10px;
+        padding: 18px;
+        border: #000000 solid 1px;
+        z-index:50;
+    }
+    .woman_bubble:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 0;
+        z-index: 1;
+        border-style: solid;
+        border-color: transparent #ffffff;
+        border-width: 20px 20px 20px 0;
+        top: 50%;
+        left: -20px;
+        margin-top: -20px;
+    }
+    .woman_bubble:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        z-index: 0;
+        border-style: solid;
+        border-color: transparent #000000;
+        border-width: 21px 21px 21px 0;
+        top: 50%;
+        left: -21.5px;
+        margin-top: -21px;
+        display: block;
+    }
+    .dog_bubble {
+        bottom:33%;
+        left: 40%;
+        position: absolute;
+        background: #ffffff;
+        color: #000000;
+        font-family: sinistre;
+        font-size: 16px;
+        text-align: center;
+        width:130px;
+        height: 39px;
+        border-radius: 10px;
+        padding: 18px;
+        border: #000000 solid 1px;
+        z-index: 50;
+    }
+    .dog_bubble:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 0;
+        z-index: 1;
+        border-style: solid;
+        border-width: 20px 15px 0 0;
+        border-color: #ffffff transparent transparent transparent;
+        bottom: -20px;
+        left: 42%;
+        margin-left: -7.5px;
+    }
+    .dog_bubble:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        z-index: 0;
+        border-style: solid;
+        border-width: 21px 16px 0 0;
+        border-color: #000000 transparent transparent transparent;
+        bottom: -22px;
+        left: 42%;
+        margin-left: -8.5px;
+        display: block;
+    }
+
+    .vendor_bubble {
+        bottom:75%;
+        left: 43%;
+        position: absolute;
+        background: #ffffff;
+        color: #000000;
+        font-family: sinistre;
+        font-size: 16px;
+        line-height: 17px;
+        text-align: center;
+        width: 160px;
+        height: 65px;
+        border-radius: 10px;
+        padding: 18px;
+        border: #000000 solid 1px;
+        z-index: 50;
+    }
+    .vendor_bubble:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 0;
+        z-index: 1;
+        border-style: solid;
+        border-width: 0 20px 24px 0;
+        border-color: transparent #ffffff transparent transparent;
+        bottom: -24px;
+        left: 76%;
+        margin-left: -10px;
+    }
+    .vendor_bubble:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        z-index: 0;
+        border-style: solid;
+        border-width: 0 21px 25px 0;
+        border-color: transparent #000000 transparent transparent;
+        bottom: -26px;
+        left: 76%;
+        margin-left: -10px;
+        display: block;
+    }
+    .woman2_bubble {
+        bottom:38%;
+        left: 52%;
+        position: absolute;
+        background: #ffffff;
+        color: #000000;
+        font-family: sinistre;
+        font-size: 16px;
+        text-align: center;
+        width: 150px;
+        height: 70px;
+        border-radius: 10px;
+        padding: 18px;
+        border: #000000 solid 1px;
+        z-index: 50;
+    }
+    .woman2_bubble:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 0;
+        z-index: 1;
+        border-style: solid;
+        border-width: 0 15px 20px 0;
+        border-color: transparent #ffffff transparent transparent;
+        bottom: -20px;
+        left: 70%;
+        margin-left: -7.5px;
+    }
+    .woman2_bubble:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        z-index: 0;
+        border-style: solid;
+        border-width: 0 16px 21px 0;
+        border-color: transparent #000000 transparent transparent;
+        bottom: -22px;
+        left: 70%;
+        margin-left: -7.5px;
+        display: block;
+    }
+ 
+        .fit2_bubble {
+            bottom:31%;
+            left: 64%;
+            position: absolute;
+            background: #ffffff;
+            color: #000000;
+            font-family: sinistre;
+            font-size: 16px;
+            text-align: center;
+            width: 150px;
+            height: 55px;
+            border-radius: 10px;
+            padding: 18px;
+            border: #000000 solid 1px;
+            z-index: 50;
+        }
+        .fit2_bubble:after {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 0;
+            z-index: 1;
+            border-style: solid;
+            border-width: 0 15px 20px 0;
+            border-color: transparent #ffffff transparent transparent;
+            bottom: -20px;
+            left: 70%;
+            margin-left: -7.5px;
+        }
+        .fit2_bubble:before {
+            content: '';
+            position: absolute;
+            width: 0;
+            z-index: 0;
+            border-style: solid;
+            border-width: 0 16px 21px 0;
+            border-color: transparent #000000 transparent transparent;
+            bottom: -22px;
+            left: 70%;
+            margin-left: -7.5px;
+            display: block;
+        }
+        .fit1_bubble {
+            bottom:76.5%;
+            left: 62.5%;
+            position: absolute;
+            background: #ffffff;
+            color: #000000;
+            font-family: sinistre;
+            font-size: 16px;
+            text-align: center;
+            width: 150px;
+            height: 80px;
+            border-radius: 10px;
+            padding: 18px;
+            border: #000000 solid 1px;
+            z-index: 50;
+        }
+        .fit1_bubble:after {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 0;
+            z-index: 1;
+            border-style: solid;
+            border-width: 20px 15px 0 0;
+            border-color: #ffffff transparent transparent transparent;
+            bottom: -20px;
+            left: 42%;
+            margin-left: -7.5px;
+        }
+        .fit1_bubble:before {
+            content: '';
+            position: absolute;
+            width: 0;
+            z-index: 0;
+            border-style: solid;
+            border-width: 21px 16px 0 0;
+            border-color: #000000 transparent transparent transparent;
+            bottom: -22px;
+            left: 42%;
+            margin-left: -8.5px;
+            display: block;
+        }
+
+        .ned_bubble1 {
+            top:3%;
+            left: 88%;
+            position: absolute;
+            background: #ffffff;
+            color: #000000;
+            font-family: sinistre;
+            font-size: 16px;
+            line-height: 17px;
+            text-align: center;
+            width: 150px;
+            height: 50px;
+            border-radius: 10px;
+            padding: 18px;
+            border: #000000 solid 1px;
+            z-index:50;
+        }
+        .ned_bubble1:after {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 0;
+            z-index: 1;
+            border-style: solid;
+            border-width: 0 15px 20px 0;
+            border-color: transparent #ffffff transparent transparent;
+            bottom: -20px;
+            left: 85%;
+            margin-left: -7.5px;
+        }
+        .ned_bubble1:before {
+            content: '';
+            position: absolute;
+            width: 0;
+            z-index: 0;
+            border-style: solid;
+            border-width: 0 16px 21px 0;
+            border-color: transparent #000000 transparent transparent;
+            bottom: -22px;
+            left: 85%;
+            margin-left: -7.5px;
+            display: block;
+        }
+
+.ned_bubble2 {
+    top:17%;
+    left: 84%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 200px;
+    height: 140px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index:50;
+}
+.ned_bubble2:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-color: transparent #ffffff;
+    border-width: 15px 0 15px 25px;
+    top: 49%;
+    right: -25px;
+    margin-top: -15px;
+}
+.ned_bubble2:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-color: transparent #000000;
+    border-width: 16px 0 16px 26px;
+    top: 49%;
+    right: -26.5px;
+    margin-top: -16px;
+    display: block;
+}
+
+.ned_bubble3 {
+    top:50%;
+    left: 90%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 220px;
+    height: 140px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index:50;
+}
+.ned_bubble3:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-color: #ffffff transparent;
+    border-width: 0 15px 25px;
+    top: -25px;
+    left: 14%;
+    margin-left: -15px;
+}
+.ned_bubble3:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-color: #000000 transparent;
+    border-width: 0 16px 26px;
+    top: -26.5px;
+    left: 14%;
+    margin-left: -16px;
+    display: block;
+}
+.flipped {
+    transform: scale(-1, 1);
+    -moz-transform: scale(-1, 1);
+    -webkit-transform: scale(-1, 1);
+    -o-transform: scale(-1, 1);
+    -khtml-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+}
+
+
+/* hide scroll bar */
+/* width */
+::-webkit-scrollbar {
+    color:white;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: white; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: white; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: white; 
+  }

tree/park_N_clues.html

@@ -3,9 +3,9 @@
 <head>
       <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-    <title>looking for</title>
+    <title>walk</title>
     <link rel="icon" href="imgs/park/flower2.gif">
-    <link rel="stylesheet" href="park_walk.css">
+    <link rel="stylesheet" href="park_N_clues.css">
     
 </head>
 <body>
@@ -15,10 +15,13 @@
     <div id="ground"> 
      <div  id="player_img"></div>
      <div id="player_img"></div>
+     <img  id="cat" src="imgs/park/cat.gif" height="40px" style="display: none;">
+     <img  id="snake" src="imgs/park/snake.gif" height="40px" style="display: none;">
      <img  id="bench" src="imgs/park/bench.gif" height="150px">
      <img  id="tree1" src="imgs/park/tree1.gif" height="200px">
      <img  id="tree2" src="imgs/park/tree4.gif" height="160px">
      <img  id="tree3" src="imgs/park/tree4.gif" height="160px">
+     <img  id="tree3_5" src="imgs/park/tree1.gif" height="200px">
      <img  id="flower1" src="imgs/park/flower1.gif" height="30px">
      <img  id="flower2" src="imgs/park/flower3.gif" height="40px">
      <img  id="flower3" src="imgs/park/flower3.1.gif" height="40px">
@@ -33,27 +36,29 @@
       <img  id="tree5" src="imgs/park/tree1.gif" height="230px">
       <img  id="sport1" src="imgs/park/fitness1.gif" height="70px">
       <img  id="sport2" src="imgs/park/fitness2.gif" height="70px">
-      <img  id="newspaper_seller" src="imgs/park/newspaper_seller.gif" height="120px">
+      <img  id="newspaper_seller" src="imgs/park/newspaper_seller.gif" height="110px">
-      <img  id="woman" src="imgs/park/woman.gif" height="140px">
+      <img  id="woman" src="imgs/park/woman.gif" height="120px">
+      <img  id="woman2" src="imgs/park/woman2.gif" height="110px">
       <img  id="flower9" src="imgs/park/flower1.1.gif" height="30px"> 
-      <img  id="dog" src="imgs/park/dog1.gif" height="90px">
+      <img  id="dog" src="imgs/park/dog1.gif" height="80px">
-      <img  id="ned" src="imgs/park/ned2.gif" height="120px">
+      <img  id="ned" src="imgs/park/ned2.gif" height="110px">
       <img  id="grass2" src="imgs/park/grass1.gif" height="90px">
 
-        <div class="woman_bubble" style="display: none;">I don't know, you should try to ask the news vendor.</div>
+        <div class="woman_bubble" style="display: none;">Have you heard about the food poisoning at the school? My son is out for the trip this week-end. I hope everything will be fine.</div>
-        <div class="dog_bubble" style="display: none;">woof</div>
+        <div class="woman2_bubble" style="display: none;">I'm so glad my grandchildren are away for the weekend.</div>
-        <div class="vendor_bubble" style="display: none;">I sold a copy to a guy not so long ago. He must be still around.</div>
+        <div class="dog_bubble" style="display: none;">I would talk to Ned if I were you.</div>
-        <div class="fit2_bubble" style="display: none;">...</div>
+        <div class="vendor_bubble" style="display: none;">Did you read today's news? Crazy stuff is happening in the valley.</div>
-        <div class="fit1_bubble" style="display: none;">...</div>
+        <div class="fit2_bubble" style="display: none;">I heard that someone is already investigating.</div>
-        <div class="ned_bubble1" style="display: none;">I was hoping that someone would find my newspaper.</div>
+        <div class="fit1_bubble" style="display: none;">The truth will come out, they are keeping an eye on Monteferro.</div>
-        <div class="ned_bubble2" style="display: none;">My name is Ned, I used to be the school's janitor. I got fired last week because the school noticed I was investigating the kids' conditions. Believe me, the situation is shadier then it seems. Do you wanna know what I just found out?</div>
+        <div class="ned_bubble1" style="display: none;">Do you wanna hear what I jound found out?</div>
-        <div class="ned_bubble3" style="display: none;">The school is involved in sinister activities: together with the Monteferro Food Enterprise they are poisoning the children's meals. Follow me to the enterprise's fields: I can show you the proof of what I'm saying. </div>
+        <div class="ned_bubble2" style="display: none;">My name is Ned, I used to be the school's janitor. I got fired last week because the school noticed I was investigating the kids' conditions. Believe me, the situation is shadier than it looks.</div>
+        <div class="ned_bubble3" style="display: none;">The school is involved in sinister activities: together with the Monteferro Food Enterprise they are poisoning the children's meals. Follow me to the enterprise's fields: I can show you the proof that what I'm saying is true.</div>
 
       </div>
 
     <div class="text_container"> 
       <div class="message1 instructions">
-      Move around the park with the arrows ←↑↓→ and click on the people to ask them if they saw the newspaper's owner.  
+      <span class="instructions_arrow">→</span> Move around the park with the arrows ←↑↓→   
     </div>
     <div class="message2" style="display: none;">
       You found him! <button class="ned_more"><span class="button_text">Hear more from Ned</span></button> . 
@@ -91,12 +96,7 @@
       
   }    
 
-  
+    
-
-
-
-
-      
 //move the character 
 
 $(document).keydown(function(e) {
@@ -110,6 +110,30 @@ $(document).keydown(function(e) {
       var top_Percentage = (top_val_only/parent_height) * 100; 
       console.log ("top %", top_Percentage);
 
+      var parent_width = $("#ground").width(); 
+      var left_val_px   = $div.css('left');
+      var left_val_only = parseInt(left_val_px); 
+      var left_Percentage = (left_val_only/parent_width) * 100; 
+      console.log ("left %", left_Percentage);
+
+      if (left_Percentage > 20) {
+        $("#snake").show();
+        $("#snake").animate({ top: "120%" }, { 
+                    duration: 2000
+                }).promise().done(function(){
+                        $("#snake").hide();
+                });
+      }
+
+      if (left_Percentage > 80) {
+        $("#cat").show();
+        $("#cat").animate({ left: "120%" }, { 
+                    duration: 2000
+                }).promise().done(function(){
+                        $("#cat").hide();
+                });
+      }
+
       if (top_Percentage > 65) {
         $div.css ("zIndex", 5)
       }
@@ -126,18 +150,24 @@ $(document).keydown(function(e) {
         case 37:
             offset.left -= 20;
              console.log("left");
+             $div.addClass("flipped");
+             $(".message1").hide();
             break;
         case 38:
              offset.top -= 20;
              console.log("top");
+             $(".message1").hide();
               break;
         case 39:
              offset.left += 20;
              console.log("right");
+             $div.removeClass("flipped");
+             $(".message1").hide();
               break;
         case 40:
              offset.top += 20;
              console.log("down");
+             $(".message1").hide();
               break;
        } 
           //check the offset and prevent the character to exceed the screen dimension 
@@ -198,6 +228,10 @@ $(document).keydown(function(e) {
       $(".woman_bubble").toggle();
     });
 
+    $("#woman2").click (function(){
+      $(".woman2_bubble").toggle();
+    });
+
     $("#dog").click (function(){
       $(".dog_bubble").toggle();
     });
@@ -215,23 +249,23 @@ $(document).keydown(function(e) {
     });
 
     $("#ned").click (function(){
-      $(".ned_bubble1").toggle();
+      $(".ned_bubble2").toggle();
       $(".message1").hide();
       setTimeout (function () {
-                $(".ned_bubble2").show();
+            $(".ned_bubble3").show();
-                  setTimeout (function () {
+            setTimeout (function () {
-                    $(".message2").show();
+                $(".message3").show();
-                  },2000);
+            },2000);
-                },2000);
+        },2000);
     });
-
+/*
     $(".ned_more").click (function(){
       $(".ned_bubble3").toggle();
       $(".message2,.ned_bubble1, .ned_bubble2").hide();
       setTimeout (function () {
                   $(".message3").show();
                   },3000);
-    });
+    });*/
 
 
  </script>

tree/park_dream.html

@@ -1,218 +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>park_dream</title>
-    <link rel="icon" href="imgs/park/flower2.gif">
-    <link rel="stylesheet" href="park.css">
-    
-</head>
-<body>
-
-
-    <div id="groundline"></div>
-
-    <div id="ground"> 
-      <div  id="player_img"></div>
-         <img  id="bench" src="imgs/park/bench1.gif" height="20%">
-         <img  id="tree1" src="imgs/park/tree1.gif" height="30%">
-         <img  id="tree2" src="imgs/park/tree4.gif" height="25%">
-         <img  id="tree3" src="imgs/park/tree4.gif" height="25%">
-         <img  id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%">
-         <img  id="flower1" src="imgs/park/flower1.gif" height="5%">
-         <img  id="flower2" src="imgs/park/flower3.gif" height="7%">
-         <img  id="flower3" src="imgs/park/flower3.1.gif" height="6%">
-         <img  id="flower4" src="imgs/park/flower1.1.gif" height="5%"> 
-         <img  id="flower5" src="imgs/park/flower1.gif" height="5%">
-         <img  id="grass1" src="imgs/park/grass1.gif" height="75vw">
-         <img  id="grass2" src="imgs/park/grass1.gif" height="75vw">
-         <img  id="statue" src="imgs/park/statue.gif" height="22%">
-         <img  id="tree4" src="imgs/park/tree4.gif" height="25%">
-         <img  id="flower6" src="imgs/park/flower1.1.gif" height="5%"> 
-         <img  id="flower7" src="imgs/park/flower3.1.gif" height="6%">
-         <img  id="flower8" src="imgs/park/flower3.1.gif" height="6%">
-         <img  id="dog" src="imgs/park/dog1.gif" height="12%"> 
-         <img  id="tree5" src="imgs/park/tree1.gif" height="30%">
- 
-       </div>
-      
-    
-
-    <div class="text_container"> 
-    <div class="message1">
-        hello
-    </div>
-
-  </div>
-
-
-
- </div>
-
-
-
-
-
-
-<script src="jquery.min.js"></script>
-  <script>
-   // player moves 
-
-   var $div = $('#player_img');
-    var screenLeftMin = 200;
-    var screenLeftMax = 870;
-    var screenTopMin = 202;
-    var screenTopMax = 450;
-      
-  function adjustScroll() {
-      var playerLeft = parseInt($div.css("left"));
-      var scrollLeft = $(document).scrollLeft();
-      var screenLeft = playerLeft - scrollLeft;
-      console.log ("screenleft:", screenLeft);
-
-      var playerTop = parseInt($div.css("top"));
-      var scrollTop = $(document).scrollTop();
-      var screenTop = playerTop - scrollTop;
-      console.log ("screentop:", screenTop);
-
-        
-      if (screenLeft > screenLeftMax ) {
-          $(document).scrollLeft(playerLeft - screenLeftMax)
-      }
-      
-            if (screenLeft < screenLeftMin ) {
-          $(document).scrollLeft(playerLeft - screenLeftMin)
-      }  
-      
-
-  if (screenTop > screenTopMax ) {
-          $(document).scrollTop(playerTop - screenTopMax)
-      }
-      
-            if (screenTop < screenTopMin ) {
-          $(document).scrollTop(playerTop - screenTopMin)
-      }  
-  }  
-  
-
-
-      
-$(document).keydown(function(e) {
-     switch (e.which) {
-        case 37:
-        $div.css('left', $div.offset().left - 20);
-        e.preventDefault();
-        adjustScroll();
-              break;
-        case 38:
-        $div.css('top', $div.offset().top - 20);
-              break;
-        case 39:
-        $div.css('left', $div.offset().left + 20);
-         e.preventDefault();
-             adjustScroll();
-              break;
-        case 40:
-        $div.css('top', $div.offset().top + 20);
-              break;
-       }
-  })
-    //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;
-
-    //store that you've been in the park 
-    window.onload = function() {
-      window.localStorage.setItem("park","opened")
-      console.log ("park:",localStorage.park)
-    }
-    // open newspaper 
-
-    $(".open_newspaper_index").click (function(){
-      $("#newspaper, .close").toggle();
-      //saves that u opened the newspaper in the local storage 
-      window.localStorage.setItem("newspaper","opened")
-      console.log ("newspaper:",localStorage.newspaper)
-    });
-
-     //newspaper pages
-
-    $("#arrow_go1").click (function(){
-      $(".index, .school1, .message1, .message4 ").hide();
-      $(".school2, .school3, #baloon1, #baloon2, .message2").show();
-    });
-
-    $("#arrow_back1").click (function(){
-      $("#baloon1, #baloon2, #baloon3, #baloon4, .school2,.school3, .message2").hide();
-      $(".index, .school1, .message4").show();
-    
-    });
-
-    $("#arrow_go2").click (function(){
-      $(".school2").hide();
-      $(".school3").hide();
-      $("#baloon1").hide();
-      $("#baloon2").hide();
-      $(".message2").hide();
-      $(".school4").show();
-      $(".school5").show();
-      $("#baloon3").show();
-      $("#baloon4").show();
-      $(".message3").show();
-    });
-
-    $("#arrow_back2").click (function(){
-      $(".school4").hide();
-      $(".school5").hide();
-      $("#baloon3").hide();
-      $("#baloon4").hide();
-      $(".message3").hide();
-      $(".school2").show();
-      $(".school3").show();
-      $("#baloon1").show();
-      $("#baloon2").show();
-      $(".message2").show();
-    });
-    $("#wait_for_amanda").click (function(){
-      $(".message3").hide();
-      $(".message1").hide();
-      $(".message4").show();
-    });
-
-    $(".close").click (function(){
-      $("#newspaper").hide();
-      $(".close").hide();
-      $("#baloon1").hide();
-      $("#baloon2").hide();
-      $("#baloon3").hide();
-      $("#baloon4").hide();
-      $(".message1").hide();
-      $(".message2").hide();
-      $(".message3").hide();
-      $(".message4").show();
-    });
-
-    $("#fries").click (function(){
-      $("#newspaper, .message4").hide();
-      $(".message5").show();
-    });
-
-    $("#kiosk").click (function(){
-      $(".chat_fries").toggle();
-    });
-
-
-
-   
- </script>
-    
-<script type="text/javascript" src="index.js" ></script>
-    
-</body>