steak

tree/butchery.css

@@ -0,0 +1,430 @@
+
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-StCaroline.woff),
+    url(fonts/Sinistre-StCaroline.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);
+}
+  
+  ::-moz-selection { /* Code for Firefox */   
+    background: transparent;
+  }
+  ::selection {
+    background: transparent;
+  }
+
+body {
+     font-family: jolyregular;
+     font-size: 1.8vw;
+ }
+
+#ground{
+        width: 120%;
+        height: 120%;
+        position:fixed;
+        margin:-100px;
+        background-color: white;
+        z-index:-10;
+    }
+
+ svg {
+    width: 100%;
+    height: 100%;
+    position:fixed;
+    z-index: -10;
+    stroke:black;
+    stroke-width:1px;
+ }
+
+ .instructions{
+    font-family:jolyregularitalic;
+
+ }
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
+
+div.text_container {
+    bottom: 40px;
+    left:40px;
+    right:40px;
+    position:fixed;
+    margin: auto; 
+    line-height: 1.4em;   
+    z-index: 50;
+}
+
+
+.game_bar {
+    top:40px;
+    right:80px;
+    position:fixed;
+    border-radius: 25vw;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-family: sinistre;
+    background-color: white;
+    border: 0.11vw black solid;
+    border-radius: 25vw;
+    color:black;
+    cursor:pointer;
+    font-size: 1.4vw;
+}
+.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 ;   
+}
+.win{
+    animation-name: cats;
+    animation-duration: 0.2s;   
+}
+
+@keyframes cats {
+    0%  {top: 80px;}
+    25% {top: 82px;}
+    50%  {top: 80px;}
+    75% {top: 82px;}
+    100%  {top: 80px;}
+}
+
+button{
+    -webkit-appearance: none;
+    background-color: white;
+    border: 0.11vw black solid;
+    border-radius: 25vw;
+    color:black;
+    cursor:pointer;
+    font-family: jolybolditalic;
+}
+
+@keyframes touch {
+    0%  {transform: rotate(0deg);}
+    50% {transform: rotate(-10deg);}
+    100%  {transform: rotate(0deg);}
+    }
+    
+.touch_animation{
+    animation-name: touch;
+    animation-duration: 0.2s;   
+}
+
+button:hover{
+    border: 0.11vw transparent solid;
+    -webkit-box-shadow: 0px 0px 8px 2px  black;
+    -moz-box-shadow: 0px 0px 8px 2px  black;
+    box-shadow: 0px 0px 8px 2px  black;   
+}
+
+span.button_text{
+    font-size: 1.6vw;
+    padding: 8px;
+}
+
+#cover{
+    height: 100%;
+    width:100%;
+    top:0px;
+    left: 0px;
+    position:absolute;
+    /*background-color: aqua;*/
+    z-index: 40;
+}
+
+#pat {
+    bottom: 25%;
+    left: 20%;
+    position:absolute;
+    z-index: 50;
+}
+
+#pat_flame {
+    bottom: 25%;
+    left: 22%;
+    position:absolute ;
+    z-index: 51;
+}
+
+
+#butcher {
+    bottom: 24%;
+    right: 8%;
+    position:absolute ;
+    z-index: 50;
+}
+
+#knife{
+    bottom: 30%;
+    right: 12%;
+    position:absolute ;
+}
+
+#player_img{
+    bottom: 24%;
+    left: 13%;
+    position:absolute;  
+    z-index: 50; 
+}
+
+.invert_style{
+    filter: invert(100%);
+}
+
+/*tables*/
+
+#thunder{
+    top:0%;
+    left:28%;
+    position:absolute;
+    height: 130px;
+}
+
+.plant1{
+    top:13%;
+    left:20%;
+    position:absolute;
+}
+.plant2{
+    top:13%;
+    left:50%;
+    position:absolute;
+}
+.plant3{
+    top:40%;
+    right:10%;
+    position:absolute;
+}
+
+#table1{
+    top:20%;
+    left:10%;
+    position:absolute;
+}
+#table2{
+    top:20%;
+    left:25%;
+    position:absolute;
+}
+#table3{
+    top:20%;
+    left:40%;
+    position:absolute;
+}
+#table4{
+    top:20%;
+    left:55%;
+    position:absolute;
+}
+#table5{
+    top:20%;
+    left:70%;
+    position:absolute;
+}
+#table6{
+    top:40%;
+    left:10%;
+    position:absolute;
+}
+#table7{
+    top:40%;
+    left:25%;
+    position:absolute;
+}
+#table8{
+    top:40%;
+    left:40%;
+    position:absolute;
+}
+#table9{
+    top:40%;
+    left:55%;
+    position:absolute;
+}
+#table10{
+    top:40%;
+    left:70%;
+    position:absolute;
+}
+#table11{
+    top:60%;
+    left:40%;
+    position:absolute;
+}
+#table12{
+    top:60%;
+    left:55%;
+    position:absolute;
+}
+
+/* baloons*/
+.bubble1 {
+    left: 20%;
+    bottom: 46%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 200px;
+    height: 105px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index:50;
+    cursor: pointer;
+}
+.bubble1:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-width: 20px 20px 0 0;
+    border-color: #ffffff transparent transparent transparent;
+    bottom: -20px;
+    left: 19%;
+    margin-left: -10px;
+}
+.bubble1:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-width: 21px 21px 0 0;
+    border-color: #000000 transparent transparent transparent;
+    bottom: -22px;
+    left: 19%;
+    margin-left: -11px;
+    display: block;
+}
+.bubble2 {
+    left: 20%;
+    bottom: 43%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 200px;
+    height: 105px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index:50;
+}
+.bubble2:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-width: 20px 20px 0 0;
+    border-color: #ffffff transparent transparent transparent;
+    bottom: -20px;
+    left: 19%;
+    margin-left: -10px;
+}
+.bubble2:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-width: 21px 21px 0 0;
+    border-color: #000000 transparent transparent transparent;
+    bottom: -22px;
+    left: 19%;
+    margin-left: -11px;
+    display: block;
+}
+.bubble3 {
+    left: 33%;
+    bottom: 28%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 200px;
+    height: 50px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+}
+.bubble3:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-color: transparent #ffffff;
+    border-width: 10px 20px 10px 0;
+    top: 39%;
+    left: -20px;
+    margin-top: -10px;
+}
+.bubble3:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-color: transparent #000000;
+    border-width: 11px 21px 11px 0;
+    top: 39%;
+    left: -21.5px;
+    margin-top: -11px;
+    display: block;
+}
+
+
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: white; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: white; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: white; 
+  }

