hei

tree/canteen.css

@@ -110,7 +110,6 @@ div.message1{
     border: 0.11vw black solid;
     border-radius: 25vw;
     color:black;
-    cursor:pointer;
     font-size: 1.4vw;
 
 }

tree/major_house.css

@@ -56,7 +56,8 @@ span.instructions_arrow{
   }
 
 #ground_color {
-    width: 3600px;
+    /*width: 3600px;*/
+    width: 560vh;
     height: 120%;
     position:fixed;
     margin:-100px;
@@ -67,7 +68,8 @@ span.instructions_arrow{
 #ground{
     position:absolute;
     height:100%;
-    width:3500px;  
+    /*width:3500px;*/
+    width: 560vh;
 }
 
 #groundline {
@@ -305,7 +307,7 @@ span.button_text{
     z-index:-2;
 }
 .bubble1 {
-    right: 24%;
+    right: 23.5%;
     bottom:54%;
     position: absolute;
     background: #ffffff;
@@ -349,7 +351,7 @@ span.button_text{
 }
 
 .bubble2 {
-    right: 24%;
+    right: 23.5%;
     bottom:54%;
     position: absolute;
     background: #ffffff;

tree/major_house.html

@@ -116,7 +116,7 @@
 //adjust camera scroll
 var $div = $('.duo');
     var screenLeftMin = 50;
-    var screenLeftMax = 170;
+    var screenLeftMax = 500;
       
   function adjustScroll() {
       var playerLeft = parseInt($div.css("left"));
@@ -138,7 +138,13 @@ var $div = $('.duo');
 $(document).keydown(function(e) {
      var offset = $div.position();
     console.log("offset:", offset);   
+    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 < 72) {
      switch (e.which) {
         case 37:
             offset.left -= 20;
@@ -151,13 +157,29 @@ $(document).keydown(function(e) {
              console.log("right");
              $div.removeClass("flipped");
               break;
+        }
+    }
 
+    else {
+        console.log("70 ora")
+        $(document).scrollLeft(8000);
+        $(".message1").hide();
+        $(".message2").show();
+        setTimeout( function() {
+                $('.bubble1').show();
+                setTimeout( function() {
+                    $('.glasses_bar').show();
+                    $('.glasses_bar').addClass("glass_appear");
+                }, 3000);
+            }, 2000);
     }
+
+     
 //check the offset and prevent the character from exceeding screen dimension 
     if (offset.left < 80) {
         offset.left = 80;
     }
-
+/*
     if (offset.left >  $("#ground").width() - 1000) {
         offset.left = $("#ground").width() - 1000;
         $(document).scrollLeft(3500);
@@ -170,7 +192,7 @@ $(document).keydown(function(e) {
                     $('.glasses_bar').addClass("glass_appear");
                 }, 3000);
             }, 2000);
-    }
+    }*/
 
 
     $div.css("left", offset.left);
@@ -201,7 +223,4 @@ $(document).keydown(function(e) {
   
  </script>
     
-<script type="text/javascript" src="index.js" ></script>
-
-    
 </body>

tree/monteferro.css

@@ -78,15 +78,19 @@ div.text_container {
     padding-left: 10px;
     padding-right: 10px;
     font-family: sinistre;
-    /*-webkit-box-shadow: 0px 0px 8px 8px  #ccb3ff;
-    -moz-box-shadow: 0px 0px 8px 8px  #ccb3ff;
-    box-shadow: 0px 0px 8px 8px  #ccb3ff;
-    font-size: 1.6vw;*/
     background-color: white;
     border: 0.11vw black solid;
-    border-radius: 25vw;
     color:black;
     font-size: 1.4vw;
+    line-height: normal ;
+}
+
+.game_bar_glow{
+    border: 0.11vw transparent solid;
+    background-color: transparent;
+    -webkit-box-shadow: 0px 0px 8px 1px  black ;
+    -moz-box-shadow: 0px 0px 8px 1px  black ;
+    box-shadow: 0px 0px 8px 1px  black ;   
 }
 
 button{

tree/monteferro.html

@@ -270,6 +270,7 @@ var loose_counter = 0;
 
   function check_counters() {
     if (fluoride_counter == 5) {
+        $(".game_bar").addClass("game_bar_glow");
         $(".field_cover").css("z-index",10);
         console.log ("you won!");
         fluoride_counter = 0;

tree/park.css

@@ -509,7 +509,56 @@ text-decoration: underline solid 3px;
     display: block;
 }
         
-
+#info_button{
+    font-size: 3vw;
+    position:absolute;
+    left: 30px;
+    top:30px;
+    color: #c94dff ;
+    cursor: pointer;
+}
+.info_text{
+    position: fixed;
+    color:#c94dff ;
+    font-family: jolyregular;
+    background-color: white;
+    top:7%;
+    right:4%;
+    border:1px #c94dff solid;
+    font-size: 22px;
+    /*line-height: 30px;*/
+    width: 600px;
+    height: 160px;
+    border-radius: 10px;
+    padding: 20px;
+    z-index: 100;
+}
+.info_text:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-color: #ffffff transparent;
+    border-width: 0 20px 20px;
+    top: -20px;
+    left: 80%;
+    margin-left: -20px;
+}
+.info_text:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-color: #c94dff transparent;
+    border-width: 0 21px 21px;
+    top: -21.5px;
+    left: 80%;
+    margin-left: -21px;
+    display: block;
+}
 
 
 

tree/park.html

@@ -9,6 +9,13 @@
     
 </head>
 <body class="park_body">
+  <span id="info_button" class="blur_button" >ⓘ</span>
+  <div class="info_text" style="display: none;">
+    → Click on the objects to interact with them; <br>
+    → Click on the characters to talk to them;<br>
+    → If the baloon ends with ✜ you can click on it to hear more from the characters;<br>
+    → In some places it will be possible to move your avatar using the arrow keys. 
+  </div>
 <!--memory pop up -->
 <div class="memory" style="display: none;">
   hello <span id="player_name"> </span>, it seems you have already been here. You can come back how many times you want but you should be aware that the oracle tends to remember everything you did in the past. <br> You can <button id="no_delete" class="button_memory">carry on anyways</button> or you can <button id="delete" class="button_memory">clean your history</button> in case you are looking for a fresh start. 
@@ -174,11 +181,11 @@
       if (localStorage.final === "opened" ) {
         $(".memory").show();
         $(".text_container").hide();
-        $(".blur"). addClass("blur_background");
+        $(".blur, .blur_button ").addClass("blur_background");
         $("#no_delete").click (function(){
           $(".memory").hide();
           $(".text_container").show();
-          $(".blur"). removeClass("blur_background");
+          $(".blur, .blur_button").removeClass("blur_background");
         });
         $("#delete").click (function(){
           var avatar_image = localStorage.getItem('myavatar');
@@ -190,7 +197,7 @@
           localStorage.setItem('playerName',avatar_name);
           $(".memory").hide();
           $(".text_container").show();
-          $(".blur"). removeClass("blur_background");
+          $(".blur, .blur_button").removeClass("blur_background");
           window.localStorage.setItem("park","opened")
           console.log ("park:",localStorage.park)
           document.querySelector('#player_name').innerHTML = localStorage.playerName;
@@ -282,10 +289,17 @@
           $(".message5").show();
           },2000);
     });
+
     $(".bubble2").click (function (){
       $(".bubble2").toggle();
     });
 
+    $("#info_button").click (function (){
+      $(".info_text").toggle();
+      $(".blur"). toggleClass("blur_background");
+      $(".text_container").toggle();
+    });
+   
  </script>
     
 <script type="text/javascript" src="index.js" ></script>

tree/pleiadians_satanism.html

@@ -158,13 +158,13 @@ $(document).keydown(function(e) {
         offset.left = 80;
     }
 
-    if (offset.left >  $("#ground").width()  - 700) {
+    if (offset.left >  $("#ground").width()  - 900) {
         $(".message1").hide();
         $(".message2").show();
     }
 
-    if (offset.left >  $("#ground").width()  - 80) {
+    if (offset.left >  $("#ground").width()  - 100) {
-        offset.left = $("#ground").width() - 80;
+        offset.left = $("#ground").width() - 100;
     }
 
     $div.css("left", offset.left);

tree/spring_river.html

@@ -10,9 +10,9 @@
 </head>
 <body >
 
-    <div id="ground_color" class="invert scroll-pane stop_invert blur"></div>
+    <div id="ground_color" class="invert scroll-pane stop_invert"></div>
 
-    <div id="groundline" class="invert scroll-pane stop_invert blur "></div>
+    <div id="groundline" class="invert scroll-pane stop_invert blur"></div>
 
     <div class="army blur">
       <div  id="player_img"></div>
@@ -120,7 +120,6 @@ You need to put an end to this evil depravation now!
   window.onload = function() {
   window.localStorage.setItem("spring_river","opened");
   console.log ("spring river:",localStorage.spring_river);
-	$('.scroll-pane').jScrollPane();
     }
 
   //get player avatar from local storage
@@ -276,28 +275,24 @@ $(document).keydown(function(e) {
     $(".bubble1").hide();
     $(".bad").hide();
     $(".good").show();
-    /*$(".stop_invert").removeClass("invert");*/
+    $(".stop_invert").removeClass("invert");
-    /*$('html').css({overflow: 'hidden'});*/
+    //$('html').css({overflow: 'hidden'});
     setTimeout( function () {
       $(".bubble2").show();
       $(".message3").hide();
       $(".message4").show();
       setTimeout( function () {
         $(".blur").removeClass("blur_background");
-      }, 500);
+      }, 1500);
     }, 500);
   });
 
   $(".bubble2").click(function() {
     $(".bubble2").hide();
+    $("#cloud, #cloud2, #thunders,#amanda").hide();
   });
 
     
-
-    
  </script>
     
-<script type="text/javascript" src="index.js" ></script>
-
-    
 </body>

tree/square_satanism.css

@@ -249,8 +249,8 @@ div.figure9 {
     font-family: sinistre;
     font-size: 16px;
     text-align: center;
-    width: 40px;
+    width: 120px;
-    height: 18px;
+    height: 30px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;

tree/square_satanism.html

@@ -26,8 +26,12 @@
 <!--characters-->
 
         <div id="player_img" class="moving_duo"></div>
-        <div class="bubble moving_duo" style="display: none;">!!!</div>
+        <!--<div class="bubble moving_duo" style="display: none;">!!!</div>-->
-  
+        <div class="bubble moving_duo" style="display: none;">
+            <img  src="imgs/square_s/woman.png" height="30px"> 
+             <img  src="imgs/square_s/pill.png" height="30px"> 
+             <img  src="imgs/square_s/child.png" height="30px">
+        </div>
 
     <div class="figure1 figures">
         <img  id="person1" class="people" src="imgs/square_s/person1.gif" height="110px">