Add dialog box and intro of history
This commit is contained in:
parent
260743501a
commit
f023c34635
|
|
@ -65,6 +65,31 @@
|
|||
.startButton .expose {
|
||||
background-color: #3b75ad; }
|
||||
|
||||
.dialogs {
|
||||
width: 85%;
|
||||
border-radius: 10%;
|
||||
display: none;
|
||||
background-color: white;
|
||||
border: 1px solid #304559;
|
||||
padding: 2.3% 2% 0 2%;
|
||||
height: 15%;
|
||||
z-index: 1001;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
top: calc(100% - 18%);
|
||||
color: #304559;
|
||||
font-family: roboto;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.7rem; }
|
||||
|
||||
#dialogsNext {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 1002;
|
||||
float: right;
|
||||
font-size: 1rem;
|
||||
cursor: pointer; }
|
||||
|
||||
*, *:after, *:before {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,7 @@
|
|||
@import "includes/_fonts";
|
||||
@import "includes/_globalElements";
|
||||
@import "includes/_startMenu";
|
||||
@import "includes/_dialogs";
|
||||
// Z-INDEXs:
|
||||
// 100 - main
|
||||
// 200 - windows
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
.dialogs{
|
||||
width:85%;
|
||||
border-radius: 10%;
|
||||
display:none;
|
||||
background-color:white;
|
||||
border:1px solid #304559;
|
||||
padding: 2.3% 2% 0 2%;
|
||||
height:15%;
|
||||
z-index: 1001;
|
||||
position:relative;
|
||||
margin:auto;
|
||||
top: calc(100% - 18%);
|
||||
color:#304559;
|
||||
font-family: roboto;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
#dialogsNext{
|
||||
display:none;
|
||||
position:relative;
|
||||
z-index:1002;
|
||||
float: right;
|
||||
font-size: 1rem;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"prologue" : "Vous travaillez à la dryCorporation. Boulot, métro,dodo sont votre quotidien (avec quelques verres entre amis, bien entendu). Jusqu'au jour ou votre entreprise décide de changer votre matériel.",
|
||||
"prologueChangeComputer" : "Pour ne pas vous débousoller, l'équipe technique a préféré garder vos anciens programme qui étaient tous propriétaire, mais elle a aussi ajouté de nouveaux logiciels qui sont <span id='openSource'>open-source</span> et pour certains <span id='libre'>libre</span>"
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
var lang = "fr";
|
||||
var dialogs;
|
||||
|
||||
function setTime(ts) {
|
||||
var date = new Date(ts);
|
||||
$('.time').text(date.toLocaleString(navigator.language, {
|
||||
|
|
@ -16,21 +19,6 @@ function setTime(ts) {
|
|||
|
||||
setTime(Date.now());
|
||||
|
||||
$('.screensaver').on('click', function () {
|
||||
if($(this).hasClass('animated') == false){
|
||||
$(this).addClass('animated');
|
||||
}
|
||||
if($(this).hasClass('slideInDown')){
|
||||
$(this).removeClass('slideInDown');
|
||||
}
|
||||
$(this).addClass("slideOutUp");
|
||||
});
|
||||
|
||||
$('.play').on('click', function(){
|
||||
$('.overlay').fadeOut(500);
|
||||
$('.startMenu').fadeOut(500);
|
||||
});
|
||||
|
||||
function Window(settings) {
|
||||
|
||||
// ATTRIBUTES
|
||||
|
|
@ -87,3 +75,63 @@ function Window(settings) {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* this function permit slide out lock screen
|
||||
*/
|
||||
$('.screensaver').on('click', function () {
|
||||
if($(this).hasClass('animated') == false){
|
||||
$(this).addClass('animated');
|
||||
}
|
||||
if($(this).hasClass('slideInDown')){
|
||||
$(this).removeClass('slideInDown');
|
||||
}
|
||||
$(this).addClass("slideOutUp");
|
||||
});
|
||||
|
||||
/**
|
||||
* this is launch game
|
||||
*/
|
||||
$('.play').on('click', function(){
|
||||
//$('.overlay').fadeOut(500);
|
||||
$.ajax({
|
||||
url:'assets/dialogs/'+lang+'/dialogs.json',
|
||||
async: false,
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
//dialogs = JSON.parse(data);
|
||||
dialogs = data;
|
||||
prologue();
|
||||
}
|
||||
});
|
||||
$('.startMenu').fadeOut(500);
|
||||
|
||||
});
|
||||
|
||||
function prologue(){
|
||||
$(".dialogs").css("display", "block");
|
||||
typeWriter(dialogs.prologue, 0);
|
||||
$("#dialogsNext").on('click', function(){
|
||||
$("#dialogsNext").off('click');
|
||||
$('#dialogsNext').css('display', "none");
|
||||
typeWriter(dialogs.prologueChangeComputer, 0);
|
||||
$("#dialogsNext").on('click', function(){
|
||||
$("#dialogsNext").off('click');
|
||||
$('.overlay').fadeOut(500);
|
||||
$(".dialogs").fadeOut(500);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function typeWriter(text, n) {
|
||||
if (n < (text.length)) {
|
||||
$('#typewritter').html(text.substring(0, n+1));
|
||||
n++;
|
||||
setTimeout(function() {
|
||||
typeWriter(text, n)
|
||||
}, 50);
|
||||
}
|
||||
else{
|
||||
$('#dialogsNext').css('display', "block");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"prologue": "Vous travaillez à la dryCorporation. Boulot, métro,dodo sont votre quotidien (avec quelques verres entre amis, bien entendu). Jusqu'au jour ou votre entreprise décide de changer votre matériel.",
|
||||
"prologueChangeComputer": "Pour ne pas vous débousoller, l'équipe technique a préféré garder vos anciens programme qui étaient tous propriétaire, mais elle a aussi ajouté de nouveaux logiciels qui sont <span id='openSource'>open-source</span> et pour certains <span id='libre'>libre</span>"
|
||||
}
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="loader">
|
||||
|
||||
</div>
|
||||
<header>
|
||||
<time class="time" style="float: right">time</time>
|
||||
|
|
@ -44,6 +43,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialogs">
|
||||
<div id="typewritter"></div>
|
||||
<div id="dialogsNext">Cliquez ici pour continuer</div>
|
||||
</div>
|
||||
<script src="assets/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="assets/js/app.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
Reference in New Issue