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

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/Deck.js

@@ -30,6 +30,7 @@ class Deck {
   createDeck(nbCards) {//toTest⌛when more than 12c to d't add other cards
     if (this.remainingCards.length < this.nbCards) {// no more cards
       console.log("PLUS DE CARTES");
+      return 2;
     }
     else {
         let nbSets = setsCounter(this.outputCards, this.nbCards);
@@ -88,7 +89,6 @@ class Deck {
           this.removeFromoutputCards(selectedCards);
           return 1;
         }
-      }
     }
     else{// pas un set
       return -1;
@@ -117,7 +117,7 @@ class Deck {
     }
     else {
       this.setMade.push(set);
-      this.createDeck(this.nbCards)
+      return this.createDeck(this.nbCards)
     }
   }
 }

src/Model/Factory.js

@@ -81,9 +81,10 @@ class Factory{
         let attributes=this.attributesName(dicoAttributes);
         let nbAttributes=this.nbAttr;
         if(attributes.length==3){
-            for (let c=0; c<nbAttributes; c++){
-                for (let n=0; n<nbAttributes; n++){
-                    for (let s=0; s<nbAttributes; s++){
+            for (let a=0; a<nbAttributes; a++){
+                for (let b=0; b<nbAttributes; b++){
+                    for (let c=0; c<nbAttributes; c++){
+                        let attribDic = {};
                         attribDic[attributes[0]]=dicoAttributes[attributes[0]][a]
                         attribDic[attributes[1]]=dicoAttributes[attributes[1]][b]
                         attribDic[attributes[2]]=dicoAttributes[attributes[2]][c]
@@ -114,6 +115,7 @@ class Factory{
                     for (let c=0; c<nbAttributes; c++){
                         for (let d=0; d<nbAttributes; d++){
                             for (let e=0; e<nbAttributes; e++){
+                                let attribDic = {};
                                 attribDic[attributes[0]]=dicoAttributes[attributes[0]][a]
                                 attribDic[attributes[1]]=dicoAttributes[attributes[1]][b]
                                 attribDic[attributes[2]]=dicoAttributes[attributes[2]][c]

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

@@ -18,6 +18,7 @@ function isSet(cards)
             return false;
         }
     }
+    console.log(cards)
     return true;        
 }
 
@@ -82,7 +83,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 +101,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,24 +1,28 @@
 .card {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 8rem;
-  min-width: 18rem;
-  padding: 1.5em;
+  width: 6vw;
+  min-height: 30vh;
+  padding: 0.5em 1em 0.5em 1em;
   margin: 1.2rem; /* for better display */
   border: 0.3em solid black;
   border-radius: 2em;
   background-color: white;
 }
 
+.card:hover {
+  cursor: pointer;
+}
+
 svg {
-  height: 12vh;
-  width: 6vh;
+  rotate: 90deg;
+  height: 10vh;
+  width: 5vw;
 }
 
 .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

@@ -9,12 +9,13 @@ export default{
         return{
             card:new Card({"filling":"empty"}),
             id:0,
-            deck : new Deck([0,1,2,3],3),
+            deck : new Deck([0,1,2],3),
             selectedCards:[],
             selectedCardsindex:[],
             nbCardsSelected:0,
             connected:'7/8',
             timer:'10.51',
+            win:false,
         }
     },
     methods:{
@@ -22,11 +23,11 @@ export default{
             if(this.nbCardsSelected>=this.deck.nbCards){
                 this.set();
             }
-            else{
-                if(this.selectedCards[id]!=null){
+            else{// pas suffisament de cartes pour un set
+                if(this.selectedCards[id]!=null){// carte déja selectionnée
                     document.querySelector(`#id${id}`).setAttribute("style","border: none;cursor: pointer;");
                     this.nbCardsSelected-=1
-                    this.selectedCards[id]=null
+                    delete this.selectedCards[id]//pb
                     this.selectedCardsindex.splice(this.selectedCardsindex.indexOf(id),1)
                 }
                 else{
@@ -41,9 +42,10 @@ export default{
             }
         },
         set(){
+            console.log("this.selectedCards",this.selectedCards)
             let checkSet=this.deck.checkSet(this.selectedCards);
-            if(checkSet){//is set
-                
+            if(checkSet==2){//is set
+                this.win=true;
             }
             // remove red outline
             this.selectedCardsindex.forEach((e) => {
@@ -51,8 +53,8 @@ export default{
             })
             // flush array
             this.nbCardsSelected=0;
-            this.selectedCards.splice(0,this.selectedCards.length+1)
-            this.selectedCardsindex.splice(0,this.selectedCardsindex.length+1)
+            this.selectedCards=[]
+            this.selectedCardsindex=[]
         },
     },
     template:`
@@ -63,8 +65,11 @@ export default{
         <h2>Players: {{connected}}</h2>
     </div>
     
-    <div 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 17vw 20px 17vw'}">
             <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
     </div>
+    <div  v-if="win">
+        <h2>Félicitations, vous venez de gagner la partie ! 🎉</h2>
+    </div>
     `
 }