add case when shape is empty

src/Model/card-to-html.js

@@ -20,13 +20,13 @@ class CardToHtml {
     // Loop to add svg card.number times
     for(let i = 0; i < card.number; i++) {
       div.appendChild(svg.cloneNode(true))
-      console.log("+SVG: ",svg);
     }
 
-    gameWindow.appendChild(div);
+    gameWindow.appendChild(div);    
   }
 
   static createPath(shape,color,filling,outline,step) {
+    // The way to create svg element (differs from html element)
     const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
 
     if(shape === null) shape = 'oval';
@@ -39,6 +39,11 @@ class CardToHtml {
     path.setAttribute('fill',`#${color}`);
     path.setAttribute('stroke-width','18');
 
+    // Case shape do not have color
+    if(filling === 'none') {
+      path.setAttribute('fill','none');
+    }
+
     // Add svg attributes for shape outline
     if(outline !== null){
       Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){

views/cards-test.html

@@ -111,15 +111,17 @@
   <script src="../src/Model/Const.js"></script>
   <script src="../src/Model/card-to-html.js"></script>
   <script>
-    const testCard1 = new Card5('ed5467',2,'diamond','grid','rect');
+    const testCard1 = new Card5('ed5467',3,'diamond','grid','rect');
     const testCard2 = new Card5('78ef56',3,'star','dot','dot');
-    const testCard3 = new Card5('79ec36',1,'squiggle','stripe','spade');
-
-
+    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');
 
     CardToHtml.create(testCard1);
     CardToHtml.create(testCard2);
     CardToHtml.create(testCard3);
+    CardToHtml.create(testCard4);
+    CardToHtml.create(testCard5);
   </script>
 </body>
 </html>