HyperSet
/
hyper-set
6
3
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity
Labels Milestones
New Pull Request

roomPage #84

Merged
remi.arnal merged 8 commits from roomPage into master 2 years ago
Conversation 0 Commits 8 Files Changed 12
12 changed files with 325 additions and 170 deletions
Show Stats Download Patch File Download Diff File

2
.gitignore vendored
Unescape View File

@ -0,0 +1,2 @@
# because you don't need to know what's in here
note.txt

5
src/Model/Card.js
Unescape View File

@ -1,11 +1,13 @@
class Card{ class Card {
/** /**
* *
* @param {*} attributes : dictionnary of attributes : key : name of the attributes and value : value of the attributes * @param {*} attributes : dictionnary of attributes : key : name of the attributes and value : value of the attributes
*/ */
// attributes : shape, color, number, outline, filling
constructor(attributes){ constructor(attributes){
this.attributes=attributes; this.attributes=attributes;
} }
/** /**
* *
* @returns all attributes of a card * @returns all attributes of a card
@ -17,6 +19,7 @@ class Card{
}); });
return att; return att;
} }
/** /**
* *
* @param {*} card card to be compared with the current obj * @param {*} card card to be compared with the current obj

1
src/Model/Deck.js
Unescape View File

@ -93,6 +93,7 @@ class Deck {
* @author Bastien Jacquelin * @author Bastien Jacquelin
*/ */
removeFromoutputCards(selectedCards) {//working✅ removeFromoutputCards(selectedCards) {//working✅
console.log(JSON.parse(JSON.stringify(selectedCards)))
let set = []; let set = [];
selectedCards.forEach(element => { selectedCards.forEach(element => {
for (let i = 0; i < this.outputCards.length; i++) { for (let i = 0; i < this.outputCards.length; i++) {

26
src/Model/card-to-html.js
Unescape View File

@ -1,7 +1,7 @@
class CardToHtml { class CardToHtml {
static create(card) { static create(card) {
const gameWindow = document.querySelector('#main'); // const gamewindow = document.querySelector('#main');
const div = document.createElement('div'); const div = document.createElement('div');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@ -13,16 +13,18 @@ class CardToHtml {
// Create paths + add to svg // Create paths + add to svg
for(let j = 0; j < 2; j++) { 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); svg.appendChild(path);
} }
// Loop to add svg card.number times // 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)) div.appendChild(svg.cloneNode(true))
} }
gameWindow.appendChild(div); // gamewindow.appendChild(div);
return div;
} }
static createPath(shape,color,filling,outline,step) { static createPath(shape,color,filling,outline,step) {
@ -33,23 +35,27 @@ class CardToHtml {
if(color === null) color = '000000'; if(color === null) color = '000000';
if(filling === null) filling = 'fill'; 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 // Add lots of attributes
path.setAttribute("d",SHAPE_PATH[shape]); path.setAttribute("d",SHAPE_PATH[shape]);
path.setAttribute('stroke',`#${color}`); path.setAttribute('stroke',`${color}`);
path.setAttribute('fill',`#${color}`); path.setAttribute('fill',`${color}`);
path.setAttribute('stroke-width','18'); path.setAttribute('stroke-width','18');
// Case shape do not have color // Case shape do not have color
if(filling === 'none') { if(filling === 'none' || filling === 'empty') {
path.setAttribute('fill','none'); path.setAttribute('fill','none');
} }
// Add svg attributes for shape outline // Add svg attributes for shape outline
if(outline !== null){ if(outline !== null && outline!==undefined) {
Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){ Object.keys(OUTLINE_SPEC[outline]).forEach(function(k) {
path.setAttribute(k,OUTLINE_SPEC[outline][k]); path.setAttribute(k,OUTLINE_SPEC[outline][k]);
}); });
path.setAttribute('stroke','#000000'); path.setAttribute('stroke','#000000');
} }

13
styles/card.css
Unescape View File

@ -3,15 +3,20 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 10rem; height: 8rem;
min-width: 20rem; min-width: 18rem;
padding: 3em; padding: 1.5em;
margin: 1.7rem; /* for better display */ margin: 1.2rem; /* for better display */
border: 0.3em solid black; border: 0.3em solid black;
border-radius: 2em; border-radius: 2em;
background-color: white; background-color: white;
} }
svg {
height: 12vh;
width: 6vh;
}
.item { .item {
margin: 1rem; margin: 1rem;
} }

81
styles/room.css
Unescape View File

@ -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;
}

20
views/card-module.js
Unescape View File

@ -5,16 +5,30 @@ export default{
return{ return{
idUsed:"id"+this.id, idUsed:"id"+this.id,
isClicked:false, isClicked:false,
svgCard: CardToHtml.create(this.card)
} }
}, },
methods:{ methods:{
clicked() { clicked() {
this.$emit('selected',this.id); 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:` template:`
<div v-bind:id="idUsed" v-bind:style="{border: '2px solid black', color: 'red', fontSize: '20px', cursor: 'pointer',width:'100%',height:'100%' }" v-on:click="clicked"> <div v-bind:id="idUsed" v-on:click="clicked">
{{card.attributes}}
</div> </div>
` `
} }

41
views/cards-test.html
Unescape View File

@ -79,11 +79,11 @@
</svg> </svg>
<div id="main"> <div id="main">
<div class="card"> <!-- <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<path <path
d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z" d="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"
stroke-dasharray="1 20" stroke-dasharray="1 20"
stroke-linecap="round" stroke-linecap="round"
stroke-width="18" stroke-width="18"
@ -93,7 +93,7 @@
/> />
<path <path
d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z" d="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"
stroke-dasharray="1 20" stroke-dasharray="1 20"
stroke-linecap="round" stroke-linecap="round"
stroke-width="18" stroke-width="18"
@ -103,25 +103,36 @@
/> />
</svg> </svg>
</div> </div> -->
</div> </div>
<script src="../src/Model/Card.js"></script> <script src="../src/Model/Card.js"></script>
<script src="../src/Model/Card5.js"></script>
<script src="../src/Model/Const.js"></script> <script src="../src/Model/Const.js"></script>
<script src="../src/Model/card-to-html.js"></script> <script src="../src/Model/card-to-html.js"></script>
<script> <script>
const testCard1 = new Card5('ed5467',3,'diamond','grid','rect'); // const testCard1 = new Card({shape: 'diamond', color: 'ed5467', number: 2, filling: 'grid', outline: 'rect'})
const testCard2 = new Card5('78ef56',3,'star','dot','dot'); // const testCard2 = new Card({shape: 'star', color: '78ef56', number: 3, filling: 'dot', outline: 'dot'});
const testCard3 = new Card5('79ec36',3,'squiggle','stripe','spade'); // const testCard3 = new Card({shape: 'squiggle', color: '79ec36', number: 2, filling: 'stripe', outline: 'spade'});
const testCard4 = new Card5('79ec36',3,'oval','full','full'); // const testCard4 = new Card({shape: 'oval', color: '79ec36', number: 3, filling: 'full', outline: 'full'});
const testCard5 = new Card5('79ec36',3,'triangle','none','spade'); // const testCard5 = new Card({shape: 'triangle', color: '79ec36', number: 3, filling: 'none', outline: 'spade'});
// const testCard6 = new Card({shape: 'squiggle', color: '008000', number: 1, filling: 'dot', outline: 'dot'});
// const testCard7 = new Card({shape: 'diamond', color: 'ff0000', number: 5, filling: 'stripe', outline: null});
CardToHtml.create(testCard1); // const c1 = new Card({shape: 'oval', color: 'FF0000', number: 1, filling: 'full', outline: null})
CardToHtml.create(testCard2); // const c2 = new Card({shape: 'oval', color: '008000', number: 2, filling: 'full', outline: null})
CardToHtml.create(testCard3); // const c3 = new Card({shape: 'oval', color: '800080', number: 3, filling: 'full', outline: null})
CardToHtml.create(testCard4);
CardToHtml.create(testCard5); 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})
CardToHtml.create(c1);
CardToHtml.create(c2);
CardToHtml.create(c3);
CardToHtml.create(c4);
CardToHtml.create(c5);
</script> </script>
</body> </body>
</html> </html>

163
views/cards.html
Unescape View File

@ -115,105 +115,6 @@
</svg> </svg>
<div id="main"> <div id="main">
<!-- <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-grid)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-dot)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-grid)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
</div> -->
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use> <use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use>
@ -241,101 +142,101 @@
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" stroke="#800080" fill="#800080" stroke-width="18"></use> <use href="#squiggle" stroke="#FF0000" fill="#FF0000" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#800080" mask="url(#mask-grid)"></use> <use href="#squiggle" fill="#FF0000" mask="url(#mask-grid)"></use>
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#squiggle" fill="#FF0000" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#800080" mask="url(#mask-dot)"></use> <use href="#squiggle" fill="#FF0000" mask="url(#mask-dot)"></use>
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
</svg> </svg>
</div> </div>
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" stroke="#800080" fill="#800080" stroke-width="18"></use> <use href="#diamond" stroke="#008000" fill="#008000" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#800080" mask="url(#mask-grid)"></use> <use href="#diamond" fill="#008000" mask="url(#mask-grid)"></use>
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#diamond" fill="#008000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#800080" mask="url(#mask-dot)"></use> <use href="#diamond" fill="#008000" mask="url(#mask-dot)"></use>
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
</svg> </svg>
</div> </div>
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" stroke="#800080" fill="#800080" stroke-width="18"></use> <use href="#star" stroke="#0000FF" fill="#0000FF" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#800080" mask="url(#mask-grid)"></use> <use href="#star" fill="#0000FF" mask="url(#mask-grid)"></use>
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#star" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#800080" mask="url(#mask-dot)"></use> <use href="#star" fill="#0000FF" mask="url(#mask-dot)"></use>
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#star" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg> </svg>
</div> </div>
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" stroke="#800080" fill="#800080" stroke-width="18"></use> <use href="#triangle" stroke="#FFA500" fill="#FFA500" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#800080" mask="url(#mask-grid)"></use> <use href="#triangle" fill="#FFA500" mask="url(#mask-grid)"></use>
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#triangle" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#800080" mask="url(#mask-dot)"></use> <use href="#triangle" fill="#FFA500" mask="url(#mask-dot)"></use>
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#triangle" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg> </svg>
</div> </div>
</div> </div>

11
views/deck-module.js
Unescape View File

@ -18,6 +18,7 @@ export default{
}, },
methods:{ methods:{
selected(id){ selected(id){
console.log(id);
if(this.nbCardsSelected>=this.deck.nbCards){ if(this.nbCardsSelected>=this.deck.nbCards){
this.set(); this.set();
console.log("deb") console.log("deb")
@ -25,14 +26,14 @@ export default{
else{ else{
if(this.selectedCards[id]!=null){ if(this.selectedCards[id]!=null){
console.log("deselec") 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.nbCardsSelected-=1
this.selectedCards[id]=null this.selectedCards[id]=null
} }
else{ else{
console.log("Selec") console.log("Selec")
this.selectedCards[id]=this.deck.outputCards[id-1] 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 this.nbCardsSelected+=1
if(this.nbCardsSelected==this.deck.nbCards){ if(this.nbCardsSelected==this.deck.nbCards){
console.log("this.selectedCards.length",this.selectedCards.length) console.log("this.selectedCards.length",this.selectedCards.length)
@ -60,10 +61,8 @@ export default{
<h2>Players: {{connected}}</h2> <h2>Players: {{connected}}</h2>
</div> </div>
<div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 25rem 20px 20px'}"> <div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 18rem 20px 20px'}">
<div class="Cardframe" v-bind:style="{ width:'12%', height:'15rem', margin:'2% 2% 2% 2%'}" v-for="n in deck.outputCards.length"> <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
<card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1]></card-module>
</div>
</div> </div>
` `
} }

63
views/game.html
Unescape View File

@ -9,6 +9,7 @@
<link rel="stylesheet" type="text/css" href="/styles/style.css"> <link rel="stylesheet" type="text/css" href="/styles/style.css">
<link rel="stylesheet" type="text/css" href="/styles/index.css"> <link rel="stylesheet" type="text/css" href="/styles/index.css">
<link rel="stylesheet" type="text/css" href="/styles/game.css"> <link rel="stylesheet" type="text/css" href="/styles/game.css">
<link rel="stylesheet" type="text/css" href="/styles/card.css">
<link rel="icon" type="image/x-icon" href="/resources/favicon.ico"> <link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
</head> </head>
@ -23,11 +24,73 @@
</ul> </ul>
</header> </header>
<body> <body>
<svg width="200" height="400" style="position: fixed; z-index: -1">
<defs>
<pattern
id="pattern-stripe"
width="2"
height="20"
patternUnits="userSpaceOnUse"
>
<rect width="2" height="8" fill="#fff" />
</pattern>
<pattern
id="pattern-grid"
width="30"
height="30"
patternUnits="userSpaceOnUse"
>
<rect width="7.5" height="30" fill="#fff" />
<rect width="30" height="7.5" fill="#fff" />
</pattern>
<pattern
id="pattern-dot"
width="40"
height="40"
patternUnits="userSpaceOnUse"
>
<circle cx="18" cy="18" r="12" fill="#fff" />
</pattern>
<mask id="mask-stripped">
<rect
x="0"
y="0"
width="200"
height="400"
fill="url(#pattern-stripe)"
/>
</mask>
<mask id="mask-pointed">
<rect
x="0"
y="0"
width="200"
height="400"
fill="url(#pattern-dot)"
/>
</mask>
<mask id="mask-squared">
<rect
x="0"
y="0"
width="200"
height="400"
fill="url(#pattern-grid)"
/>
</mask>
</defs>
</svg>
<div id="app"> <div id="app">
<deck-module id-room="00000" :mode=false></deck-module> <deck-module id-room="00000" :mode=false></deck-module>
</div> </div>
<section> <section>
</section> </section>
<script src="/src/Model/card-to-html.js"></script>
<script src="/src/Model/Exceptions.js"></script> <script src="/src/Model/Exceptions.js"></script>
<script src="/src/Model/Card.js"></script> <script src="/src/Model/Card.js"></script>
<script src="/src/algo.js"></script> <script src="/src/algo.js"></script>

69
views/room.html
Unescape View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<title>Room - HyperSet</title>
<link rel='stylesheet' type='text/css' href='/styles/style.css' />
<link rel='stylesheet' type='text/css' href='/styles/room.css' />
</head>
<body>
<section id="left-section">
<button>Orignal Set Game</button>
<div>
<label>Private</label>
<input type='checkbox' />
</div>
<span id="or">OR</span>
<div class="group">
<span class="subtitle">Game parameters</span>
<div id="game-param">
<label id="chrono-slider-label">js</label><br>
<input type="range" min="1" max="8" value="1" class="slider" id="chrono-slider"><br>
<label id="player-slider-label">js</label><br>
<input type="range" min="0" max="20" value="0" class="slider" id="player-slider"><br>
<span>HyperSet</span> <input type='checkbox' /><br>
</div>
</div>
<div class="group">
<span class="subtitle">Card number to make a set</span>
<div id='card-param' class="param">
<input type='checkbox' /> <span>3</span>
<input type='checkbox' /> <span>4</span>
<input type='checkbox' /> <span>5</span>
</div>
</div>
<div class="group">
<span class="subtitle">Attributes to play with</span>
<div id='attributes-param' class="param">
<input type='checkbox' /> <span>number</span>
<input type='checkbox' /> <span>color</span>
<input type='checkbox' /> <span>shape</span>
<input type='checkbox' /> <span>filling</span>
<input type='checkbox' /> <span>outline (honnêtement c'est nul)</span>
</div>
</div>
</section>
<section id="right-section">
<div>
<span class="subtitle">List of players waiting in the room:</span>
<div id="players">
<span>Aurianus</span>
<span>Basuw</span>
<span>Raph</span>
<span>Remrem</span>
</div>
</div>
<button id="start">START</button>
</section>
</body>
</html>
Write Preview
Loading…
Cancel
Save