pascal.lafourcade
/
makeittrue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

graphique + timer

Browse Source
master
pisouvigne 5 years ago
parent 161a1be91e
commit 67b44873bc
5 changed files with 95 additions and 37 deletions
Show Stats Download Patch File Download Diff File

21
site/vue/css/style.css
Unescape View File

@ -576,3 +576,24 @@ input[type=color] {
display: none; display: none;
z-index: 80; z-index: 80;
} }
@keyframes progressbar-countdown {
0% {
width: 0%;
}
100% {
width: 95%;
}
}
.progress_bar {
height: 10px;
margin: 20px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}

8
site/vue/index.html
Unescape View File

@ -116,7 +116,7 @@
<div id="firstTimeet" class="modal"> <div id="firstTimeet" class="modal">
<div class="modal-content info-content"> <div class="modal-content info-content">
<div class="modal-body border background" align=center> <div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('firstTimeet');timer.start()">&times;</span> <span class="close" onclick="closeModal('firstTimeet');demarrerTimer();">&times;</span>
<h1 class="txt dys" id="infoFirstTimeEt"></h1> <h1 class="txt dys" id="infoFirstTimeEt"></h1>
<hr id="hr"> <hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p> <p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p>
@ -158,7 +158,7 @@
<div id="firstTimeou" class="modal"> <div id="firstTimeou" class="modal">
<div class="modal-content info-content"> <div class="modal-content info-content">
<div class="modal-body border background" align=center> <div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('firstTimeou');timer.start()">&times;</span> <span class="close" onclick="closeModal('firstTimeou');demarrerTimer();">&times;</span>
<h1 class="txt dys" id="infoFirstTimeOu"></h1> <h1 class="txt dys" id="infoFirstTimeOu"></h1>
<hr id="hr"> <hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p> <p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p>
@ -200,7 +200,7 @@
<div id="firstTimeinv" class="modal"> <div id="firstTimeinv" class="modal">
<div class="modal-content info-content"> <div class="modal-content info-content">
<div class="modal-body border background" align=center> <div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('firstTimeinv');timer.start()">&times;</span> <span class="close" onclick="closeModal('firstTimeinv');demarrerTimer();">&times;</span>
<h1 class="txt dys" id="infoFirstTimeinv"></h1> <h1 class="txt dys" id="infoFirstTimeinv"></h1>
<hr id="hr"> <hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p> <p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p>
@ -235,7 +235,9 @@
</div> </div>
<div class="timer_show dys border"><span class="timer_txt"></span></div> <div class="timer_show dys border"><span class="timer_txt"></span></div>
</div> </div>
<div id="progress_bar" class="progress_bar border backgroundInv"></div>
</div> </div>
<br> <br>
<div id="play_container" class="border"> <div id="play_container" class="border">

6
site/vue/js/func.js
Unescape View File

