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

fix de quelques trucs

Browse Source
master
pisouvigne 5 years ago
parent 8b2aa8f905
commit c28d06ceff
8 changed files with 288 additions and 116 deletions
Show Stats Download Patch File Download Diff File

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

@ -116,6 +116,17 @@ body {
.fa-info:hover { .fa-info:hover {
font-size: 6vh; font-size: 6vh;
} }
.fa-arrow-left {
font-size: 5vh;
position: absolute;
left: 0;
margin: 4vh;
transition: .5s;
}
.fa-arrow-left:hover {
font-size: 6vh;
}
i:hover { i:hover {
cursor: pointer; cursor: pointer;
@ -226,7 +237,20 @@ hr{
top:10px; top:10px;
font-size: 50px; font-size: 50px;
} }
#modeDeJeu{
font-size: 25px;;
}
.close:hover{ .close:hover{
color:red; color:red;
cursor: pointer; cursor: pointer;
} }
#playPage{
display: none;
}
.border{
border-radius: 15px;
}
.secret{
cursor: pointer;
color:#fe8a71;
}

87
site/vue/index.html
Unescape View File

@ -8,9 +8,12 @@
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
<title>Make It True | Menu</title> <title>Make It True | Menu</title>
</head> </head>
<body id="body" class="background"> <body id="body" class="background">
<!--Main Page-->
<div id="mainPage">
<div id="menu"> <div id="menu">
<p id="titleGame" class="title txt dys">Make It True</p> <p id="titleGame" class="title dys">M<a class="secret" onclick="flip()">a</a>ke It True</p>
</div> </div>
<div class="btn_play" id="menu-selection"> <div class="btn_play" id="menu-selection">
<ul> <ul>
@ -24,13 +27,14 @@
</div> </div>
</li> </li>
<li> <li>
<a onclick="play()"><i class="far fa-play-circle"></i></a> <a onclick="play();"><i class="far fa-play-circle"></i></a>
</li> </li>
</ul> </ul>
</div> </div>
<a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a> <a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
<a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a> <a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a>
<a onclick="document.location.href='https://gitlab.iut-clermont.uca.fr/'; "><i class="fa fa-users" id="setting" aria-hidden="true"></i></a> <a onclick="document.location.href='https://gitlab.iut-clermont.uca.fr/'; "><i class="fa fa-users" id="setting"
aria-hidden="true"></i></a>
<a onclick="openModal('infoModal')"><i class="fa fa-info" id="setting" aria-hidden="true"></i></a> <a onclick="openModal('infoModal')"><i class="fa fa-info" id="setting" aria-hidden="true"></i></a>
<div id="myModal" class="modal"> <div id="myModal" class="modal">
<div class="modal-content"> <div class="modal-content">
@ -51,16 +55,16 @@
<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>
<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">Personnalisation du jeu</p>
<p><a class="txt dys" id="active_switch_setting">Couleur ligne active : </a><input type="color" id="active_switch_picker" name="head" <p><a class="txt dys" id="active_switch_setting">Couleur ligne active : </a><input type="color"
value="#008000"></p> id="active_switch_picker" name="head" value="#008000"></p>
<p><a class="txt dys" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color" id="inactive_switch_picker" name="head" <p><a class="txt dys" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color"
value="#FF0000"></p> id="inactive_switch_picker" name="head" value="#FF0000"></p>
<p><a class="txt dys" id="active_line_setting">Couleur ligne innactive : </a><input type="color" id="active_line_picker" name="head" <p><a class="txt dys" id="active_line_setting">Couleur ligne innactive : </a><input type="color"
value="#4CFEFE"></p> id="active_line_picker" name="head" value="#4CFEFE"></p>
<p><a class="txt dys" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="inactive_line_picker" name="head" <p><a class="txt dys" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color"
value="#000000"></p> id="inactive_line_picker" name="head" value="#000000"></p>
<p><a class="txt dys" id="inactive_end_setting">Couleur ligne innactive : </a><input type="color" id="inactive_end_picker" name="head" <p><a class="txt dys" id="inactive_end_setting">Couleur ligne innactive : </a><input type="color"
value="#9a9a9a"></p> id="inactive_end_picker" name="head" value="#9a9a9a"></p>
<hr id="hr"> <hr id="hr">
<div class="setting_play" id="setting_container"> <div class="setting_play" id="setting_container">
@ -100,19 +104,61 @@
<span class="close" onclick="closeModal('infoModal')">&times;</span> <span class="close" onclick="closeModal('infoModal')">&times;</span>
<h1 class="txt dys" id="infoTitle">Tableau des scores</h1> <h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
<hr id="hr"> <hr id="hr">
<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. Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum sapien. <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.
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 imperdiet hendrerit arcu, vel faucibus mauris porttitor quis. 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 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 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 malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor. 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
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
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
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, 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 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, odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie sollicitudin. 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,
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
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,
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. 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. Vivamus maximus justo eu fermentum hendrerit.</p> 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.
Vivamus maximus justo eu fermentum hendrerit.</p>
</div> </div>
</div> </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 id="play_container" class="border">
</div>
</div>
</body> </body>
<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>
@ -122,11 +168,10 @@
<script src="js/logique.js"></script> <script src="js/logique.js"></script>
<script src="js/init.js"></script> <script src="js/init.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/creator.js"></script>
<script src="js/timer.js"></script>
<script> <script>
function play(){
//document.location.href="jeu2.html";
}
initAll(); initAll();
</script> </script>

