Merge pull request 'roomPage' (#84) from roomPage into master

Reviewed-on: #84

.gitignore

@@ -0,0 +1,2 @@
+# because you don't need to know what's in here
+note.txt

src/Model/Card.js

@@ -1,11 +1,13 @@
-class Card{
+class Card {
     /**
      * 
      * @param {*} attributes : dictionnary of attributes : key : name of the attributes and value : value of the attributes
      */
+    // attributes : shape, color, number, outline, filling
     constructor(attributes){
         this.attributes=attributes;
     }
+
     /**
      * 
      * @returns all attributes of a card
@@ -17,6 +19,7 @@ class Card{
          });
          return att;
     }
+
     /**
      * 
      * @param {*} card card to be compared with the current obj

src/Model/Deck.js

@@ -93,6 +93,7 @@ class Deck {
    * @author Bastien Jacquelin
    */
   removeFromoutputCards(selectedCards) {//working✅
+    console.log(JSON.parse(JSON.stringify(selectedCards)))
     let set = [];
     selectedCards.forEach(element => {
       for (let i = 0; i < this.outputCards.length; i++) {

src/Model/card-to-html.js

@@ -1,7 +1,7 @@
 class CardToHtml {
   
   static create(card) {
-    const gameWindow = document.querySelector('#main');
+    // const gamewindow = document.querySelector('#main');
     const div = document.createElement('div');
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 
@@ -13,16 +13,18 @@ class CardToHtml {
     
     // Create paths + add to svg
     for(let j = 0; j < 2; j++) {
-      const path = this.createPath(card.shape,card.color,card.filling,card.outline,j);
+      // Faut pas oublier le j à la fin hein, c'est pas une typo
+      const path = this.createPath(card.attributes['shape'], card.attributes['color'], card.attributes['filling'], card.attributes['outline'], j);
       svg.appendChild(path);
     }
 
     // Loop to add svg card.number times
-    for(let i = 0; i < card.number; i++) {
+    for(let i = 0; i < card.attributes['number']; i++) {
       div.appendChild(svg.cloneNode(true))
     }
 
-    gameWindow.appendChild(div);    
+    // gamewindow.appendChild(div);
+    return div;
   }
 
   static createPath(shape,color,filling,outline,step) {
@@ -33,23 +35,27 @@ class CardToHtml {
     if(color === null) color = '000000';
     if(filling === null) filling = 'fill';
 
+    // console.log("shape: " + shape);
+    // console.log("color: " + color);
+    // console.log("filling: " + filling);
+    // console.log("outline: " + outline);
+
     // Add lots of attributes
     path.setAttribute("d",SHAPE_PATH[shape]);
-    path.setAttribute('stroke',`#${color}`);
-    path.setAttribute('fill',`#${color}`);
+    path.setAttribute('stroke',`${color}`);
+    path.setAttribute('fill',`${color}`);
     path.setAttribute('stroke-width','18');
 
     // Case shape do not have color
-    if(filling === 'none') {
+    if(filling === 'none' || filling === 'empty') {
       path.setAttribute('fill','none');
     }
 
     // Add svg attributes for shape outline
-    if(outline !== null){
-      Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){
+    if(outline !== null && outline!==undefined) {
+      Object.keys(OUTLINE_SPEC[outline]).forEach(function(k) {
         path.setAttribute(k,OUTLINE_SPEC[outline][k]);
       });
-
       path.setAttribute('stroke','#000000');
     }
 

styles/card.css

@@ -3,15 +3,20 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  height: 10rem;
-  min-width: 20rem;
-  padding: 3em;
-  margin: 1.7rem; /* for better display */
+  height: 8rem;
+  min-width: 18rem;
+  padding: 1.5em;
+  margin: 1.2rem; /* for better display */
   border: 0.3em solid black;
   border-radius: 2em;
   background-color: white;
 }
 
+svg {
+  height: 12vh;
+  width: 6vh;
+}
+
 .item {
   margin: 1rem;
 }

styles/room.css

@@ -0,0 +1,81 @@
+body {
+  display: flex;
+  flex-direction: row;
+  background-color: rebeccapurple;
+}
+
+section {
+  display: flex;
+  padding: 3em;
+  flex-direction: column;
+  height: calc(100vh - 6em);
+}
+
+#left-section {
+  background-color: white;
+  width: 70vw;
+}
+
+#right-section {
+  display: flex;
+  justify-content: space-between;
+  background-color: white;
+  width: 30vw;
+}
+
+button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1.2em;
+    margin-bottom: 1em;
+    background-color: white;
+    border: 0.2rem solid black;
+    border-radius: 0.5em;
+    font-family: var(--font);
+    font-size: 1.5em;
+}
+
+#or {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  font-family: var(--font);
+  font-size: 4rem;
+  font-weight: bolder;
+  color: black;
+  margin: 1em;
+}
+
+.subtitle {
+  font-family: var(--font);
+  font-size: 1.6em;
+  font-weight: bold;
+}
+
+input[type="checkbox"] {
+  
+}
+
+.group {
+  margin-bottom: 5em;
+}
+
+.param {
+  margin-top: 1em;
+}
+
+#players {
+  display: flex;
+  flex-direction: column;
+}
+
+#players span {
+  margin-top: 1em;
+  font-size: large;
+}
+
+#start {
+  bottom: 3vh;
+  right: 3vw;
+}

views/card-module.js

@@ -5,16 +5,30 @@ export default{
         return{
             idUsed:"id"+this.id,
             isClicked:false,
+            svgCard: CardToHtml.create(this.card)
         }
     },
     methods:{
         clicked() {
             this.$emit('selected',this.id);
-        }
+        },
+    },
+    
+    // display svg card on component apparition
+    mounted() {
+        const cardDiv = document.querySelector(`#${this.idUsed}`);
+        cardDiv.appendChild(this.svgCard);
+    },
+
+    // change svg card when card object is updated
+    beforeUpdate() {
+        this.svgCard = CardToHtml.create(this.card)
+        const cardDiv = document.querySelector(`#${this.idUsed}`);
+        cardDiv.querySelector('.card').remove();
+        cardDiv.appendChild(this.svgCard);
     },
     template:`
-    <div v-bind:id="idUsed" v-bind:style="{border: '2px solid black', color: 'red', fontSize: '20px', cursor: 'pointer',width:'100%',height:'100%' }" v-on:click="clicked">
-        {{card.attributes}}
+    <div v-bind:id="idUsed" v-on:click="clicked">
     </div>
     `
 }

views/cards-test.html

@@ -79,11 +79,11 @@
   </svg>
 
   <div id="main">
-    <div class="card">
+    <!-- <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
 
       <path
-        d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
+        d="m67.892902,12.746785c43.231313,-6.717223 107.352741,6.609823 121.028973,58.746408c13.676233,52.136585 -44.848649,161.467192 -45.07116,204.650732c4.566246,56.959708 83.805481,87.929227 22.329944,105.806022c-61.475536,17.876795 -126.122496,-1.855045 -143.73294,-41.933823c-17.610444,-40.07878 49.274638,-120.109409 46.14822,-188.091997c-3.126418,-67.982588 -21.873669,-70.257464 -49.613153,-80.177084c-27.739485,-9.919618 5.678801,-52.283035 48.910115,-59.000258z"
         stroke-dasharray="1 20"
         stroke-linecap="round"
         stroke-width="18"
@@ -93,7 +93,7 @@
       />
 
       <path
-        d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
+        d="m67.892902,12.746785c43.231313,-6.717223 107.352741,6.609823 121.028973,58.746408c13.676233,52.136585 -44.848649,161.467192 -45.07116,204.650732c4.566246,56.959708 83.805481,87.929227 22.329944,105.806022c-61.475536,17.876795 -126.122496,-1.855045 -143.73294,-41.933823c-17.610444,-40.07878 49.274638,-120.109409 46.14822,-188.091997c-3.126418,-67.982588 -21.873669,-70.257464 -49.613153,-80.177084c-27.739485,-9.919618 5.678801,-52.283035 48.910115,-59.000258z"
         stroke-dasharray="1 20"
         stroke-linecap="round"
         stroke-width="18"
@@ -103,25 +103,36 @@
       />
 
       </svg>
-    </div>
+    </div> -->
   </div>
 
   <script src="../src/Model/Card.js"></script>
-  <script src="../src/Model/Card5.js"></script>
   <script src="../src/Model/Const.js"></script>
   <script src="../src/Model/card-to-html.js"></script>
   <script>
-    const testCard1 = new Card5('ed5467',3,'diamond','grid','rect');
-    const testCard2 = new Card5('78ef56',3,'star','dot','dot');
-    const testCard3 = new Card5('79ec36',3,'squiggle','stripe','spade');
-    const testCard4 = new Card5('79ec36',3,'oval','full','full');
-    const testCard5 = new Card5('79ec36',3,'triangle','none','spade');
+    // const testCard1 = new Card({shape: 'diamond', color: 'ed5467', number: 2, filling: 'grid', outline: 'rect'})
+    // const testCard2 = new Card({shape: 'star', color: '78ef56', number: 3, filling: 'dot', outline: 'dot'});
+    // const testCard3 = new Card({shape: 'squiggle', color: '79ec36', number: 2, filling: 'stripe', outline: 'spade'});
+    // const testCard4 = new Card({shape: 'oval', color: '79ec36', number: 3, filling: 'full', outline: 'full'});
+    // const testCard5 = new Card({shape: 'triangle', color: '79ec36', number: 3, filling: 'none', outline: 'spade'});
+    // const testCard6 = new Card({shape: 'squiggle', color: '008000', number: 1, filling: 'dot', outline: 'dot'});
+    // const testCard7 = new Card({shape: 'diamond', color: 'ff0000', number: 5, filling: 'stripe', outline: null});
 
-    CardToHtml.create(testCard1);
-    CardToHtml.create(testCard2);
-    CardToHtml.create(testCard3);
-    CardToHtml.create(testCard4);
-    CardToHtml.create(testCard5);
+    // const c1 = new Card({shape: 'oval', color: 'FF0000', number: 1, filling: 'full', outline: null})
+    // const c2 = new Card({shape: 'oval', color: '008000', number: 2, filling: 'full', outline: null})
+    // const c3 = new Card({shape: 'oval', color: '800080', number: 3, filling: 'full', outline: null})
+
+    const c1 = new Card({shape: 'diamond', color: 'green', number: 3, filling: 'empty', outline: null})
+    const c2 = new Card({shape: 'squiggle', color: 'blue', number: 1, filling: 'stripe', outline: null})
+    const c3 = new Card({shape: 'squiggle', color: 'blue', number: 2, filling: 'stripe', outline: null})
+    const c4 = new Card({shape: 'diamond', color: 'green', number: 2, filling: 'empty', outline: null})
+    const c5 = new Card({shape: 'oval', color: 'red', number: 2, filling: 'full', outline: null})
+
+    CardToHtml.create(c1);
+    CardToHtml.create(c2);
+    CardToHtml.create(c3);
+    CardToHtml.create(c4);
+    CardToHtml.create(c5);
   </script>
 </body>
 </html>

views/cards.html

@@ -115,105 +115,6 @@
   </svg>
 
   <div id="main">
-    <!-- <div class="card">
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
-        <use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
-        <use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" fill="#008002" mask="url(#mask-grid)"></use>
-        <use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
-      </svg>
-    </div>
-
-    <div class="card">
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
-        <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
-        <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
-        <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
-      </svg>
-    </div>
-
-    <div class="card">
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
-        <use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#FFA500" mask="url(#mask-dot)"></use>
-        <use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#FFA500" mask="url(#mask-grid)"></use>
-        <use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
-      </svg>
-    </div>
-
-    <div class="card">
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
-      </svg>
-    </div>
-
-    <div class="card">
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
-      </svg>
-    </div>
-
-    <div class="card">
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
-      </svg>
-
-      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
-      </svg>
-    </div> -->
-
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use>
@@ -241,101 +142,101 @@
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" stroke="#800080" fill="#800080" stroke-width="18"></use>
+        <use href="#squiggle" stroke="#FF0000" fill="#FF0000" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" fill="#800080" mask="url(#mask-grid)"></use>
-        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#squiggle" fill="#FF0000" mask="url(#mask-grid)"></use>
+        <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#squiggle" fill="#FF0000" mask="url(#mask-stripe)"></use>
+        <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" fill="#800080" mask="url(#mask-dot)"></use>
-        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#squiggle" fill="#FF0000" mask="url(#mask-dot)"></use>
+        <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
       </svg>
     </div>
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" stroke="#800080" fill="#800080" stroke-width="18"></use>
+        <use href="#diamond" stroke="#008000" fill="#008000" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#800080" mask="url(#mask-grid)"></use>
-        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#008000" mask="url(#mask-grid)"></use>
+        <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#008000" mask="url(#mask-stripe)"></use>
+        <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#800080" mask="url(#mask-dot)"></use>
-        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#008000" mask="url(#mask-dot)"></use>
+        <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
       </svg>
     </div>
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" stroke="#800080" fill="#800080" stroke-width="18"></use>
+        <use href="#star" stroke="#0000FF" fill="#0000FF" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#800080" mask="url(#mask-grid)"></use>
-        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#star" fill="#0000FF" mask="url(#mask-grid)"></use>
+        <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#star" fill="#0000FF" mask="url(#mask-stripe)"></use>
+        <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#800080" mask="url(#mask-dot)"></use>
-        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#star" fill="#0000FF" mask="url(#mask-dot)"></use>
+        <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
       </svg>
     </div>
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" stroke="#800080" fill="#800080" stroke-width="18"></use>
+        <use href="#triangle" stroke="#FFA500" fill="#FFA500" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" fill="#800080" mask="url(#mask-grid)"></use>
-        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#triangle" fill="#FFA500" mask="url(#mask-grid)"></use>
+        <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#triangle" fill="#FFA500" mask="url(#mask-stripe)"></use>
+        <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" fill="#800080" mask="url(#mask-dot)"></use>
-        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#triangle" fill="#FFA500" mask="url(#mask-dot)"></use>
+        <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
       </svg>
     </div>
   </div>

views/deck-module.js

@@ -18,6 +18,7 @@ export default{
     },
     methods:{
         selected(id){
+            console.log(id);
             if(this.nbCardsSelected>=this.deck.nbCards){
                 this.set();
                 console.log("deb")
@@ -25,14 +26,14 @@ export default{
             else{
                 if(this.selectedCards[id]!=null){
                     console.log("deselec")
-                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid black; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%");
+                    document.querySelector(`#id${id}`).setAttribute("style","border: none;cursor: pointer;");
                     this.nbCardsSelected-=1
                     this.selectedCards[id]=null
                 }
                 else{
                     console.log("Selec")
                     this.selectedCards[id]=this.deck.outputCards[id-1]
-                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%");
+                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; cursor: pointer;");
                     this.nbCardsSelected+=1
                     if(this.nbCardsSelected==this.deck.nbCards){
                         console.log("this.selectedCards.length",this.selectedCards.length)
@@ -60,10 +61,8 @@ export default{
         <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>
+    <div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 18rem 20px 20px'}">
+            <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
     </div>
     `
 }

views/game.html

@@ -9,6 +9,7 @@
     <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">
+    <link rel="stylesheet" type="text/css" href="/styles/card.css">
     <link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
 </head>
 
@@ -23,11 +24,73 @@
     </ul>
 </header>
 <body>
+    <svg width="200" height="400" style="position: fixed; z-index: -1">
+        <defs>
+          <pattern
+            id="pattern-stripe"
+            width="2"
+            height="20"
+            patternUnits="userSpaceOnUse"
+          >
+            <rect width="2" height="8" fill="#fff" />
+          </pattern>
+    
+          <pattern
+            id="pattern-grid"
+            width="30"
+            height="30"
+            patternUnits="userSpaceOnUse"
+          >
+            <rect width="7.5" height="30" fill="#fff" />
+            <rect width="30" height="7.5" fill="#fff" />
+          </pattern>
+    
+          <pattern
+            id="pattern-dot"
+            width="40"
+            height="40"
+            patternUnits="userSpaceOnUse"
+          >
+            <circle cx="18" cy="18" r="12" fill="#fff" />
+          </pattern>
+    
+          <mask id="mask-stripped">
+            <rect
+              x="0"
+              y="0"
+              width="200"
+              height="400"
+              fill="url(#pattern-stripe)"
+            />
+          </mask>
+    
+          <mask id="mask-pointed">
+            <rect
+              x="0"
+              y="0"
+              width="200"
+              height="400"
+              fill="url(#pattern-dot)"
+            />
+          </mask>
+    
+          <mask id="mask-squared">
+            <rect
+              x="0"
+              y="0"
+              width="200"
+              height="400"
+              fill="url(#pattern-grid)"
+            />
+          </mask>
+        </defs>
+      </svg>
     <div id="app">
         <deck-module id-room="00000" :mode=false></deck-module>
     </div>
     <section>
     </section>
+    <script src="/src/Model/card-to-html.js"></script>
     <script src="/src/Model/Exceptions.js"></script>
     <script src="/src/Model/Card.js"></script>
     <script src="/src/algo.js"></script>

views/room.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Room - HyperSet</title>
+  <link rel='stylesheet' type='text/css' href='/styles/style.css' />
+  <link rel='stylesheet' type='text/css' href='/styles/room.css' />
+</head>
+
+<body>
+  <section id="left-section">
+    <button>Orignal Set Game</button>
+
+    <div>
+      <label>Private</label>
+      <input type='checkbox' />
+    </div>
+
+    <span id="or">OR</span>
+
+    <div class="group">
+      <span class="subtitle">Game parameters</span>
+      <div id="game-param">
+        <label id="chrono-slider-label">js</label><br>
+        <input type="range" min="1" max="8" value="1" class="slider" id="chrono-slider"><br>
+        <label id="player-slider-label">js</label><br>
+        <input type="range" min="0" max="20" value="0" class="slider" id="player-slider"><br>
+        <span>HyperSet</span> <input type='checkbox' /><br>
+      </div>
+    </div>
+
+    <div class="group">
+      <span class="subtitle">Card number to make a set</span>
+      <div id='card-param' class="param">
+        <input type='checkbox' /> <span>3</span>
+        <input type='checkbox' /> <span>4</span>
+        <input type='checkbox' /> <span>5</span>
+      </div>
+    </div>
+
+    <div class="group">
+      <span class="subtitle">Attributes to play with</span>
+      <div id='attributes-param' class="param">
+        <input type='checkbox' /> <span>number</span>
+        <input type='checkbox' /> <span>color</span>
+        <input type='checkbox' /> <span>shape</span>
+        <input type='checkbox' /> <span>filling</span>
+        <input type='checkbox' /> <span>outline (honnêtement c'est nul)</span>
+      </div>
+    </div>
+    
+  </section>
+
+  <section id="right-section">
+    <div>
+      <span class="subtitle">List of players waiting in the room:</span>
+      <div id="players">
+        <span>Aurianus</span>
+        <span>Basuw</span>
+        <span>Raph</span>
+        <span>Remrem</span>
+      </div>
+    </div>
+
+    <button id="start">START</button>
+  </section>
+</body>
+
+</html>