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>