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

add card-to-html to game.html + lots of things
continuous-integration/drone/push Build is passing Details

Browse Source
pull/84/head
remrem 2 years ago
parent 8c99f9408b
commit 4a0aed7345
7 changed files with 120 additions and 36 deletions
Show Stats Download Patch File Download Diff File

1
src/Model/Deck.js
Unescape View File

@ -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++) {

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

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

13
styles/card.css
Unescape View File

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

20
views/card-module.js
Unescape View File

@ -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:`
<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">
{{card.attributes}}
<div v-bind:id="idUsed" v-on:click="clicked">
</div>
`
}

35
views/cards-test.html
Unescape View File

@ -110,28 +110,29 @@
<script src="../src/Model/Const.js"></script>
<script src="../src/Model/card-to-html.js"></script>
<script>
const testCard1 = new Card({shape: 'diamond', color: 'ed5467', number: 2, filling: 'grid', outline: 'rect'})
const testCard2 = new Card({shape: 'star', color: '78ef56', number: 3, filling: 'dot', outline: 'dot'});
const testCard3 = new Card({shape: 'squiggle', color: '79ec36', number: 2, filling: 'stripe', outline: 'spade'});
const testCard4 = new Card({shape: 'oval', color: '79ec36', number: 3, filling: 'full', outline: 'full'});
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});
// const testCard1 = new Card({shape: 'diamond', color: 'ed5467', number: 2, filling: 'grid', outline: 'rect'})
// const testCard2 = new Card({shape: 'star', color: '78ef56', number: 3, filling: 'dot', outline: 'dot'});
// const testCard3 = new Card({shape: 'squiggle', color: '79ec36', number: 2, filling: 'stripe', outline: 'spade'});
// const testCard4 = new Card({shape: 'oval', color: '79ec36', number: 3, filling: 'full', outline: 'full'});
// 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});
const c1 = new Card({shape: 'oval', color: 'FF0000', number: 1, filling: 'full', outline: null})
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: 'oval', color: 'FF0000', number: 1, filling: 'full', outline: null})
// 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})
// CardToHtml.create(testCard1);
// CardToHtml.create(testCard2);
// CardToHtml.create(testCard3);
// CardToHtml.create(testCard4);
// CardToHtml.create(testCard5);
// CardToHtml.create(testCard6);
//CardToHtml.create(testCard7);
CardToHtml.create(c1);
CardToHtml.create(c2);
CardToHtml.create(c3);
CardToHtml.create(c4);
CardToHtml.create(c5);
</script>
</body>
</html>

11
views/deck-module.js
Unescape View File

@ -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{
<h2>Players: {{connected}}</h2>
</div>
<div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 25rem 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]></card-module>
</div>
<div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 18rem 20px 20px'}">
<card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
</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/index.css">
<link rel="stylesheet" type="text/css" href="/styles/game.css">
<link rel="stylesheet" type="text/css" href="/styles/card.css">
</head>
@ -22,11 +23,73 @@
</ul>
</header>
<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">
<deck-module id-room="00000" :mode=false></deck-module>
</div>
<section>
</section>
<script src="/src/Model/card-to-html.js"></script>
<script src="/src/Model/Exceptions.js"></script>
<script src="/src/Model/Card.js"></script>
<script src="/src/algo.js"></script>

Write Preview
Loading…
Cancel
Save