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

amélioration de la popup de fin, et calcul du temps total/score total/niveau max ...

Browse Source
master
pisouvigne 5 years ago
parent c28d06ceff
commit 12fbe7944a
8 changed files with 218 additions and 81 deletions
Show Stats Download Patch File Download Diff File

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

@ -230,7 +230,6 @@ hr{
height: 30vh;
width: 90%;
}
.close{
position: absolute;
right:33px;
@ -253,4 +252,19 @@ hr{
.secret{
cursor: pointer;
color:#fe8a71;
}
#niveauGameOver{
color:#fe8a71;
}
#scoreTotGameOver{
color:#fe8a71;
}
#TempsTotGameOver{
color:#fe8a71;
}
.timer_bar{
height: 15px;
max-width: 95%;
margin:2%;
transition: 1.5s;
}

116
site/vue/index.html
Unescape View File

@ -22,7 +22,7 @@
<a class="txt dys" id="playSelection">Je veux jouer a </a>
<select id="jeu-select" class="background">
<option value="aleatoire" class="txt background dys" id="mode1">Aleatoire</option>
<option value="perso" class="txt background dys" id="mode2">Niveau Perso</option>
<option value="perso" class="txt background dys" id="mode2"></option>
</select>
</div>
</li>
@ -38,7 +38,7 @@
<a onclick="openModal('infoModal')"><i class="fa fa-info" id="setting" aria-hidden="true"></i></a>
<div id="myModal" class="modal">
<div class="modal-content">
<div id="setting_int" class="modal-body border background" align=center>
<span class="close" onclick="closeModal('myModal')">&times;</span>
<h1 class="txt dys" id="settingTitle">Parametres</h1>
@ -67,12 +67,12 @@
id="inactive_end_picker" name="head" value="#9a9a9a"></p>
<hr id="hr">
<div class="setting_play" id="setting_container">
</div>
</div>
</div>
</div>
<div id="scoreModal" class="modal">
<div class="modal-content score-content">
<div class="modal-body border background">
@ -80,7 +80,7 @@
<h1 align=center class="txt dys" id="scoreTitle">Tableau des scores</h1>
<hr id="hr">
<div class="scoreOne border" align=center>
<p class="dys">Mode de jeu 1</p>
<p class="dys txt" id="mode1">Aleatoire</p>
<hr id="hr">
<p class="dys">Pseudo | Score</p>
<p class="dys">Pseudo | Score</p>
@ -88,7 +88,7 @@
<p class="dys">Pseudo | Score</p>
</div>
<div class="scoreTwo border" align=center>
<p class="dys">Mode de jeu 2</p>
<p class="dys txt" id="mode2">Cameleon</p>
<hr id="hr">
<p class="dys">Pseudo | Score</p>
<p class="dys">Pseudo | Score</p>
@ -98,63 +98,108 @@
</div>
</div>
</div>
<div id="gameOver" class="modal">
<div class="modal-content score-content">
<div class="modal-body border background">
<span class="close" onclick="closeModal('gameOver')">&times;</span>
<h1 align=center class="txt dys" id="gameOverTitle">Game Over</h1>
<hr id="hr">
<br><br>
<div align=center>
<p><a class="dys">Vous avez fait un score total de </a><a class="dys" id="scoreTotGameOver">140</a></p>
<p><a class="dys">Vous avez fait un temps total de </a><a class="dys" id="TempsTotGameOver">40</a> s</p>
<p><a class="dys">Niveau max : </a><a class="dys" id="niveauGameOver"></a></p>
<hr id="hr">
<p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button class="border background">Valider</button></p>
</div>
</div>
</div>
</div>
<div id="infoModal" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('infoModal')">&times;</span>
<h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
<hr id="hr">
<p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus. Morbi
<p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus.
Morbi
imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat
facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend porta.
facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend
porta.
Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum
sapien.
Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper urna
sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor. Aenean
Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper
urna
sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices
posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor.
Aenean
imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec
laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia. Sed
laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia.
Sed
sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare
elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a augue
aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit at
elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a
augue
aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit
at
risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec
finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue. Interdum et
finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue.
Interdum et
malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor.
Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis
porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et leo
ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada tincidunt,
porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et
leo
ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada
tincidunt,
sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra
vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo. Aenean
vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo.
Aenean
quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio
efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies lobortis,
efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies
lobortis,
odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie
sollicitudin.
Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis tortor,
vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et est.
Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis
tortor,
vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et
est.
Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut
iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum
varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis malesuada
eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel finibus
mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam aliquam.
varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis
malesuada
eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel
finibus
mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam
aliquam.
Vivamus maximus justo eu fermentum hendrerit.</p>
</div>
</div>
</div>
</div>
<!--Play Page-->
<div id="playPage">
<div class="menu border" align=center>
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<p id="modeDeJeu" class="txt dys">Mode de jeu</p>
<p id="niveau" class="txt dys">Niveau 14</p>
<p id="temps" class="txt dys">Temps :</p>
</div><br>
<div class="menu border">
<div align=center>
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<p id="modeDeJeu" class="txt dys">Mode de jeu</p>
<p><a id="niveau" class="txt dys">Niveau </a><a class="dys niveau">1</a></p>
<p class="dys"><a id="temps" class="txt">Temps : </a><a id="timer">0 s</a><a id="timerend">0 s</a></p>
</div>
<div class="timer_bar border">
</div>
</div>
<br>
<div id="play_container" class="border">
</div>
@ -165,6 +210,7 @@
<script src="js/lang.js"></script>
<script src="js/func.js"></script>
<script src="js/createElement.js"></script>
<script src="js/easytimer.min.js"></script>
<script src="js/logique.js"></script>
<script src="js/init.js"></script>
<script src="js/main.js"></script>

