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

@ -110,7 +110,6 @@ div.message1{
border: 0.11vw black solid;
border-radius: 25vw;
color:black;
cursor:pointer;
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 {
width: 3600px;
/*width: 3600px;*/
width: 560vh;
height: 120%;
position:fixed;
margin:-100px;
@ -67,7 +68,8 @@ span.instructions_arrow{
#ground{
position:absolute;
height:100%;
width:3500px;
/*width:3500px;*/
width: 560vh;
}
#groundline {
@ -305,7 +307,7 @@ span.button_text{
z-index:-2;
}
.bubble1 {
right: 24%;
right: 23.5%;
bottom:54%;
position: absolute;
background: #ffffff;
@ -349,7 +351,7 @@ span.button_text{
}
.bubble2 {
right: 24%;
right: 23.5%;
bottom:54%;
position: absolute;
background: #ffffff;

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

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

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

@ -509,7 +509,56 @@ text-decoration: underline solid 3px;
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>
<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 -->
<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.
@ -174,11 +181,11 @@
if (localStorage.final === "opened" ) {
$(".memory").show();
$(".text_container").hide();
$(".blur"). addClass("blur_background");
$(".blur, .blur_button ").addClass("blur_background");
$("#no_delete").click (function(){
$(".memory").hide();
$(".text_container").show();
$(".blur"). removeClass("blur_background");
$(".blur, .blur_button").removeClass("blur_background");
});
$("#delete").click (function(){
var avatar_image = localStorage.getItem('myavatar');
@ -190,7 +197,7 @@
localStorage.setItem('playerName',avatar_name);
$(".memory").hide();
$(".text_container").show();
$(".blur"). removeClass("blur_background");
$(".blur, .blur_button").removeClass("blur_background");
window.localStorage.setItem("park","opened")
console.log ("park:",localStorage.park)
document.querySelector('#player_name').innerHTML = localStorage.playerName;
@ -282,10 +289,17 @@
$(".message5").show();
},2000);
});
$(".bubble2").click (function (){
$(".bubble2").toggle();
});
$("#info_button").click (function (){
$(".info_text").toggle();
$(".blur"). toggleClass("blur_background");
$(".text_container").toggle();
});
</script>
<script type="text/javascript" src="index.js" ></script>

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

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

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

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

Loading…
Cancel
Save