canteen

tree/canteen.css

@@ -0,0 +1,231 @@
+
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-S†Caroline.woff),
+    url(fonts/Sinistre-S†Caroline.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;
+
+ }
+ svg {
+    width: 100%;
+    height: 100%;
+    position:absolute;
+    z-index: -10;
+
+ }
+
+ .instructions{
+    font-family:jolyregularitalic;
+
+ }
+
+
+
+div.text_container {
+    bottom: 40px;
+    left:40px;
+    right:40px;
+    position:fixed;
+    margin: auto; 
+    line-height: 1.4em;   
+ 
+}
+.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;
+
+}
+
+button{
+    -webkit-appearance: none;
+    background-color: white;
+    border: 0.11vw black solid;
+    border-radius: 25vw;
+    color:black;
+    cursor:pointer;
+    font-family: jolybolditalic;
+}
+
+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;
+}
+
+#ned {
+    bottom: 25%;
+    left: 15%;
+    position:absolute ;
+    z-index: 1;
+}
+
+#player_img {
+    bottom: 24%;
+    left: 8%;
+    position:absolute ;
+    z-index: 0;
+}
+
+
+/* baloons*/
+
+.ned_baloon1 {
+    left: 5%;
+    bottom: 47%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 285px;
+    height: 135px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index:10;
+}
+.ned_baloon1:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-color: #ffffff transparent;
+    border-width: 20px 20px 0;
+    bottom: -20px;
+    left: 60%;
+    margin-left: -20px;
+}
+.ned_baloon1:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-color: #000000 transparent;
+    border-width: 21px 21px 0;
+    bottom: -21.5px;
+    left: 60%;
+    margin-left: -21px;
+    display: block;
+}
+.ned_baloon2 {
+    bottom:29%;
+    left: 28%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 285px;
+    height: 85px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 11;
+}
+.ned_baloon2:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-color: transparent #ffffff;
+    border-width: 20px 20px 20px 0;
+    top: 50%;
+    left: -20px;
+    margin-top: -20px;
+}
+.ned_baloon2:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-color: transparent #000000;
+    border-width: 21px 21px 21px 0;
+    top: 50%;
+    left: -21.5px;
+    margin-top: -21px;
+    display: block;
+}
+
+
+/* hide scroll bar */
+/* width */
+::-webkit-scrollbar {
+    color:white;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: white; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: white; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: white; 
+  }

tree/canteen.html

@@ -0,0 +1,83 @@
+<!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>looking for</title>
+    <link rel="icon" href="imgs/park/flower2.gif">
+    <link rel="stylesheet" href="canteen.css">
+    
+</head>
+<body>
+
+    <svg >
+        <line x1="10" y1="100" x2="80%" y2="100" style="stroke:black;stroke-width:1" />
+        <line x1="80%" y1="0" x2="80%" y2="100" style="stroke:black;stroke: width 1px;"/>
+        <line x1="80%" y1="100" x2="150%" y2="100%" style="stroke:black;stroke: width 1px;"/>
+    </svg>
+ 
+<!--characters-->
+
+        <div  id="player_img"></div>
+        <img  id="ned" src="imgs/park/ned2.gif" height="120px">
+
+
+
+
+<!--baloons-->
+        <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 then it seems. 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 of what I'm saying. </div>
+
+
+<!--bottom text-->
+    <div class="text_container"> 
+        <div class="message1">
+            You are now in the school canteen. Unluckily the staff is there as well. <br>
+            <span class="instructions">Click on the corn on the table to take it with you and confront it with what you found at Monteferro's field.</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>
+            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>
+        <div class="message3" style="display: none;">
+            You managed to neutralize the enemy! Sadly, Ned was hit during the fight.
+            <button onclick="location.href='square_satanism.html';"><span class="button_text">Go to the village square</span></button> to inform the children's parents of your discovery: you need to rescue them from the trip. 
+            If you are still in doubt, <button onclick="location.href='pleiadians_satanism.html';"><span class="button_text">look for the chemtrails</span></button> . 
+            </div>
+   </div>
+
+<!--game bar-->
+  <div class="game_bar" >
+    fluoride: <span class="cobs_collected"></span> / 5 
+  </div>
+
+
+<script src="jquery.min.js"></script>
+  <script>
+
+// saves game step in the local storage 
+  window.onload = function() {
+      window.localStorage.setItem("school_canteen","opened");
+      console.log ("school canteen:",localStorage.school_canteen);
+      $('.cobs_collected').html("0");
+    }
+
+  //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);
+    
+    //get player name from local storage
+
+
+
+ </script>
+
+<script type="text/javascript" src="index.js" ></script>
+
+    
+</body>

tree/monteferro.css

@@ -114,7 +114,7 @@ span.button_text{
 
 #ned {
     bottom: 26%;
-    left: 13%;
+    left: 15%;
     position:absolute ;
     z-index: 1;
 }
@@ -278,8 +278,8 @@ img.corn{
     display: block;
 }
 .ned_baloon2 {
-    bottom:23%;
+    bottom:29%;
-    left:26%;
+    left: 28%;
     position: absolute;
     background: #ffffff;
     color: #000000;

tree/park.css

@@ -324,7 +324,7 @@ span.button_text{
 }
 
 .bubble1 {
-    bottom: 74%;
+    bottom: 76%;
     left: 46%;
     position: absolute;
     background: #ffffff;
@@ -368,8 +368,8 @@ span.button_text{
 }
 
 .bubble2 {
-    bottom: 75%;
+    bottom: 73%;
-    left: 68%;
+    left: 70%;
     position: absolute;
     background: #ffffff;
     color: #000000;
@@ -378,7 +378,7 @@ span.button_text{
     line-height: 17px;
     text-align: center;
     width: 160px;
-    height: 85px;
+    height: 100px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;

tree/park_walk.css

@@ -216,7 +216,7 @@ span.button_text{
     bottom: 50%;
     left: 55%;
     position: absolute;
-    z-index:2;
+    z-index:1;
 }
 
 #flower8{