travail sur les nouveaux graphismes, mode sombre, changemenet de langues, police pour dys ...

5 years ago · 2eb6e91a1f
parent f79028266e
commit 2eb6e91a1f
61 changed files with 392 additions and 338 deletions
--- a/site/test/TODO
+++ b/site/test/TODO
--- a/site/test/config/Autoload.php
+++ b/site/test/config/Autoload.php
--- a/site/test/config/SplClassLoader.php
+++ b/site/test/config/SplClassLoader.php
--- a/site/test/config/config.php
+++ b/site/test/config/config.php
--- a/site/test/controllers/FrontControleur.php
+++ b/site/test/controllers/FrontControleur.php
--- a/site/test/controllers/PlayerControleur.php
+++ b/site/test/controllers/PlayerControleur.php
--- a/site/test/css/dys.otf
+++ b/site/test/css/dys.otf
--- a/site/test/css/main.TTF
+++ b/site/test/css/main.TTF
--- a/site/test/css/style.css
+++ b/site/test/css/style.css
--- a/site/test/img/1920px-NAND_ANSI.svg.png
+++ b/site/test/img/1920px-NAND_ANSI.svg.png
--- a/site/test/img/1920px-NOR_ANSI.svg.png
+++ b/site/test/img/1920px-NOR_ANSI.svg.png
--- a/site/test/img/1920px-NOT_ANSI.svg.png
+++ b/site/test/img/1920px-NOT_ANSI.svg.png
--- a/site/test/img/OR_ANSI.png
+++ b/site/test/img/OR_ANSI.png
--- a/site/test/img/aaa.png
+++ b/site/test/img/aaa.png
--- a/site/test/img/and_test.png
+++ b/site/test/img/and_test.png
--- a/site/test/img/eee.png
+++ b/site/test/img/eee.png
--- a/site/test/img/eeee.png
+++ b/site/test/img/eeee.png
--- a/site/test/img/france.png
+++ b/site/test/img/france.png
--- a/site/test/img/idea_black.png
+++ b/site/test/img/idea_black.png
--- a/site/test/img/idea_white.png
+++ b/site/test/img/idea_white.png
--- a/site/test/img/logiqueet.png
+++ b/site/test/img/logiqueet.png
--- a/site/test/img/logiqueetnon.png
+++ b/site/test/img/logiqueetnon.png
--- a/site/test/img/logiqueou.png
+++ b/site/test/img/logiqueou.png
--- a/site/test/img/nand.png
+++ b/site/test/img/nand.png
--- a/site/test/img/nand_test.png
+++ b/site/test/img/nand_test.png
--- a/site/test/img/non.png
+++ b/site/test/img/non.png
--- a/site/test/img/nonou.png
+++ b/site/test/img/nonou.png
--- a/site/test/img/nor_test.png
+++ b/site/test/img/nor_test.png
--- a/site/test/img/not_test.png
+++ b/site/test/img/not_test.png
--- a/site/test/img/or_test.png
+++ b/site/test/img/or_test.png
--- a/site/test/img/play-button.png
+++ b/site/test/img/play-button.png
--- a/site/test/img/play-button.svg
+++ b/site/test/img/play-button.svg
--- a/site/test/img/unnamed.jpg
+++ b/site/test/img/unnamed.jpg
--- a/site/test/img/usa.png
+++ b/site/test/img/usa.png
--- a/site/test/img/zzz.png
+++ b/site/test/img/zzz.png
--- a/site/test/js/const.js
+++ b/site/test/js/const.js
@ -3,6 +3,9 @@ var imageHeight = 70;
 var imageWidth = 75;
 var imageRotation = 0;

+//couleur
+const blackColor = "#444442";
+
 //Image
 const pathImg = "../img/";
 const imageLogiqueEt = "eee.png";
