From 4a0aed734563e4da4b82808449aa54a1328d3f13 Mon Sep 17 00:00:00 2001 From: RemRem Date: Thu, 30 Mar 2023 12:47:56 +0200 Subject: [PATCH] add card-to-html to game.html + lots of things --- src/Model/Deck.js | 1 + src/Model/card-to-html.js | 13 ++++---- styles/card.css | 13 +++++--- views/card-module.js | 20 +++++++++++-- views/cards-test.html | 35 +++++++++++----------- views/deck-module.js | 11 ++++--- views/game.html | 63 +++++++++++++++++++++++++++++++++++++++ 7 files changed, 120 insertions(+), 36 deletions(-) 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 bfd0957..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'); @@ -23,7 +23,8 @@ class CardToHtml { div.appendChild(svg.cloneNode(true)) } - gameWindow.appendChild(div); + // gamewindow.appendChild(div); + return div; } static createPath(shape,color,filling,outline,step) { @@ -41,17 +42,17 @@ class CardToHtml { // 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) { + if(outline !== null && outline!==undefined) { Object.keys(OUTLINE_SPEC[outline]).forEach(function(k) { path.setAttribute(k,OUTLINE_SPEC[outline][k]); }); 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/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 377b027..57c7f1c 100755 --- a/views/cards-test.html +++ b/views/cards-test.html @@ -110,28 +110,29 @@ \ No newline at end of file diff --git a/views/deck-module.js b/views/deck-module.js index ffa7a17..54f7212 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 a18093e..430713b 100644 --- a/views/game.html +++ b/views/game.html @@ -9,6 +9,7 @@ + @@ -22,11 +23,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+