Lobby with live update

frontend/src/views/Lobby.vue

 <template>
   <div class="lobby">
-    <user-ribbon class="lobby-ribbon" username="Josie Péritel" pathToImage="avatar/criquette.jpg"/>
+    <user-ribbon class="lobby-ribbon" username="Josie Péritel"/>
     <div class="lobby-content">
       <div class="lobby-column">
         <page-title pagetitle="Parties"/>
@@ -17,9 +17,9 @@
       <div class="lobby-column games-list">
         
         <form class="lobby-games" action="#" @submit.prevent="onSubmitJoinPublic">
-            <button class="join-game-button" v-for="game of games" :key="game.id" :id="game.id" width="100%" height="80px" @mouseover="mouseOver(game.id)" @mouseleave="mouseOver(0)">
-              {{game.name}}
-              <p class="hidden-join-tag" :id="'join-tag-'+game.id" style="visibility: hidden;">Rejoindre</p>
+            <button class="join-game-button" v-for="game of games" :key="game.ID_GAME" :id="game.ID_GAME" width="100%" height="80px" @mouseover="mouseOver(game.ID_GAME)" @mouseleave="mouseOver(0)">
+              Partie de {{game.LOGIN}} : ({{game.NB_PLAYER}}/4)
+              <p class="hidden-join-tag" :id="'join-tag-'+game.ID_GAME" style="visibility: hidden;">Rejoindre</p>
             </button>
         </form>
       </div>
@@ -44,19 +44,35 @@ export default {
     TextInput
   },
   methods: {
+    updateGames: async function(){
+      let response = await fetch(this.$apiRoot+'/game/public', {method: 'GET'});
+      if (response.ok){
+        let json = await response.json();
+        this.games=json;
+      }
+    },
+    /*
+    * using the id of the hovered button, highlight (id>0) or set back to default style (id=0) the relevant button 
+    */
     mouseOver: function(id){
+      //id is 0 when @mouseleave is triggered : all the highligted buttons get their default style
       if (id ==0) {
         for(element of document.getElementsByClassName("button-over")){
           element.classList.remove("button-over");
+          //and the join tag is hidden
           document.getElementById('join-tag-'+element.id).style.visibility = "hidden";
         }
-      }else{
+      }
+      //id is not 0 when the mouse gets over a button which is highlighted with the button-over class
+      else{
         var element = document.getElementById(id);
         element.classList.add("button-over");
+        //and the join tag is displayed
         document.getElementById('join-tag-'+element.id).style.visibility = "visible";
 
       }
     },
+
     onSubmitMenu: function(){
       if (event.submitter.id=='profile') {
         this.$router.push('profile');
@@ -77,14 +93,18 @@ export default {
   data () {
     return {
       games: [
-        {id: 1, name: "Partie 1"},
-        {id: 2, name: "Partie 2"},
-        {id: 3, name: "Partie 3"},
-        {id: 4, name: "Partie 4"},
-       
+          {
+            "ID_GAME": "2",
+            "NB_PLAYER": "1",
+            "LOGIN": "admin"
+          }
       ]
     }
     
+  },
+
+  mounted () {
+    this.handle = setInterval(this.updateGames, 1000)
   }
 }
 </script>