village

tree/canteen.css

@@ -54,14 +54,17 @@
     height: 100%;
     position:fixed;
     z-index: -10;
-
-
  }
 
  .instructions{
     font-family:jolyregularitalic;
 
  }
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
 
 
 
@@ -226,7 +229,7 @@ div.figure5 {
 
     .ned_bubble1 {
         left: 23%;
-        bottom: 41%;
+        bottom: 43%;
         position: absolute;
         background: #ffffff;
         color: #000000;

tree/canteen.html

@@ -63,19 +63,19 @@
     <div class="text_container"> 
         <div class="message1">
             You are now in the school canteen. The staff is there as well: your plan might be getting complicated. <br>
-            <span class="instructions">Click on the corn cobs on the table to take them with you.</span>
+            <span class="instructions"><span class="instructions_arrow">→</span> Click on the corn cobs on the table to take them with you.</span>
             </div>
         <div class="message2  invert" style="display: none;" >
             Oh jeez! The school's cooking staff turned into what appears to be a devil-worshippers gang!<br>
             You still have fluoride with you though: use it to fight them back!<br>
-            <span class="instructions">Click on the school's staff to neutralize them with the poisonous chemical.</span>
+            <span class="instructions"><span class="instructions_arrow">→</span> Click on the school's staff to neutralize them with the poisonous chemical.</span>
             </div>
         <div class="message3 " style="display: none;">
             You managed to neutralize the enemy! Sadly, Ned was hit during the fight.
             </div>
         <div class="message4 " style="display: none;">
-            <button onclick="location.href='square_satanism.html';"><span class="button_text">Go to the village square</span></button> to inform the citizens of your discovery: you need to rescue the children from the trip. 
+            Ned passed ( ͡❛ ︹ ͡❛) , but you can still save the children. <button onclick="location.href='square_satanism.html';"><span class="button_text">Go to the village square</span></button> to inform the citizens of your discovery: you need to rescue the children from the trip. 
-            If you are still in doubt, follow Ned's advice and <button onclick="location.href='pleiadians_satanism.html';"><span class="button_text">look for the chemtrails</span></button> . 
+           If you are still in doubt, follow his advice and <button onclick="location.href='pleiadians_satanism.html';"><span class="button_text">look for the chemtrails</span></button> . 
             </div>
             
    </div>

tree/monteferro.css

@@ -41,11 +41,16 @@
 
  }
 
+
  .instructions{
-    font-family:jolyregularitalic
+    font-family:jolyregularitalic;
 
  }
-
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
 
 #ground {
     position: fixed;

tree/monteferro.html

@@ -28,7 +28,7 @@
     <div id="ground">
     
     <div  id="player_img"></div>
-    <img  id="ned" src="imgs/monteferro/ned2.gif" height="120px">
+    <img  id="ned" src="imgs/monteferro/ned2.gif" height="110px">
 
 
     <div class="field no_touch">
@@ -62,7 +62,7 @@
         Oh lord, it's horrible! What can you do to <button id="ned_more"><span class="button_text">stop this terrible abuse</span></button> ?  
       </div>
       <div class="message2 instructions" style="display: none;">
-        Click on the veggies to get the proofs you need: you must collect at least 5 poisoned corn cobs before the Monteferro's employees see you!
+      <span class="instructions_arrow">→</span> Click on the veggies to get the proofs you need: you must collect at least 5 poisoned corn cobs before the Monteferro's employees see you!
       <button id="start_button"><span class="button_text">Start now!</span></button>
       </div>
       <div class="message_won" style="display: none;">
@@ -256,17 +256,14 @@ var loose_counter = 0;
         $(".ned_baloon2,.ned_baloon1, .message1, .message2 ").hide();
         $(".message_won").show();
         $('.cobs_collected').html("5");
-        $(".field").addClass(".stop_touch");
-
-
     }
+
     if (loose_counter == 6) {
         console.log ("you lost!");
         fluoride_counter = 0;
         loose_counter = 0;
         $(".message_won").hide();
         $(".message_lost, .farmer").show();
-        $(".field").addClass(".stop_touch");
     }
   }
 
@@ -274,7 +271,6 @@ var loose_counter = 0;
         $(".corn").attr('src', "imgs/monteferro/corn.gif");
         $('.cobs_collected').html(fluoride_counter);
         $(".message_lost, .farmer").hide();