@ -41,6 +41,9 @@ function setColor(color) {
backgroundToChange.forEach(function (element) { backgroundToChange.forEach(function (element) {
element.style.backgroundColor = blackColor; element.style.backgroundColor = blackColor;
}); });
document.querySelectorAll(".backgroundInv").forEach(function (element) {
element.style.backgroundColor = whiteColor;
});
document.body.style.color = whiteColor; document.body.style.color = whiteColor;
document.getElementById("setting_int").style.color = whiteColor; document.getElementById("setting_int").style.color = whiteColor;
var hr = document.querySelectorAll("#hr"); var hr = document.querySelectorAll("#hr");
@ -61,6 +64,9 @@ function setColor(color) {
backgroundToChange.forEach(function (element) { backgroundToChange.forEach(function (element) {
element.style.backgroundColor = whiteColor; element.style.backgroundColor = whiteColor;
}); });
document.querySelectorAll(".backgroundInv").forEach(function (element) {
element.style.backgroundColor = blackColor;
});
document.getElementById("setting_int").style.color = blackColor; document.getElementById("setting_int").style.color = blackColor;
var hr = document.querySelectorAll("#hr"); var hr = document.querySelectorAll("#hr");
hr.forEach(function (item) { hr.forEach(function (item) {

25
site/vue/js/generateGame.js
Unescape View File

@ -303,13 +303,36 @@ function generateFromBottom() {
var NombrecolonneTest = 2; var NombrecolonneTest = 2;
var numberPerColonneTest = [3, 2]; var numberPerColonneTest = [3, 2];
var porteBool = [[true, "et"], [true, "ou"], [true, "inv"]]; var porteBool = [[true, "et"], [true, "ou"], [true, "inv"]];
var logiquesTest = [];
for (let i = NombrecolonneTest; i > 0; i--) { for (let i = NombrecolonneTest; i > 0; i--) {
for (let j = 0; j < numberPerColonneTest[i - 1]; j++) { for (let j = 0; j < numberPerColonneTest[i - 1]; j++) {
let numberRandom = getRandomArbitrary(0, porteBool.length); let numberRandom = getRandomArbitrary(0, porteBool.length);
logiquesTest.push([porteBool[numberRandom][1], i, j, (j + 1) * 10]);
} }
} }
createLink(logiquesTest, numberPerColonneTest[numberPerColonneTest.length - 1]);
}
function createLinkTest(listeLogique, colonneMax) {
listeLogique.forEach(function (element) {
if (element[1] !== colonneMax) {
console.log(element);
listeLogique.forEach(function (item) {
if (item[1] !== colonneMax) {
console.log(item);
}
});
}
});
}
function isValid(listeLogique, colonneMax) {
listeLogique.forEach(function (element) {
//derniere colonne donc fin
if (element[1] == colonneMax) {
console.log(element);
}
});
} }

72
site/vue/js/timer.js
Unescape View File

@ -4,7 +4,7 @@ function initTimer() {
function move() { function move() {
document.querySelector(".timer_txt").innerHTML = timeEnd - timer.getTimeValues().seconds; document.querySelector(".timer_txt").innerHTML = timeEnd - timer.getTimeValues().seconds;
switch(timeEnd - timer.getTimeValues().seconds){ switch (timeEnd - timer.getTimeValues().seconds) {
case 5: case 5:
case 4: case 4:
document.querySelector(".timer_txt").style.color = "#eca1a6"; document.querySelector(".timer_txt").style.color = "#eca1a6";
@ -16,10 +16,16 @@ function move() {
document.querySelector(".timer_txt").style.color = "#c94c4c"; document.querySelector(".timer_txt").style.color = "#c94c4c";
break; break;
default: default:
document.querySelector(".timer_txt").style.color = document.querySelector("#modeDeJeu").style.color; document.querySelector(".timer_txt").style.color = document.querySelector("#modeDeJeu").style.color;
} }
} }
function demarrerTimer() {
timer.start();
document.querySelector(".progress_bar").style.animationDuration = timeEnd + "s";
document.querySelector(".progress_bar").style.animationPlayState = 'running';
}
var timer = new easytimer.Timer(); var timer = new easytimer.Timer();
timer.start(); timer.start();
timer.addEventListener('secondsUpdated', function (e) { timer.addEventListener('secondsUpdated', function (e) {
@ -32,44 +38,44 @@ timer.addEventListener('secondsUpdated', function (e) {
} }
}); });
function endTime() { function endTime() {
if(!isTuto){ if (!isTuto) {
closeGame(); closeGame();
var score = (niveauActuel * (50 / timeTot)).toFixed(2); var score = (niveauActuel * (50 / timeTot)).toFixed(2);
document.querySelector("#scoreTotGameOver").innerHTML = score; document.querySelector("#scoreTotGameOver").innerHTML = score;
document.querySelector("#niveauGameOver").innerHTML = niveauActuel; document.querySelector("#niveauGameOver").innerHTML = niveauActuel;
document.querySelector("#TempsTotGameOver").innerHTML = timeTot; document.querySelector("#TempsTotGameOver").innerHTML = timeTot;
//calcul stars //calcul stars
resetStar(); resetStar();
if(score < 10){ if (score < 10) {
document.querySelector("#star1").style.color = "#fe8a71"; document.querySelector("#star1").style.color = "#fe8a71";
}else if(score > 10 || score < 50){ } else if (score > 10 || score < 50) {
document.querySelector("#star1").style.color = "#fe8a71"; document.querySelector("#star1").style.color = "#fe8a71";
document.querySelector("#star2").style.color = "#fe8a71"; document.querySelector("#star2").style.color = "#fe8a71";
}else if(score > 50 || score < 200){ } else if (score > 50 || score < 200) {
document.querySelector("#star1").style.color = "#fe8a71"; document.querySelector("#star1").style.color = "#fe8a71";
document.querySelector("#star2").style.color = "#fe8a71"; document.querySelector("#star2").style.color = "#fe8a71";
document.querySelector("#star3").style.color = "#fe8a71"; document.querySelector("#star3").style.color = "#fe8a71";
} }
else if(score > 200 || score < 400){ else if (score > 200 || score < 400) {
document.querySelector("#star1").style.color = "#fe8a71"; document.querySelector("#star1").style.color = "#fe8a71";
document.querySelector("#star2").style.color = "#fe8a71"; document.querySelector("#star2").style.color = "#fe8a71";
document.querySelector("#star3").style.color = "#fe8a71"; document.querySelector("#star3").style.color = "#fe8a71";
document.querySelector("#star4").style.color = "#fe8a71"; document.querySelector("#star4").style.color = "#fe8a71";
}else{ } else {
document.querySelector("#star1").style.color = "#fe8a71"; document.querySelector("#star1").style.color = "#fe8a71";
document.querySelector("#star2").style.color = "#fe8a71"; document.querySelector("#star2").style.color = "#fe8a71";
document.querySelector("#star3").style.color = "#fe8a71"; document.querySelector("#star3").style.color = "#fe8a71";
document.querySelector("#star4").style.color = "#fe8a71"; document.querySelector("#star4").style.color = "#fe8a71";
document.querySelector("#star5").style.color = "#fe8a71"; document.querySelector("#star5").style.color = "#fe8a71";
} }
openModal('gameOver'); openModal('gameOver');
} }
} }
function resetStar(){ function resetStar() {
document.querySelector("#star1").style.color = document.body.style.color; document.querySelector("#star1").style.color = document.body.style.color;
document.querySelector("#star2").style.color = document.body.style.color; document.querySelector("#star2").style.color = document.body.style.color;
document.querySelector("#star3").style.color = document.body.style.color; document.querySelector("#star3").style.color = document.body.style.color;
document.querySelector("#star4").style.color = document.body.style.color; document.querySelector("#star4").style.color = document.body.style.color;
document.querySelector("#star5").style.color = document.body.style.color; document.querySelector("#star5").style.color = document.body.style.color;
} }
Write Preview
Loading…
Cancel
Save