master
*anna* 3 years ago
parent 11871f5033
commit d2633f898e

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

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

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

@ -78,15 +78,19 @@ div.text_container {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
font-family: sinistre; 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; background-color: white;
border: 0.11vw black solid; border: 0.11vw black solid;
border-radius: 25vw;
color:black; color:black;
font-size: 1.4vw; 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{ button{

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

@ -509,7 +509,56 @@ text-decoration: underline solid 3px;
display: block; 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;
}

@ -9,6 +9,13 @@
</head> </head>
<body class="park_body"> <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 --> <!--memory pop up -->
<div class="memory" style="display: none;"> <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. 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" ) { if (localStorage.final === "opened" ) {
$(".memory").show(); $(".memory").show();
$(".text_container").hide(); $(".text_container").hide();
$(".blur"). addClass("blur_background"); $(".blur, .blur_button ").addClass("blur_background");
$("#no_delete").click (function(){ $("#no_delete").click (function(){
$(".memory").hide(); $(".memory").hide();
$(".text_container").show(); $(".text_container").show();
$(".blur"). removeClass("blur_background"); $(".blur, .blur_button").removeClass("blur_background");
}); });
$("#delete").click (function(){ $("#delete").click (function(){
var avatar_image = localStorage.getItem('myavatar'); var avatar_image = localStorage.getItem('myavatar');
@ -190,7 +197,7 @@
localStorage.setItem('playerName',avatar_name); localStorage.setItem('playerName',avatar_name);
$(".memory").hide(); $(".memory").hide();
$(".text_container").show(); $(".text_container").show();
$(".blur"). removeClass("blur_background"); $(".blur, .blur_button").removeClass("blur_background");
window.localStorage.setItem("park","opened") window.localStorage.setItem("park","opened")
console.log ("park:",localStorage.park) console.log ("park:",localStorage.park)
document.querySelector('#player_name').innerHTML = localStorage.playerName; document.querySelector('#player_name').innerHTML = localStorage.playerName;
@ -282,10 +289,17 @@
$(".message5").show(); $(".message5").show();
},2000); },2000);
}); });
$(".bubble2").click (function (){ $(".bubble2").click (function (){
$(".bubble2").toggle(); $(".bubble2").toggle();
}); });
$("#info_button").click (function (){
$(".info_text").toggle();
$(".blur"). toggleClass("blur_background");
$(".text_container").toggle();
});
</script> </script>
<script type="text/javascript" src="index.js" ></script> <script type="text/javascript" src="index.js" ></script>

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

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

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

@ -26,8 +26,12 @@
<!--characters--> <!--characters-->
<div id="player_img" class="moving_duo"></div> <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"> <div class="figure1 figures">
<img id="person1" class="people" src="imgs/square_s/person1.gif" height="110px"> <img id="person1" class="people" src="imgs/square_s/person1.gif" height="110px">

Loading…
Cancel
Save