-        $(".field").removeClass(".stop_touch");
       });
 
 

tree/park.css

@@ -34,11 +34,16 @@
 
  }
 
+
  .instructions{
     font-family:jolyregularitalic;
 
  }
-
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
 
  ::-moz-selection { /* Code for Firefox */   
     background: transparent;

tree/park.html

@@ -140,7 +140,7 @@
       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> .
     </div>
     <div class="message5 instructions" style="display:none;">
-     Click on the kiosk to get the fries.
+    <span class="instructions_arrow">→</span> Click on the kiosk to get the fries.
     </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> . 

tree/park_N.html

@@ -33,11 +33,11 @@
       <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="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>
@@ -53,7 +53,7 @@
 
     <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 ←↑↓→ and click on the people to ask them if they saw the newspaper's owner.  
     </div>
     <div class="message2" style="display: none;">
       You found him! <button class="ned_more"><span class="button_text">Hear more from Ned</span></button> . 

tree/park_walk.css

@@ -38,6 +38,11 @@
     font-family:jolyregularitalic;
 
  }
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
 
 
 

tree/square_satanism.css

@@ -43,6 +43,14 @@
  }
 
  #ground {
+    width: 120%;
+    height: 120%;
+    position:fixed;
+    margin:-100px;
+    background-color: white;
+    z-index:-10;
+}
+.ground_line{
     position: fixed;
     top: 130px;
     bottom: 0px;
@@ -52,10 +60,22 @@
     z-index: -1;
 }
 
