diff --git a/README.md b/README.md
index e69de29..2128d4d 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,4 @@
+# Echoes
+
+Echoes est un jeu collaboratif, disponible sur navigateur, qui met en scene deux prisonniers d'un complexe industriel abandonne.
+Pour s'echapper avant d'etre tues par les fumees toxiques du complexe. Les deux joueurs doivent faire preuve de communication en decrivant les salles et en decryptant les consignes d'evacuation diffuses dans les salles de regroupement.
diff --git a/client/index.html b/client/index.html
index 69bf538..1a21bc5 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,13 +7,26 @@
 <body>
   <h1>Bonjour !</h1>
   <p>Ceci est une page statique servie par Express.</p>
+  <canvas id="maze" width="490" height="490" style="border: 1px solid #333; display: none;"></canvas>
   <input type="text" id="input" placeholder="message">
   <button id="sendBtn">Envoyer</button>
   <script src="/socket.io/socket.io.js"></script>
   <script>
     const socket = io();
+    let myRole = null;
     console.log("Connecte au serveur, id :", socket.id);
-    socket.on("role", (role) => console.log("Mon rôle :", role));
+    socket.on("role", (role) => {
+      console.log("Mon role :", role);
+      myRole = role;
+      
+      if (role === "explorateur"){
+        canvas.style.display = "block";
+        render();
+      } else {
+        canvas.style.display = "none";
+      }
+    });
+
     socket.on("status", (msg) => console.log("Status :", msg));
     document.getElementById("sendBtn").addEventListener("click", () => {
       const text = document.getElementById("input").value;
@@ -22,6 +35,72 @@
     socket.on("message", (data) => {
       console.log("message recu du partenaire :", data);
     });
+  
+    const maze = [
+      [1,1,1,1,1,1,1],
+      [1,0,0,0,1,0,1],
+      [1,0,1,0,1,0,1],
+      [1,0,1,0,1,0,1],
+      [1,0,1,1,1,0,1],
+      [1,0,0,0,0,0,1],
+      [1,1,2,1,1,2,1],
+    ];
+    
+    const canvas = document.getElementById("maze");
+    const ctx = canvas.getContext("2d");
+    const cellSize = 70;
+    const player = { x : 1, y : 1};
+
+    
+    function drawMaze(){
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      for (let y = 0; y < maze.length; y++){
+        for (let x = 0; x < maze[y].length; x++){
+          if (maze[y][x] === 1)ctx.fillStyle = "#333";
+          else if (maze[y][x] === 2) ctx.fillStyle = "gold";
+          else ctx.fillStyle = "#eee";
+          
+          ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+        }
+      }
+    }
+
+    function drawPlayer(){
+      ctx.fillStyle = "red";
+      ctx.beginPath();
+      ctx.arc(
+        player.x * cellSize + cellSize / 2,
+        player.y * cellSize + cellSize / 2,
+        cellSize / 3,
+        0, Math.PI * 2
+      );
+      ctx.fill();
+    }
+
+    function render(){
+      drawMaze();
+      drawPlayer();
+    }
+
+    document.addEventListener("keydown", (e) => {
+      if (myRole !== "explorateur") return;
+    
+      let newX = player.x;
+      let newY = player.y;
+
+      if (e.key === "ArrowUp") newY--;
+      else if (e.key === "ArrowDown") newY++;
+      else if (e.key === "ArrowLeft") newX--;
+      else if (e.key === "ArrowRight") newX++;
+      else return;
+
+      if (maze[newY][newX] === 0 || maze[newY][newX] === 2){
+        player.x = newX;
+        player.y = newY;
+        render();
+      }
+    });
   </script>
   </body>
 </html>
