diff --git a/index.html b/index.html
index 5f4d260..e2dd5ed 100644
--- a/index.html
+++ b/index.html
@@ -1,145 +1,77 @@
-
 <!DOCTYPE html>
 <html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
-    <script
-      src="https://code.jquery.com/jquery-3.1.1.min.js"
-      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
-      crossorigin="anonymous"></script>
-    <script src="semantic/semantic.min.js"></script>    
-    <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
-    <script src="js/func.js"></script>    
-    <meta charset="utf-8" />
-    <title>Custom Shape</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        background-color: #f0f0f0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div class="ui menu">
-      <div class="item">
-        <div class="ui primary button">Jouer</div>
-      </div>
-      <div class="item">
-        <div class="ui button">Aide</div>
-      </div>
-      <div class="item">
-        <div class="ui button">Createur</div>
-      </div>
-      <div class="item">
-        <div class="ui button">Records</div>
-      </div>
-    </div>
-    <div id="container" style="border:1px solid red;"></div>
-    <script>
-
-      
 
-      var stage = new Konva.Stage({
-        container: 'container',
-        width: window.innerWidth/2,
-        height: window.innerHeight/2,
-      });
+<head>
+  <link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
+  <script src="https://code.jquery.com/jquery-3.1.1.min.js"
+    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+  <script src="semantic/semantic.min.js"></script>
+  <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
+  <script src="js/func.js"></script>
+  <meta charset="utf-8" />
+  <title>Custom Shape</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
 
-      var etlogique = {
-        entre1 : createEtLogique(300,50, "pd"),
-        entre2 : "200",
-        sortie : "500",
-      }
+<body>
+  <div class="ui menu">
+    <div class="item">
+      <div class="ui primary button">Jouer</div>
+    </div>
+    <div class="item">
+      <div class="ui button">Aide</div>
+    </div>
+    <div class="item">
+      <div class="ui button">Createur</div>
+    </div>
+    <div class="item">
+      <div class="ui button">Records</div>
+    </div>
+  </div>
+  <div id="container" style="border:1px solid red;"></div>
+  <script>
 
-      
-      var layer = new Konva.Layer();
+    var switchs = [], lines = [], logiques = [];
 
-      /*
-       * create a triangle shape by defining a
-       * drawing function which draws a triangle
-       */
+    var logique = {
+      idown : "logique1",
+      id1 : "line1",
+      id2 : "line2",
+      id3 : "line3",
+    }
 
-      // add the triangle shape to the layer
+    logiques.push(logique);
+    console.log(logiques);
 
-      
+    var layer = new Konva.Layer();
 
-      var imageObj2 = new Image();
-      imageObj2.onload = function () {
-        var yoda = new Konva.Image({
-          x: 500,
-          y: 50,
-          image: imageObj2,
-          width: 50,
-          height: 50,
-          id : "et",
-        });
+    var stage = new Konva.Stage({
+      container: 'container',
+      width: window.innerWidth / 2,
+      height: window.innerHeight / 2,
+    });
 
-        // add the shape to the layer
-        layer.add(yoda);
-        layer.batchDraw();
-      };
-      imageObj2.src = 'img/idea_white.png';
-      
+    initLayer();
 
-      var rect1 = new Konva.Rect({
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 50,
-        stroke: 'black',
-        strokeWidth: 4,
-        id : "rect",
-      });
-      // add the shape to the layer
-      layer.add(rect1);
-      console.log(rect1);
-      var simpleText = new Konva.Text({
-        x: 20,
-        y: 20,
-        text: '0',
-        fontSize: 30,
-        fontFamily: 'Calibri',
-        fill: 'black',
-        id : "text",
-      });
-      layer.add(simpleText);
+    var etlogique = {
+      entre1: createEtLogique(300, 50, "logique1"),
+      entre2: "200",
+      sortie: "500",
+    }
 
