mock links to games

frontend/src/views/Lobby.vue

@@ -16,8 +16,11 @@
       </div>
       <div class="lobby-column games-list">
         
-        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitJoinPublic">
-            <button-text v-for="game of games" :key="game.id" :id="game.id" width="100%" height="80px" :text="game.name"/>
+        <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>
         </form>
       </div>
     </div>
@@ -27,9 +30,9 @@
 <script>
 // @ is an alias to /src
 import UserRibbon from '@/components/UserRibbon.vue'
-import PageTitle from '../components/PageTitle.vue'
-import ButtonText from '../components/ButtonText.vue'
-import TextInput from '../components/form/TextInput.vue'
+import PageTitle from '@/components/PageTitle.vue'
+import ButtonText from '@/components/ButtonText.vue'
+import TextInput from '@/components/form/TextInput.vue'
 
 
 export default {
@@ -41,6 +44,20 @@ export default {
     TextInput
   },
   methods: {
+    mouseOver: function(id){
+      if (id ==0) {
+        for(element of document.getElementsByClassName("button-over")){
+          element.classList.remove("button-over");
+          document.getElementById('join-tag-'+element.id).style.visibility = "hidden";
+        }
+      }else{
+        var element = document.getElementById(id);
+        element.classList.add("button-over");
+        console.log(document.getElementById('join-tag-'+element.id).style.visibility);
+        document.getElementById('join-tag-'+element.id).style.visibility = "visible";
+
+      }
+    },
     onSubmitMenu: function(){
       if (event.submitter.id=='profile') {
         this.$router.push('profile');
@@ -64,7 +81,8 @@ export default {
         {id: 1, name: "Partie 1"},
         {id: 2, name: "Partie 2"},
         {id: 3, name: "Partie 3"},
-        {id: 4, name: "Partie 4"}
+        {id: 4, name: "Partie 4"},
+       
       ]
     }
     
@@ -76,11 +94,14 @@ export default {
 .lobby-ribbon{
   margin-left:auto; 
   margin-right:0;
+  height: 10vh;
 }
 
 .lobby-content{
   display: flex;
   flex-direction: row;
+  max-width: 100%;
+  height: 80vh;
 }
 
 .lobby-column{
@@ -96,13 +117,50 @@ export default {
   flex-direction: column;
   margin-bottom: 40px;
 }
+.lobby-games{
+  background: rgba(196, 196, 196, 0.6);
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+  height: inherit;
+  overflow:auto
+}
+
+.join-game-button{
+  background: rgba(196, 196, 196, 0.6);
+  border: none;
+  height: 30px;
+  text-align: left;
+  font-family: Shojumaru;
+  font-size: 20px;
+  margin: 10px 20px;
+  flex-direction: row;
+  display: flex;
+}
+
+.join-game-button p{
+  margin: 0 0 0 auto;
+}
+
+.button-over{
+  background: green;
+}
+
+.hidden-join-tag{
+  text-align: right;
+}
 
 .lobby{
   display: flex;
   flex-direction: column;
+  max-height: 100vh;
 }
 
-
+.lobby *{
+/*  background: rgba(196, 196, 196, 0.2);
+  */
+}
 
 .lobby-text-input{
   margin: 0;