ciao

4 years ago · 9dcea187db
parent d7b2ae60a9
commit 9dcea187db
10 changed files with 75 additions and 27 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/tree/canteen.css
+++ b/tree/canteen.css
@ -38,8 +38,17 @@
 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%;
@ -119,14 +128,29 @@ span.button_text{
    z-index: 0;
 }

+#pill{
+    bottom: 30%;
+    left: 8%;
+    position:absolute ;
+}
+
 /*school staff*/

 #table {
    bottom: 50%;
    left: 45%;
    position:absolute ;
+    cursor: pointer;
 }

+#column {
+    bottom: 50%;
+    left: 47%;
+    position:absolute ;
+}
+
+
+
 div.figure1 {
    top: 20%;
    left: 30%;
@ -146,19 +170,21 @@ div.figure3 {
 }

 div.figure4 {
-    bottom: 35%;
-    left: 50%;
+    bottom: 25%;
+    left: 54%;
    position:absolute ;
 }

 div.figure5 {
-    bottom: 25%;
-    right: 25%;
+    bottom: 40%;
+    right: 24%;
    position:absolute ;
 }


-
+.invert_style{
+    filter: invert(100%);
+}



--- a/tree/canteen.html
+++ b/tree/canteen.html
@ -4,13 +4,14 @@
      <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>canteen</title>
-    <link rel="icon" href="imgs/park/flower2.gif">
+    <link rel="icon" href="imgs/canteen/kitchen1.gif">
    <link rel="stylesheet" href="canteen.css">
    
 </head>
-<body>
+<body >
+    <div id="ground"class="invert"></div>

-    <svg >
+    <svg class="invert">
        <line x1="10" y1="130" x2="80%" y2="130" style="stroke:black;stroke-width:1" />
        <line x1="80%" y1="0" x2="80%" y2="130" style="stroke:black;stroke: width 1px;"/>
        <line x1="80%" y1="130" x2="150%" y2="100%" style="stroke:black;stroke: width 1px;"/>
@ -18,29 +19,34 @@
 
 <!--characters-->

-        <div  id="player_img"></div>
+            <div  id="player_img"></div>
+            <img  id="pill" src="imgs/canteen/pill.png" height="30px" style="display: none;">
+
+
        <img  id="ned" src="imgs/canteen/ned1.gif" height="120px">

        <img  id="table" src="imgs/canteen/table1.gif" height="110px">
+        <img  id="column" src="imgs/canteen/fire_5.gif" height="130px" style="display: none;">
+
    <div class="figure1">
-        <img  id="cooking1" src="imgs/canteen/woman_cooking_1.gif" height="110px">
-        <img  id="satan1" src="imgs/canteen/woman_rites_1.gif" height="110px" style="display: none;">
+        <img  id="cooking1" class="cooking" src="imgs/canteen/woman_cooking_1.gif" height="110px">
+        <img  id="satan1" class="satan" src="imgs/canteen/woman_rites_1.gif" height="130px" style="display: none;">
    </div>
    <div class="figure2">
-        <img  id="cooking2" src="imgs/canteen/woman_cooking_2.gif" height="120px">
-        <img  id="satan2" src="imgs/canteen/woman_rites_2.gif" height="130px" style="display: none;">
+        <img  id="cooking2" class="cooking" src="imgs/canteen/woman_cooking_2.gif" height="120px">
+        <img  id="satan2" class="satan" src="imgs/canteen/devil_rites_4.gif" height="140px" style="display: none;">
    </div>
    <div class="figure3">
-        <img  id="cooking3" src="imgs/canteen/woman_cooking_3.gif" height="120px">
-        <img  id="satan3" src="imgs/canteen/woman_rites_3.gif" height="110px" style="display: none;">
+        <img  id="cooking3" class="cooking" src="imgs/canteen/woman_cooking_3.gif" height="120px">
+        <img  id="satan3" class="satan" src="imgs/canteen/woman_rites_3.gif" height="180px" style="display: none;">
    </div>
    <div class="figure4">
-        <img  id="cooking4" src="imgs/canteen/woman_cooking_4.gif" height="140px">
-        <img  id="satan4" src="imgs/canteen/woman_rites_4.gif" height="110px" style="display: none;">
+        <img  id="cooking4" class="cooking" src="imgs/canteen/woman_cooking_4.gif" height="140px">
+        <img  id="satan4" class="satan" src="imgs/canteen/woman_rites_2.gif" height="180px" style="display: none;">
    </div>
    <div class="figure5">
-    <img  id="cooking5" src="imgs/canteen/woman_cooking_5.gif" height="140px">
-    <img  id="satan4" src="imgs/canteen/woman_rites_4.gif" height="130px" style="display: none;">
+    <img  id="cooking5" class="cooking" src="imgs/canteen/woman_cooking_5.gif" height="140px">
+    <img  id="satan4" class="satan" src="imgs/canteen/woman_rites_5.gif" height="160px" style="display: none;">
    </div>


@ -57,10 +63,10 @@
    <div class="text_container"> 
        <div class="message1">
            You are now in the school canteen. The staff is there as well: the plan might get more complicated. <br>
-            <span class="instructions">Click on the corn on the table to take it with you.</span>
+            <span class="instructions">Click on the corn cobs on the table to take them with you.</span>
            </div>
-        <div class="message2" style="display: none;">
-            Oh jeez! The school cooking staff turned into what appears to be a devil-worshippers gang!<br>
+        <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>
            </div>
@ -72,7 +78,7 @@
   </div>

 <!--game bar-->
-  <div class="game_bar" >
+  <div class="game_bar invert" >
    fluoride: <span class="cobs_collected"></span> / 5 
  </div>

@ -85,7 +91,7 @@
  window.onload = function() {
      window.localStorage.setItem("school_canteen","opened");
      console.log ("school canteen:",localStorage.school_canteen);
-      $('.cobs_collected').html("0");
+      $('.cobs_collected').html(fluoride);

    }

@ -96,8 +102,24 @@
    var player_img = document.querySelector("#player_img");
    player_img.appendChild(img);
    
-    //get player name from local storage
-
+    //change characters + invert
+
+    $("#table").click (function(){
+      $(".cooking, #table, .message1 ").hide();
+      $(".satan, #column, .message2").show();
+      $(".invert").addClass("invert_style");
+    });
+
+    //fight
+    var avatar = $("#player_img");
+    var weapon = $("#pill");
+
+        $(".figure1").click (function(){
+        avatar.animate({top:'16%'}, "slow");
+        weapon.animate({top:'16%'}, "slow");
+        weapon.show();
+        fluoride -- ;
+        });


 </script>
--- a/tree/imgs/canteen/devil_rites_4.gif
+++ b/tree/imgs/canteen/devil_rites_4.gif
--- a/tree/imgs/canteen/fire_2.gif
+++ b/tree/imgs/canteen/fire_2.gif
--- a/tree/imgs/canteen/fire_5.gif
+++ b/tree/imgs/canteen/fire_5.gif
--- a/tree/imgs/canteen/pill.gif
+++ b/tree/imgs/canteen/pill.gif
--- a/tree/imgs/canteen/pill.png
+++ b/tree/imgs/canteen/pill.png
--- a/tree/imgs/canteen/woman_rites_1.gif
+++ b/tree/imgs/canteen/woman_rites_1.gif
--- a/tree/imgs/canteen/woman_rites_5
+++ b/tree/imgs/canteen/woman_rites_5