tree/butchery.html

@@ -0,0 +1,284 @@
+<!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>butcher shop</title>
+    <link rel="icon" href="imgs/butchery/meat.png">
+    <link rel="stylesheet" href="butchery.css">
+    
+</head>
+<body>
+    <div id="cover"></div>
+    <div id="ground"class="invert"></div>
+    <svg class="invert">
+        <line x1="10" y1="130" x2="78%" y2="130"/>
+        <line x1="78%" y1="0" x2="78%" y2="130"/>
+        <line x1="78%" y1="130" x2="150%" y2="100%"/>
+    </svg>
+
+<!--characters-->
+
+<img  class ="moving_duo" id="butcher" src="imgs/butchery/butcher1.gif" height="160px" style="display: none;">
+<img  class ="moving_duo" id="knife" src="imgs/butchery/knife3.png" height="40px" style="display: none;">
+
+<div  id="player_img"></div>
+
+<img  id="pat" src="imgs/butchery/parrot.gif" height="110px">
+<img  id="pat_flame" src="imgs/canteen/fire_ned.gif" height="120px" style="display: none;">
+<img  id="thunder" src="imgs/butchery/thunder.gif"  style="display: none;">
+
+
+<div class="plant1">
+    <img  id="plant1" class="good" src="imgs/butchery/plant3.gif" height="90px">
+</div>
+<div class="plant2">
+    <img  id="plant2" class="good" src="imgs/butchery/plant3.gif" height="90px">
+</div>
+<div class="plant3">
+    <img  id="plant3" class="good" src="imgs/butchery/plant3.gif" height="90px">
+</div>
+
+ <img id="table1" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table2" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table3" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table4" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table5" class="tables"src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table6" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table7" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table8" class="tables"src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table9" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table10" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table11" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+ <img id="table12" class="tables" src="imgs/butchery/meat1.gif" height="120px">
+
+
+<!--baloons-->
+        <div class="bubble1" >I believe the butcher is also one of the saurians settlers: 
+            I suspect that some of the meat stored here is actually cat's meat. 
+            Help me to check out these steaks!</div>
+        <div class="bubble2 invert" style="display: none;">I think this is the end for me. You need to tell people what we found out! I believe the saurians' headquarter lies below the bus station. Go there and save the survivors! </div>
+        <div class="bubble3 invert" style="display: none;">Follow the chemtrails whenever you'll find yourself in doubt. </div>
+
+
+<!--bottom text-->
+    <div class="text_container invert"> 
+        <div class="message1">
+            You are now in the butcher shop's storage room.<br>
+        </div>
+        <div class="message2 " style="display: none;" >
+            You are now in the butcher shop's storage room.<br>
+            <span class="instructions"><span class="instructions_arrow">→</span> Click on the meat to check it out before the butcher finds you. 
+            You should be able to collect four cat steaks. </span>
+        </div>
+        <div class="message_won" style="display: none;">
+            You managed to collect the cat meat! Sadly, Pat was hit by the saurian butcher.
+        </div>
+        <div class="message_lost" style="display: none;">
+            On no! You got busted by the saurian butcher! You should <button id="try_again"><span class="button_text">try again</span></button> .
+        </div>
+        <div class="message_final" style="display: none;">
+            Pat passed ( ͡❛ ︹ ͡❛), now you are the only one who can save Amanda and the kittens. 
+            <button onclick="location.href='square_saurians.html';"><span class="button_text">Go to the village square</span></button> to inform the citizens of your discovery. If you are still in doubt, follow Pat's advice and <button onclick="location.href='pleiadians_saurians.html';"><span class="button_text">follow the chemtrails</span></button> .          
+        </div>
+            
+   </div>
+
+<!--game bar-->
+  <div class="game_bar invert" style="display: none;">
+    cat steaks: <span class="cat_meat_bar"></span> / 4 
+  </div>
+
+
+<script src="jquery.min.js"></script>
+  <script>
+
+
+
+// saves game step in the local storage 
+  window.onload = function() {
+      window.localStorage.setItem("butchery","opened");
+      console.log ("butcher store:",localStorage.butchery);
+      $('.cat_meat_bar').html(cat_meat);
+    }
+
+  //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);
+    
+    //change characters + invert
+
+    $(".bubble1").click (function(){
+      $(".bubble1").toggle();
+      $(".message1").hide();
+      $(".message2, .game_bar").show();
+      setTimeout( function() {
+        $("#cover").css('z-index',-5); 
+      }, 2000);
+    });
+
+    //fight
+    var cat_meat = 0;
+    var error = 0;
+
+    var duo = $(".moving_duo");
+    var avatar = $("#player_img");
+    var weapon = $("#pill");
+
+    $("#table1").click (function(){
+        $("#table1").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });
+
+    $("#table2").click (function(){
+        $("#table2").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });
+
+  $("#table3").click (function(){
+        $("#table3").attr("src", "imgs/butchery/cat.gif");
+        cat_meat ++; 
+        console.log("cat meat:", cat_meat);
+        $('.cat_meat_bar').html(cat_meat);
+        check_end_game ();
+    });
+
+    $("#table4").click (function(){
+        $("#table4").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });    
+    
+    $("#table5").click (function(){
+        $("#table5").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });
+
+    $("#table6").click (function(){
+        $("#table6").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });
+
+    $("#table7").click (function(){
+        $("#table7").attr("src", "imgs/butchery/cat.gif");
+        cat_meat ++; 
+        console.log("cat meat:", cat_meat);
+        $('.cat_meat_bar').html(cat_meat);
+        check_end_game ();
+    });
+
+    $("#table8").click (function(){
+        $("#table8").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });
+
+    $("#table9").click (function(){
+        $("#table9").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });
+
+    $("#table10").click (function(){
+        $("#table10").attr("src", "imgs/butchery/cat.gif");
+        cat_meat ++; 
+        console.log("cat meat:", cat_meat);
+        $('.cat_meat_bar').html(cat_meat);
+        check_end_game ();
+    });
+
+    $("#table11").click (function(){
+        $("#table11").attr("src", "imgs/butchery/cat.gif");
+        cat_meat ++; 
+        console.log("cat meat:", cat_meat);
+        $('.cat_meat_bar').html(cat_meat);
+        check_end_game ();
+    });
+
+    $("#table12").click (function(){
+        $("#table12").addClass("touch_animation");
+        error ++; 
+        console.log("errors:", error);
+        check_end_game ();
+    });
+
+
+    function check_end_game () {
+        if (cat_meat == 4) {
+        $("#cover").css("z-index",40);
+        console.log ("you won!");        
+        $(".message2").hide();
+        $(".game_bar").addClass("game_bar_glow");
+        setTimeout( function (){
+            $(".invert").addClass("invert_style");
+            $("#butcher").show();
+            setTimeout( function (){
+                $("#knife").show();
+                $("#knife").animate({left:'20%'}, {
+                duration : 500
+                }).promise().done(function(){
+                    $("#knife").hide();
+                    $("#pat").attr("src", "imgs/butchery/parrot_r.gif");
+                    $("#pat").height(85);
+                    $(".message_won").show();
+                    setTimeout( function (){
+                        $(".bubble2").show();
+                        $("#butcher").hide();
+                        $(".invert").removeClass("invert_style");
+                        setTimeout( function (){
+                            $(".bubble3").show();
+                            setTimeout( function (){
+                                $("#pat").attr("src", "imgs/butchery/parrot_d.png");  
+                                $(".message_won").hide();
+                                $(".message_final").show();
+                            }, 2000)
+                        }, 3000)
+                    }, 6000)
+                });
+            }, 300);
+        }, 1000);
+        };
+
+        if (error == 3) {
+            setTimeout (function() { 
+                $("#cover").css("z-index",40);
+                console.log ("you lost!");
+                $(".message_won, .message2").hide();
+                $(".invert").addClass("invert_style");
+                $("#butcher, #thunder").show();
+                setTimeout( function (){
+                    $(".message_lost").show();
+                }, 1000);
+            }, 600);
+        };
+    };
+
+   $("#try_again").click( function (){
+       cat_meat=0;
+       error=0;
+       $('.cat_meat_bar').html(cat_meat);
+       $(".message_lost, #butcher, #thunder").hide();
+       $(".message2").show();
+       $("#cover").css("z-index",-5);
+       $(".invert").removeClass("invert_style");
+       $(".tables").attr("src", "imgs/butchery/meat1.gif");
+   });
+
+ </script>
+
+    
+</body>

tree/major_house.html

@@ -77,7 +77,7 @@
 </div>
 <div class="bubble2 to_invert" style="display: none;">
     They are harvesting the cats to be ready for the arrival of other groups of invaders. 
-    Follow me to the butchery, I can show you the proof of what I'm saying. 
+    Follow me to the butcher shop, I can show you the proof of what I'm saying. 
 </div>
 
 <button class="glasses_bar" style="display: none;"> ✜ magnifying glass </button>
@@ -91,7 +91,7 @@
     </div>
     <div class="message3" style="display: none;">
  Pat was right from the beginning! I hope Amanda did not get hurt: she can be anywhere by now. <br>
- It seems there is no option but to <button onclick="location.href='butchery.html';"><span class="button_text">go to the butchery</span></button> . 
+ It seems there is no option but to <button onclick="location.href='butchery.html';"><span class="button_text">go to the butcher shop</span></button> . 
     </div>
 </div>