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

travail

Browse Source
master
pisouvigne 5 years ago
parent fe44570d52
commit 8b2aa8f905
7 changed files with 179 additions and 27 deletions
Show Stats Download Patch File Download Diff File

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

@ -204,7 +204,7 @@ img {
} }
img:hover { img:hover {
height: 60px; opacity: 1;
cursor: pointer; cursor: pointer;
} }

4
site/vue/index.html
Unescape View File

@ -48,7 +48,7 @@
<input id="dyscheckbox" type="checkbox" onclick="dysFont()"></p> <input id="dyscheckbox" type="checkbox" onclick="dysFont()"></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')" 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" id="active_switch_picker" name="head"
@ -59,6 +59,8 @@
value="#4CFEFE"></p> 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" id="inactive_line_picker" name="head"
value="#000000"></p> 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"
value="#9a9a9a"></p>
<hr id="hr"> <hr id="hr">
<div class="setting_play" id="setting_container"> <div class="setting_play" id="setting_container">

138
site/vue/jeu.html
Unescape View File

@ -0,0 +1,138 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
<script src="js/const.js"></script>
<script src="js/func.js"></script>
<script src="js/logique.js"></script>
<script src="js/init.js"></script>
<script src="js/createElement.js"></script>
<script src="js/easytimer.min.js"></script>
<script src="js/timer.js"></script>
<script src="js/creator.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet">
<meta charset="utf-8" />
<title>Make It True</title>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header" align=center>
<br>
<h1>Game Over</h1>
<br>
</div>
<div class="modal-body" align=center>
<br>
<p>Temps total : 13 m 40 s</p>
<p>Temps moyen par niveau : 20.5s</p>
<p>Score moyen par niveau : 4.5</p>
<br>
<h2>Score total : 140</h2>
<br>
<input type="text" placeholder="Pseudo">
<button>Envoyer son score</button>
<br><br><br>
</div>
<div class="modal-footer">
<br>
<button onclick="window.location.href='index.html'">Home</button>
<br>
<br>
</div>
</div>
</div>
<div id="header-container">
<h1 align=center>Niveau <a id="niveau">0</a></h1>
<div align=center>
<a>Temps :</a>
<a id="timer">0 m 0 s</a>
<a id="timerend">20</a>
</div>
<div id="progressBar"></div>
</div>
<div id="play-container"></div>
<script>
var mobile = false;
var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
var niveauActuel = localStorage.getItem("niveau");
if(niveauActuel == null){
niveauActuel = 1;
}
let niveauhtml = document.getElementById('niveau');
niveauhtml.innerHTML = niveauActuel;
var layer = new Konva.Layer();
let container = document.getElementById('play-container');
container.style.height = innerHeight /100*80 + "px";
var width = container.offsetWidth;
var height = container.offsetHeight;
var stage = new Konva.Stage({
container: 'play-container',
/*rotation: -90,
x: 20,
y: 1000,*/
width: width,
height: height,
});
stage.add(layer);
initLayer();
creatorRandomPyramid();
checkAllSortieLogique();
</script>
<script>
var modal = document.getElementById("myModal");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
fitStageIntoParentContainer();
function fitStageIntoParentContainer() {
if(window.innerWidth < window.innerHeight && mobile == false){
stage.rotate(90);
stage.x(stage.getX() + stage.height());
stage.draw();
mobile=true;
}else if(mobile){
stage.rotate(0);
stage.draw();
mobile=true;
}
var container = document.querySelector('#play-container');
// now we need to fit stage into parent
var containerWidth = container.offsetWidth;
// to do this we need to scale the stage
var scale = containerWidth / width;
stage.width(width * scale);
stage.height(height * scale);
stage.scale({ x: scale, y: scale });
stage.draw();
}
window.addEventListener('resize', fitStageIntoParentContainer);
</script>
</body>
</html>

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

@ -9,10 +9,10 @@ const whiteColor = "#D7CCC8";
//Image //Image
const pathImg = "img/"; const pathImg = "img/";
const imageLogiqueEt = "and_test.png"; const imageLogiqueEt = "and_test.png";
const imageLogiqueOu = "ou.png"; const imageLogiqueOu = "or_test.png";
const imageLogiqueEtNon = "nand.png"; const imageLogiqueEtNon = "nand_test.png";
const imageLogiqueInv = "not_test.png"; const imageLogiqueInv = "not_test.png";
const imageLogiqueNonOu = "aaa.png"; const imageLogiqueNonOu = "nor_test.png";
const imageEnd = "idea_white.png"; const imageEnd = "idea_white.png";
//line //line

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

