Merge branch 'master' of https://codefirst.iut.uca.fr/git/HyperSet/hyper-set

src/Model/Const.js

@@ -15,8 +15,8 @@ const SHAPE_PATH = {
 };
 
 const OUTLINE_SPEC = {
-  full: {},
-  dot: { "stroke-dasharray": "1 20", "stroke-linecap": "round" },
+  continuous: {},
+  dot: { "stroke-dasharray": "1 25", "stroke-linecap": "round" },
   rect: { "stroke-dasharray": 70 },
   spade: { "stroke-dasharray": "10 15", "stroke-width": 40 },
   sharp: {}

src/Model/card-to-html.js

@@ -10,6 +10,10 @@ class CardToHtml {
     svg.setAttribute('height','160');
     svg.setAttribute('width','80');
     svg.setAttribute('viewBox','0 0 200 400');
+
+    if(card.attributes['number'] == undefined){
+      card.attributes['number'] = 1;
+    }
     
     // Create paths + add to svg
     for(let j = 0; j < 2; j++) {
@@ -31,14 +35,9 @@ class CardToHtml {
     // 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';
-
-    // console.log("shape: " + shape);
-    // console.log("color: " + color);
-    // console.log("filling: " + filling);
-    // console.log("outline: " + outline);
+    if(shape === undefined) shape = 'oval';
+    if(color === undefined) color = 'black';
+    if(filling === undefined) filling = 'none';
 
     // Add lots of attributes
     path.setAttribute("d",SHAPE_PATH[shape]);

src/algo.js

@@ -82,7 +82,7 @@ function numberOfSets4(deck){
         for(j = i+1 ; j < deck.length - 2; j++){
             for(k = j+1 ; k < deck.length - 1 ; k++){
                 for(l = k + 1 ; l < deck.length;l++){
-                    if(isSet([deck[i],deck[j],deck[k]])){
+                    if(isSet([deck[i],deck[j],deck[k],deck[l]])){
                         //console.log(deck[i],deck[j],deck[k],deck[l])
                         res += 1
                     }
@@ -100,7 +100,7 @@ function numberOfSets5(deck){
             for(k = j+1 ; k < deck.length - 2 ; k++){
                 for(l = k + 1 ; l < deck.length - 1;l++){
                     for(m = l + 1; m <deck.length;m++){
-                        if(isSet([deck[i],deck[j],deck[k]])){
+                        if(isSet([deck[i],deck[j],deck[k],deck[l],deck[m]])){
                             //console.log(deck[i],deck[j],deck[k],deck[l],deck[m])
                             res += 1
                         }

styles/card.css

@@ -1,10 +1,10 @@
 .card {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 8rem;
-  min-width: 18rem;
+  width: 6vw;
+  min-height: 26vh;
   padding: 1.5em;
   margin: 1.2rem; /* for better display */
   border: 0.3em solid black;
@@ -12,13 +12,17 @@
   background-color: white;
 }
 
+.card:hover {
+  cursor: pointer;
+}
+
 svg {
-  height: 12vh;
-  width: 6vh;
+  rotate: 90deg;
+  height: 7vh;
+  width: 3vw;
 }
 
 .item {
-  margin: 1rem;
 }
 
 #main {

views/cards-test.html

@@ -122,17 +122,16 @@
     // const c2 = new Card({shape: 'oval', color: '008000', number: 2, filling: 'full', outline: null})
     // const c3 = new Card({shape: 'oval', color: '800080', number: 3, filling: 'full', outline: null})
 
-    const c1 = new Card({shape: 'diamond', color: 'green', number: 3, filling: 'empty', outline: null})
-    const c2 = new Card({shape: 'squiggle', color: 'blue', number: 1, filling: 'stripe', outline: null})
-    const c3 = new Card({shape: 'squiggle', color: 'blue', number: 2, filling: 'stripe', outline: null})
-    const c4 = new Card({shape: 'diamond', color: 'green', number: 2, filling: 'empty', outline: null})
-    const c5 = new Card({shape: 'oval', color: 'red', number: 2, filling: 'full', outline: null})
+    // const c1 = new Card({shape: 'diamond', color: 'green', number: 3, filling: 'empty', outline: null})
+    // const c2 = new Card({shape: 'squiggle', color: 'blue', number: 1, filling: 'stripe', outline: null})
+    // const c3 = new Card({shape: 'squiggle', color: 'blue', number: 2, filling: 'stripe', outline: null})
+    // const c4 = new Card({shape: 'diamond', color: 'green', number: 2, filling: 'empty', outline: null})
+    // const c5 = new Card({shape: 'oval', color: 'red', number: 2, filling: 'full', outline: null})
+    // const c6 = new Card({shape: 'oval', color: 'red', number: 1, filling: 'dot', outline: null})
 
+    const c1 = new Card({shape: 'diamond',color: 'orange' ,filling: 'grid', outline: 'dot'})
+    
     CardToHtml.create(c1);
-    CardToHtml.create(c2);
-    CardToHtml.create(c3);
-    CardToHtml.create(c4);
-    CardToHtml.create(c5);
   </script>
 </body>
 </html>

views/deck-module.js

@@ -65,7 +65,7 @@ export default{
         <h2>Players: {{connected}}</h2>
     </div>
     
-    <div v-if="!win" v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 18rem 20px 20px'}">
+    <div v-if="!win" v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 20rem 20px 20px'}">
             <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
     </div>
     <div  v-if="win">