fuck createPath func works (at 70%)

src/Model/Const.js

@@ -5,18 +5,18 @@ const tabFilling = ['empty','stripped','fullO','pointed','squared'];
 const tabOutline = ['full','dot','rect','spade','sharp'];
 const ATTRIBUTES=[tabColor,tabNumber,tabShape,tabFilling,tabOutline];
 
-const SHAPE_PATH = ```{
+const SHAPE_PATH = {
-"squiggle" : "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",
+squiggle : "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",
-"diamond" : "m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z",
+diamond : "m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z",
-"triangle" : "M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z",
+triangle : "M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z",
-"star" : "m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z",
+star : "m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z",
-"oval" : "m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
+oval : "m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
-}```;
+};
 
-const OUTLINE_SPEC = ```{
+const OUTLINE_SPEC = {
-"full" : [],
+full : {},
-"dot" : [ "stroke-dasharray" : "1 20", "stroke-linecap" : "round" ],
+dot : { strokedasharray : "1 20", strokelinecap : "round" },
-"rect" : ["stroke-dasharray" : 70],
+rect : { "stroke-dasharray" : 70},
-"spade" : ["stroke-dasharray" : "10 15", "stroke-width" : 70],
+spade : { "stroke-dasharray" : "10 15", "stroke-width" : 70},
-"sharp" : []
+sharp : {}
-}```;
+};

src/Model/card-to-html.js

@@ -1,46 +1,60 @@
 class CardToHtml {
+  
   static create(card) {
     const gameWindow = document.querySelector('#main');
-    let div = document.createElement('div');
+    const div = document.createElement('div');
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
     div.setAttribute('class','card');
-    gameWindow.appendChild(div);
+    svg.setAttribute('class','item');
+    svg.setAttribute('height','160');
+    svg.setAttribute('width','80');
+    svg.setAttribute('viewBox','0 0 200 400');
+    
+    // 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);
+      svg.appendChild(path);
+    }
 
-    const svg = this.createPath(card.shape,card.color,card.filling,card.outline);
+    // Loop to add svg card.number times
+    for(let i = 0; i < card.number; i++) {
+      div.appendChild(svg.cloneNode(true))
+      console.log("+SVG: ",svg);
+    }
 
-    div.appendChild(svg);
+    gameWindow.appendChild(div);
   }
 
-  createSVG(shape,color,filling,outline) {
+  static createPath(shape,color,filling,outline,step) {
-    if(shape === null) shape = "oval";
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    if(color === null) color = "#000000";
-    if(filling === null) filling = "fill";
-
-    // Can be optimized by just adding svg as string -> svg is constant
-    // class="item" height="160" width="80" viewBox="0 0 200 400"
-    const svg = document.createElement('svg');
-    svg.setAttribute("class","item");
-    svg.setAttribute("height","160");
-    svg.setAttribute("width","80");
-    svg.setAttribute("viewBox","0 0 200 400");
 
-    const path = document.createElement('path');
+    if(shape === null) shape = 'oval';
+    if(color === null) color = '000000';
+    if(filling === null) filling = 'fill';
 
+    // Add lots of attributes
     path.setAttribute("d",SHAPE_PATH[shape]);
+    path.setAttribute('stroke',`#${color}`);
+    path.setAttribute('fill',`#${color}`);
+    path.setAttribute('stroke-width','18');
 
+    // Add svg attributes for shape outline
     if(outline !== null){
-      Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){
+      Object.keys(OUTLINE_SPEC.rect).forEach(function(k){
-        path.setAttribute(k,OUTLINE_SPEC[outline[k]]);
+        path.setAttribute(k,OUTLINE_SPEC.rect[k]);
       });
 
-      path.setAttribute("stroke","#000000");
+      path.setAttribute('stroke','#000000');
     }
 
-    path.setAttribute("stroke",color);
+    // Diff between two paths in svg
-    path.setAttribute("fill",color);
+    if (step === 0) {
-    path.setAttribute("mask","none");
+      path.setAttribute('mask',`url(#mask-${filling})`);
-
+    } else {
-    svg.appendChild(path);
+      path.setAttribute('fill', 'none');
+    }
 
-    return svg;
+    return path;
   }
 }

views/cards-test.html

@@ -101,20 +101,23 @@
         fill="none"
         mask="none"
       />
-        
+
       </svg>
     </div>
   </div>
 
-  <script src="../src/Model/card-to-html.js"></script>
   <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>
-    let testCard = new Card();
+    const testCard1 = new Card5('ed5467',2,'diamond','grid','rect');
+    const testCard2 = new Card5('78ef56',3,'star','dot','dot');
 
 
 
-    CardToHtml.create('haha');
+    CardToHtml.create(testCard1);
+    CardToHtml.create(testCard2);
   </script>
 </body>
 </html>