diff --git a/.gitignore b/.gitignore index e69de29..8afcc63 100755 --- a/.gitignore +++ b/.gitignore @@ -0,0 +1,2 @@ +# because you don't need to know what's in here +note.txt diff --git a/src/Model/Card.js b/src/Model/Card.js index 864bac6..51456ad 100755 --- a/src/Model/Card.js +++ b/src/Model/Card.js @@ -1,11 +1,13 @@ -class Card{ +class Card { /** * * @param {*} attributes : dictionnary of attributes : key : name of the attributes and value : value of the attributes */ + // attributes : shape, color, number, outline, filling constructor(attributes){ this.attributes=attributes; } + /** * * @returns all attributes of a card @@ -17,6 +19,7 @@ class Card{ }); return att; } + /** * * @param {*} card card to be compared with the current obj diff --git a/src/Model/Deck.js b/src/Model/Deck.js index 07aedc6..83e9123 100755 --- a/src/Model/Deck.js +++ b/src/Model/Deck.js @@ -93,6 +93,7 @@ class Deck { * @author Bastien Jacquelin */ removeFromoutputCards(selectedCards) {//working✅ + console.log(JSON.parse(JSON.stringify(selectedCards))) let set = []; selectedCards.forEach(element => { for (let i = 0; i < this.outputCards.length; i++) { diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js index 048befd..e5bbb1f 100755 --- a/src/Model/card-to-html.js +++ b/src/Model/card-to-html.js @@ -1,7 +1,7 @@ class CardToHtml { static create(card) { - const gameWindow = document.querySelector('#main'); + // const gamewindow = document.querySelector('#main'); const div = document.createElement('div'); const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); @@ -13,16 +13,18 @@ class CardToHtml { // 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); + // Faut pas oublier le j à la fin hein, c'est pas une typo + const path = this.createPath(card.attributes['shape'], card.attributes['color'], card.attributes['filling'], card.attributes['outline'], j); svg.appendChild(path); } // Loop to add svg card.number times - for(let i = 0; i < card.number; i++) { + for(let i = 0; i < card.attributes['number']; i++) { div.appendChild(svg.cloneNode(true)) } - gameWindow.appendChild(div); + // gamewindow.appendChild(div); + return div; } static createPath(shape,color,filling,outline,step) { @@ -33,23 +35,27 @@ class CardToHtml { 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); + // Add lots of attributes path.setAttribute("d",SHAPE_PATH[shape]); - path.setAttribute('stroke',`#${color}`); - path.setAttribute('fill',`#${color}`); + path.setAttribute('stroke',`${color}`); + path.setAttribute('fill',`${color}`); path.setAttribute('stroke-width','18'); // Case shape do not have color - if(filling === 'none') { + if(filling === 'none' || filling === 'empty') { path.setAttribute('fill','none'); } // Add svg attributes for shape outline - if(outline !== null){ - Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){ + if(outline !== null && outline!==undefined) { + Object.keys(OUTLINE_SPEC[outline]).forEach(function(k) { path.setAttribute(k,OUTLINE_SPEC[outline][k]); }); - path.setAttribute('stroke','#000000'); } diff --git a/styles/card.css b/styles/card.css index 1b3c395..546028d 100755 --- a/styles/card.css +++ b/styles/card.css @@ -3,15 +3,20 @@ flex-direction: row; justify-content: center; align-items: center; - height: 10rem; - min-width: 20rem; - padding: 3em; - margin: 1.7rem; /* for better display */ + height: 8rem; + min-width: 18rem; + padding: 1.5em; + margin: 1.2rem; /* for better display */ border: 0.3em solid black; border-radius: 2em; background-color: white; } +svg { + height: 12vh; + width: 6vh; +} + .item { margin: 1rem; } diff --git a/styles/room.css b/styles/room.css new file mode 100644 index 0000000..b4c95e9 --- /dev/null +++ b/styles/room.css @@ -0,0 +1,81 @@ +body { + display: flex; + flex-direction: row; + background-color: rebeccapurple; +} + +section { + display: flex; + padding: 3em; + flex-direction: column; + height: calc(100vh - 6em); +} + +#left-section { + background-color: white; + width: 70vw; +} + +#right-section { + display: flex; + justify-content: space-between; + background-color: white; + width: 30vw; +} + +button { + display: flex; + justify-content: center; + align-items: center; + padding: 1.2em; + margin-bottom: 1em; + background-color: white; + border: 0.2rem solid black; + border-radius: 0.5em; + font-family: var(--font); + font-size: 1.5em; +} + +#or { + display: flex; + text-align: center; + justify-content: center; + font-family: var(--font); + font-size: 4rem; + font-weight: bolder; + color: black; + margin: 1em; +} + +.subtitle { + font-family: var(--font); + font-size: 1.6em; + font-weight: bold; +} + +input[type="checkbox"] { + +} + +.group { + margin-bottom: 5em; +} + +.param { + margin-top: 1em; +} + +#players { + display: flex; + flex-direction: column; +} + +#players span { + margin-top: 1em; + font-size: large; +} + +#start { + bottom: 3vh; + right: 3vw; +} \ No newline at end of file diff --git a/views/card-module.js b/views/card-module.js index 5e737e9..d7c7e30 100644 --- a/views/card-module.js +++ b/views/card-module.js @@ -5,16 +5,30 @@ export default{ return{ idUsed:"id"+this.id, isClicked:false, + svgCard: CardToHtml.create(this.card) } }, methods:{ clicked() { this.$emit('selected',this.id); - } + }, + }, + + // display svg card on component apparition + mounted() { + const cardDiv = document.querySelector(`#${this.idUsed}`); + cardDiv.appendChild(this.svgCard); + }, + + // change svg card when card object is updated + beforeUpdate() { + this.svgCard = CardToHtml.create(this.card) + const cardDiv = document.querySelector(`#${this.idUsed}`); + cardDiv.querySelector('.card').remove(); + cardDiv.appendChild(this.svgCard); }, template:` -
- {{card.attributes}} +
` } \ No newline at end of file diff --git a/views/cards-test.html b/views/cards-test.html index f1e7825..57c7f1c 100755 --- a/views/cards-test.html +++ b/views/cards-test.html @@ -79,11 +79,11 @@
-
+
- \ No newline at end of file diff --git a/views/cards.html b/views/cards.html index eb0ddac..a354032 100755 --- a/views/cards.html +++ b/views/cards.html @@ -115,105 +115,6 @@
- -
@@ -241,101 +142,101 @@
- + - - + + - - + + - - + + - +
- + - - + + - - + + - - + + - +
- + - - + + - - + + - - + + - +
- + - - + + - - + + - - + + - +
diff --git a/views/deck-module.js b/views/deck-module.js index 7cd92c2..3e37a23 100644 --- a/views/deck-module.js +++ b/views/deck-module.js @@ -18,6 +18,7 @@ export default{ }, methods:{ selected(id){ + console.log(id); if(this.nbCardsSelected>=this.deck.nbCards){ this.set(); console.log("deb") @@ -25,14 +26,14 @@ export default{ else{ if(this.selectedCards[id]!=null){ console.log("deselec") - document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid black; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%"); + document.querySelector(`#id${id}`).setAttribute("style","border: none;cursor: pointer;"); this.nbCardsSelected-=1 this.selectedCards[id]=null } else{ console.log("Selec") this.selectedCards[id]=this.deck.outputCards[id-1] - document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%"); + document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; cursor: pointer;"); this.nbCardsSelected+=1 if(this.nbCardsSelected==this.deck.nbCards){ console.log("this.selectedCards.length",this.selectedCards.length) @@ -60,10 +61,8 @@ export default{

Players: {{connected}}

-
-
- -
+
+
` } \ No newline at end of file diff --git a/views/game.html b/views/game.html index d5c6880..8c31318 100644 --- a/views/game.html +++ b/views/game.html @@ -9,6 +9,7 @@ + @@ -23,11 +24,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ diff --git a/views/room.html b/views/room.html new file mode 100644 index 0000000..79ed025 --- /dev/null +++ b/views/room.html @@ -0,0 +1,69 @@ + + + + + Room - HyperSet + + + + + +
+ + +
+ + +
+ + OR + +
+ Game parameters +
+
+
+
+
+ HyperSet
+
+
+ +
+ Card number to make a set +
+ 3 + 4 + 5 +
+
+ +
+ Attributes to play with +
+ number + color + shape + filling + outline (honnêtement c'est nul) +
+
+ +
+ +
+
+ List of players waiting in the room: +
+ Aurianus + Basuw + Raph + Remrem +
+
+ + +
+ + +