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

nouveau système de liens

Browse Source
master
pisouvigne 5 years ago
parent 5856599107
commit 3768eb4994
13 changed files with 710 additions and 468 deletions
Show Stats Download Patch File Download Diff File

3
site/test/js/createElement.js
Unescape View File

@ -127,6 +127,7 @@ function createLink(entre, sortie) {
} }
break; break;
default: default:
console.log("id2222222222222222222");
endLines.push(lineId); endLines.push(lineId);
createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / end.position)*end.let], "line" + lineId); createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / end.position)*end.let], "line" + lineId);
setLine(entre, "id3", "line" + lineId); setLine(entre, "id3", "line" + lineId);
@ -238,9 +239,7 @@ function createLinkSwitch(){
else { else {
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function(element){
if(stage.findOne("#"+element.id).id3 == null){ if(stage.findOne("#"+element.id).id3 == null){
console.log("le switch " + element.id);
if(Math.abs(logique.y - element.y) < distanceSwitch){ if(Math.abs(logique.y - element.y) < distanceSwitch){
console.log("ai");
distanceSwitch = Math.abs(logique.y - element.y); distanceSwitch = Math.abs(logique.y - element.y);
switchs = element; switchs = element;
} }

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

@ -2,20 +2,26 @@
font-family: main; font-family: main;
src: url(../font/main.TTF); src: url(../font/main.TTF);
} }
@font-face { @font-face {
font-family: dys; font-family: dys;
src: url(../font/dys.otf); src: url(../font/dys.otf);
} }
* { * {
transition: .01s; transition: .01s;
} }
body { body {
font-family: main; font-family: main;
background-color: #D7CCC8;
height: 91%;
} }
body { html {
background-color: #D7CCC8; height: 100%;
margin: 0;
padding: 0;
} }
.title { .title {
@ -84,6 +90,7 @@ body {
.fa-cog:hover { .fa-cog:hover {
font-size: 6vh; font-size: 6vh;
} }
.fa-trophy { .fa-trophy {
font-size: 5vh; font-size: 5vh;
position: absolute; position: absolute;
@ -96,6 +103,7 @@ body {
.fa-trophy:hover { .fa-trophy:hover {
font-size: 6vh; font-size: 6vh;
} }
.fa-users { .fa-users {
font-size: 5vh; font-size: 5vh;
position: absolute; position: absolute;
@ -121,11 +129,12 @@ body {
.fa-info:hover { .fa-info:hover {
font-size: 6vh; font-size: 6vh;
} }
.fa-arrow-left { .fa-arrow-left {
font-size: 5vh; font-size: 5vh;
position: absolute; position: absolute;
left: 0; left: 0;
margin: 4vh; margin: 2vh;
transition: .5s; transition: .5s;
} }
@ -164,14 +173,17 @@ i:hover {
animation-name: animatetop; animation-name: animatetop;
animation-duration: 0.4s animation-duration: 0.4s
} }
.modal-body { .modal-body {
height: 100%; height: 100%;
border: 5px solid #D3D3CE; border: 5px solid #D3D3CE;
border-radius: 15px; border-radius: 15px;
} }
.score-content { .score-content {
height: 90%; height: 90%;
} }
.scoreOne { .scoreOne {
position: absolute; position: absolute;
width: 40%; width: 40%;
@ -181,6 +193,7 @@ i:hover {
border: 5px solid #D3D3CE; border: 5px solid #D3D3CE;
border-radius: 15px; border-radius: 15px;
} }
.scoreTwo { .scoreTwo {
position: absolute; position: absolute;
width: 40%; width: 40%;
@ -190,6 +203,7 @@ i:hover {
border: 5px solid #D3D3CE; border: 5px solid #D3D3CE;
border-radius: 15px; border-radius: 15px;
} }
@-webkit-keyframes animatetop { @-webkit-keyframes animatetop {
from { from {
top: -200px; top: -200px;
@ -227,6 +241,7 @@ img:hover {
hr { hr {
border: 3px solid #D3D3CE; border: 3px solid #D3D3CE;
} }
.img_france { .img_france {
margin-right: 50px; margin-right: 50px;
} }
@ -235,15 +250,19 @@ hr{
height: 30vh; height: 30vh;
width: 90%; width: 90%;
} }
.close { .close {
position: absolute; position: absolute;
right: 33px; right: 33px;
top: 10px; top: 10px;
font-size: 50px; font-size: 50px;
} }
#modeDeJeu { #modeDeJeu {
font-size: 25px;; font-size: 25px;
;
} }
.close:hover { .close:hover {
color: red; color: red;
cursor: pointer; cursor: pointer;
@ -252,10 +271,12 @@ hr{
.margin-right { .margin-right {
margin-right: 5%; margin-right: 5%;
} }
.margin-global { .margin-global {
margin-left: 2%; margin-left: 2f%;
margin-right: 2%; margin-right: 2%;
} }
.veriteTable { .veriteTable {
border-collapse: collapse; border-collapse: collapse;
border-radius: 15px; border-radius: 15px;
@ -263,9 +284,11 @@ hr{
text-align: center; text-align: center;
width: 30%; width: 30%;
} }
.veriteTable th { .veriteTable th {
height: 3em; height: 3em;
} }
.veriteTable td { .veriteTable td {
height: 2em; height: 2em;
} }
@ -273,30 +296,39 @@ hr{
#playPage { #playPage {
display: none; display: none;
flex-direction: column; flex-direction: column;
height: 50%; height: 95%;
margin: 0;
padding: 0;
} }
.border { .border {
border-radius: 15px; border-radius: 15px;
} }
.secret { .secret {
cursor: pointer; cursor: pointer;
color: #fe8a71; color: #fe8a71;
} }
#niveauGameOver { #niveauGameOver {
color: #fe8a71; color: #fe8a71;
} }
#scoreTotGameOver { #scoreTotGameOver {
color: #fe8a71; color: #fe8a71;
} }
#TempsTotGameOver { #TempsTotGameOver {
color: #fe8a71; color: #fe8a71;
} }
.timer_bar { .timer_bar {
height: 15px; height: 15px;
max-width: 95%; max-width: 95%;
margin: 2%; margin: 2%;
transition: 1.5s; transition: 1.5s;
} }
.fa-star { .fa-star {
font-size: 10vh; font-size: 10vh;
cursor: default; cursor: default;
@ -306,16 +338,75 @@ hr{
.fa { .fa {
font-size: 1em; font-size: 1em;
} }
#titleGame { #titleGame {
font-size: 2em; font-size: 2em;
margin-top: 35%; margin-top: 35%;
} }
.far { .far {
font-size: 5em; font-size: 5em;
margin: 0; margin: 0;
} }
#setting_int { #setting_int {
font-size: 0.6em; font-size: 0.6em;
} }
} }
.timer_show {
font-size: 5vh;
position: absolute;
right: 10vh;
top: 3vh;
height: 10vh;
width: 10vh;
border-radius: 50%;
margin: 0;
text-align: center;
}
.timer_txt {
transition: 0.2s;
}
.info_check {
margin-right: 2%;
}
#cache_reinit {
background-color: red;
color: #D7CCC8;
border: none;
}
#cache_reinit:hover {
background-color: lightcoral;
cursor: pointer;
}
.input-color-container {
position: relative;
overflow: hidden;
width: 40px;
height: 40px;
border: solid 2px #ddd;
border-radius: 40px;
}
input[type=color]{
position: absolute;
right: -8px;
top: -8px;
width: 56px;
height: 56px;
border: none;
}
.input_line{
display: flex;
justify-content: center;
}
.colomn_line_input{
margin-right:25px;
margin-left:25px;
}

106
site/vue/index.html
Unescape View File

@ -49,6 +49,7 @@
<br><br> <br><br>
<p><img src="img/and_test.png" class="margin-right"><img src="img/and_test.png"></p> <p><img src="img/and_test.png" class="margin-right"><img src="img/and_test.png"></p>
<br><br> <br><br>
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
</div> </div>
</div> </div>
</div> </div>
@ -89,18 +90,44 @@
<br><br> <br><br>
<p><img src="img/or_test.png" class="margin-right"><img src="img/or_test.png"></p> <p><img src="img/or_test.png" class="margin-right"><img src="img/or_test.png"></p>
<br><br> <br><br>
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
</div>
</div>
</div>
<div id="firstTimeinv" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('firstTimeinv');timer.start()">&times;</span>
<h1 class="txt dys" id="infoFirstTimeinv"></h1>
<hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p>
<table class="veriteTable dys">
<tr>
<th class="border">a</th>
<th class="border">S</th>
</tr>
<tr>
<td class="border">0</td>
<td class="border">1</td>
</tr>
<tr>
<td class="border">1</td>
<td class="border">0</td>
</tr>
</table>
<br><br>
<p><img src="img/not_test.png" class="margin-right"><img src="img/not_test.png"></p>
<br><br>
<p class="dys info_check" align=right><a class="txt" id="close_helps"></a><input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
</div> </div>
</div> </div>
</div> </div>
<div class="menu border"> <div class="menu border">
<div align=center> <div align=center>
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a> <a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<p id="modeDeJeu" class="txt dys">Mode de jeu</p> <div class="timer_show dys border"><span class="timer_txt"></span></div>
<p><a id="niveau" class="txt dys">Niveau </a><a class="dys niveau">1</a></p> <p id="modeDeJeu" class="txt dys"></p>
<p class="dys"><a id="temps" class="txt">Temps : </a><a id="timer">0 s</a><a id="timerend">0 s</a></p> <p><a id="niveau" class="txt dys"></a><a class="dys niveau"></a></p>
</div>
<div class="timer_bar border">
</div> </div>
</div> </div>
<br> <br>
@ -117,9 +144,9 @@
<ul> <ul>
<li> <li>
<div class="message"> <div class="message">
<a class="txt dys" id="playSelection">Je veux jouer a </a> <a class="txt dys" id="playSelection"></a>
<select id="jeu-select" class="background"> <select id="jeu-select" class="background">
<option value="aleatoire" class="txt background dys" id="mode1">Aleatoire</option> <option value="aleatoire" class="txt background dys" id="mode1"></option>
<option value="perso" class="txt background dys" id="mode2"></option> <option value="perso" class="txt background dys" id="mode2"></option>
</select> </select>
</div> </div>
@ -150,19 +177,44 @@
<input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p> <input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p>
<br> <br>
<br><img onclick="setLang('fr')" class="img_france" src="img/france.png" /> <br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
<img onclick="setLang('en')" class="img_usa" src="img/usa.png" /><br><br> <img onclick="setLang('en')" class="img_usa" src="img/usa.png" /><br><br><br>
<button class="dys txt" id="cache_reinit" onclick="resetCache();"></button><br>
<hr id="hr"> <hr id="hr">
<p id="setting_title_perso" class="txt dys">Personnalisation du jeu</p> <p id="setting_title_perso" class="txt dys"></p>
<p><a class="txt dys" id="active_switch_setting">Couleur ligne active : </a><input type="color" <div class="input_line">
id="active_switch_picker" name="head" value="#008000"></p> <div class="colomn_line_input">
<p><a class="txt dys" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color" <a class="txt dys" id="active_switch_setting"></a>
id="inactive_switch_picker" name="head" value="#FF0000"></p> <div class="input-color-container">
<p><a class="txt dys" id="active_line_setting">Couleur ligne innactive : </a><input type="color" <input type="color" id="active_switch_picker" name="head" value="#008000" />
id="active_line_picker" name="head" value="#4CFEFE"></p> </div>
<p><a class="txt dys" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" </div>
id="inactive_line_picker" name="head" value="#000000"></p> <div class="colomn_line_input">
<p><a class="txt dys" id="inactive_end_setting">Couleur ligne innactive : </a><input type="color" <a class="txt dys" id="inactive_switch_setting"></a>
id="inactive_end_picker" name="head" value="#9a9a9a"></p> <div class="input-color-container">
<input type="color" id="inactive_switch_picker" name="head" value="#FF0000">
</div>
</div>
</div>
<div class="input_line">
<div class="colomn_line_input">
<a class="txt dys" id="active_line_setting"></a>
<div class="input-color-container">
<input type="color" id="active_line_picker" name="head" value="#4CFEFE">
</div>
</div>
<div class="colomn_line_input">
<a class="txt dys" id="inactive_line_setting"></a>
<div class="input-color-container">
<input type="color" id="inactive_line_picker" name="head" value="#000000">
</div>
</div>
<div class="colomn_line_input">
<a class="txt dys" id="inactive_end_setting"></a>
<div class="input-color-container">
<input type="color" id="inactive_end_picker" name="head" value="#9a9a9a">
</div>
</div>
</div>
<hr id="hr"> <hr id="hr">
<div class="setting_play" id="setting_container"> <div class="setting_play" id="setting_container">
@ -170,6 +222,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="reset_cache" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('reset_cache');">&times;</span>
<h1 class="txt dys" id="reset"></h1>
<hr id="hr">
<p class="dys txt margin-global" id="reset_cache_message"></p>
<br><br>
<br><br>
</div>
</div>
</div>
<div id="scoreModal" class="modal"> <div id="scoreModal" class="modal">
<div class="modal-content score-content"> <div class="modal-content score-content">
@ -205,7 +269,7 @@
<br><br> <br><br>
<div align=center> <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 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 class="dys"><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> <p><a class="dys">Niveau max : </a><a class="dys" id="niveauGameOver"></a></p>
<hr id="hr"> <hr id="hr">
<p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button class="border background">Valider</button></p> <p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button class="border background">Valider</button></p>

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

@ -49,3 +49,5 @@ var windowWidth = 0;
var windowHeight = 0; var windowHeight = 0;
var mobile = false; var mobile = false;
var allowedInfoPorte = true;

66
site/vue/js/createElement.js
Unescape View File

@ -89,9 +89,12 @@ function createEnd() {
} }
createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId); createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
setLine(sortie, "id1", "line" + lineId); setLine(sortie, "id1", "line" + lineId);
let truc = entre.x;
entre.id3 = "line" + lineId; entre.id3 = "line" + lineId;
break; break;
case "id2": case "id2":
createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId); createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
setLine(sortie, "id2", "line" + lineId); setLine(sortie, "id2", "line" + lineId);
entre.id3 = "line" + lineId; entre.id3 = "line" + lineId;
@ -132,6 +135,9 @@ function createEnd() {
break; break;
} }
break; break;
default:
console.log("error");
break;
} }
} }
@ -182,7 +188,7 @@ function createEnd() {
type: type, type: type,
id1: null, id1: null,
id2: null, id2: null,
id3: null, id3: [],
} }
logiques.push(logique); logiques.push(logique);
} }
@ -215,12 +221,21 @@ function createEnd() {
var distance = stage.width(); var distance = stage.width();
//Trouver la porte logique la plus proche des switchs //Trouver la porte logique la plus proche des switchs
logiques.forEach(function (element) { logiques.forEach(function (element) {
if(element.type != "inv"){
if (element.id1 == null || element.id2 == null) { if (element.id1 == null || element.id2 == null) {
if (element.x < distance) { if (element.x < distance) {
logique = element; logique = element;
distance = element.x; distance = element.x;
} }
} }
}else{
if (element.id1 == null) {
if (element.x < distance) {
logique = element;
distance = element.x;
}
}
}
}); });
var distanceSwitch = stage.height(); var distanceSwitch = stage.height();
var switchs = null; var switchs = null;
@ -234,10 +249,8 @@ function createEnd() {
} }
else { else {
switchsInfoCopy.forEach(function (element) { switchsInfoCopy.forEach(function (element) {
if(stage.findOne("#"+element.id).id3 == null){ if (stage.findOne("#" + element.id).id3.length === 0) {
console.log("le switch " + element.id);
if (Math.abs(logique.y - element.y) < distanceSwitch) { if (Math.abs(logique.y - element.y) < distanceSwitch) {
console.log("ai");
distanceSwitch = Math.abs(logique.y - element.y); distanceSwitch = Math.abs(logique.y - element.y);
switchs = element; switchs = element;
} }
@ -252,16 +265,19 @@ function createEnd() {
function getNumberOfSwitchEmpty() { function getNumberOfSwitchEmpty() {
let number = 0; let number = 0;
switchsInfoCopy.forEach(function (element) { switchsInfoCopy.forEach(function (element) {
if(stage.findOne("#"+element.id).id3 == null) if (stage.findOne("#" + element.id).id3.length === 0)
number++; number++;
}); });
return number; return number;
} }
function createAllLinkSwitch() { function createAllLinkSwitch() {
while(getNumberOfSwitchEmpty() > 0){ for(let i = 0; i < numberOfSwitch;i++){
createLinkSwitch(); createLinkSwitch();
} }
/*while (getNumberOfSwitchEmpty() > 0) {
createLinkSwitch();
}*/
} }
function createLinkAuto(logiqueId) { function createLinkAuto(logiqueId) {
@ -294,3 +310,41 @@ function createEnd() {
createLink(findLogique(logiqueId), findLogique(sortie.name)); createLink(findLogique(logiqueId), findLogique(sortie.name));
} }
} }
function createStage(container) {
height = document.querySelector("#"+container).offsetHeight;
width = document.querySelector("#"+container).offsetWidth;
if (window.innerWidth <= 900) {
if (!mobile) {
mobile = true;
stage = new Konva.Stage({
container: container,
width: height,
height: width,
rotation:90,
x:height,
});
}
stage = new Konva.Stage({
container: container,
width: height,
height: width,
rotation:90,
x:height,
});
} else {
if (mobile) {
mobile = false;
}else{
stage = new Konva.Stage({
container: container,
width: width,
height: height,
});
}
}
stage.draw();
}

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

@ -115,6 +115,9 @@ function setLine(logiqueElement, lineId, lineName) {
if (element.name === logiqueElement.name) { if (element.name === logiqueElement.name) {
Object.keys(element).map(function (objectKey, index) { Object.keys(element).map(function (objectKey, index) {
if (objectKey == lineId) { if (objectKey == lineId) {
if(lineId === "id3"){
element[objectKey].push(lineName);
}else
element[objectKey] = lineName; element[objectKey] = lineName;
} }
}); });
@ -122,6 +125,12 @@ function setLine(logiqueElement, lineId, lineName) {
}); });
} }
function changeSwitchColor(switchId){
let swi = stage.findOne("#" + switchId);
var colorswi = swi.fill() == colorSwitchActiveBackground ? colorSwitchInnactiveBackground : colorSwitchActiveBackground;
swi.fill(colorswi);
}
function changeLineColor(idLine) { function changeLineColor(idLine) {
let line = stage.findOne("#" + idLine); let line = stage.findOne("#" + idLine);
var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive; var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive;
@ -142,7 +151,7 @@ function changeLineColorYellow(idLine) {
function checkAllSortieLogique() { function checkAllSortieLogique() {
logiques.forEach(function (element) { logiques.forEach(function (element) {
if (element.id3 != null) if (element.id3.length != 0)
checkSortieLogique(element.name); checkSortieLogique(element.name);
}); });
} }

17
site/vue/js/init.js
Unescape View File

@ -2,23 +2,27 @@ function initAllSwitch() {
switchs.forEach(function (element) { switchs.forEach(function (element) {
let switche = stage.findOne("#" + element); let switche = stage.findOne("#" + element);
switche.on('click touchstart', function () { switche.on('click touchstart', function () {
changeSwitchColor(switche.id());
let colorrect = switche.fill() == colorSwitchInnactiveBackground ? colorSwitchActiveBackground : colorSwitchInnactiveBackground;
switche.fill(colorrect);
changeLineColor(switche.id3); changeLineColor(switche.id3);
checkAllSortieLogique(); checkAllSortieLogique();
layer.draw(); layer.draw();
checkEnd(); checkEnd();
}); });
switche.on('mousedown', function () { switche.on('mouseover', function () {
document.body.style.cursor = "pointer"; document.body.style.cursor = "pointer";
}); });
switche.on('mouseout', function () { switche.on('mouseout', function () {
document.body.style.cursor = "default"; document.body.style.cursor = "default";
}); });
//faire le random de l'inversion de switch
if(getRandomArbitrary(0,3) == 1){
changeSwitchColor(switche.id());
changeLineColor(switche.id3);
}
}); });
} }
function initLayer() { function initLayer() {
@ -36,7 +40,7 @@ function initEnd() {
var listeLogique = []; var listeLogique = [];
let countLogique = 0; let countLogique = 0;
logiques.forEach(function (element) { logiques.forEach(function (element) {
if(element.id3 == null){ if(element.id3.length === 0) {
countLogique++; countLogique++;
listeLogique.push(element); listeLogique.push(element);
} }
@ -44,9 +48,8 @@ function initEnd() {
listeLogique.sort(compareLogiqueForEnd); listeLogique.sort(compareLogiqueForEnd);
end.position = countLogique; end.position = countLogique;
end.let = countLogique; end.let = countLogique;
console.log(listeLogique);
listeLogique.forEach(function (element) { listeLogique.forEach(function (element) {
if(element.id3 == null){
createLink(element, end); createLink(element, end);
}
}); });
} }

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

@ -1,7 +1,7 @@
const lang = { const lang = {
fr: { fr: {
titleGame: "Make It True", titleGame: "Make It True",
settingTitle: "Parametres", settingTitle: "Paramètres",
playSelection: "Je veux jouer a", playSelection: "Je veux jouer a",
mode1: "Aleatoire", mode1: "Aleatoire",
mode2: "Cameleon", mode2: "Cameleon",
@ -9,14 +9,14 @@ const lang = {
retour: "Retour", retour: "Retour",
dysfont: "Dyslexie :", dysfont: "Dyslexie :",
setting_title_perso: "Personnalisation du jeu", setting_title_perso: "Personnalisation du jeu",
active_line_setting : "Couleur lines actives : ", active_line_setting : "Couleur lignes actives",
inactive_line_setting : "Couleur lines inactives : ", inactive_line_setting : "Couleur lignes inactives",
active_switch_setting : "Couleur switchs actif : ", active_switch_setting : "Couleur intérupteur actif",
inactive_switch_setting : "Couleur switchs inactif : ", inactive_switch_setting : "Couleur intérupteur inactif",
scoreTitle: "Tableau des scores", scoreTitle: "Tableau des scores",
infoTitle: "Comment jouer ?", infoTitle: "Comment jouer ?",
gameOverTitle: "Perdu", gameOverTitle: "Perdu",
inactive_end_setting: "Couleur fin : ", inactive_end_setting: "Couleur objectif : ",
modeDeJeu : "Mode de jeu", modeDeJeu : "Mode de jeu",
niveau : "Niveau ", niveau : "Niveau ",
temps: "Temps : ", temps: "Temps : ",
@ -24,6 +24,12 @@ const lang = {
infoFirstTimeEtInfo1: "L'opérateur ET renvoie VRAI seulement si ses deux entrées sont à 1.<br><br><br> Voici la table de vérité :", infoFirstTimeEtInfo1: "L'opérateur ET renvoie VRAI seulement si ses deux entrées sont à 1.<br><br><br> Voici la table de vérité :",
infoFirstTimeOu: "Porte \"ou\"", infoFirstTimeOu: "Porte \"ou\"",
infoFirstTimeOuInfo1: "L'opérateur OU renvoie VRAI si au moins une entrés est à 1.<br><br><br> Voici la table de vérité :", infoFirstTimeOuInfo1: "L'opérateur OU renvoie VRAI si au moins une entrés est à 1.<br><br><br> Voici la table de vérité :",
infoFirstTimeinv: "Porte \"non\"",
infoFirstTimeinvInfo1: "La sortie est l'inverse de l'entrée.<br><br><br> Voici la table de vérité :",
cache_reinit:"Réinitialiser toutes les données en caches",
reset_cache_message: "Toutes les données ont été supprimées.<br><br><br> La page va automatiquement se rafraichir dans 3s ...",
reset: "Reset",
close_helps:"Ne plus afficher les aides",
}, },
en: { en: {

8
site/vue/js/logique.js
Unescape View File

@ -20,10 +20,14 @@ function giveSwitchYWithLineId(lineId){
function removeLineFromSwitch(lineId){ function removeLineFromSwitch(lineId){
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function(element){
if(stage.findOne("#"+element.id).id3 == lineId){ stage.findOne("#"+element.id).id3.forEach(function(element){
stage.findOne("#"+element.id).id3 = null; if(element == lineId){
ax = stage.findOne("#"+element.id).id3.indexOf(lineId);
stage.findOne("#"+element.id).id3.splice(ax, 1);
} }
}); });
});
} }
function removeLine(lineId){ function removeLine(lineId){

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

@ -76,8 +76,6 @@ function gameOne() {
//checkAllSortieLogique(); //checkAllSortieLogique();
} }
function createGameOne(niveau) { function createGameOne(niveau) {
windowWidth = window.innerWidth; windowWidth = window.innerWidth;
windowHeight = window.innerHeight; windowHeight = window.innerHeight;
@ -85,6 +83,7 @@ function createGameOne(niveau) {
var numberColonne2 = 1; var numberColonne2 = 1;
var isEtNonAllowed = false; var isEtNonAllowed = false;
var isOuNonAllowed = false; var isOuNonAllowed = false;
var isNotAllowed = false;
var isOuAllowed = false; var isOuAllowed = false;
var firstTime = []; var firstTime = [];
switch(niveauActuel) { switch(niveauActuel) {
@ -94,77 +93,76 @@ function createGameOne(niveau) {
case 2: case 2:
numberColonne1 = 2; numberColonne1 = 2;
numberColonne2 = 0; numberColonne2 = 0;
timeEnd = 5; timeEnd = 15;
break; break;
case 3: case 3:
numberColonne1 = 2; numberColonne1 = 2;
numberColonne2 = 1; numberColonne2 = 1;
timeEnd = 5; timeEnd = 15;
break; break;
case 4: case 4:
numberColonne1 = 4; numberColonne1 = 3;
numberColonne2 = 1; numberColonne2 = 1;
timeEnd = 5; timeEnd = 20;
break; break;
//Fin premiere serie //Fin premiere serie
case 5: case 5:
firstTime.push("ou"); firstTime.push("inv");
numberColonne1 = 1; isNotAllowed = true;
numberColonne2 = 0; timeEnd = 20;
isOuAllowed = true;
timeEnd = 5;
break; break;
case 6: case 6:
numberColonne1 = 2; numberColonne1 = 2;
numberColonne2 = 0; numberColonne2 = 0;
isOuAllowed = true; isNotAllowed = true;
timeEnd = 5; timeEnd = 20;
break; break;
case 7: case 7:
numberColonne1 = 2; numberColonne1 = 2;
numberColonne2 = 1; numberColonne2 = 1;
isOuAllowed = true; isNotAllowed = true;
timeEnd = 5; timeEnd = 20;
break; break;
case 8: case 8:
numberColonne1 = 3; numberColonne1 = 3;
numberColonne2 = 1; numberColonne2 = 1;
isOuAllowed = true; isNotAllowed = true;
timeEnd = 5; timeEnd = 20;
break; break;
case 9: case 9:
numberColonne1 = 5; numberColonne1 = 4;
numberColonne2 = 1; numberColonne2 = 1;
isOuAllowed = true; isNotAllowed = true;
timeEnd = 400; timeEnd = 20;
break; break;
case 10: case 10:
firstTime.push("ou");
break;
case 11: case 11:
isEtNonAllowed = true; isNotAllowed = true;
timeEnd = 4; isOuAllowed = true;
numberColonne1 = 3; numberColonne1 = 3;
numberColonne2 = 1;
timeEnd = 20;
break; break;
case 12: case 12:
case 13: case 13:
case 14: case 14:
isEtNonAllowed = true; isNotAllowed = true;
isOuNonAllowed = true; isOuAllowed = true;
timeEnd = 4;
numberColonne1 = 3; numberColonne1 = 3;
numberColonne2 = 1;
timeEnd = 20;
break; break;
default: default:
isEtNonAllowed = true; isEtNonAllowed = true;
isOuNonAllowed = true; isOuNonAllowed = true;
timeEnd = 3; timeEnd = 20;
numberColonne1 = 4; numberColonne1 = 4;
break; break;
} }
isTuto = false; isTuto = false;
stage = new Konva.Stage({ createStage("play_container");
container: 'play_container',
width: width,
height: height,
});
stage.add(layer); stage.add(layer);
colonneTot = 2; colonneTot = 2;
numberPerColonne = [numberColonne1, numberColonne2]; numberPerColonne = [numberColonne1, numberColonne2];
@ -175,10 +173,12 @@ function createGameOne(niveau) {
numberColonne2 = 0; numberColonne2 = 0;
numberPerColonne = [numberColonne1, numberColonne2]; numberPerColonne = [numberColonne1, numberColonne2];
liveColonneNumber.push([]); liveColonneNumber.push([]);
timeEnd = 5; timeEnd = 20;
insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0); insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0);
if(allowedInfoPorte){
openModal('firstTime' + firstTime[0]); openModal('firstTime' + firstTime[0]);
timer.pause(); timer.pause();
}
} else { } else {
for (let i = 0; i < colonneTot; i++) { for (let i = 0; i < colonneTot; i++) {
liveColonneNumber.push([]); liveColonneNumber.push([]);
@ -191,18 +191,22 @@ function createGameOne(niveau) {
if (isOuAllowed) x++; if (isOuAllowed) x++;
if (isEtNonAllowed) x++; if (isEtNonAllowed) x++;
if (isOuNonAllowed) x++; if (isOuNonAllowed) x++;
if (isNotAllowed) x++;
let numberRandom = getRandomArbitrary(0, x); let numberRandom = getRandomArbitrary(0, x);
switch (numberRandom) { switch (numberRandom) {
case 0: case 0:
type = "et"; type = "et";
break; break;
case 1: case 1:
type = "ou"; type = "inv";
break; break;
case 2: case 2:
type = "etnon"; type = "ou";
break; break;
case 3: case 3:
type = "etnon";
break;
case 4:
type = "nonou"; type = "nonou";
break; break;
} }
@ -214,8 +218,10 @@ function createGameOne(niveau) {
logiques.forEach(function (element) { logiques.forEach(function (element) {
createLinkAuto(element.name); createLinkAuto(element.name);
}); });
calculNombreSwitch(); calculNombreSwitch();
switchCreator(numberOfSwitch); switchCreator(numberOfSwitch);
createAllLinkSwitch(); createAllLinkSwitch();
initAllSwitch(); initAllSwitch();
@ -226,31 +232,26 @@ function createGameOne(niveau) {
checkAllSortieLogique(); checkAllSortieLogique();
}
window.addEventListener('resize', changeCanvas);
window.addEventListener('resize', changeStage);
var rtime;
var timeout = false;
function changeCanvas() {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, 200);
} }
function resetCache(){
openModal("reset_cache");
setTimeout(() => { location.reload(); }, 3000);
} }
window.addEventListener('resize', saveStage);
function saveStage() { function saveStage() {
resetAllTabs(true); resetAllTabs(true);
stage = new Konva.Stage({ if(isTuto){
container: 'play_container', createStage("setting_container");
width: width, }else{
height: height, createStage("play_container");
}); }
stage.add(layer); stage.add(layer);
logique2 = logiques; logique2 = logiques;
console.log(logique2);
logiques = []; logiques = [];
var logiqueCount = 0; var logiqueCount = 0;
for (let i = 0; i < colonneTot; i++) { for (let i = 0; i < colonneTot; i++) {
@ -258,7 +259,6 @@ function saveStage() {
} }
for (let i = 0; i < colonneTot; i++) { for (let i = 0; i < colonneTot; i++) {
for (let j = 0; j < numberPerColonne[i]; j++) { for (let j = 0; j < numberPerColonne[i]; j++) {
console.log(numberPerColonne[i]);
insertLogiqueColonne("logique" + logiqueCount, logique2[logiqueCount].type, i); insertLogiqueColonne("logique" + logiqueCount, logique2[logiqueCount].type, i);
logiqueCount++; logiqueCount++;
} }
@ -277,27 +277,8 @@ function saveStage() {
checkAllSortieLogique(); checkAllSortieLogique();
} }
function resizeend() { function showInfo(){
if (new Date() - rtime < 200) { if(document.querySelector("#info_check_input").checked) allowedInfoPorte = false;
setTimeout(resizeend, 200); else allowedInfoPorte = true;
} else {
timeout = false;
saveStage();
}
}
function changeStage() {
if (window.innerWidth <= 900) {
if (!mobile) {
console.log("mobile");
stage.rotate(90);
stage.x(stage.getX() + stage.height());
mobile = true;
}
} else {
stage.scaleX(window.innerWidth / windowWidth);
stage.scaleY(window.innerHeight / windowHeight);
}
stage.draw();
} }

14
site/vue/js/progress.js
Unescape View File

@ -0,0 +1,14 @@
const level = {
1:{
timeEnd: 20,
firstTime: "et",
numberColonne1 : 1,
numberColonne2 : 0,
},
2:{
timeEnd:20,
firstTime : null,
numberColonne1 : 2,
numberColonne2 : 0,
}
}

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

@ -1,23 +1,29 @@
function initTimer() { function initTimer() {
var TimerElem = document.querySelector(".timer_bar"); document.querySelector(".timer_txt").innerHTML = timeEnd - timer.getTimeValues().seconds;
TimerElem.style.width = "0%";
let seconds = timeEnd;
document.getElementById("timerend").innerHTML = " / " + seconds + " s";
} }
function move() { function move() {
var lapsPerSecond = 100 / timeEnd; document.querySelector(".timer_txt").innerHTML = timeEnd - timer.getTimeValues().seconds;
var TimerElem = document.querySelector(".timer_bar"); switch(timeEnd - timer.getTimeValues().seconds){
TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond) + "%"; case 5:
case 4:
document.querySelector(".timer_txt").style.color = "#eca1a6";
break;
case 3:
case 2:
case 1:
case 0:
document.querySelector(".timer_txt").style.color = "#c94c4c";
break;
default:
document.querySelector(".timer_txt").style.color = document.querySelector("#modeDeJeu").style.color;
}
} }
var timer = new easytimer.Timer(); var timer = new easytimer.Timer();
timer.start(); timer.start();
timer.addEventListener('secondsUpdated', function (e) { timer.addEventListener('secondsUpdated', function (e) {
if (timer.getTimeValues().seconds <= timeEnd) { if (timer.getTimeValues().seconds <= timeEnd) {
document.getElementById("timer").innerHTML = timer.getTimeValues().seconds.toString() + " s";
move(); move();
} else { } else {
timeTot = timeTot + timer.getTimeValues().seconds; timeTot = timeTot + timer.getTimeValues().seconds;

19
site/vue/todo.todo
Unescape View File

@ -7,27 +7,36 @@ Responsive :
`Piste`e canvas soit plus grand de base et le redimensionner par la suite (produit en croix pour simplement le repositionner => taille de base *4/5 puis on redivise) `Piste`e canvas soit plus grand de base et le redimensionner par la suite (produit en croix pour simplement le repositionner => taille de base *4/5 puis on redivise)
Faire en sorte que l Faire en sorte que l
Suite : Suite :
☐ Changer de direction lorsqu'on atteint un certain format ✔ Changer de direction lorsqu'on atteint un certain format @done(20-06-18 11:27)
`Piste` `Piste`
Quand la largeur est inférieur à la hauteur ??? Quand la largeur est inférieur à la hauteur ???
En dessous d'un certains nombre de pixels ??? Attention aux téléphone haute résolution En dessous d'un certains nombre de pixels ??? Attention aux téléphone haute résolution
Paramètres : Paramètres :
Choix du types de porte : Choix du types de porte :
☐ Refaire les portes dans le canvas avec un rectangle qui a à l'intérieur du text ou une image ☐ Refaire les portes dans le canvas avec un rectangle qui a à l'intérieur du text ou une image //Mouai
Impossible je pense
☐ Ajouter au menu des paramètres la possibilité de choisir entre les 2 types de portes ☐ Ajouter au menu des paramètres la possibilité de choisir entre les 2 types de portes
☐ Mettre tout les types de portes dans la prévisualisation ☐ Mettre tout les types de portes dans la prévisualisation
Site :
Ajouter la sauvegarde dans le cache :
☐ Faire une affiche qui demande le pseudo du joueur si il se connecte pour la première fois
☐ Sauvegarder les infos des paramètres dans le cache et les récupérer au redémarrage de la page
☐ Supprimer le cache lors du clique sur le bouton
Jeu : Jeu :
☐ Refaire entièrement le "not" pour éviter la fuite de mémoire ✔ Refaire entièrement le "not" pour éviter la fuite de mémoire @done(20-06-18 12:44)
☐ Ajouter la possibilité qu'une sortie puisse acceuillir plusieurs lignes ☐ Eviter les croisements de fils
✔ Ajouter la possibilité qu'une sortie puisse acceuillir plusieurs lignes @done(20-06-18 15:37)
`Piste` `Piste`
Remplacer l'id3 par une liste d'id3 qu'on parcourerait Remplacer l'id3 par une liste d'id3 qu'on parcourerait
☐ Faire en sorte que les portes d'une colonne autres que la 1ere n'ai que des lignes qui viennent de porte et non des switchs ☐ Faire en sorte que les portes d'une colonne autres que la 1ere n'ai que des lignes qui viennent de porte et non des switchs
UI/UX : UI/UX :
☐ Trouver une police d'écriture bien pour le jeu ☐ Trouver une police d'écriture bien pour le jeu
☐ Changer la bar de temps pour que ce soit fluide ✔ Changer la bar de temps pour que ce soit fluide @done(20-06-18 12:04)
✔ Refaire les carrés de séléctions des couleurs @done(20-06-18 17:11)
☐ Corriger les fautes d'orthographes ☐ Corriger les fautes d'orthographes
☐ Faire la traduction en anglais ☐ Faire la traduction en anglais
Write Preview
Loading…
Cancel
Save