22
site/vue/jeu.html
Unescape View File

@ -62,6 +62,7 @@
<div id="progressBar"></div> <div id="progressBar"></div>
</div> </div>
<div id="play-container"></div> <div id="play-container"></div>
<a onclick="reset()" style="cursor:pointer;">Click</a>
<script> <script>
var mobile = false; var mobile = false;
var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = []; var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
@ -96,6 +97,27 @@
creatorRandomPyramid(); creatorRandomPyramid();
checkAllSortieLogique(); checkAllSortieLogique();
function reset(){
console.log("reset");
switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
stage = new Konva.Stage({
container: 'play-container',
/*rotation: -90,
x: 20,
y: 1000,*/
width: width,
height: height,
});
layer.destroyChildren();
stage.add(layer);
initLayer();
creatorRandomPyramid();
checkAllSortieLogique();
}
</script> </script>
<script> <script>
var modal = document.getElementById("myModal"); var modal = document.getElementById("myModal");

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

@ -1,6 +1,6 @@
//Portes Logiques //Portes Logiques
var imageHeight = 75; var imageHeight = 75/2;
var imageWidth = 100; var imageWidth = 50;
var imageRotation = 0; var imageRotation = 0;
//couleur //couleur
@ -13,7 +13,6 @@ const imageLogiqueOu = "or_test.png";
const imageLogiqueEtNon = "nand_test.png"; const imageLogiqueEtNon = "nand_test.png";
const imageLogiqueInv = "not_test.png"; const imageLogiqueInv = "not_test.png";
const imageLogiqueNonOu = "nor_test.png"; const imageLogiqueNonOu = "nor_test.png";
const imageEnd = "idea_white.png";
//line //line
var colorLineInnactive = "black"; var colorLineInnactive = "black";

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

