add class card_to_html + some constants
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
d4de90177a
commit
d5571c6a66
@ -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]
|
||||
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" : []
|
||||
}```;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
Loading…
Reference in new issue