24
site/vue/jeu.html
Unescape View File

@ -65,7 +65,7 @@
<a onclick="reset()" style="cursor:pointer;">Click</a>
<script>
var mobile = false;
var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
var switchs = new Array(), lineCount = new Array(), logiques = new Array(),lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
var niveauActuel = localStorage.getItem("niveau");
if(niveauActuel == null){
@ -99,8 +99,24 @@
checkAllSortieLogique();
function reset(){
console.log("reset");
switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
clearArray(switchs);
clearArray(lineCount);
clearArray(logiques);
console.log(logiques);
clearArray(lines);
clearArray(endLines);
clearArray(switchsInfo);
clearArray(switchsInfoCopy);
clearArray(lineRemove);
timeEnd = 70;
//switch
numberOfSwitch = 0;
//grid
colonneTot = 0;
numberPerColonne = [];
liveColonneNumber = [];
stage = new Konva.Stage({
container: 'play-container',
/*rotation: -90,
@ -109,8 +125,10 @@
width: width,
height: height,
});
layer.destroyChildren();
stage.add(layer);
initLayer();

9
site/vue/js/const.js
Unescape View File

@ -28,7 +28,8 @@ var colorSwitchInnactiveBackground = "red";
var colorSwitchActiveBackground = "green";
//timer
var timeEnd = 70;
var timeEnd = 10;
var timeTot = 0;
//switch
var numberOfSwitch = 0;
@ -36,4 +37,8 @@ var numberOfSwitch = 0;
//grid
var colonneTot = 4;
var numberPerColonne = [];
var liveColonneNumber = [];
var liveColonneNumber = [];
var niveauActuel = 1;
var isTuto = true;

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

@ -41,7 +41,6 @@ function setColor(color) {
element.style.backgroundColor = blackColor;
});
document.body.style.color = whiteColor;
document.getElementById("setting_int").style.color = whiteColor;
var hr = document.querySelectorAll("#hr");
hr.forEach(function (item) {
@ -244,11 +243,16 @@ function checkEnd() {
}
});
if (ter) {
setTimeout(() => { localStorage.setItem("niveau", parseInt(niveauActuel) + 1); document.location.reload(true); }, 100);
if (ter && !isTuto) {
setTimeout(() => { nextLevel(); }, 100);
}
}
function nextLevel(){
niveauActuel++;
timeTot = timeTot + timer.getTimeValues().seconds;
launchGameOne();
}
function calculNombreSwitch() {
var entrelibre = 0;
@ -354,14 +358,30 @@ function changeAllLineColorInActive(color){
}
function play(){
console.log("oui");
niveauActuel = 1;
document.querySelector("#mainPage").style.display = 'none';
document.querySelector("#playPage").style.display = 'block';
timeTot = 0;
launchGameOne();
}
function launchGameOne(){
document.querySelector(".niveau").innerHTML = niveauActuel;
timer.stop();
timer.reset();
resetAllTabs();
gameOne();
}
function clearArray(arr){
while(arr.length > 0) {
arr.pop();
}
return arr.splice(0,arr.length);
}
function closeGame(){
timer.stop();
document.querySelector("#mainPage").style.display = 'block';
document.querySelector("#playPage").style.display = 'none';
resetAllTabs();

11
site/vue/js/lang.js
Unescape View File

@ -4,7 +4,7 @@ const lang = {
settingTitle: "Parametres",
playSelection: "Je veux jouer a",
mode1: "Aleatoire",
mode2: "Niveau Perso",
mode2: "Cameleon",
themeDark: "Theme Dark :",
retour: "Retour",
dysfont: "Dyslexie :",
@ -15,17 +15,19 @@ const lang = {
inactive_switch_setting : "Couleur switchs innactif : ",
scoreTitle: "Tableau des scores",
infoTitle: "Comment jouer ?",
gameOverTitle: "Perdu",
inactive_end_setting: "Couleur fin : ",
modeDeJeu : "Mode de jeu",
niveau : "Niveau 24",
niveau : "Niveau ",
temps: "Temps : ",
},
en: {
titleGame: "Make It True",
settingTitle: "Settings",
playSelection: "I want to play ",
mode1: "Random",
mode2: "Perso Level",
mode2: "Chameleon",
themeDark: "Dark Theme :",
retour: "Back",
dysfont:"Dyslexia :",
@ -38,7 +40,8 @@ const lang = {
infoTitle: "How to play ?",
inactive_end_setting: "End color : ",
modeDeJeu : "Gamemode",
niveau : "Level 24",
niveau : "Level ",
temps: "Time : ",
gameOverTitle: "Game Over",
}
}

38
site/vue/js/main.js
Unescape View File

@ -18,6 +18,7 @@ var layer = new Konva.Layer();
tutoCreateLayer();
function tutoCreateLayer() {
isTuto = true;
width = window.innerWidth - window.innerWidth / 100 * 30;
stage = new Konva.Stage({
container: 'setting_container',
@ -47,11 +48,19 @@ function resetAllTabs() {
switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
width = window.innerWidth - window.innerWidth / 100 * 10;
height = window.innerHeight /1.5;
timeEnd = 5;
numberOfSwitch = 0;
colonneTot = 0;
numberPerColonne = [];
liveColonneNumber = [];
layer.destroyChildren();
}
function gameOne() {
isTuto = false;
stage = new Konva.Stage({
container: 'play_container',
/*rotation: -90,
@ -61,7 +70,7 @@ function gameOne() {
height: height,
});
stage.add(layer);
initTimer();
colonneTot = 2;
numberPerColonne = [2,1];
var logiqueCount = 0;
@ -69,9 +78,28 @@ function gameOne() {
for (let i = 0; i < colonneTot; i++) {
liveColonneNumber.push([]);
}
insertLogiqueColonne("logique1", "et", 0);
insertLogiqueColonne("logique2", "et", 0);
insertLogiqueColonne("logique3", "et", 1);
for (let i = 0; i < colonneTot; i++) {
for (let j = 0; j < numberPerColonne[i]; j++) {
logiqueCount++;
let type = null;
switch (getRandomArbitrary(0, 4)) {
case 0:
type = "et";
break;
case 1:
type = "ou";
break;
case 2:
type = "etnon";
break;
case 3:
type = "nonou";
break;
}
insertLogiqueColonne("logique" + logiqueCount, type, i);
}
}
logiques.forEach(function (element) {
createLinkAuto(element.name);
});

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

@ -1,35 +1,38 @@
function initTimer(){
/*var TimerElem = document.getElementById("progressBar");
TimerElem.style.width = "0%";
let seconds = timeEnd;
let minutes = 0;
while(seconds - 60 > 0){
minutes++;
seconds = seconds - 60;
}
document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s";*/
function initTimer() {
var TimerElem = document.querySelector(".timer_bar");
TimerElem.style.width = "0%";
let seconds = timeEnd;
document.getElementById("timerend").innerHTML = " / " + seconds + " s";
}
function move() {
var lapsPerSecond = 100/timeEnd;
var TimerElem = document.getElementById("progressBar");
TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond)+"%";
var lapsPerSecond = 100 / timeEnd;
var TimerElem = document.querySelector(".timer_bar");
TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond) + "%";
}
var timer = new easytimer.Timer();
timer.start();
timer.addEventListener('secondsUpdated', function (e) {
if(timer.getTimeValues().seconds <= timeEnd){
document.getElementById("timer").innerHTML = timer.getTimeValues().minutes.toString() +" m " + timer.getTimeValues().seconds.toString() + " s";
move();
}else{
endTime();
timer.stop();
}
});
function endTime(){
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
timer.start();
timer.addEventListener('secondsUpdated', function (e) {
if (timer.getTimeValues().seconds <= timeEnd) {
document.getElementById("timer").innerHTML = timer.getTimeValues().seconds.toString() + " s";
move();
} else {
timeTot = timeTot + timer.getTimeValues().seconds;
endTime();
timer.stop();
}
});
function endTime() {
if(!isTuto){
document.querySelector("#mainPage").style.display = 'block';
document.querySelector("#playPage").style.display = 'none';
document.querySelector("#scoreTotGameOver").innerHTML = (niveauActuel * (50 / timeTot)).toFixed(2);
document.querySelector("#niveauGameOver").innerHTML = niveauActuel;
document.querySelector("#TempsTotGameOver").innerHTML = timeTot;
openModal('gameOver');
}
}
Write Preview
Loading…
Cancel
Save