Implement client events on client-side

events.go

@@ -13,23 +13,33 @@ type JSONEvent struct {
 
 // GameInList contains short info about game.
 type GameInList struct {
-	Name string `json:"name"`
 	Id   uint64 `json:"id"`
+	Name string `json:"name"`
+}
+
+// ClientInList contains short info about client in lobby
+type ClientInList struct {
+	Id       uint64 `json:"id"`
+	Nickname string `json:"nickname"`
 }
 
 // ClientJoinedEvent contains info for the just connected client.
 type ClientJoinedEvent struct {
-	Id         uint64        `json:"id"`
-	Nickname   string        `json:"nickname"`
-	ClientsNum int           `json:"clients_num"`
-	Games      []*GameInList `json:"games"`
+	YourId       uint64          `json:"your_id"`
+	YourNickname string          `json:"your_nickname"`
+	Clients      []*ClientInList `json:"clients"`
+	Games        []*GameInList   `json:"games"`
+}
+
+// ClientLeftEvent contains id of client who left lobby
+type ClientLeftEvent struct {
+	Id uint64 `json:"id"`
 }
 
 // ClientBroadCastJoinedEvent contains info for other clients when a new client was connected.
 type ClientBroadCastJoinedEvent struct {
-	Id         uint64 `json:"id"`
-	Nickname   string `json:"nickname"`
-	ClientsNum int    `json:"clients_num"`
+	Id       uint64 `json:"id"`
+	Nickname string `json:"nickname"`
 }
 
 // PlayersEvent contains list of players which were connected to a game.

html/index.html

@@ -33,6 +33,19 @@ <h2 style="text-align: center; font-size: 20px; font-weight: bold; color: #333;
             <div id="disconnected" style="display: none; color: #FFDF00; text-align: center; font-size: 18px; font-weight: bold;">Disconnected</div>
         </div>
 
+        <div id="app">
+            <div>
+                <div>Your id: {{clientsInfo.yourId}}</div>
+                <div>Your nickname: {{clientsInfo.yourNickname}}</div>
+            </div>
+            <div>Clients: </div>
+            <ol>
+                <li v-for="client in clientsInfo.clients">
+                  {{ client.nickname }}#{{ client.id }} 
+                </li>
+            </ol>
+        </div>
+
         <button id="send">Send somthing</button>
 
         <script>
@@ -116,6 +129,7 @@ <h2 style="text-align: center; font-size: 20px; font-weight: bold; color: #333;
 
             })();
         </script>
+        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
         <script src="js/index.js"></script>
   </body>
 </html>

html/js/index.js

@@ -1,6 +1,61 @@
-OnIncomingMessage = function(msg) {
-    console.log(msg.name, msg.data);
-};
+function App() {
+    var app = this;
+
+    var clients = [];
+
+    this.vue = new Vue({
+      el: '#app',
+      data: {
+        clientsInfo: {
+          yourId: '',
+          yourNickname: '',
+          clients: []
+        }
+      }
+    });
+
+    this.onMessage = function(msg) {
+        const onEventMethodName = 'on' + msg.name;
+        let methodFound = false;
+        for (prop in app) {
+            if (prop === onEventMethodName) {
+                app[onEventMethodName](msg.data);
+                methodFound = true;
+                break;
+            }
+        }
+        if (!methodFound) {
+          console.warn("Method not found for event", msg);
+        }
+        console.log(msg.name, msg.data);
+    };
+
+    this.onClientJoinedEvent = function(data) {
+        app.vue.clientsInfo.yourId = data.your_id;
+        app.vue.clientsInfo.yourNickname = data.your_nickname;
+        app.vue.clientsInfo.clients = data.clients;
+    };
+
+    this.onClientBroadCastJoinedEvent = function(data) {
+        app.vue.clientsInfo.clients.push(data);
+    };
+
+    this.onClientLeftEvent = function(data) {
+        let clients = app.vue.clientsInfo.clients;
+        for (let ind = 0; ind < clients.length; ind++) {
+            if (clients[ind].id === data.id) {
+                clients.splice(ind, 1);
+            }
+        }
+        app.vue.clientsInfo.clients = clients;
+    }
+}
+
+(function(){
+  var app = new App();
+  OnIncomingMessage = app.onMessage;
+})();
+
 
 let sendBtn = document.getElementById('send');
 sendBtn.onclick = function() {

lobby.go

@@ -46,10 +46,12 @@ func (l *Lobby) run() {
 			client.id = lastClientIdSafe
 			l.clients[client] = true
 		case client := <-l.unregister:
+			leftId := client.id
 			if _, ok := l.clients[client]; ok {
 				delete(l.clients, client)
 				close(client.send)
 			}
+			l.onLeft(leftId)
 		case message := <-l.broadcast:
 			for client := range l.clients {
 				select {
@@ -86,31 +88,49 @@ func (l *Lobby) broadcastEvent(event interface{}) {
 
 func (l *Lobby) onJoin(c *Client, nickname string) {
 	c.nickname = nickname
+
+	broadcastEvent := &ClientBroadCastJoinedEvent{
+		Id:       c.id,
+		Nickname: c.nickname,
+	}
+	l.broadcastEvent(broadcastEvent)
+
+	clientsInList := make([]*ClientInList, 0)
+	for client := range l.clients {
+		clientInList := &ClientInList{
+			Id:       client.id,
+			Nickname: client.Nickname(),
+		}
+		clientsInList = append(clientsInList, clientInList)
+	}
+
 	gamesInList := make([]*GameInList, 0)
-	gameInList := &GameInList{}
 	for _, game := range l.games {
 		if game.status != GameStatusFinished {
-			gameInList.Name = game.getName()
-			gameInList.Id = game.id
+			gameInList := &GameInList{
+				Id:   game.id,
+				Name: game.getName(),
+			}
 			gamesInList = append(gamesInList, gameInList)
 		}
 	}
-	broadcastEvent := &ClientBroadCastJoinedEvent{
-		Id:         c.id,
-		Nickname:   c.nickname,
-		ClientsNum: len(l.clients),
-	}
-	l.broadcastEvent(broadcastEvent)
 
 	event := &ClientJoinedEvent{
-		Id:         c.id,
-		Nickname:   nickname,
-		ClientsNum: len(l.clients),
-		Games:      gamesInList,
+		YourId:       c.id,
+		YourNickname: nickname,
+		Clients:      clientsInList,
+		Games:        gamesInList,
 	}
 	c.sendEvent(event)
 }
 
+func (l *Lobby) onLeft(leftId uint64) {
+	leftEvent := &ClientLeftEvent{
+		Id: leftId,
+	}
+	l.broadcastEvent(leftEvent)
+}
+
 func (l *Lobby) onClientMessage(m *ClientMessage) {
 	if m.Type == "lobby" {
 		if m.SubType == "join" {