pff

tree/park_N.html

@@ -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">
@@ -41,12 +44,13 @@
       <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="dog_bubble" style="display: none;">woof</div>
+        <div class="dog_bubble" style="display: none;">Have you heard what happened to the cats? [...]</div>
+        <div class="dog_bubble2" style="display: none;">It looks like they ran away from the cat shelter tonight.</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="fit2_bubble" style="display: none;">...</div>
         <div class="fit1_bubble" style="display: none;">...</div>
         <div class="ned_bubble1" style="display: none;">I was hoping that someone would find my newspaper.</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. Do you wanna know what I just found out?</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. Do you wanna know what I just 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 that what I'm saying is true. </div>
 
       </div>
@@ -55,8 +59,11 @@
       <div class="message1 instructions">
       <span class="instructions_arrow">→</span> Move around the park with the arrows ←↑↓→   
     </div>
+    <div class="message_dog" style="display: none;">
+      Amanda might be at the cat shelter. <button onclick="location.href='cat_shelter.html';"><span class="button_text">Go there to check it out !</span></button>
+    </div>
     <div class="message2" style="display: none;">
-      You found him! <button class="ned_more"><span class="button_text">Hear more from Ned</span></button> . 
+      You found him! 
     </div>
     <div class="message3" style="display: none;">
       It looks intriguing: <button onclick="location.href='monteferro.html';"><span class="button_text">go to the Monteferro Food Enterprise</span></button> with Ned. 
@@ -104,6 +111,29 @@ $(document).keydown(function(e) {
       var top_val_only = parseInt(top_val_px); 
       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: "110%" }, { 
+                    duration: 2500
+                }).promise().done(function(){
+                        $("#cat").hide();
+                });
+      }
 
       if (top_Percentage > 65) {
         $div.css ("zIndex", 5)
@@ -165,19 +195,6 @@ $(document).keydown(function(e) {
             
   })
       
-    /* manipulate the z-index of the character 
-
-      var offset_percent = offset 
-
-    if (offset */
-
-
-
-
-
-
-
-
 
 // saves game step in the local storage 
   window.onload = function() {
@@ -203,6 +220,14 @@ $(document).keydown(function(e) {
       $(".dog_bubble").toggle();
     });
 
+    $(".dog_bubble").click (function(){
+      $(".message1").hide();
+      $(".dog_bubble2, .message_dog").toggle();
+      setTimeout ( function() {
+        $(".dog_bubble2, .message_dog").hide();
+      }, 5000)
+    });
+
     $("#newspaper_seller").click (function(){
       $(".vendor_bubble").toggle();
     });
@@ -217,18 +242,16 @@ $(document).keydown(function(e) {
 
     $("#ned").click (function(){
       $(".ned_bubble1").toggle();
+      $(".message2").show();
       $(".message1").hide();
       setTimeout (function () {
                 $(".ned_bubble2").show();
-                  setTimeout (function () {
-                    $(".message2").show();
-                  },2000);
                 },2000);
     });
 
-    $(".ned_more").click (function(){
+    $(".ned_bubble2").click (function(){
       $(".ned_bubble3").toggle();
-      $(".message2,.ned_bubble1, .ned_bubble2").hide();
+      $(".message2").hide();
       setTimeout (function () {
                   $(".message3").show();
                   },3000);

tree/park_walk.css

@@ -203,12 +203,31 @@ span.button_text{
     z-index:0;
 }
 
+#tree3_5 {
+    bottom:45%;
+    left: 35%;
+    position: absolute;
+    z-index:2;
+}
+
 #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%;
@@ -347,11 +366,12 @@ span.button_text{
         font-family: sinistre;
         font-size: 16px;
         text-align: center;
-        width: 40px;
+        width: 120px;
-        height: 18px;
+        height: 55px;
         border-radius: 10px;
         padding: 18px;
         border: #000000 solid 1px;
+        cursor:pointer;
         z-index: 50;
     }
     .dog_bubble:after {
@@ -380,6 +400,49 @@ span.button_text{
         margin-left: -8.5px;
         display: block;
     }
+    .dog_bubble2 {
+        bottom:35%;
+        left: 35%;
+        position: absolute;
+        background: #ffffff;
+        color: #000000;
+        font-family: sinistre;
+        font-size: 16px;
+        line-height: 17px;
+        text-align: center;
+        width: 160px;
+        height: 55px;
+        border-radius: 10px;
+        padding: 18px;
+        border: #000000 solid 1px;
+        z-index: 50;
+    }
+    .dog_bubble2: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;
+    }
+    .dog_bubble2: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;
+    }
 
     .vendor_bubble {
         bottom:75%;
@@ -511,8 +574,8 @@ span.button_text{
         }
 
         .ned_bubble1 {
-            top:3%;
+            top:7%;
-            left: 88%;
+            left: 87%;
             position: absolute;
             background: #ffffff;
             color: #000000;
@@ -555,7 +618,7 @@ span.button_text{
         }
 
 .ned_bubble2 {
-    top:17%;
+    top:21%;
     left: 84%;
     position: absolute;
     background: #ffffff;
@@ -570,6 +633,7 @@ span.button_text{
     padding: 18px;
     border: #000000 solid 1px;
     z-index:50;
+    cursor:pointer;
 }
 .ned_bubble2:after {
     content: '';