diff --git a/index.html b/index.html
index 9ea0ec5..8ea5eba 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,8 @@
 color:rgb(128, 128, 128);
 font-size: xx-large;">
     <h1 style="text-align:center">MBC Het Groote Dok</h1>
-    <canvas id="canvas" name="game"></canvas>
+    <div id="boats"></div>
+    <canvas id="canvas" name="game" style="display:none"></canvas>
     <div id="clientId"></div>
     <script>
         var clientId = -1;
@@ -26,12 +27,16 @@ font-size: xx-large;">
             document.cookie = "clientId=" + clientId;
         }
         document.getElementById("clientId").innerHTML = "client id: " + clientId;
+            // console.log(data);
+        var boatListEl = document.getElementById('boats');
+        var stickEl = document.getElementById('canvas');
 
-        var connection = new WebSocket('ws://' + "10.254.0.1" + ':8080/', ['mbcRcRf']);
+        var connection = new WebSocket('ws://' + "localhost" + ':8080/', ['mbcRcRf']);
         
         connection.onopen = function () 
         {
-            connection.send(clientId + ':' + (new Date()));
+            connection.send(clientId + ';' + Math.floor(new Date().getTime()/1000.0).toString());
+            setTimeout(() => { connection.send(clientId + ';boats'); }, 100);
         };
 
         connection.onerror = function (error)
@@ -42,13 +47,43 @@ font-size: xx-large;">
 
         connection.onmessage = function (e)
         {
-            console.log('Server: ', e.data);
+            let data = e.data.split(':');
+            if (data[0] == "boats")
+            {
+                console.log("boats: ", data);
+                boatListEl.innerHTML = "";
+                stickEl.style.display = 'none';
+                boatListEl.style.display  = 'block';
+                for (let boat in data)
+                {
+                    boat = data[boat].split(';');
+                    if ((boat.length == 3) && (boat[2] == 'available'))
+                    {
+                        console.log("render boat", boat);
+                        let el = document.createElement("div");
+                        el.id = "boat" + boat[0];
+                        el.innerHTML = boat[1];
+                        el.addEventListener('click', selectBoat);
+                        boatListEl.appendChild(el);
+                    }
+                }
+            }
+            else
+            {
+                console.log('Server: ', e.data);
+            }
         };
 
+        function selectBoat(e)
+        {
+            console.log('selectBoat:', e.target.id.split('boat')[1]);
+            stickEl.style.display = 'block';
+            boatListEl.style.display  = 'none';
+        }
+
         function send(x,y,speed,angle){
-            var data = clientId + "," + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
+            var data = clientId + ";d;" + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
             //data = JSON.stringify(data);
-            console.log(data);
             connection.send(data);
         }
 
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..4a6f2e7
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,17 @@
+## controller
+
+generates self a random id of 4 digits
+
+### protocole send
+
+register: `<clientID>;<current epoch>`  
+command: `<clientID>;d;<x_value>,<y_value>`  
+request boats: `<clientID>;boats`  
+
+### protocole recive
+
+list of boats: `boats:<boatID>;<boat_name>;<boat_status>[;<boatID>;<boat_name>;<boat_status>[...]]`
+
+> exits controll mode and enter boat select mode
+
+error: `FAIL`
diff --git a/recever.py b/recever.py
index 26346e8..fa9a306 100644
--- a/recever.py
+++ b/recever.py
@@ -58,7 +58,7 @@ async def echoClients(client):
     if (client['id'] == adminId):
         data = "clients:"
         for client in clients:
-            data += str(client['id']) + ";" + str(client['boat']) + ":"
+            data += str(client['id']) + ";" + str(client['boat']) + ";" + str(client['state']) + ":"
         await client['ws'].send(data + '\n')
 
 async def onMessage(message, client):
@@ -70,26 +70,31 @@ async def onMessage(message, client):
         if  (data[1] == "boats"):
             await echoBoats(client)
         elif(data[1] == "ctrl"):
-            print("controll");
+            print("controll")
         elif(data[1] == "end"):
-            print("end");
+            print("end")
         elif(data[1] == "free"):
-            print("free");
+            print("free")
         elif(data[1] == "lock"):
-            print("lock");
+            print("lock")
         elif(data[1] == "locked"):
-            await echoLockedBoats(client);
+            await echoLockedBoats(client)
         elif(data[1] == "kick"):
-            print("kick");
+            print("kick")
         elif(data[1] == "clients"):
-            print("clients");
+            await echoClients(client)
+        elif(data[1] == "d"):
+            print("controll cmd (" + client['id'] + "): " + data[2])
         else:
             print("something else: '" + data[1] + "'")
 
 async def newClient(message, ws):
     message = message.split(';')
-    client = { "id": message[0], "boat": None, "ws": ws }
+    client = { "id": message[0], "boat": None, "ws": ws, "state": "active" }
     print("new client connected: " + client['id'])
+    for clie in clients:
+        if (clie['id'] == client['id']):
+            clie['state'] = 'terminated'
     clients.append(client)
     if (client['id'] == adminId):
         await echoBoats(client)
@@ -105,7 +110,10 @@ async def run(ws, path):
             break
 
     async for message in ws:
-        await onMessage(message, client)
+        if (client['state'] == 'active'):
+            await onMessage(message, client)
+        else:
+            break
 
 async def main():
     async with serve(run, "0.0.0.0", 8080):