- .instructions{
+svg {
+    width: 100%;
+    height: 100%;
+    position:fixed;
+
+ }
+
+.instructions{
     font-family:jolyregularitalic;
 
  }
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
 
 div.text_container {
     bottom: 40px;
@@ -84,6 +104,15 @@ div.text_container {
     font-size: 1.4vw;
 
 }
+.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);
+
+}
 
 
 button{
@@ -115,7 +144,9 @@ span.button_text{
     position:absolute;
 }
 
-
+.invert_style{
+    filter: invert(100%);
+}
 
 /*figures*/
 
@@ -143,6 +174,7 @@ div.figure4 {
     left: 54%;
     position:absolute ;
     cursor:pointer;
+    z-index: 3;
 }
 
 div.figure5 {
@@ -180,6 +212,23 @@ div.figure9 {
     cursor:pointer;
 }
 
+/*thunders*/
+
+#thunder1{
+    top: -20px;;
+    left:-20px;
+    position: fixed;
+}
+
+#thunder2{
+    top:0%;
+    right:0%;
+    position: fixed;
+    z-index: -1;
+}
+
+
+
 /*baloon*/
 
 .bubble {

tree/square_satanism.html

@@ -9,23 +9,28 @@
     
 </head>
 <body>
-    <div id="ground"></div>
+    <div id="ground" class="invert"></div>
+    <div class="ground_line invert"></div>
+
+
+
 <!--houses-->
 <!--game bar-->
 
-<div class="game_bar" >
+<div class="game_bar invert" >
     villagers: <span class="fighters"></span> / 9
   </div>
-
+  <img  id="thunder1" src="imgs/square_s/thunder.gif" height="150px" style="display: none;">
+  <img  id="thunder2" src="imgs/square_s/thunder2.gif" height="200px" style="display: none;">
 
 <!--characters-->
 
         <div id="player_img" class="moving_duo"></div>
-        <div class="bubble moving_duo">!!!</div>
+        <div class="bubble moving_duo" style="display: none;">!!!</div>
   
 
     <div class="figure1 figures">
-        <img  id="person1" class="people" src="imgs/square_s/person1.gif" height="120px">
+        <img  id="person1" class="people" src="imgs/square_s/person1.gif" height="110px">
         <img  id="fighter1" class="fighters" src="imgs/square_s/fighter1.gif" height="120px" style="display: none;">
     </div>
     <div class="figure2 figures">
@@ -36,29 +41,29 @@
         <img  id="person3" class="people" src="imgs/square_s/person3.gif" height="110px">
         <img  id="fighter3" class="fighters" src="imgs/square_s/fighter3.gif" height="120px" style="display: none;">
     </div>
-    <div class="figure4 figures">
+    <div class="figure4 figures to_flip">
         <img  id="person4" class="people" src="imgs/square_s/person4.gif" height="110px">
         <img  id="fighter4" class="fighters" src="imgs/square_s/fighter4.gif" height="120px" style="display: none;">
     </div>
-    <div class="figure5 figures">
+    <div class="figure5 figures to_flip">
     <img  id="person5" class="people" src="imgs/square_s/person5.gif" height="90px">
     <img  id="fighter5" class="fighters" src="imgs/square_s/fighter5.gif" height="110px" style="display: none;">
     </div>
     <div class="figure6 figures">
-        <img  id="person6" class="people" src="imgs/square_s/person6.gif" height="120px">
+        <img  id="person6" class="people" src="imgs/square_s/person6.gif" height="110px">
-        <img  id="fighter6" class="fighters" src="imgs/square_s/fighter6.gif" height="120px" style="display: none;">
+        <img  id="fighter6" class="fighters" src="imgs/square_s/fighter6.gif" height="160px" style="display: none;">
     </div>
-    <div class="figure7 figures">
+    <div class="figure7 figures to_flip">
-        <img  id="person7" class="people" src="imgs/square_s/person7.gif" height="120px">
+        <img  id="person7" class="people" src="imgs/square_s/person7.gif" height="110px">
-        <img  id="fighter7" class="fighters" src="imgs/square_s/fighter7.gif" height="140px" style="display: none;">
+        <img  id="fighter7" class="fighters" src="imgs/square_s/fighter7.gif" height="120px" style="display: none;">
     </div>
     <div class="figure8 figures">
-        <img  id="person8" class="people" src="imgs/square_s/person8.gif" height="120px">
+        <img  id="person8" class="people" src="imgs/square_s/person8.gif" height="110px">
-        <img  id="fighter8" class="fighters" src="imgs/square_s/fighter8.gif" height="180px" style="display: none;">
+        <img  id="fighter8" class="fighters" src="imgs/square_s/fighter8.gif" height="120px" style="display: none;">
     </div>
     <div class="figure9 figures">
-        <img  id="person9" class="people" src="imgs/square_s/person9.gif" height="100px">
+        <img  id="person9" class="people" src="imgs/square_s/person9.gif" height="110px">
-        <img  id="fighter9" class="fighters" src="imgs/square_s/fighter9.gif" height="180px" style="display: none;">
+        <img  id="fighter9" class="fighters" src="imgs/square_s/fighter9.gif" height="130px" style="display: none;">
     </div>
 
 
@@ -69,10 +74,10 @@
 
 
 <!--bottom text-->
-    <div class="text_container"> 
+    <div class="text_container invert"> 
         <div class="message1">
             You are in the village square. You must inform the villagers of what is going on in the school: the kids need to be rescued from the evil staff. <br>
-            <span class="instructions">Click on the villagers to share with them your findings!</span>
+            <span class="instructions"><span class="instructions_arrow">→</span> Click on the villagers to share with them your findings!</span>
             </div>
         <div class="message2" style="display: none;" >
             It looks like you managed to reclute an impressive army: <button onclick="location.href='river_bank.html';"><span class="button_text"> Guide them to the river bank</span></button> and raise anchor to Spring River.  
@@ -113,141 +118,173 @@
     var baloon = $(".bubble");
 
   $(".figure1").click (function(){
+        check_flipping();
         villagers ++; 
         $(".fighters").html(villagers);
-        avatar.css({ top: "15%", left: "34%" });
+        avatar.css({ top: "16%", left: "35%" });
-        baloon.css({ top: "5%", left: "38%" })
+        baloon.css({ top: "7%", left: "37%" })
         baloon.show();
         setTimeout ( function (){
             $("#person1").hide();
             $("#fighter1").show();
             baloon.hide();
-        }, 1000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure2").click (function(){
+        check_flipping();
         villagers ++; 
         $(".fighters").html(villagers);
-        avatar.css({ top: "12%", left: "57%" });
+        avatar.css({ top: "13%", left: "59%" });
-        baloon.css({ top: "3%", left: "61%" })
+        baloon.css({ top: "4%", left: "61%" })
         baloon.show();
         setTimeout ( function (){
             $("#person2").hide();
             $("#fighter2").show();
             baloon.hide();
-        }, 1000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure3").click (function(){
+        check_flipping();
         villagers ++; 
         $(".fighters").html(villagers);
-        duo.css ("zIndex", 5);
+        avatar.css({ top: "22%", left: "77%"});
-        avatar.css({ top: "26%", left: "84%"});
+        baloon.css({ top: "13%", left: "80%" })
-        baloon.css({ top: "15%", left: "88%" })
         baloon.show();
         setTimeout ( function (){
             $("#person3").hide();
             $("#fighter3").show();
             baloon.hide();
-        }, 1000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure4").click (function(){
+        if (avatar.hasClass("flipped") == false) {
+            avatar.addClass("flipped");
+        }
         villagers ++; 
         $(".fighters").html(villagers);
-        avatar.css({ top: "50%", left: "60%"});
+        avatar.css({ top: "50%", left: "62%"});
         baloon.css({ top: "41%", left: "64%" })
         baloon.show();
         setTimeout ( function (){
             $("#person4").hide();
             $("#fighter4").show();
             baloon.hide();
-        }, 1000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure5").click (function(){
+        if (avatar.hasClass("flipped") == false) {
+            avatar.addClass("flipped");
+        }
         villagers ++; 
         $(".fighters").html(villagers);
-        duo.css ("zIndex", 5);
+        duo.css ("zIndex", 0);
-        avatar.css({ top: "17%", left: "16%" });
+        avatar.addClass("flipped");
-        baloon.css({ top: "8%", left: "20%" });
+        avatar.css({ top: "14%", left: "17%" });
+        baloon.css({ top: "5%", left: "21%" });
         baloon.show();
         setTimeout ( function (){
             $("#person5").hide();
             $("#fighter5").show();
             baloon.hide();
-        }, 1000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure6").click (function(){
+        check_flipping();
         villagers ++; 
         $(".fighters").html(villagers);
-        duo.css({ top: "15%", left: "34%" });
+        duo.css ("zIndex", 1);
+        avatar.css({ top: "53%", left: "29%" });
+        baloon.css({ top: "43%", left: "31%" });
         baloon.show();
         setTimeout ( function (){
             $("#person6").hide();
             $("#fighter6").show();
             baloon.hide();
-        }, 2000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure7").click (function(){
+        if (avatar.hasClass("flipped") == false) {
+            avatar.addClass("flipped");
+        }
         villagers ++; 
         $(".fighters").html(villagers);
-        duo.css({ top: "15%", left: "34%" });
+        avatar.addClass("flipped");
+        avatar.css({ top: "33%", left: "26%" });
+        baloon.css({ top: "24%", left: "28%" });
         baloon.show();
         setTimeout ( function (){
             $("#person7").hide();
             $("#fighter7").show();
             baloon.hide();
-        }, 2000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure8").click (function(){
+        check_flipping();
         villagers ++; 
         $(".fighters").html(villagers);
-        duo.css({ top: "15%", left: "34%" });
+        duo.css ("zIndex", 1);
+        avatar.css({ top: "43%", left: "72%" });
+        baloon.css({ top: "35%", left: "75%" });
         baloon.show();
         setTimeout ( function (){
             $("#person8").hide();
             $("#fighter8").show();
             baloon.hide();
-        }, 2000); 
+        }, 600); 
         end_recluting();   
     });
 
     $(".figure9").click (function(){
+        check_flipping();
         villagers ++; 
         $(".fighters").html(villagers);
-        duo.css({ top: "15%", left: "34%" });
+        avatar.css({ top: "29%", left: "48%" });
+        baloon.css({ top: "19%", left: "51%" });
         baloon.show();
         setTimeout ( function (){
             $("#person9").hide();
             $("#fighter9").show();
             baloon.hide();
-        }, 2000); 
+        }, 600); 
         end_recluting();   
     });
 
 
-    function end_recluting(){
+    function end_recluting() { 
         if (villagers == 9) {
             $(".message1").hide();
             $(".message2").show();  
             setTimeout ( function (){
-            figures.detach();
+                $(".invert").addClass("invert_style");
-            avatar.css({ top: "55%", left: "8%" })
+                $("#thunder1, #thunder2 ").show();  
-        }, 1000);   
+                check_flipping();
+                avatar.css({ top: "55%", left: "8%" })
+            }, 1000);   
         }
-
     }
+    
+
+    function check_flipping() {
+        if (avatar.hasClass("flipped") == true) {
+            avatar.removeClass("flipped");
+        }
+
+    } 
+    
  
  </script>