a lot of things: repair code, room.css ...

.gitignore

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

index.html

@@ -37,7 +37,7 @@
     </div>
     <div id="right" class="column">
         <button class="action-button">Join Public Game</button>
-        <button class="action-button">New Public Game</button>
+        <button class="action-button"><a href="/views/room.html">New Public Game</a></button>
         <button class="action-button">New Private Game</button>
     </div>
 </div>

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/card-to-html.js

@@ -13,12 +13,13 @@ 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))
     }
 
@@ -33,6 +34,11 @@ 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}`);
@@ -45,11 +51,10 @@ class CardToHtml {
     }
 
     // Add svg attributes for shape outline
-    if(outline !== null){
-      Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){
+    if(outline !== null) {
+      Object.keys(OUTLINE_SPEC[outline]).forEach(function(k) {
         path.setAttribute(k,OUTLINE_SPEC[outline][k]);
       });
-
       path.setAttribute('stroke','#000000');
     }
 

styles/room.css

@@ -0,0 +1,49 @@
+body {
+  display: flex;
+  flex-direction: row;
+  background-color: rebeccapurple;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 50vw;
+}
+
+#right-section {
+  background-color: aqua;
+}
+
+#left-section {
+  background-color: white;
+}
+
+button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1.2em;
+    background-color: white;
+    border: 0.2rem solid black;
+    border-radius: 0.5em;
+    font-family: var(--font);
+    font-size: 1.5em;
+}
+
+#or {
+  font-family: var(--font);
+  font-size: 4rem;
+  font-weight: bolder;
+  color: black;
+}
+
+.sub-title {
+  font-family: var(--font);
+  font-size: 1.6em;
+  font-weight: bold;
+}
+
+input[type="checkbox"] {
+  
+}

views/cards-test.html

@@ -83,7 +83,7 @@
       <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"
@@ -107,21 +107,23 @@
   </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('ed5467',3,'diamond','grid','rect');
+    // const testCard2 = new Card('78ef56',3,'star','dot','dot');
+    // const testCard3 = new Card('79ec36',3,'squiggle','stripe','spade');
+    // const testCard4 = new Card('79ec36',3,'oval','full','full');
+    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'});
 
-    CardToHtml.create(testCard1);
-    CardToHtml.create(testCard2);
-    CardToHtml.create(testCard3);
+    // CardToHtml.create(testCard1);
+    // CardToHtml.create(testCard2);
+    // CardToHtml.create(testCard3);
     CardToHtml.create(testCard4);
     CardToHtml.create(testCard5);
+    CardToHtml.create(testCard6);
   </script>
 </body>
 </html>

views/room.html

@@ -8,19 +8,19 @@
 </head>
 
 <body>
-  <section>
+  <section id="left-section">
     <button>Orignal Set Game</button>
 
-    <span>OR</span>
+    <span id="or">OR</span>
 
-    <span>Card number to make a set</span>
+    <span class="sub-title">Card number to make a set</span>
     <div id='card-param'>
       <input type='checkbox' /> <span>3</span>
       <input type='checkbox' /> <span>4</span>
       <input type='checkbox' /> <span>5</span>
     </div>
 
-    <span>Attributes to play with</span>
+    <span class="sub-title">Attributes to play with</span>
     <div id='attributes-param'>
       <input type='checkbox' /> <span>number</span>
       <input type='checkbox' /> <span>color</span>
@@ -30,7 +30,7 @@
     </div>
   </section>
 
-  <section>
+  <section id="right-section">
     <span>Game parameters</span>
 
     <span>Private</span> <input type='checkbox' />
@@ -38,6 +38,14 @@
 
     <span>HyperSet</span> <input type='checkbox' />
 
+    <div id="players">
+      <span>List of player in room:</span>
+      <span>Aurianus</span>
+      <span>Basuw</span>
+      <span>Raph</span>
+      <span>Remrem</span>
+    </div>
+
     <button>START</button>
   </section>
 </body>