@ -3,21 +3,18 @@ function createEnd() {
//find X and Y //find X and Y
var X = stage.width() - stage.width() /100 * 5; var X = stage.width() - stage.width() /100 * 5;
var Y = stage.height() / 3; var Y = stage.height() / 2;
var imageObj2 = new Image(); var endShape = new Konva.RegularPolygon({
imageObj2.onload = function () {
var end = new Konva.Image({
x: X, x: X,
y: Y, y: Y,
image: imageObj2, sides: 6,
width: 50, radius: 30,
height: 50, fill: '#9a9a9a',
id: "end", stroke: 'black',
strokeWidth: 4,
id : "end",
}); });
layer.add(end);
layer.batchDraw();
};
end = { end = {
name: "end", name: "end",
x: X, x: X,
@ -26,7 +23,8 @@ function createEnd() {
position: 1, position: 1,
let:1, let:1,
} }
imageObj2.src = pathImg + imageEnd; end.x = end.x - endShape.width() / 2;
layer.add(endShape);
} }
function createSwitch(id, x, y) { function createSwitch(id, x, y) {
@ -128,7 +126,7 @@ function createEnd() {
break; break;
default: default:
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], "line" + lineId);
setLine(entre, "id3", "line" + lineId); setLine(entre, "id3", "line" + lineId);
end.let--; end.let--;
break; break;

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

@ -74,13 +74,17 @@ function setLang(newLang) {
textToChange.forEach(function (item) { textToChange.forEach(function (item) {
let currText = item.id; let currText = item.id;
document.getElementById(currText).innerHTML = lang.fr[currText]; document.getElementById(currText).innerHTML = lang.fr[currText];
}) });
document.querySelector(".img_france").style.opacity = 1;
document.querySelector(".img_usa").style.opacity = 0.2;
} }
else { else {
textToChange.forEach(function (item) { textToChange.forEach(function (item) {
let currText = item.id; let currText = item.id;
document.getElementById(currText).innerHTML = lang.en[currText]; document.getElementById(currText).innerHTML = lang.en[currText];
}) });
document.querySelector(".img_france").style.opacity = 0.2;
document.querySelector(".img_usa").style.opacity = 1;
} }
} }
function calculNombreSwitch() { function calculNombreSwitch() {
@ -279,11 +283,15 @@ function activeLineInput(event) {
function inactiveLineInput(event) { function inactiveLineInput(event) {
changeAllLineColorInActive(event.target.value); changeAllLineColorInActive(event.target.value);
} }
function inactiveEndInput(event) {
changeEndColorInActive(event.target.value);
}
document.querySelector("#active_switch_picker").addEventListener("input", activeSwitchInput, false); document.querySelector("#active_switch_picker").addEventListener("input", activeSwitchInput, false);
document.querySelector("#inactive_switch_picker").addEventListener("input", inactiveSwitchInput, false); document.querySelector("#inactive_switch_picker").addEventListener("input", inactiveSwitchInput, false);
document.querySelector("#active_line_picker").addEventListener("input", activeLineInput, false); document.querySelector("#active_line_picker").addEventListener("input", activeLineInput, false);
document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false); document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false);
document.querySelector("#inactive_end_picker").addEventListener("input", inactiveEndInput, false);
function changeAllSwitchColorActive(color){ function changeAllSwitchColorActive(color){
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function(element){
@ -295,6 +303,10 @@ function changeAllSwitchColorActive(color){
colorSwitchActiveBackground = color; colorSwitchActiveBackground = color;
layer.draw(); layer.draw();
} }
function changeEndColorInActive(color){
stage.findOne("#end").fill(color);
layer.draw();
}
function changeAllSwitchColorInActive(color){ function changeAllSwitchColorInActive(color){
switchsInfoCopy.forEach(function(element){ switchsInfoCopy.forEach(function(element){
var switche = stage.findOne("#"+element.id); var switche = stage.findOne("#"+element.id);

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

@ -9,12 +9,13 @@ 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 active : ", active_line_setting : "Couleur lines actives : ",
inactive_line_setting : "Couleur lines innactive : ", inactive_line_setting : "Couleur lines innactives : ",
active_switch_setting : "Couleur switchs active : ", active_switch_setting : "Couleur switchs actif : ",
inactive_switch_setting : "Couleur switchs innactive : ", inactive_switch_setting : "Couleur switchs innactif : ",
scoreTitle: "Tableau des scores", scoreTitle: "Tableau des scores",
infoTitle: "Comment jouer ?", infoTitle: "Comment jouer ?",
inactive_end_setting: "Couleur fin : ",
}, },
en: { en: {
titleGame: "Make It True", titleGame: "Make It True",
@ -32,5 +33,6 @@ const lang = {
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 : ",
} }
} }
Write Preview
Loading…
Cancel
Save