From d6571966fbc05b49bd1c5dc57415ae2ac287db34 Mon Sep 17 00:00:00 2001 From: RemRem Date: Thu, 23 Feb 2023 14:21:51 +0100 Subject: [PATCH 1/8] add new stroke styles --- views/cards.html | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/views/cards.html b/views/cards.html index 2f1a058..9e134fe 100644 --- a/views/cards.html +++ b/views/cards.html @@ -15,23 +15,32 @@ + stroke="#FFFFFF" + /> + stroke="#000000" + /> + stroke="#000000" + stroke-dasharray="1 20" + stroke-linecap="round" + /> Date: Thu, 23 Feb 2023 14:28:39 +0100 Subject: [PATCH 2/8] m --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6c760b3..7753f32 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# HyperSet +# HyperSet ## Notes - [Website link](https://codefirst.iut.uca.fr/containers/HyperSet-hyperset) From 2cbe3d5122ceb57494c822fc0a085f00169ac197 Mon Sep 17 00:00:00 2001 From: RemRem Date: Tue, 28 Feb 2023 10:27:56 +0100 Subject: [PATCH 3/8] add palaf ideas --- views/cards.html | 131 ++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 119 insertions(+), 12 deletions(-) diff --git a/views/cards.html b/views/cards.html index 9e134fe..7385099 100644 --- a/views/cards.html +++ b/views/cards.html @@ -10,36 +10,43 @@ +
-
+
- + - + - + - + - + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
From d5571c6a66b51dce536101f7a049de615dadd6fc Mon Sep 17 00:00:00 2001 From: RemRem Date: Thu, 2 Mar 2023 11:15:15 +0100 Subject: [PATCH 4/8] 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 @@ HyperSet - + @@ -13,7 +13,7 @@
From 4b77c1f3bdb7349bbd7dde5fa23c9d013adc76a1 Mon Sep 17 00:00:00 2001 From: RemRem Date: Mon, 6 Mar 2023 16:54:49 +0100 Subject: [PATCH 5/8] fuck createPath func works (at 70%) --- src/Model/Const.js | 28 ++++++++--------- src/Model/card-to-html.js | 66 ++++++++++++++++++++++++--------------- views/cards-test.html | 11 ++++--- 3 files changed, 61 insertions(+), 44 deletions(-) diff --git a/src/Model/Const.js b/src/Model/Const.js index 3625570..f5e114a 100644 --- a/src/Model/Const.js +++ b/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 = ```{ -"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 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" : [] -}```; +const OUTLINE_SPEC = { +full : {}, +dot : { strokedasharray : "1 20", strokelinecap : "round" }, +rect : { "stroke-dasharray" : 70}, +spade : { "stroke-dasharray" : "10 15", "stroke-width" : 70}, +sharp : {} +}; diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js index 15726ec..918dfae 100644 --- a/src/Model/card-to-html.js +++ b/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) { - 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"); + static createPath(shape,color,filling,outline,step) { + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - 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){ - path.setAttribute(k,OUTLINE_SPEC[outline[k]]); + Object.keys(OUTLINE_SPEC.rect).forEach(function(k){ + path.setAttribute(k,OUTLINE_SPEC.rect[k]); }); - path.setAttribute("stroke","#000000"); + path.setAttribute('stroke','#000000'); } - path.setAttribute("stroke",color); - path.setAttribute("fill",color); - path.setAttribute("mask","none"); - - svg.appendChild(path); + // Diff between two paths in svg + if (step === 0) { + path.setAttribute('mask',`url(#mask-${filling})`); + } else { + path.setAttribute('fill', 'none'); + } - return svg; + return path; } } \ No newline at end of file diff --git a/views/cards-test.html b/views/cards-test.html index bdc0898..bd177dc 100644 --- a/views/cards-test.html +++ b/views/cards-test.html @@ -101,20 +101,23 @@ fill="none" mask="none" /> - + - + + \ No newline at end of file From 6b1c3bcaa3ea7e5f7e3646af43d9c14fdbdf2c6a Mon Sep 17 00:00:00 2001 From: RemRem Date: Mon, 6 Mar 2023 17:00:22 +0100 Subject: [PATCH 6/8] resolve outline problem in createPath() --- src/Model/Const.js | 4 ++-- src/Model/card-to-html.js | 4 ++-- views/cards-test.html | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Model/Const.js b/src/Model/Const.js index f5e114a..b5fa204 100644 --- a/src/Model/Const.js +++ b/src/Model/Const.js @@ -15,8 +15,8 @@ oval : "m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.9999 const OUTLINE_SPEC = { full : {}, -dot : { strokedasharray : "1 20", strokelinecap : "round" }, +dot : { "stroke-dasharray" : "1 20", "stroke-linecap" : "round" }, rect : { "stroke-dasharray" : 70}, -spade : { "stroke-dasharray" : "10 15", "stroke-width" : 70}, +spade : { "stroke-dasharray" : "10 15", "stroke-width" : 40}, sharp : {} }; diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js index 918dfae..444b59f 100644 --- a/src/Model/card-to-html.js +++ b/src/Model/card-to-html.js @@ -41,8 +41,8 @@ class CardToHtml { // Add svg attributes for shape outline if(outline !== null){ - Object.keys(OUTLINE_SPEC.rect).forEach(function(k){ - path.setAttribute(k,OUTLINE_SPEC.rect[k]); + Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){ + path.setAttribute(k,OUTLINE_SPEC[outline][k]); }); path.setAttribute('stroke','#000000'); diff --git a/views/cards-test.html b/views/cards-test.html index bd177dc..df6c828 100644 --- a/views/cards-test.html +++ b/views/cards-test.html @@ -113,11 +113,13 @@ \ No newline at end of file From 9fabc816a93fe743e9adfe88a788274568b8580f Mon Sep 17 00:00:00 2001 From: RemRem Date: Mon, 6 Mar 2023 17:53:35 +0100 Subject: [PATCH 7/8] 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 @@ \ No newline at end of file From 809f00cba1df9bbb75a69949d5d38000cb054291 Mon Sep 17 00:00:00 2001 From: RemRem Date: Tue, 7 Mar 2023 15:31:14 +0100 Subject: [PATCH 8/8] idk wtf all these changements are --- .drone.yml | 0 .gitignore | 0 Dockerfile | 0 README.md | 0 index.html | 0 src/Console/Console.html | 0 src/Console/main.js | 0 src/Model/Card.js | 0 src/Model/Card4WithoutColor.js | 0 src/Model/Card4WithoutFilling.js | 0 src/Model/Card4WithoutNumber.js | 0 src/Model/Card4WithoutOutline.js | 0 src/Model/Card4WithoutShape.js | 0 src/Model/Card5.js | 0 src/Model/Const.js | 0 src/Model/Deck.js | 0 src/Model/Exceptions.js | 0 src/Model/Factory.js | 0 src/Model/card-to-html.js | 0 src/algo.js | 0 styles/card.css | 0 styles/index.css | 0 styles/style.css | 0 test/.gitkeep | 0 test/testsIsHyperset.js | 0 views/cards-test.html | 0 views/cards.html | 0 27 files changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 .drone.yml mode change 100644 => 100755 .gitignore mode change 100644 => 100755 Dockerfile mode change 100644 => 100755 README.md mode change 100644 => 100755 index.html mode change 100644 => 100755 src/Console/Console.html mode change 100644 => 100755 src/Console/main.js mode change 100644 => 100755 src/Model/Card.js mode change 100644 => 100755 src/Model/Card4WithoutColor.js mode change 100644 => 100755 src/Model/Card4WithoutFilling.js mode change 100644 => 100755 src/Model/Card4WithoutNumber.js mode change 100644 => 100755 src/Model/Card4WithoutOutline.js mode change 100644 => 100755 src/Model/Card4WithoutShape.js mode change 100644 => 100755 src/Model/Card5.js mode change 100644 => 100755 src/Model/Const.js mode change 100644 => 100755 src/Model/Deck.js mode change 100644 => 100755 src/Model/Exceptions.js mode change 100644 => 100755 src/Model/Factory.js mode change 100644 => 100755 src/Model/card-to-html.js mode change 100644 => 100755 src/algo.js mode change 100644 => 100755 styles/card.css mode change 100644 => 100755 styles/index.css mode change 100644 => 100755 styles/style.css mode change 100644 => 100755 test/.gitkeep mode change 100644 => 100755 test/testsIsHyperset.js mode change 100644 => 100755 views/cards-test.html mode change 100644 => 100755 views/cards.html diff --git a/.drone.yml b/.drone.yml old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/Dockerfile b/Dockerfile old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 diff --git a/src/Console/Console.html b/src/Console/Console.html old mode 100644 new mode 100755 diff --git a/src/Console/main.js b/src/Console/main.js old mode 100644 new mode 100755 diff --git a/src/Model/Card.js b/src/Model/Card.js old mode 100644 new mode 100755 diff --git a/src/Model/Card4WithoutColor.js b/src/Model/Card4WithoutColor.js old mode 100644 new mode 100755 diff --git a/src/Model/Card4WithoutFilling.js b/src/Model/Card4WithoutFilling.js old mode 100644 new mode 100755 diff --git a/src/Model/Card4WithoutNumber.js b/src/Model/Card4WithoutNumber.js old mode 100644 new mode 100755 diff --git a/src/Model/Card4WithoutOutline.js b/src/Model/Card4WithoutOutline.js old mode 100644 new mode 100755 diff --git a/src/Model/Card4WithoutShape.js b/src/Model/Card4WithoutShape.js old mode 100644 new mode 100755 diff --git a/src/Model/Card5.js b/src/Model/Card5.js old mode 100644 new mode 100755 diff --git a/src/Model/Const.js b/src/Model/Const.js old mode 100644 new mode 100755 diff --git a/src/Model/Deck.js b/src/Model/Deck.js old mode 100644 new mode 100755 diff --git a/src/Model/Exceptions.js b/src/Model/Exceptions.js old mode 100644 new mode 100755 diff --git a/src/Model/Factory.js b/src/Model/Factory.js old mode 100644 new mode 100755 diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js old mode 100644 new mode 100755 diff --git a/src/algo.js b/src/algo.js old mode 100644 new mode 100755 diff --git a/styles/card.css b/styles/card.css old mode 100644 new mode 100755 diff --git a/styles/index.css b/styles/index.css old mode 100644 new mode 100755 diff --git a/styles/style.css b/styles/style.css old mode 100644 new mode 100755 diff --git a/test/.gitkeep b/test/.gitkeep old mode 100644 new mode 100755 diff --git a/test/testsIsHyperset.js b/test/testsIsHyperset.js old mode 100644 new mode 100755 diff --git a/views/cards-test.html b/views/cards-test.html old mode 100644 new mode 100755 diff --git a/views/cards.html b/views/cards.html old mode 100644 new mode 100755