From 9fabc816a93fe743e9adfe88a788274568b8580f Mon Sep 17 00:00:00 2001
From: RemRem <remrem@github.com>
Date: Mon, 6 Mar 2023 17:53:35 +0100
Subject: [PATCH] add case when shape is empty

---
 src/Model/card-to-html.js |  9 +++++++--
 views/cards-test.html     | 10 ++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js
index 444b59f..048befd 100644
--- a/src/Model/card-to-html.js
+++ b/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){
diff --git a/views/cards-test.html b/views/cards-test.html
index df6c828..f1e7825 100644
--- a/views/cards-test.html
+++ b/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>
\ No newline at end of file