Merge branch 'master' of https://codefirst.iut.uca.fr/git/HyperSet/HyperSet
continuous-integration/drone/push Build is passing Details

pull/66/head
Bastien JACQUELIN 2 years ago
commit 515d42739e

@ -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>

@ -1,7 +1,23 @@
const TAB_COLOR = ['red', 'purple', 'green', 'blue', 'orange'];
const TAB_NUMBER = [1, 2, 3, 4, 5];
const TAB_SHAPE = ['diamond','oval','wave','star','triangle'];
const TAB_FILLING = ['empty','stripped','full','pointed','squared'];
const TAB_OUTLINE = ['continuous','dotted','hyphen','cloudy','sharpy'];
const TAB_SHAPE = ['diamond', 'oval', 'squiggle', 'star', 'triangle'];
const TAB_FILLING = ['empty', 'stripped', 'fullO', 'pointed', 'squared'];
const TAB_OUTLINE = ['full', 'dot', 'rect', 'spade', 'sharp'];
const ATTRIBUTES = [TAB_COLOR, TAB_NUMBER, TAB_SHAPE, TAB_FILLING, TAB_OUTLINE];
const IDX_ATTRIBUTES = ["color", "number", "shape", "filling", "outline"];
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": 40 },
sharp: {}
};

@ -0,0 +1,65 @@
class CardToHtml {
static create(card) {
const gameWindow = document.querySelector('#main');
const div = document.createElement('div');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
div.setAttribute('class','card');
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);
}
// Loop to add svg card.number times
for(let i = 0; i < card.number; i++) {
div.appendChild(svg.cloneNode(true))
}
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';
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');
// 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){
path.setAttribute(k,OUTLINE_SPEC[outline][k]);
});
path.setAttribute('stroke','#000000');
}
// Diff between two paths in svg
if (step === 0) {
path.setAttribute('mask',`url(#mask-${filling})`);
} else {
path.setAttribute('fill', 'none');
}
return path;
}
}

@ -0,0 +1,127 @@
<!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.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>
const testCard1 = new Card5('ed5467',3,'diamond','grid','rect');
const testCard2 = new Card5('78ef56',3,'star','dot','dot');
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>

@ -10,28 +10,50 @@
</head>
<body>
<!--
stroke-dasharray="10 15" tapis
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>
<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"
stroke-dasharray="1 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"
@ -93,7 +115,7 @@
</svg>
<div id="main">
<div class="card">
<!-- <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
@ -190,30 +212,130 @@
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
</div>
</div> -->
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-grid)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-dot)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="40">'</use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#800080" mask="url(#mask-grid)"></use>
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#800080" mask="url(#mask-dot)"></use>
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#800080" mask="url(#mask-grid)"></use>
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#800080" mask="url(#mask-dot)"></use>
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#800080" mask="url(#mask-grid)"></use>
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#800080" mask="url(#mask-dot)"></use>
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#800080" mask="url(#mask-grid)"></use>
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#800080" mask="url(#mask-dot)"></use>
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
</div>

Loading…
Cancel
Save