--- a/site/test/js/createElement.js
+++ b/site/test/js/createElement.js
--- a/site/test/js/creator.js
+++ b/site/test/js/creator.js
--- a/site/test/js/easytimer.min.js
+++ b/site/test/js/easytimer.min.js
--- a/site/test/js/func.js
+++ b/site/test/js/func.js
--- a/site/test/js/init.js
+++ b/site/test/js/init.js
--- a/site/test/js/logique.js
+++ b/site/test/js/logique.js
--- a/site/test/js/timer.js
+++ b/site/test/js/timer.js
--- a/site/test/modeles/Connection.php
+++ b/site/test/modeles/Connection.php
--- a/site/test/vues/index.html
+++ b/site/test/vues/index.html
--- a/site/test/vues/jeu.html
+++ b/site/test/vues/jeu.html
--- a/site/test/vues/jeu2.html
+++ b/site/test/vues/jeu2.html
--- a/site/test/vues/niv.json
+++ b/site/test/vues/niv.json
--- a/site/test/vues/perso.html
+++ b/site/test/vues/perso.html
--- a/site/test/vues/test.html
+++ b/site/test/vues/test.html
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@ -0,0 +1,156 @@
+@font-face {
+    font-family: main;
+    src: url(../font/main.ttf);
+}
+@font-face {
+    font-family: dys;
+    src: url(../font/dys.otf);
+}
+*{
+    transition: .01s;
+}
+
+body{
+    font-family: main;
+}
+
+body {
+    background-color: #D7CCC8;
+}
+
+.title {
+    width: 100%;
+    text-align: center;
+    font-size: 8vh;
+}
+
+#menu-selection {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 25vh auto;
+    text-align: center;
+}
+
+.fa-play-circle {
+    font-size: 15vh;
+}
+
+.message {
+    font-size: 3vh;
+    margin-bottom: 7vh;
+}
+
+#jeu-select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    font-size: 3vh;
+    background-color: transparent;
+    border: none;
+    color: #fe8a71;
+}
+
+#jeu-select:focus {
+    outline: none;
+}
+
+#jeu-select option {
+    background-color: lightgray;
+    border: none;
+}
+
+.btn_play ul {
+    text-align: center;
+    list-style: none;
+}
+
+.fa-cog {
+    font-size: 5vh;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin: 4vh;
+    transition: .5s;
+}
+
+.fa-cog:hover {
+    font-size: 6vh;
+}
+
+i:hover {
+    cursor: pointer;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    position: relative;
+    margin: auto;
+    padding: 0;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}   
+.modal-body{
+    border:5px solid #D3D3CE;
+    border-radius: 15px;
+}
+
+@-webkit-keyframes animatetop {
+    from {
+        top: -200px;
+        opacity: 0
+    }
+
+    to {
+        top: 0;
+        opacity: 1
+    }
+}
+
+@keyframes animatetop {
+    from {
+        top: -200px;
+        opacity: 0
+    }
+
+    to {
+        top: 0;
+        opacity: 1
+    }
+}
+
+img {
+    height: 50px;
+    transition: .5s;
+}
+
+img:hover {
+    height: 60px;
+    cursor: pointer;
+}
+
+hr{
+    border : 3px solid #D3D3CE;
+}
+.img_france{
+    margin-right:50px;
+}
--- a/site/vue/font/dys.otf
+++ b/site/vue/font/dys.otf
--- a/site/vue/font/main.TTF
+++ b/site/vue/font/main.TTF
--- a/site/vue/img/france.png
+++ b/site/vue/img/france.png
--- a/site/vue/img/usa.png
+++ b/site/vue/img/usa.png
--- a/site/vue/index.html
+++ b/site/vue/index.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <title>Make It True | Menu</title>
+</head>
+<body id="body">
+    <div id="menu">
+        <p id="titleGame" class="title txt">Make It True</p>
+    </div>
+    <div class="btn_play" id="menu-selection">
+        <ul>
+            <li>
+                <div class="message">
+                    <a class="txt" id="playSelection">Je veux jouer a </a>
+                    <select id="jeu-select">
+                        <option value="aleatoire" class="txt" id="mode1">Aleatoire</option>
+                        <option value="perso" class="txt" id="mode2">Niveau Perso</option>
+                    </select>
+                </div>
+            </li>
+            <li>
+                <a onclick="play()"><i class="far fa-play-circle"></i></a>
+            </li>
+        </ul>
+    </div>
+    <a onclick="setting();"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
+    <div id="myModal" class="modal">
+        <div class="modal-content">
+            <div id="setting_int" class="modal-body" align=center>
+                <h1 class="txt" id="settingTitle">Parametres</h1>
+                <hr id="hr">
+                <br>
+                <p>
+                    <a class="txt" id="themeDark">Theme dark</a> 
+                    <input id="darkcheck" type="checkbox" onclick="darkMode()" checked></p>
+                <p>
+                    <a class="txt" id="dysfont">DYSLEXIE</a> 
+                    <input id="dyscheckbox" type="checkbox" onclick="dysFont()"></p>
+                <br>
+                <br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
+                <img onclick="setLang('en')" src="img/usa.png" /><br><br>
+                <hr id="hr">
+                <p id="setting_title_perso" class="txt">Personnalisation du jeu</p>
+                <p><a class="txt" id="active_line_setting">Couleur ligne active : </a><input type="color" id="head" name="head"
+            value="#e66465"></p>
+            <p><a class="txt" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="head" name="head"
+                value="#e66465"></p>
+                <br>
+                <hr id="hr">
+                <p><a>Previsualisation</a></p>
+                <hr id="hr">
+                <div class="setting_play" id="setting_container">
+
+                </div>
+                <br>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="js/const.js"></script>
+<script src="js/lang.js"></script>
+<script src="js/func.js"></script>
+<script src="js/main.js"></script>
+<script>
+
+    function play(){
+        //document.location.href="jeu2.html"; 
+    }
+    initAll();
+</script>
+
+
+</html>
--- a/site/vue/js/const.js
+++ b/site/vue/js/const.js
@ -0,0 +1,40 @@
+//Portes Logiques
+var imageHeight = 70;
+var imageWidth = 75;
+var imageRotation = 0;
+
+//couleur
+const blackColor = "#444442";
+const whiteColor = "#D7CCC8";
+//Image
+const pathImg = "../img/";
+const imageLogiqueEt = "eee.png";
+const imageLogiqueOu = "zzz.png";
+const imageLogiqueEtNon = "nand.png";
+const imageLogiqueInv = "not_test.png";
+const imageLogiqueNonOu = "aaa.png";
+const imageEnd = "idea_white.png";
+
+//line
+const colorLineInnactive = "black";
+const colorLineActive = "#4CFEFE";//FFF033
+const lineStroke = 4;
+const pourcentageBreak = 15;
+
+//switch
+const SwitchHeight = 25;
+const SwitchWidth = 50;
+const colorSwitchBorder = "black";
+const colorSwitchInnactiveBackground = "red";
+const colorSwitchActiveBackground = "green";
+
+//timer
+var timeEnd = 70;
+
+//switch
+var numberOfSwitch = 0;
+
+//grid
+var colonneTot = 4;
+var numberPerColonne = [];
+var liveColonneNumber = [];
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@ -0,0 +1,82 @@
+
+var modal = document.getElementById("myModal");
+function setting() {
+    var modal = document.getElementById("myModal");
+    modal.style.display = "block";
+
+}
+function closeSetting() {
+    var modal = document.getElementById("myModal");
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+window.onclick = function (event) {
+    closeSetting();
+}
+
+function darkMode() {
+    var checkbox = document.getElementById("darkcheck");
+    if (checkbox.checked == true) {
+        setColor("black");
+    }
+    else {
+        setColor("white");
+    }
+}
+function dysFont() {
+    var checkbox = document.getElementById("dyscheckbox");
+    var textToChange = document.querySelectorAll(".txt");
+    var font;
+    if (checkbox.checked == true) {
+        font = "dys";
+    }
+    else {
+        font = "main";
+    }
+    textToChange.forEach(function (item) {
+        let currText = item.id;
+        document.getElementById(currText).style.fontFamily = font;
+    })
+    document.getElementById("jeu-select").style.fontFamily = font;
+}
+
+function setColor(color) {
+    if (color == "black") {
+        document.body.style.color = whiteColor;
+        document.getElementById("body").style.backgroundColor = blackColor;
+        document.getElementById("setting_int").style.color = whiteColor;
+        document.getElementById("setting_int").style.backgroundColor = blackColor;
+        var hr = document.querySelectorAll("#hr");
+        hr.forEach(function(item){
+            console.log(item);
+            hr.style.border = "3px solid " + blackColor;
+        });
+
+    } else {
+        document.body.style.color = blackColor;
+        document.getElementById("body").style.backgroundColor = whiteColor;
+        document.getElementById("setting_int").style.color = blackColor;
+        document.getElementById("setting_int").style.backgroundColor = whiteColor;
+        var hr = document.querySelectorAll("#hr");
+        hr.forEach(function(item){
+            hr.style.border = "3px solid " + whiteColor;
+        });
+    }
+}
+
+function setLang(newLang) {
+    var textToChange = document.querySelectorAll(".txt");
+    if (newLang === "fr") {
+        textToChange.forEach(function (item) {
+            let currText = item.id;
+            document.getElementById(currText).innerHTML = lang.fr[currText];
+        })
+    }
+    else {
+        textToChange.forEach(function (item) {
+            let currText = item.id;
+            document.getElementById(currText).innerHTML = lang.en[currText];
+        })
+    }
+}
--- a/site/vue/js/lang.js
+++ b/site/vue/js/lang.js
@ -0,0 +1,28 @@
+const lang = {
+    fr: {
+        titleGame: "Make It True",
+        settingTitle: "Parametres",
+        playSelection: "Je veux jouer a",
+        mode1: "Aleatoire",
+        mode2: "Niveau Perso",
+        themeDark: "Theme Dark :",
+        retour: "Retour",
+        dysfont: "Dyslexie :",
+        setting_title_perso: "Personnalisation du jeu",
+        active_line_setting : "Couleur ligne active : ",
+        inactive_line_setting : "Couleur ligne innactive : ",
+    },
+    en: {
+        titleGame: "Make It True",
+        settingTitle: "Settings",
+        playSelection: "I want to play ",
+        mode1: "Random",
+        mode2: "Perso Level",
+        themeDark: "Dark Theme :",
+        retour: "Back",
+        dysfont:"Dyslexia :",
+        setting_title_perso: "Game customization",
+        active_line_setting : "Color active line : ",
+        inactive_line_setting : "Color inactive line : ",
+    }
+}
--- a/site/vue/js/main.js
+++ b/site/vue/js/main.js
@ -0,0 +1,5 @@
+function initAll(){
+    darkMode();
+    setLang("fr");
+    dysFont();
+}
--- a/site/vues/menu.html
+++ b/site/vues/menu.html
@ -1,338 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
-
-    <title>Make It True | Menu</title>
-</head>
-<style>
-    @font-face {
-        font-family: main;
-        src: url(../css/main.ttf);
-    }
-    @font-face {
-        font-family: dys;
-        src: url(../css/dys.otf);
-    }
-    *{
-        transition: .01s;
-    }
-
-    body{
-        font-family: main;
-    }
-
-    body {
-        background-color: #D7CCC8;
-    }
-
-    .title {
-        width: 100%;
-        text-align: center;
-        font-size: 8vh;
-    }
-
-    #menu-selection {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        margin: 25vh auto;
-        text-align: center;
-    }
-
-    .fa-play-circle {
-        font-size: 15vh;
-    }
-
-    .message {
-        font-size: 3vh;
-        margin-bottom: 7vh;
-    }
-
-    #jeu-select {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        cursor: pointer;
-        font-size: 3vh;
-        background-color: transparent;
-        border: none;
-        color: #fe8a71;
-    }
-
-    #jeu-select:focus {
-        outline: none;
-    }
-
-    #jeu-select option {
-        background-color: lightgray;
-        border: none;
-    }
-
-    .btn_play ul {
-        text-align: center;
-        list-style: none;
-    }
-
-    .fa-cog {
-        font-size: 5vh;
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        margin: 4vh;
-        transition: .5s;
-    }
-
-    .fa-cog:hover {
-        font-size: 6vh;
-    }
-
-    i:hover {
-        cursor: pointer;
-    }
-
-    .modal {
-        display: none;
-        position: fixed;
-        z-index: 1;
-        padding-top: 100px;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        background-color: rgb(0, 0, 0);
-        background-color: rgba(0, 0, 0, 0.4);
-    }
-
-    .modal-content {
-        position: relative;
-        background-color: #fefefe;
-        margin: auto;
-        padding: 0;
-        border: 1px solid #888;
-        width: 80%;
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-        -webkit-animation-name: animatetop;
-        -webkit-animation-duration: 0.4s;
-        animation-name: animatetop;
-        animation-duration: 0.4s
-    }
-
-    @-webkit-keyframes animatetop {
-        from {
-            top: -300px;
-            opacity: 0
-        }
-
-        to {
-            top: 0;
-            opacity: 1
-        }
-    }
-
-    @keyframes animatetop {
-        from {
-            top: -300px;
-            opacity: 0
-        }
-
-        to {
-            top: 0;
-            opacity: 1
-        }
-    }
-
-    .close:hover,
-    .close:focus {
-        color: #000;
-        text-decoration: none;
-        cursor: pointer;
-    }
-
-    .modal-header {
-        padding: 2px 16px;
-        background-color: lightgrey;
-        color: black;
-    }
-
-    .modal-body {
-        padding: 2px 16px;
-    }
-
-    .modal-footer {
-        padding: 2px 16px;
-        background-color: lightgrey;
-        color: black;
-    }
-
-    img {
-        height: 50px;
-        transition: .5s;
-    }
-
-    img:hover {
-        height: 60px;
-        cursor: pointer;
-    }
-</style>
-
-<body id="body">
-    <div id="menu">
-        <p id="titleGame" class="title txt">Make It True</p>
-    </div>
-    <div class="btn_play" id="menu-selection">
-        <ul>
-            <li>
-                <div class="message">
-                    <a class="txt" id="playSelection">Je veux jouer a </a>
-                    <select id="jeu-select">
-                        <option value="aleatoire" class="txt" id="mode1">Aleatoire</option>
-                        <option value="perso" class="txt" id="mode2">Niveau Perso</option>
-                    </select>
-                </div>
-            </li>
-            <li>
-                <a onclick="play()"><i class="far fa-play-circle"></i></a>
-            </li>
-        </ul>
-    </div>
-    <a onclick="setting();"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
-    <div id="myModal" class="modal">
-
-        <div class="modal-content">
-            <div class="modal-header" align=center>
-                <br>
-                <h1 class="txt" id="settingTitle">Parametres</h1>
-                <br>
-            </div>
-            <div id="setting_int" class="modal-body" align=center>
-                <br>
-                <p>
-                    <a class="txt" id="themeDark">Theme dark</a> 
-                    <input id="darkcheck" type="checkbox" onclick="darkMode()"></p>
-                <p>
-                    <a class="txt" id="dysfont">DYSLEXIE</a> 
-                    <input id="dyscheckbox" type="checkbox" onclick="dysFont()"></p>
-                <br>
-                <br><img onclick="setLang('fr')" style="margin-right:50px" src="../img/france.png" />
-                <img onclick="setLang('en')" src="../img/usa.png" /><br><br>
-            </div>
-            <div class="modal-footer">
-                <br>
-                <button onclick="modal.style.display = 'none';" class="txt" id="retour">Retour</button>
-                <br>
-                <br>
-            </div>
-        </div>
-
-    </div>
-</body>
-<script>
-
-    function play(){
-        //document.location.href="jeu2.html"; 
-    }
-
-    var modal = document.getElementById("myModal");
-    function setting() {
-        var modal = document.getElementById("myModal");
-        modal.style.display = "block";
-
-    }
-    function closeSetting() {
-        var modal = document.getElementById("myModal");
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
-    }
-    window.onclick = function (event) {
-        closeSetting();
-    }
-
-    function darkMode() {
-        var checkbox = document.getElementById("darkcheck");
-        if (checkbox.checked == true) {
-            setColor("black");
-        }
-        else {
-            setColor("white");
-        }
-    }
-    function dysFont() {
-        var checkbox = document.getElementById("dyscheckbox");
-        var textToChange = document.querySelectorAll(".txt");
-        var font;
-        if (checkbox.checked == true) {
-            font = "dys";
-        }
-        else {
-            font = "main";
-        }
-        textToChange.forEach(function (item) {
-            let currText = item.id;
-            document.getElementById(currText).style.fontFamily = font;
-        })
-        document.getElementById("jeu-select").style.fontFamily = font;
-    }
-
-    function setColor(color) {
-        if (color == "black") {
-            document.body.style.color = "white";
-            document.getElementById("body").style.backgroundColor = "black";
-            document.getElementById("setting_int").style.color = "white";
-            document.getElementById("setting_int").style.backgroundColor = "black";
-
-        } else {
-            document.body.style.color = "black";
-            document.getElementById("body").style.backgroundColor = "#D7CCC8";
-            document.getElementById("setting_int").style.color = "black";
-            document.getElementById("setting_int").style.backgroundColor = "white";
-        }
-    }
-    const lang = {
-        fr: {
-            titleGame: "Make It True",
-            settingTitle: "Parametres",
-            playSelection: "Je veux jouer a",
-            mode1: "Aleatoire",
-            mode2: "Niveau Perso",
-            themeDark: "Theme Dark :",
-            retour: "Retour",
-            dysfont: "Dyslexie :",
-        },
-        en: {
-            titleGame: "Make It True",
-            settingTitle: "Settings",
-            playSelection: "I want to play ",
-            mode1: "Random",
-            mode2: "Perso Level",
-            themeDark: "Dark Theme :",
-            retour: "Back",
-            dysfont:"Dyslexia :"
-        }
-    }
-    function setLang(newLang) {
-        var textToChange = document.querySelectorAll(".txt");
-        if (newLang === "fr") {
-            textToChange.forEach(function (item) {
-                let currText = item.id;
-                document.getElementById(currText).innerHTML = lang.fr[currText];
-            })
-        }
-        else {
-            textToChange.forEach(function (item) {
-                let currText = item.id;
-                document.getElementById(currText).innerHTML = lang.en[currText];
-            })
-        }
-    }
-    setLang("fr");
-    dysFont();
-</script>
-
-</html>