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

correction de nombreux bugs, éviter plusieurs croisements de fils, petite popup pour regarder le schéma une fois réussi

Browse Source
master
pisouvigne 5 years ago
parent 67df059791
commit a72b29a811
10 changed files with 409 additions and 149 deletions
Show Stats Download Patch File Download Diff File

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

@ -8,6 +8,10 @@
src: url(../font/dys.otf); src: url(../font/dys.otf);
} }
:root {
--cool-color: #fe8a71;
}
* { * {
transition: .01s; transition: .01s;
} }
@ -385,6 +389,7 @@ hr {
background-color: lightcoral; background-color: lightcoral;
cursor: pointer; cursor: pointer;
} }
.input-color-container { .input-color-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -393,20 +398,36 @@ hr {
border: solid 2px #ddd; border: solid 2px #ddd;
border-radius: 40px; border-radius: 40px;
} }
input[type=color]{
input[type=color] {
position: absolute; position: absolute;
right: -8px; right: -8px;
top: -8px; top: -8px;
width: 56px; width: 56px;
height: 56px; height: 56px;
border: none; border: none;
} }
.input_line{ .input_line {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.colomn_line_input{
margin-right:25px; .colomn_line_input {
margin-left:25px; margin-right: 25px;
margin-left: 25px;
}
#button_next_level {
height: 50px;
width: 150px;
transition: 0.5s;
}
#button_next_level:hover {
cursor: pointer;
}
#show_stage {
margin: 0 20px 0 20px;
} }

87
site/vue/index.html
Unescape View File

@ -12,6 +12,21 @@
<body id="body" class="background"> <body id="body" class="background">
<!--Play Page--> <!--Play Page-->
<div id="playPage"> <div id="playPage">
<div id="success" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background success_modal_body" align=center>
<span class="close" onclick="closeModal('success');nextLevel();">&times;</span>
<h1 class="txt dys" id="successTitle"></h1>
<hr id="hr">
<p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a></p>
<div id="show_stage" class="border"></div><br>
<button class="border dys background color" id="button_next_level" onmouseover="hoverButton()"
onclick="closeModal('success');nextLevel();">Niveau suivant</button><br><br>
<p class="dys info_check" align=right>Toujours afficher ce panneau <input type="checkbox"
id="success_check_input" onclick="successCheck();" checked></p>
</div>
</div>
</div>
<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>
@ -20,36 +35,37 @@
<hr id="hr"> <hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p> <p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p>
<table class="veriteTable dys"> <table class="veriteTable dys">
<tr> <tr>
<th class="border">a</th> <th class="border">a</th>
<th class="border">b</td> <th class="border">b</td>
<th class="border">S</th> <th class="border">S</th>
</tr> </tr>
<tr> <tr>
<td class="border">0</td> <td class="border">0</td>
<td class="border">0</td> <td class="border">0</td>
<td class="border">0</td> <td class="border">0</td>
</tr> </tr>
<tr> <tr>
<td class="border">0</td> <td class="border">0</td>
<td class="border">1</td> <td class="border">1</td>
<td class="border">0</td> <td class="border">0</td>
</tr> </tr>
<tr> <tr>
<td class="border">1</td> <td class="border">1</td>
<td class="border">0</td> <td class="border">0</td>
<td class="border">0</td> <td class="border">0</td>
</tr> </tr>
<tr> <tr>
<td class="border">1</td> <td class="border">1</td>
<td class="border">1</td> <td class="border">1</td>
<td class="border">1</td> <td class="border">1</td>
</tr> </tr>
</table> </table>
<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> <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>
@ -61,36 +77,37 @@
<hr id="hr"> <hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p> <p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p>
<table class="veriteTable dys"> <table class="veriteTable dys">
<tr> <tr>
<th class="border">a</th> <th class="border">a</th>
<th class="border">b</td> <th class="border">b</td>
<th class="border">S</th> <th class="border">S</th>
</tr> </tr>
<tr> <tr>
<td class="border">0</td> <td class="border">0</td>
<td class="border">0</td> <td class="border">0</td>
<td class="border">0</td> <td class="border">0</td>
</tr> </tr>
<tr> <tr>
<td class="border">0</td> <td class="border">0</td>
<td class="border">1</td> <td class="border">1</td>
<td class="border">1</td> <td class="border">1</td>
</tr> </tr>
<tr> <tr>
<td class="border">1</td> <td class="border">1</td>
<td class="border">0</td> <td class="border">0</td>
<td class="border">1</td> <td class="border">1</td>
</tr> </tr>
<tr> <tr>
<td class="border">1</td> <td class="border">1</td>
<td class="border">1</td> <td class="border">1</td>
<td class="border">1</td> <td class="border">1</td>
</tr> </tr>
</table> </table>
<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> <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>
@ -102,28 +119,30 @@
<hr id="hr"> <hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p> <p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p>
<table class="veriteTable dys"> <table class="veriteTable dys">
<tr> <tr>
<th class="border">a</th> <th class="border">a</th>
<th class="border">S</th> <th class="border">S</th>
</tr> </tr>
<tr> <tr>
<td class="border">0</td> <td class="border">0</td>
<td class="border">1</td> <td class="border">1</td>
</tr> </tr>
<tr> <tr>
<td class="border">1</td> <td class="border">1</td>
<td class="border">0</td> <td class="border">0</td>
</tr> </tr>
</table> </table>
<br><br> <br><br>
<p><img src="img/not_test.png" class="margin-right"><img src="img/not_test.png"></p> <p><img src="img/not_test.png" class="margin-right"><img src="img/not_test.png"></p>
<br><br> <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> <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>
<div class="timer_show dys border"><span class="timer_txt"></span></div> <div class="timer_show dys border"><span class="timer_txt"></span></div>
<p id="modeDeJeu" class="txt dys"></p> <p id="modeDeJeu" class="txt dys"></p>
@ -268,11 +287,14 @@
<hr id="hr"> <hr id="hr">
<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"
<p class="dys"><a class="dys">Vous avez fait un temps total de </a><a class="dys" id="TempsTotGameOver">40</a> s</p> id="scoreTotGameOver">140</a></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>
<br> <br>
<hr id="hr"> <hr id="hr">
<br> <br>
@ -358,6 +380,7 @@
</div> </div>
</body> </body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script> <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
<script src="js/const.js"></script> <script src="js/const.js"></script>
<script src="js/lang.js"></script> <script src="js/lang.js"></script>

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