-      rect1.on('click', function () {
-        var et = stage.findOne("#text");
-        var line = stage.findOne("#line");
-        var text = et.text() == '1' ? '0' : '1';
-        var colorline = et.text() == '1' ? 'black' : 'blue';
-        line.stroke(colorline);
-        et.text(text);
-        layer.draw();
-      });
-      var redLine = new Konva.Line({
-        points: [120, 45, 300, 66],
-        stroke: 'black',
-        strokeWidth: 3,
-        lineCap: 'round',
-        lineJoin: 'round',
-        id : "line",
-      });
-      layer.add(redLine);
+    let line = createLine([120, 45, 300, 66], "line");
+    layer.add(line);
+    line = createLine([400, 75, 500, 75], "line");
+    layer.add(line);
 
-      var lineFinal = new Konva.Line({
-        points: [400, 75, 500, 75],
-        stroke: 'black',
-        strokeWidth: 3,
-        lineCap: 'round',
-        lineJoin: 'round',
-        id : "lineFinal",
-      });
-      layer.add(lineFinal);
-      
+    stage.add(layer);
+  </script>
+</body>
 
-      // add the layer to the stage
-      stage.add(layer);
-      console.log(layer);
-    </script>
-  </body>
 </html>
\ No newline at end of file
diff --git a/js/func.js b/js/func.js
index 8e7b5eb..56b4e06 100644
--- a/js/func.js
+++ b/js/func.js
@@ -1,20 +1,84 @@
-function createEtLogique(x, y, id){
-    var imageObj = new Image();
-      imageObj.onload = function () {
-        var yoda = new Konva.Image({
-          x: x,
-          y: y,
-          image: imageObj,
-          width: 100,
-          height: 50,
-          id : "pd",
-        });
-
-        // add the shape to the layer
-        layer.add(yoda);
-        layer.batchDraw();
-      };
-      imageObj.src = 'img/logiqueet.png';
-
-      return imageObj;
+function createEtLogique(x, y, id) {
+  var imageObj = new Image();
+  imageObj.onload = function () {
+    var yoda = new Konva.Image({
+      x: x,
+      y: y,
+      image: imageObj,
+      width: 100,
+      height: 50,
+      id: "pd",
+    });
+
+
+    layer.add(yoda);
+    layer.batchDraw();
+  };
+  imageObj.src = 'img/logiqueet.png';
+
+  return imageObj;
+}
+
+function createLine(points, id) {
+  let line = new Konva.Line({
+    points: points,
+    stroke: 'black',
+    strokeWidth: 3,
+    lineCap: 'round',
+    lineJoin: 'round',
+    id: id,
+  });
+  return line
+}
+
+function initLayer() {
+  var imageObj2 = new Image();
+  imageObj2.onload = function () {
+    var yoda = new Konva.Image({
+      x: 500,
+      y: 50,
+      image: imageObj2,
+      width: 50,
+      height: 50,
+      id: "et",
+    });
+
+
+    layer.add(yoda);
+    layer.batchDraw();
+  };
+  imageObj2.src = 'img/idea_white.png';
+
+
+  var rect1 = new Konva.Rect({
+    x: 20,
+    y: 20,
+    width: 100,
+    height: 50,
+    stroke: 'black',
+    strokeWidth: 4,
+    id: "rect",
+  });
+
+  layer.add(rect1);
+  var simpleText = new Konva.Text({
+    x: 20,
+    y: 20,
+    text: '0',
+    fontSize: 30,
+    fontFamily: 'Calibri',
+    fill: 'black',
+    id: "text",
+  });
+  layer.add(simpleText);
+
+  rect1.on('click', function () {
+    var et = stage.findOne("#text");
+    var line = stage.findOne("#line");
+    var text = et.text() == '1' ? '0' : '1';
+    var colorline = et.text() == '1' ? 'black' : 'blue';
+    line.stroke(colorline);
+    et.text(text);
+    layer.draw();
+  });
 }
\ No newline at end of file
