add id room, timer etc & style

2 years ago · aa019a020d
parent 3fc90743e2
commit aa019a020d
3 changed files with 28 additions and 9 deletions
--- a/styles/game.css
+++ b/styles/game.css
@ -0,0 +1,11 @@
+.description{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 2rem  4rem  2rem  4rem;
+}
+
+h2{
+    font-size: 28px;
+}
--- a/views/deck-module.js
+++ b/views/deck-module.js
@ -2,6 +2,7 @@ export default{
    emits:[],
    props:{
        deckR:Deck,
+        idRoom:String
    },
    data: function(){
        return{
@ -10,7 +11,8 @@ export default{
            deck : new Deck([0,1,2,3],3),
            selectedCards:[],
            nbCardsSelected:0,
-            width:'12%'
+            connected:'7/8',
+            timer:'10.51',
        }
    },
    methods:{
@ -50,7 +52,13 @@ export default{
        },
    },
    template:`
-    <div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'20px 10em 20px 20px'}">
+    <div class="description">
+        <h2>Room: {{idRoom}}</h2>
+        <h2>{{timer}}</h2>
+        <h2>Players: {{connected}}</h2>
+    </div>
+    
+    <div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 25rem 20px 20px'}">
        <div class="Cardframe" v-bind:style="{ width:'12%', height:'15rem', margin:'2% 2% 2% 2%'}" v-for="n in deck.outputCards.length">
            <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1]></card-module>
        </div>
--- a/views/game.html
+++ b/views/game.html
@ -8,22 +8,22 @@
    <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
    <link rel="stylesheet" type="text/css" href="/styles/style.css">
    <link rel="stylesheet" type="text/css" href="/styles/index.css">
+    <link rel="stylesheet" type="text/css" href="/styles/game.css">
 </head>


 <header>
    <ul id="nav-bar">
-        <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
-        <li><a href="./views/cards-test.html">Card Test</a></li>
-        <li><a href="./views/tutorial.html">Tutorial</a></li>
-        <li><a href="./views/leaderboard.html">Leaderboard</a></li>
-        <li><a href="./views/about.html">About</a></li>
+        <li><a href="/index.html">Home</a></li> <!-- maybe put a logo -->
+        <li><a href="/views/cards-test.html">Card Test</a></li>
+        <li><a href="/views/tutorial.html">Tutorial</a></li>
+        <li><a href="/views/leaderboard.html">Leaderboard</a></li>
+        <li><a href="/views/about.html">About</a></li>
    </ul>
 </header>
 <body>
    <div id="app">
-        <h1>Game - test </h1>
-        <deck-module></deck-module>
+        <deck-module id-room="00000"></deck-module>
    </div>
    <section>
    </section>