diff --git a/site/img/aaa.png b/site/img/aaa.png
new file mode 100644
index 0000000..7e6735e
Binary files /dev/null and b/site/img/aaa.png differ
diff --git a/site/img/zzz.png b/site/img/zzz.png
new file mode 100644
index 0000000..8010f88
Binary files /dev/null and b/site/img/zzz.png differ
diff --git a/site/js/const.js b/site/js/const.js
index 28a9633..06f7d2a 100644
--- a/site/js/const.js
+++ b/site/js/const.js
@@ -6,10 +6,10 @@ var imageRotation = 0;
 //Image
 const pathImg = "../img/";
 const imageLogiqueEt = "eeee.png";
-const imageLogiqueOu = "logiqueou.png";
+const imageLogiqueOu = "zzz.png";
 const imageLogiqueEtNon = "logiqueetnon.png";
 const imageLogiqueInv = "non.png";
-const imageLogiqueNonOu = "nonou.png";
+const imageLogiqueNonOu = "aaa.png";
 const imageEnd = "idea_white.png";
 
 //line
diff --git a/site/js/createElement.js b/site/js/createElement.js
index a0d6892..53f7250 100644
--- a/site/js/createElement.js
+++ b/site/js/createElement.js
@@ -236,7 +236,9 @@ function createLinkSwitch(){
   else {
     switchsInfoCopy.forEach(function(element){
       if(stage.findOne("#"+element.id).id3 == null){
+        console.log("le switch " + element.id);
         if(Math.abs(logique.y - element.y) < distanceSwitch){
+          console.log("ai");
           distanceSwitch = Math.abs(logique.y - element.y);
           switchs = element;
         }
diff --git a/site/js/creator.js b/site/js/creator.js
index a5645ec..a783000 100644
--- a/site/js/creator.js
+++ b/site/js/creator.js
@@ -58,6 +58,38 @@ function createGame2() {
     initEnd();
 }
 
+function tuto(){
+    timeEnd = 1000;
+
+    initTimer();
+
+    var logiqueCount = 0;
+
+    colonneTot = 1;
+
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber.push([]);
+    }
+
+    numberPerColonne[0] = 1;
+
+    insertLogiqueColonne("logique" + logiqueCount, "et", 0);
+    
+
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+
+    calculNombreSwitch();
+    switchCreator(numberOfSwitch);
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+}
+
 function generatorGame() {
 
     timeEnd = getRandomArbitrary(15, 50);
@@ -94,7 +126,7 @@ function generatorGame() {
             insertLogiqueColonne("logique" + logiqueCount, type, i);
         }
     }
-
+    
     logiques.forEach(function (element) {
         createLinkAuto(element.name);
     });
diff --git a/site/js/logique.js b/site/js/logique.js
index 231aea9..edda198 100644
--- a/site/js/logique.js
+++ b/site/js/logique.js
@@ -31,7 +31,6 @@ function removeLine(lineId){
     removeLineFromSwitch(lineId);
     let line = stage.findOne("#" + lineId);
     line.destroy();
-    line = stage.findOne("#" + lineId);
 
 }
 
@@ -58,13 +57,17 @@ function giveLineId(logiqueId,entre) {
             if (logique.id1 == null) {
                 lineId = "id1";
             } else if (logique.id2 == null) {
-                if(isSwitch){
+                lineId = "id2";
+                /*if(isSwitch){
                     if(giveSwitchYWithLineId(logique.id1) > entre.getY()){
+                        console.log(giveSwitchYWithLineId(logique.id1));
+                        console.log(entre);
+                        removeLine(entre.id3);
                         lineRemove.push([entre, "switch"]);
                     }else{
                         lineId = "id2";
                     }
-                }
+                }*/
             }    
         }
     }else{
diff --git a/site/vues/index.html b/site/vues/index.html
index f94ab88..9da269e 100644
--- a/site/vues/index.html
+++ b/site/vues/index.html
@@ -29,18 +29,30 @@
           <a>Je veux jouer à </a>
         
         <select id="jeu-select">
-          <option value="poursuite">Mode 1</option>
-          <option value="impossible">Mode 2</option>
-          
+          <option value="aleatoire">Aléatoire</option>
+          <option value="perso">Niveau Perso</option>
       </select>
     </div>
       </li>
       <li>
-        <a href="jeu.html"><i class="far fa-play-circle"></i></a>
+        <a onclick="play()"><i class="far fa-play-circle"></i></a>
       </li>
     </ul>
   </div>
 </div>
 </body>
-
+<script>
+  function play(){
+    var e = document.getElementById("jeu-select");
+    var strUser = e.options[e.selectedIndex].value;
+    switch(strUser){
+      case "aleatoire":
+        window.location.href = "jeu.html";
+        break;
+      case "perso" :
+        window.location.href = "perso.html";
+        break;
+    }    
+  }
+</script>
 </html>
\ No newline at end of file
diff --git a/site/vues/niv.json b/site/vues/niv.json
new file mode 100644
index 0000000..c7966e2
--- /dev/null
+++ b/site/vues/niv.json
@@ -0,0 +1,23 @@
+{
+    "name": "Map Test",
+    "difficulty" : "easy",
+    "logiqueName": [
+        "logique1" ,
+        "logique2",
+        "logique3"
+    ],
+    "logiqueType": [
+        "et" ,
+        "ou",
+        "et"
+    ],
+    "logiquePosition": [
+        0 ,
+        0,
+        1
+    ],
+    "logiqueLink": [
+        ["logique1","logique3"],
+        ["logique2","logique3"]
+    ]
+}
\ No newline at end of file
diff --git a/site/vues/perso.html b/site/vues/perso.html
new file mode 100644
index 0000000..b9fb7c3
--- /dev/null
+++ b/site/vues/perso.html
@@ -0,0 +1,136 @@
+<!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/creator.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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>
+    <div id="header-container">
+        <h1 align=center>Niveau <a id="niveau">Perso</a></h1>
+    </div>
+    <div id="header-container">
+        <button id="driver" onclick="show();">Charger un niveau</button>
+    </div>
+    <div id="play-container"></div>
+
+</body>
+<script>
+
+    var switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
+
+
+    var mapName;
+    var logiqueNames;
+    var logiqueType;
+    var logiquePosition;
+    var logiqueLink;
+
+    var layer = new Konva.Layer();
+    let container = document.getElementById('play-container');
+    container.style.height = innerHeight /100*80 + "px";
+    var width = container.offsetWidth;
+    var stage = new Konva.Stage({
+        container: 'play-container',
+        /*rotation: -90,
+        x: 20,
+        y: 1000,*/
+        width: width,
+        height: window.innerHeight,
+    });
+    stage.add(layer);
+
+    function click() {
+        console.log("click");
+
+    }
+
+
+
+    function openJson() {
+        var isFinish = $.Deferred();
+
+        $(document).ready(function () {
+            $.getJSON('niv.json', function (emp) {
+                mapName = emp.name;
+                logiqueNames = emp.logiqueName;
+                logiqueType = emp.logiqueType;
+                logiquePosition = emp.logiquePosition;
+                logiqueLink = emp.logiqueLink;
+                isFinish.resolve();
+            });
+        });
+        return $.when(isFinish).done(function () {
+        }).promise();
+    }
+    function show() {
+        $(function () {
+            openJson().done(function () {
+                info();
+                generateTerrain();
+            });
+        });
+    }
+
+    function tranformation() {
+        colonneTot = 0;
+        for(let i = 0; i < logiquePosition.length;i++){
+            if(logiquePosition[i]+1 > colonneTot)
+                colonneTot = logiquePosition[i]+1;
+        }
+        for (let i = 0; i < colonneTot; i++) {
+            liveColonneNumber.push([]);
+        }
+        for(let i = 0; i < logiquePosition.length; i++){
+            if(Number.isNaN(numberPerColonne[logiquePosition[i]])){
+                numberPerColonne[logiquePosition[i]] = 0;
+            }
+            numberPerColonne[logiquePosition[i]]++;
+        }
+        for(let i = 0; i < logiquePosition.length; i++){
+            insertLogiqueColonne(logiqueNames[i], logiqueType[i], logiquePosition[i]);
+        }
+        for(let i = 0;i < logiqueLink.length; i++){
+            createLink(findLogique(logiqueLink[i][0]), findLogique(logiqueLink[i][1]));
+        }
+
+        calculNombreSwitch();
+        switchCreator(numberOfSwitch);
+
+        createAllLinkSwitch();
+
+        initAllSwitch();
+        createEnd();
+        initEnd();
+    }
+
+    function generateTerrain() {
+
+        
+
+        initLayer();
+
+        tranformation();
+
+        checkAllSortieLogique();
+    }
+
+    function info() {
+
+    }
+</script>
+
+
+</html>
\ No newline at end of file