@ -1,5 +1,5 @@
//Portes Logiques //Portes Logiques
var imageHeight = 75/2; var imageHeight = 75 / 2;
var imageWidth = 50; var imageWidth = 50;
var imageRotation = 0; var imageRotation = 0;
@ -19,6 +19,7 @@ var colorLineInnactive = "black";
var colorLineActive = "#4CFEFE";//FFF033 var colorLineActive = "#4CFEFE";//FFF033
const lineStroke = 4; const lineStroke = 4;
const pourcentageBreak = 15; const pourcentageBreak = 15;
const tension = 0.3;
//switch //switch
const SwitchHeight = 25; const SwitchHeight = 25;
@ -51,3 +52,9 @@ var windowHeight = 0;
var mobile = false; var mobile = false;
var allowedInfoPorte = true; var allowedInfoPorte = true;
var double = false;
var click = 0;
var successPanel = true;

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

@ -32,6 +32,7 @@ function createSwitch(id, x, y) {
id: id, id: id,
x: x, x: x,
y: y, y: y,
id3: [],
}; };
switchsInfo.push(switche); switchsInfo.push(switche);
switchsInfoCopy.push(switche); switchsInfoCopy.push(switche);
@ -62,6 +63,7 @@ function createLine(points, id) {
stroke: colorLineInnactive, stroke: colorLineInnactive,
strokeWidth: lineStroke, strokeWidth: lineStroke,
id: id, id: id,
tension: tension,
}); });
layer.add(line); layer.add(line);
} }
@ -91,13 +93,14 @@ function createLink(entre, sortie) {
setLine(sortie, "id1", "line" + lineId); setLine(sortie, "id1", "line" + lineId);
let truc = entre.x; let truc = entre.x;
entre.id3 = "line" + lineId; getSwitchById(entre.id()).id3.push("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; getSwitchById(entre.id()).id3.push("line" + lineId);
break; break;
} }
} }
@ -135,9 +138,9 @@ function createLink(entre, sortie) {
break; break;
} }
break; break;
default: default:
console.log("error"); console.log("error");
break; break;
} }
} }
@ -221,14 +224,14 @@ function createLinkSwitch() {
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.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{ } else {
if (element.id1 == null) { if (element.id1 == null) {
if (element.x < distance) { if (element.x < distance) {
logique = element; logique = element;
@ -272,7 +275,7 @@ function getNumberOfSwitchEmpty() {
} }
function createAllLinkSwitch() { function createAllLinkSwitch() {
for(let i = 0; i < numberOfSwitch;i++){ for (let i = 0; i < numberOfSwitch; i++) {
createLinkSwitch(); createLinkSwitch();
} }
/*while (getNumberOfSwitchEmpty() > 0) { /*while (getNumberOfSwitchEmpty() > 0) {
@ -312,8 +315,8 @@ function createLinkAuto(logiqueId) {
} }
function createStage(container) { function createStage(container) {
height = document.querySelector("#"+container).offsetHeight; height = document.querySelector("#" + container).offsetHeight;
width = document.querySelector("#"+container).offsetWidth; width = document.querySelector("#" + container).offsetWidth;
if (window.innerWidth <= 900) { if (window.innerWidth <= 900) {
if (!mobile) { if (!mobile) {
mobile = true; mobile = true;
@ -321,22 +324,22 @@ function createStage(container) {
container: container, container: container,
width: height, width: height,
height: width, height: width,
rotation:90, rotation: 90,
x:height, x: height,
}); });
} }
stage = new Konva.Stage({ stage = new Konva.Stage({
container: container, container: container,
width: height, width: height,
height: width, height: width,
rotation:90, rotation: 90,
x:height, x: height,
}); });
} else { } else {
if (mobile) { if (mobile) {
mobile = false; mobile = false;
}else{ } else {
stage = new Konva.Stage({ stage = new Konva.Stage({
container: container, container: container,
width: width, width: width,

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

@ -50,6 +50,10 @@ function setColor(color) {
document.querySelectorAll(".border").forEach(function (element) { document.querySelectorAll(".border").forEach(function (element) {
element.style.border = "5px solid" + whiteColor; element.style.border = "5px solid" + whiteColor;
}); });
document.querySelectorAll(".color").forEach(function (element) {
element.style.color = whiteColor;
});
} else { } else {
document.body.style.color = blackColor; document.body.style.color = blackColor;
@ -65,11 +69,27 @@ function setColor(color) {
document.querySelectorAll(".border").forEach(function (element) { document.querySelectorAll(".border").forEach(function (element) {
element.style.border = "5px solid" + blackColor; element.style.border = "5px solid" + blackColor;
}); });
document.querySelectorAll(".color").forEach(function (element) {
element.style.color = blackColor;
});
} }
//fun //fun
document.querySelector(".secret").style.color = "#fe8a71"; document.querySelector(".secret").style.color = "#fe8a71";
} }
document.querySelector("#button_next_level").onmouseover = function () { mouseOver() };
document.querySelector("#button_next_level").onmouseout = function () { mouseOut() };
function mouseOver() {
document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.backgroundColor;
}
function mouseOut() {
document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor;
document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.borderColor;
}
function setLang(newLang) { function setLang(newLang) {
var textToChange = document.querySelectorAll(".txt"); var textToChange = document.querySelectorAll(".txt");
if (newLang === "fr") { if (newLang === "fr") {
@ -115,9 +135,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"){ if (lineId === "id3") {
element[objectKey].push(lineName); element[objectKey].push(lineName);
}else } else
element[objectKey] = lineName; element[objectKey] = lineName;
} }
}); });
@ -125,7 +145,7 @@ function setLine(logiqueElement, lineId, lineName) {
}); });
} }
function changeSwitchColor(switchId){ function changeSwitchColor(switchId) {
let swi = stage.findOne("#" + switchId); let swi = stage.findOne("#" + switchId);
var colorswi = swi.fill() == colorSwitchActiveBackground ? colorSwitchInnactiveBackground : colorSwitchActiveBackground; var colorswi = swi.fill() == colorSwitchActiveBackground ? colorSwitchInnactiveBackground : colorSwitchActiveBackground;
swi.fill(colorswi); swi.fill(colorswi);
@ -156,6 +176,71 @@ function checkAllSortieLogique() {
}); });
} }
function getSwitchById(switchId) {
let switche;
switchsInfoCopy.forEach(function (element) {
if (element.id == switchId)
switche = element;
});
return switche;
}
function checkEntreCroisement(logiqueId) {
let croisement = false;
let logique = findLogique(logiqueId);
if (logique.id1 != null && logique.id2 != null) {
if (stage.findOne("#" + logique.id1).points()[1] > stage.findOne("#" + logique.id2).points()[1]) {
if (getSwitchFromLine(logique.id1) != null && getSwitchFromLine(logique.id2) != null) {
let switch1 = getSwitchFromLine(logique.id1).id;
let switch2 = getSwitchFromLine(logique.id2).id;
removeLine(logique.id1);
removeLine(logique.id2);
logique.id1 = null;
logique.id2 = null;
createLink(stage.findOne("#" + switch1), logique);
createLink(stage.findOne("#" + switch2), logique);
} else if (getLogiqueFromLine(logique.id1) != null && getLogiqueFromLine(logique.id2) != null) {
console.log("blem la ");
let logique1 = getLogiqueFromLine(logique.id1);
let logique2 = getLogiqueFromLine(logique.id2);
removeLine(logique.id1);
removeLine(logique.id2);
logique.id1 = null;
logique.id2 = null;
createLink(logique1, logique);
createLink(logique2, logique);
}
else {
console.log("wait");
}
croisement = true;
}
}
return croisement;
}
function getLogiqueFromLine(lineId) {
var logique = null;
logiques.forEach(function (element) {
element.id3.forEach(function (line) {
if (line == lineId) logique = element;
})
});
return logique;
}
function getSwitchFromLine(lineId) {
var switche = null;
switchsInfoCopy.forEach(function (element) {
element.id3.forEach(function (line) {
if (line == lineId) switche = element;
});
});
return switche;
}
function checkSortieLogique(logiqueId) { function checkSortieLogique(logiqueId) {
let logique = findLogique(logiqueId); let logique = findLogique(logiqueId);
logiques.forEach(function (element, index) { logiques.forEach(function (element, index) {
@ -226,6 +311,21 @@ function checkSortieLogique(logiqueId) {
}); });
} }
function isLineCollapsing() {
var isCollapsing = false;
if (stage.findOne("#s2") != undefined && stage.findOne("#s2") != null && stage.findOne("#s1") != undefined && stage.findOne("#s1") != null) {
var distance = stage.findOne("#s2").getY() - stage.findOne("#s1").getY();
switchsInfoCopy.forEach(function (element) {
element.id3.forEach(function (line) {
if (Math.abs(element.y - stage.findOne("#" + line).points()[7]) > distance) {
isCollapsing = true;
}
})
});
}
return isCollapsing;
}
function getRandomArbitrary(min, max) { function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min); return Math.floor(Math.random() * (max - min) + min);
} }
@ -244,22 +344,70 @@ function checkLineSwitch(switchId) {
return false; return false;
} }
function activeSwitch(idSwitch) {
getSwitchById(idSwitch);
var switche = getSwitchById(idSwitch);
changeSwitchColor(switche.id);
switche.id3.forEach(function (element) {
changeLineColor(element);
});
}
function checkIfEnd() {
var ter = true;
endLines.forEach(function (element) {
if (stage.findOne("#line" + element).stroke() == colorLineInnactive) {
ter = false;
}
});
return ter;
}
function checkEnd() { function checkEnd() {
let ter = true; let ter = true;
endLines.forEach(function (element) { endLines.forEach(function (element) {
if (stage.findOne("#line" + element).stroke() == "black") { if (stage.findOne("#line" + element).stroke() == colorLineInnactive) {
ter = false; ter = false;
} }
}); });
if (ter && !isTuto) { if (ter && !isTuto) {
setTimeout(() => { nextLevel(); }, 100); setTimeout(() => { success(); }, 100);
} }
} }
function success() {
timeTot = timeTot + timer.getTimeValues().seconds;
timer.stop();
stage.findOne("#end").fill("yellow");
layer.draw();
if (successPanel) {
openModal("success");
document.querySelector("#click_number").innerHTML = click;
var previewStage = new Konva.Stage({
container: 'show_stage',
width: window.innerWidth / 1.5,
height: window.innerHeight / 2.5,
scaleX: 1 / 1.5,
scaleY: 1 / 1.5
});
let previewLayer = layer.clone({ hitGraphEnabled: false });
previewStage.add(previewLayer);
previewLayer.batchDraw();
} else {
setTimeout(() => { nextLevel(); }, 1000);
}
}
function successCheck() {
if (document.querySelector("#success_check_input").checked === true) successPanel = true;
else successPanel = false;
}
function nextLevel() { function nextLevel() {
niveauActuel++; niveauActuel++;
timeTot = timeTot + timer.getTimeValues().seconds;
launchGameOne(); launchGameOne();
} }

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

@ -1,9 +1,10 @@
function initAllSwitch() { 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()); click++;
changeLineColor(switche.id3); activeSwitch(switche.id());
checkAllSortieLogique(); checkAllSortieLogique();
layer.draw(); layer.draw();
checkEnd(); checkEnd();
@ -15,14 +16,11 @@ function initAllSwitch() {
document.body.style.cursor = "default"; document.body.style.cursor = "default";
}); });
//faire le random de l'inversion de switch //faire le random de l'inversion de switch
if(getRandomArbitrary(0,3) == 1){ if (getRandomArbitrary(0, 3) == 1) {
changeSwitchColor(switche.id()); activeSwitch(switche.id());
changeLineColor(switche.id3);
} }
}); });
} }
function initLayer() { function initLayer() {
@ -40,7 +38,7 @@ function initEnd() {
var listeLogique = []; var listeLogique = [];
let countLogique = 0; let countLogique = 0;
logiques.forEach(function (element) { logiques.forEach(function (element) {
if(element.id3.length === 0) { if (element.id3.length === 0) {
countLogique++; countLogique++;
listeLogique.push(element); listeLogique.push(element);
} }
@ -48,8 +46,7 @@ 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) {
createLink(element, end); createLink(element, end);
}); });
} }

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

@ -9,16 +9,16 @@ 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 lignes actives", active_line_setting: "Couleur lignes actives",
inactive_line_setting : "Couleur lignes inactives", inactive_line_setting: "Couleur lignes inactives",
active_switch_setting : "Couleur intérupteur actif", active_switch_setting: "Couleur intérupteur actif",
inactive_switch_setting : "Couleur intérupteur 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 objectif : ", inactive_end_setting: "Couleur objectif : ",
modeDeJeu : "Mode de jeu", modeDeJeu: "Mode de jeu",
niveau : "Niveau ", niveau: "Niveau ",
temps: "Temps : ", temps: "Temps : ",
infoFirstTimeEt: "Porte \"et\"", infoFirstTimeEt: "Porte \"et\"",
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é :",
@ -26,10 +26,12 @@ const lang = {
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\"", infoFirstTimeinv: "Porte \"non\"",
infoFirstTimeinvInfo1: "La sortie est l'inverse de l'entrée.<br><br><br> Voici la table de vérité :", 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", 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_cache_message: "Toutes les données ont été supprimées.<br><br><br> La page va automatiquement se rafraichir dans 3s ...",
reset: "Reset", reset: "Reset",
close_helps:"Ne plus afficher les aides", close_helps: "Ne plus afficher les aides",
successTitle: "Niveau réussi !",
successInfo: "Vous avez réussi en ",
}, },
en: { en: {
@ -40,17 +42,17 @@ const lang = {
mode2: "Chameleon", mode2: "Chameleon",
themeDark: "Dark Theme :", themeDark: "Dark Theme :",
retour: "Back", retour: "Back",
dysfont:"Dyslexia :", dysfont: "Dyslexia :",
setting_title_perso: "Game customization", setting_title_perso: "Game customization",
active_line_setting : "Color active lines : ", active_line_setting: "Color active lines : ",
inactive_line_setting : "Color inactive lines : ", inactive_line_setting: "Color inactive lines : ",
active_switch_setting : "Color inactive switch : ", active_switch_setting: "Color inactive switch : ",
inactive_switch_setting : "Color inactive switchs : ", inactive_switch_setting: "Color inactive switchs : ",
scoreTitle: "Scoreboard", scoreTitle: "Scoreboard",
infoTitle: "How to play ?", infoTitle: "How to play ?",
inactive_end_setting: "End color : ", inactive_end_setting: "End color : ",
modeDeJeu : "Gamemode", modeDeJeu: "Gamemode",
niveau : "Level ", niveau: "Level ",
temps: "Time : ", temps: "Time : ",
gameOverTitle: "Game Over", gameOverTitle: "Game Over",
} }

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

@ -8,42 +8,55 @@ function findLogique(logiqueId) {
return elem; return elem;
} }
function giveSwitchYWithLineId(lineId){ function giveSwitchYWithLineId(lineId) {
var elementY = null; var elementY = null;
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function (element) {
if(stage.findOne("#"+element.id).id3 == lineId){ if (stage.findOne("#" + element.id).id3 == lineId) {
elementY = (element.y); elementY = (element.y);
} }
}); });
return elementY; return elementY;
} }
function removeLineFromSwitch(lineId){ function removeLineFromSwitch(lineId) {
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function (element) {
stage.findOne("#"+element.id).id3.forEach(function(element){ element.id3.forEach(function (line) {
if(element == lineId){ if (line == lineId) {
ax = stage.findOne("#"+element.id).id3.indexOf(lineId); ax = element.id3.indexOf(lineId);
stage.findOne("#"+element.id).id3.splice(ax, 1); element.id3.splice(ax, 1);
} }
}); });
}); });
} }
function removeLineFromLogique(lineId) {
logiques.forEach(function (element) {
element.id3.forEach(function (line) {
if (line == lineId) {
ax = element.id3.indexOf(lineId);
element.id3.splice(ax, 1);
}
});
});
}
function removeLine(lineId){ function removeLine(lineId) {
//remove from switch //remove from switch
removeLineFromSwitch(lineId); if (getSwitchFromLine(lineId) != null)
removeLineFromSwitch(lineId);
else
removeLineFromLogique(lineId);
let line = stage.findOne("#" + lineId); let line = stage.findOne("#" + lineId);
line.destroy(); line.destroy();
} }
function giveLineId(logiqueId,entre) { function giveLineId(logiqueId, entre) {
var newEntre = entre; var newEntre = entre;
isSwitch = false; isSwitch = false;
if(entre.id !== undefined){ if (entre.id !== undefined) {
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function (element) {
if(entre.id() == element.id){ if (entre.id() == element.id) {
isSwitch = true; isSwitch = true;
newEntre = element; newEntre = element;
} }
@ -51,7 +64,7 @@ function giveLineId(logiqueId,entre) {
} }
let lineId = null; let lineId = null;
let logique = findLogique(logiqueId); let logique = findLogique(logiqueId);
if(logique.y >= newEntre.y){ if (logique.y >= newEntre.y) {
if (logique.type === "inv") { if (logique.type === "inv") {
if (logique.id1 == null) { if (logique.id1 == null) {
lineId = "id1"; lineId = "id1";
@ -74,7 +87,7 @@ function giveLineId(logiqueId,entre) {
}*/ }*/
} }
} }
}else{ } else {
if (logique.type === "inv") { if (logique.type === "inv") {
if (logique.id1 == null) { if (logique.id1 == null) {
lineId = "id1"; lineId = "id1";
@ -98,11 +111,11 @@ function checkLogiqueLines(logiqueId, lineId) {
let logique = findLogique(logiqueId); let logique = findLogique(logiqueId);
logiques.forEach(function (element, index) { logiques.forEach(function (element, index) {
if (element.name === logique.name) { if (element.name === logique.name) {
Object.keys(element).map(function(objectKey, index) { Object.keys(element).map(function (objectKey, index) {
if(objectKey == lineId && objectKey != null){ if (objectKey == lineId && objectKey != null) {
return true; return true;
} }
}); });
} }
}); });
return false; return false;

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

@ -45,6 +45,9 @@ function tutoCreateLayer() {
initEnd(); initEnd();
} }
width = (window.innerWidth - window.innerWidth / 100 * 10);
height = window.innerHeight / 1.5;
function resetAllTabs(save) { function resetAllTabs(save) {
if (!save) { if (!save) {
logiques = []; logiques = [];
@ -52,23 +55,27 @@ function resetAllTabs(save) {
numberPerColonne = []; numberPerColonne = [];
liveColonneNumber = []; liveColonneNumber = [];
timeEnd = 5; timeEnd = 5;
switchsInfoCopy = [];
numberOfSwitch = 0; numberOfSwitch = 0;
colonneTot = 0; colonneTot = 0;
} }
switchs = [], lineCount = [], lines = [], endLines = [], end, switchsInfo = [], lineRemove = []; switchs = [], lineCount = [], lines = [], endLines = [], end, switchsInfo = [], lineRemove = [], switchsInfoCopy = [];
width = (window.innerWidth - window.innerWidth / 100 * 10);
height = window.innerHeight / 1.5;
layer.destroyChildren(); layer.destroyChildren();
stage.draw();
} }
function gameOne() { function gameOne() {
document.querySelector("#play_container").style.maxHeight = window.innerHeight / 1.5 + "px";
createGameOne(niveauActuel); createGameOne(niveauActuel);
click = 0;
while (checkIfEnd() || isLineCollapsing()) {
resetAllTabs(false);
createGameOne(niveauActuel);
}
//console.log(stage); //console.log(stage);
//gameData = new GameData(height,width,2,10,"mode1",false,"play_container"); //gameData = new GameData(height,width,2,10,"mode1",false,"play_container");
//gameData.createGame(); //gameData.createGame();
@ -85,8 +92,9 @@ function createGameOne(niveau) {
var isOuNonAllowed = false; var isOuNonAllowed = false;
var isNotAllowed = false; var isNotAllowed = false;
var isOuAllowed = false; var isOuAllowed = false;
double = false;
var firstTime = []; var firstTime = [];
switch(niveauActuel) { switch (niveauActuel) {
case 1: case 1:
firstTime.push("et"); firstTime.push("et");
break; break;
@ -133,6 +141,7 @@ function createGameOne(niveau) {
numberColonne1 = 4; numberColonne1 = 4;
numberColonne2 = 1; numberColonne2 = 1;
isNotAllowed = true; isNotAllowed = true;
double = true;
timeEnd = 20; timeEnd = 20;
break; break;
case 10: case 10:
@ -175,7 +184,7 @@ function createGameOne(niveau) {
liveColonneNumber.push([]); liveColonneNumber.push([]);
timeEnd = 20; timeEnd = 20;
insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0); insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0);
if(allowedInfoPorte){ if (allowedInfoPorte) {
openModal('firstTime' + firstTime[0]); openModal('firstTime' + firstTime[0]);
timer.pause(); timer.pause();
} }
@ -218,6 +227,13 @@ function createGameOne(niveau) {
logiques.forEach(function (element) { logiques.forEach(function (element) {
createLinkAuto(element.name); createLinkAuto(element.name);
}); });
initEndGame();
}
function initEndGame() {
calculNombreSwitch(); calculNombreSwitch();
switchCreator(numberOfSwitch); switchCreator(numberOfSwitch);
@ -225,28 +241,41 @@ function createGameOne(niveau) {
createAllLinkSwitch(); createAllLinkSwitch();
initAllSwitch(); initAllSwitch();
logiques.forEach(function (element) {
checkEntreCroisement(element.name);
});
createEnd(); createEnd();
initEnd(); initEnd();
initTimer(); initTimer();
checkAllSortieLogique(); checkAllSortieLogique();
} }
function resetCache(){ function resetCache() {
openModal("reset_cache"); openModal("reset_cache");
setTimeout(() => { location.reload(); }, 3000); setTimeout(() => { location.reload(); }, 3000);
} }
window.addEventListener('resize', saveStage); window.addEventListener('resize', saveStage);
function getSwitchState() {
var stateSwitch = new Array();
switchsInfoCopy.forEach(function (element) {
if (stage.findOne("#" + element.id).fill() == colorSwitchActiveBackground) stateSwitch.push(1);
else stateSwitch.push(0);
});
return stateSwitch;
}
function saveStage() { function saveStage() {
var oldSwitch = getSwitchState();
resetAllTabs(true); resetAllTabs(true);
if(isTuto){ if (isTuto) {
createStage("setting_container"); createStage("setting_container");
}else{ } else {
createStage("play_container"); createStage("play_container");
} }
@ -266,19 +295,25 @@ function saveStage() {
logiques.forEach(function (element) { logiques.forEach(function (element) {
createLinkAuto(element.name); createLinkAuto(element.name);
}); });
calculNombreSwitch();
switchCreator(numberOfSwitch);
createAllLinkSwitch();
initAllSwitch(); initEndGame();
createEnd();
initEnd();
for (let i = 0; i < oldSwitch.length; i++) {
let id = i + 1;
if (oldSwitch[i] == 1) {
if (stage.findOne("#s" + id).fill() == colorSwitchInnactiveBackground)
activeSwitch("s" + id);
} else {
if (stage.findOne("#s" + id).fill() == colorSwitchActiveBackground)
activeSwitch("s" + id);
}
}
checkAllSortieLogique(); checkAllSortieLogique();
} }
function showInfo(){ function showInfo() {
if(document.querySelector("#info_check_input").checked) allowedInfoPorte = false; if (document.querySelector("#info_check_input").checked) allowedInfoPorte = false;
else allowedInfoPorte = true; else allowedInfoPorte = true;
} }

11
site/vue/txt
Unescape View File

@ -0,0 +1,11 @@
Au depart j'avais une idée assez flou du jeu que j'allais réaliser, j'ai d'abord commencer par imaginer fonctionnement, en m'inspirant de l'application mobile Make It True.
J'ai par la suite essayé de réaliser des schéma simple et des circuit court afin de comprendre comment j'allais pouvoir réaliser des circuits plus complexe et comment j'allais m'organiser.
Une fois la réalisation des circuit faites, je devais me pencher sur un mécanisme de fonctionnement, le programme allez devoir créer des niveaux par lui même, et qui soit jouable sur n'importe qu'elle résolution d'écrans.
J'ai d'abord commencer par m'imaginer une grille, composer de lignes et de colonnes, chaque colonne correspond à chaque étapes. la première etant les intérupteur et la derniere la fin/l'objectif.
des portes logiques de même colonne ne peuvent pas êtres connecté les uns vers les autres.
Par la suite, j'ai eu des soucis, le générateur fonctionnent, je n'avais pas pensé a certains problèmes, comme le fait que les niveaux pouvaient être déjà terminé, ou bien que les fils se croisent.
Pour le croisement des fils j'ai découpé cela en plusieurs étapes.
Premierement, pour le choix d'accrochage, il choisit par défault la porte logique qui se rapproche le plus de son Y.
Mais même avec ceci il restait des problèmes de connection et de fil qui se croisaient, comme quand les distances étaient les mêmes pour 2 portes,
Pour cela j'ai tout simplement créer un converteur qui inverse les 2 entrees.
Write Preview
Loading…
Cancel
Save