From d5571c6a66b51dce536101f7a049de615dadd6fc Mon Sep 17 00:00:00 2001
From: RemRem <remrem@github.com>
Date: Thu, 2 Mar 2023 11:15:15 +0100
Subject: [PATCH] add class card_to_html + some constants

---
 index.html                |   4 +-
 src/Model/Const.js        |  22 ++++++-
 src/Model/Deck.js         |   1 -
 src/Model/card-to-html.js |  46 +++++++++++++++
 views/cards-test.html     | 120 ++++++++++++++++++++++++++++++++++++++
 views/cards.html          |   8 ++-
 6 files changed, 194 insertions(+), 7 deletions(-)
 create mode 100644 src/Model/card-to-html.js
 create mode 100644 views/cards-test.html
diff --git a/index.html b/index.html
index 842313c..04d117e 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <title>HyperSet</title>
-    <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/">
+    <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
     <link rel="stylesheet" type="text/css" href="./styles/style.css">
     <link rel="stylesheet" type="text/css" href="./styles/index.css">
 </head>
@@ -13,7 +13,7 @@
 <header>
     <ul id="nav-bar">
         <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
-        <li><a href="./views/cards.html">Card Test</a></li>
+        <li><a href="./views/cards-test.html">Card Test</a></li>
         <li><a href="./views/tutorial.html">Tutorial</a></li>
         <li><a href="./views/leaderboard.html">Leaderboard</a></li>
         <li><a href="./views/about.html">About</a></li>
diff --git a/src/Model/Const.js b/src/Model/Const.js
index 201e43e..fa16eef 100644
--- a/src/Model/Const.js
+++ b/src/Model/Const.js
@@ -1,6 +1,22 @@
 const tabColor = ['red','purple','green','blue','orange'];
 const tabNumber = [1,2,3,4,5];
-const tabShape = ['diamond','oval','wave','star','triangle'];
+const tabShape = ['diamond','oval','squiggle','star','triangle'];
 const tabFilling = ['empty','stripped','full','pointed','squared'];
-const tabOutline = ['full','dotted ','hyphen','cloudy','sharpy'];
-const ATTRIBUTES=[tabColor,tabNumber,tabShape,tabFilling,tabOutline]
\ No newline at end of file
+const tabOutline = ['full','dot','rect','spade','sharp'];
+const ATTRIBUTES=[tabColor,tabNumber,tabShape,tabFilling,tabOutline];
+
+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",
+"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",
+"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"
+}```;
+
+const OUTLINE_SPEC = ```{
+"full" : [],
+"dot" : [ "stroke-dasharray" : "1 20", "stroke-linecap" : "round" ],
+"rect" : ["stroke-dasharray" : 70],
+"spade" : ["stroke-dasharray" : "10 15", "stroke-width" : 70],
+"sharp" : []
+}```;
\ No newline at end of file
diff --git a/src/Model/Deck.js b/src/Model/Deck.js
index c4c7b41..2cb66a9 100644
--- a/src/Model/Deck.js
+++ b/src/Model/Deck.js
@@ -47,7 +47,6 @@ class Deck{
     }
 
     /**
-     * 
      * @param attributes : index of the attributes used
      * @returns all cards: 81 in case of 4 attributes and 1024 if 5 attributes
      * @author Bastien Jacquelin
diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js
new file mode 100644
index 0000000..15726ec
--- /dev/null
+++ b/src/Model/card-to-html.js
@@ -0,0 +1,46 @@
+class CardToHtml {
+  static create(card) {
+    const gameWindow = document.querySelector('#main');
+    let div = document.createElement('div');
+    div.setAttribute('class','card');
+    gameWindow.appendChild(div);
+
+    const svg = this.createPath(card.shape,card.color,card.filling,card.outline);
+
+    div.appendChild(svg);
+  }
+
+  createSVG(shape,color,filling,outline) {
+    if(shape === null) shape = "oval";
+    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');
+
+    path.setAttribute("d",SHAPE_PATH[shape]);
+
+    if(outline !== null){
+      Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){
+        path.setAttribute(k,OUTLINE_SPEC[outline[k]]);
+      });
+
+      path.setAttribute("stroke","#000000");
+    }
+
+    path.setAttribute("stroke",color);
+    path.setAttribute("fill",color);
+    path.setAttribute("mask","none");
+
+    svg.appendChild(path);
+
+    return svg;
+  }
+}
\ No newline at end of file
diff --git a/views/cards-test.html b/views/cards-test.html
new file mode 100644
index 0000000..bdc0898
--- /dev/null
+++ b/views/cards-test.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Card Géneration</title>
+    <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
+    <link rel="stylesheet" type="text/css" href="../styles/style.css">
+    <link rel="stylesheet" type="text/css" href="../styles/card.css">
+</head>
+
+<body>
+  <!--
+    stroke-dasharray="10 15" tapis stroke-width=40
+    stroke-dasharray="70" rect
+    stroke-dasharray="1 20" round
+    stroke-linecap="round" round
+  -->
+  <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-stripe">
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="400"
+          fill="url(#pattern-stripe)"
+        />
+      </mask>
+
+      <mask id="mask-dot">
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="400"
+          fill="url(#pattern-dot)"
+        />
+      </mask>
+
+      <mask id="mask-grid">
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="400"
+          fill="url(#pattern-grid)"
+        />
+      </mask>
+    </defs>
+  </svg>
+
+  <div id="main">
+    <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"
+        stroke-dasharray="1 20"
+        stroke-linecap="round"
+        stroke-width="18"
+        stroke="#000000"
+        fill="#800080"
+        mask="url(#mask-grid)"
+      />
+
+      <path
+        d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
+        stroke-dasharray="1 20"
+        stroke-linecap="round"
+        stroke-width="18"
+        stroke="#000000"
+        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/Const.js"></script>
+  <script>
+    let testCard = new Card();
+
+
+
+    CardToHtml.create('haha');
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/cards.html b/views/cards.html
index 7385099..eb0ddac 100644
--- a/views/cards.html
+++ b/views/cards.html
@@ -18,18 +18,21 @@
   -->
   <svg width="200" height="400" style="position: fixed; z-index: -1">
     <defs>
+
       <path
         id="squiggle"
         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="70"
         stroke="#000000"
       />
+
       <path
         id="oval"
         d="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"
         stroke-dasharray="10 15"
         stroke="#000000"
       />
+
       <path
         id="diamond"
         d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
@@ -37,17 +40,20 @@
         stroke-linecap="round"
         stroke="#000000"
         />
+
       <path 
         id="star" 
         d="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"
         stroke-dasharray="30"
         stroke="#000000"
         />
+
       <path
         id="triangle"
         d="M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z"
         stroke="#000000"
         />
+
       <pattern
         id="pattern-stripe"
         width="2"
@@ -229,7 +235,7 @@
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="40">'</use>
       </svg>
     </div>
 