@ -66,6 +66,8 @@ function setColor(color) {
element.style.border = "5px solid" + blackColor; element.style.border = "5px solid" + blackColor;
}); });
} }
//fun
document.querySelector(".secret").style.color = "#fe8a71";
} }
function setLang(newLang) { function setLang(newLang) {
@ -350,3 +352,26 @@ function changeAllLineColorInActive(color){
colorLineInnactive = color; colorLineInnactive = color;
layer.draw(); layer.draw();
} }
function play(){
console.log("oui");
document.querySelector("#mainPage").style.display = 'none';
document.querySelector("#playPage").style.display = 'block';
resetAllTabs();
gameOne();
}
function closeGame(){
document.querySelector("#mainPage").style.display = 'block';
document.querySelector("#playPage").style.display = 'none';
resetAllTabs();
tutoCreateLayer();
}
var rotated = false;
function flip(){
document.querySelectorAll(".fa").forEach(function(element){
deg = rotated ? 0 : 360;
element.style.transform = 'rotate('+deg+'deg)';
});
rotated = !rotated;
}

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

@ -16,6 +16,9 @@ const lang = {
scoreTitle: "Tableau des scores", scoreTitle: "Tableau des scores",
infoTitle: "Comment jouer ?", infoTitle: "Comment jouer ?",
inactive_end_setting: "Couleur fin : ", inactive_end_setting: "Couleur fin : ",
modeDeJeu : "Mode de jeu",
niveau : "Niveau 24",
temps: "Temps : ",
}, },
en: { en: {
titleGame: "Make It True", titleGame: "Make It True",
@ -34,5 +37,8 @@ const lang = {
scoreTitle: "Scoreboard", scoreTitle: "Scoreboard",
infoTitle: "How to play ?", infoTitle: "How to play ?",
inactive_end_setting: "End color : ", inactive_end_setting: "End color : ",
modeDeJeu : "Gamemode",
niveau : "Level 24",
temps: "Time : ",
} }
} }

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

@ -7,16 +7,23 @@ function initAll() {
var mobile = false; var mobile = false;
var switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = []; var switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
console.log(document.querySelector("#setting_container").offsetWidth);
var width = window.innerWidth - window.innerWidth / 100 * 30; var width = window.innerWidth - window.innerWidth / 100 * 30;
var height = window.innerWidth / 5; var height = window.innerHeight /2.5;
var stage = new Konva.Stage({ var stage = new Konva.Stage({
container: 'setting_container', container: 'setting_container',
width: width, width: width,
height: height, height: height,
}); });
var layer = new Konva.Layer(); var layer = new Konva.Layer();
tutoCreateLayer();
function tutoCreateLayer() {
width = window.innerWidth - window.innerWidth / 100 * 30;
stage = new Konva.Stage({
container: 'setting_container',
width: width,
height: height,
});
stage.add(layer); stage.add(layer);
colonneTot = 1; colonneTot = 1;
@ -34,3 +41,47 @@ createAllLinkSwitch();
initAllSwitch(); initAllSwitch();
createEnd(); createEnd();
initEnd(); initEnd();
}
function resetAllTabs() {
switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
width = window.innerWidth - window.innerWidth / 100 * 10;
height = window.innerHeight /1.5;
layer.destroyChildren();
}
function gameOne() {
stage = new Konva.Stage({
container: 'play_container',
/*rotation: -90,
x: 20,
y: 1000,*/
width: width,
height: height,
});
stage.add(layer);
colonneTot = 2;
numberPerColonne = [2,1];
var logiqueCount = 0;
for (let i = 0; i < colonneTot; i++) {
liveColonneNumber.push([]);
}
insertLogiqueColonne("logique1", "et", 0);
insertLogiqueColonne("logique2", "et", 0);
insertLogiqueColonne("logique3", "et", 1);
logiques.forEach(function (element) {
createLinkAuto(element.name);
});
calculNombreSwitch();
switchCreator(numberOfSwitch);
createAllLinkSwitch();
initAllSwitch();
createEnd();
initEnd();
checkAllSortieLogique();
}

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

@ -1,5 +1,5 @@
function initTimer(){ function initTimer(){
var TimerElem = document.getElementById("progressBar"); /*var TimerElem = document.getElementById("progressBar");
TimerElem.style.width = "0%"; TimerElem.style.width = "0%";
let seconds = timeEnd; let seconds = timeEnd;
let minutes = 0; let minutes = 0;
@ -7,7 +7,7 @@ function initTimer(){
minutes++; minutes++;
seconds = seconds - 60; seconds = seconds - 60;
} }
document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s"; document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s";*/
} }
function move() { function move() {

Write Preview
Loading…
Cancel
Save