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

Compare commits

base: HyperSet:master
Branches Tags
HyperSet:master
HyperSet:working-game-withuout-html-card
HyperSet:game-view
HyperSet:RaphouBranche
HyperSet:server
..
compare: HyperSet:working-game-withuout-html-card
Branches Tags
HyperSet:master
HyperSet:working-game-withuout-html-card
HyperSet:game-view
HyperSet:RaphouBranche
HyperSet:server

No commits in common. 'master' and 'working-game-withuout-html-card' have entirely different histories.
master ... working-ga

20 changed files with 247 additions and 614 deletions
Show Stats

2
.gitignore vendored
Unescape View File

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

11
index.html
Unescape View File

@ -7,7 +7,6 @@
<!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<link rel="stylesheet" type="text/css" href="./styles/index.css">
<link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
</head>
<body>
@ -38,15 +37,9 @@
</div>
<div id="right" class="column">
<button id="soloGame" class="action-button">Create solo game</button>
<button class="action-button">Create solo game</button>
<button class="action-button">Join game</button>
<button id="newGame" class="action-button">New Game</button>
<script>
let button=document.querySelector("#soloGame")
button.addEventListener('click', event => {
window.location.href = "/views/game.html";
});
</script>
<button class="action-button">New Game</button>
</div>
</div>

5
src/Model/Card.js
Unescape View File

@ -1,13 +1,11 @@
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
@ -19,7 +17,6 @@ class Card {
});
return att;
}
/**
*
* @param {*} card card to be compared with the current obj

8
src/Model/Const.js
Unescape View File

@ -1,6 +1,6 @@
const TAB_COLOR = ['red', 'purple', 'green', 'blue', 'orange'];
const TAB_NUMBER = [1, 2, 3, 4, 5];
const TAB_SHAPE = ['diamond', 'oval', 'squiggle', 'triangle', 'star'];
const TAB_SHAPE = ['diamond', 'oval', 'squiggle', 'star', 'triangle'];
const TAB_FILLING = ['empty', 'stripped', 'full', 'pointed', 'squared'];
const TAB_OUTLINE = ['continuous', 'dot', 'rect', 'spade', 'sharp'];
const ATTRIBUTES = [TAB_COLOR, TAB_NUMBER, TAB_SHAPE, TAB_FILLING, TAB_OUTLINE];
@ -15,9 +15,9 @@ const SHAPE_PATH = {
};
const OUTLINE_SPEC = {
continuous: {},
dot: { "stroke-dasharray": "1 25", "stroke-linecap": "round" },
full: {},
dot: { "stroke-dasharray": "1 20", "stroke-linecap": "round" },
rect: { "stroke-dasharray": 70 },
spade: { "stroke-dasharray": "10 15", "stroke-width": 40 },
sharp: { "stroke-dasharray": "30 30", "stroke-width": 25 }
sharp: {}
};

41
src/Model/Deck.js
Unescape View File

@ -29,12 +29,8 @@ class Deck {
*/
createDeck(nbCards) {//toTest⌛when more than 12c to d't add other cards
if (this.remainingCards.length < this.nbCards) {// no more cards
if(setsCounter(this.outputCards, this.nbCards)==0){
return 2;
}
else{
return 1;
}
console.log("PLUS DE CARTES");
return;
}
else {
let nbSets = setsCounter(this.outputCards, this.nbCards);
@ -49,6 +45,8 @@ class Deck {
}
nbSets = setsCounter(this.outputCards, this.nbCards);
console.log("nbSets", nbSets);
// console.log("outputCards.length", this.outputCards.length);
// console.log("remainingCards.length", this.remainingCards.length);
if (nbSets == 0) {
this.createDeck(this.nbCards)
}
@ -72,31 +70,21 @@ class Deck {
* @author Bastien Jacquelin
*/
checkSet(selectedCards) {//toTest⌛
console.log("nb set",setsCounter(this.outputCards, this.nbCards))
if (isSet(selectedCards)){// is a set
if (this.outputCards.length == 0) {//plus de deck
if (true) {//isSet(selectedCards)){// is a set
if (this.outputCards.length == 0) {
console.log("C'est win")
return 2;
}
else {//encore des cartes sur le deck
if(this.remainingCards.length < this.nbCards){// plus de pile
if(setsCounter(this.outputCards, this.nbCards) == 0){//plus de set mais encore des cartes dans le deck
return 2;
}
else{//encore des set
console.log("plus la pile")
return this.removeFromoutputCards(selectedCards);
}
}
else{// encore de la pile
console.log("encore de la pile")
return this.removeFromoutputCards(selectedCards);
}
else {
this.removeFromoutputCards(selectedCards);
return 1;
}
}
else{// pas un set
return -1;
else if (this.remainingCards.length < this.nbCards) {
console.log("C'est win")
return 2;
}
return 0;
}
/**
@ -105,7 +93,6 @@ 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++) {
@ -121,7 +108,7 @@ class Deck {
}
else {
this.setMade.push(set);
return this.createDeck(this.nbCards)
this.createDeck(this.nbCards)
}
}
}

6
src/Model/Factory.js
Unescape View File

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

34
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');
@ -11,52 +11,46 @@ class CardToHtml {
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++) {
// 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);
const path = this.createPath(card.shape,card.color,card.filling,card.outline,j);
svg.appendChild(path);
}
// Loop to add svg card.number times
for(let i = 0; i < card.attributes['number']; i++) {
for(let i = 0; i < card.number; i++) {
div.appendChild(svg.cloneNode(true))
}
// gamewindow.appendChild(div);
return div;
gameWindow.appendChild(div);
}
static createPath(shape,color,filling,outline,step) {
// The way to create svg element (differs from html element)
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
if(shape === undefined) shape = 'oval';
if(color === undefined) color = 'black';
if(filling === undefined) filling = 'empty';
if(shape === null) shape = 'oval';
if(color === null) color = '000000';
if(filling === null) filling = 'fill';
// 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' || filling === 'empty') {
if(filling === 'none') {
path.setAttribute('fill','none');
}
// Add svg attributes for shape outline
if(outline !== null && outline!==undefined) {
Object.keys(OUTLINE_SPEC[outline]).forEach(function(k) {
if(outline !== null){
Object.keys(OUTLINE_SPEC[outline]).forEach(function(k){
path.setAttribute(k,OUTLINE_SPEC[outline][k]);
});
if(filling == 'empty') path.setAttribute('stroke',color);
else path.setAttribute('stroke','black');
path.setAttribute('stroke','#000000');
}
// Diff between two paths in svg

20
src/algo.js
Unescape View File

@ -14,28 +14,14 @@ function isSet(cards)
for(let j = 0; j < attributesMatrix.length; j++) {
listAttributes.push(attributesMatrix[j][i]);
}
console.log("JE SUIS LES ATTRIBUTS")
console.log(listAttributes)
if(!checkAttributes2(listAttributes,attributesMatrix.length)){
if(!checkAttributes(listAttributes)){
return false;
}
}
console.log(cards)
return true;
}
function checkAttributes2(params,length) {
var tab = []
params.forEach(element => {
if (!tab.includes(element)) {
tab.push(element)
}
});
console.log(tab.length === 1 || tab.length === length)
return tab.length === 1 || tab.length === length;
}
function checkAttributes(attributes){
let orderingMethod = "null"; // Can only take ["null", "same", "different"]
let boolLoop = true;
@ -96,7 +82,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],deck[l]])){
if(isSet([deck[i],deck[j],deck[k]])){
//console.log(deck[i],deck[j],deck[k],deck[l])
res += 1
}
@ -114,7 +100,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],deck[l],deck[m]])){
if(isSet([deck[i],deck[j],deck[k]])){
//console.log(deck[i],deck[j],deck[k],deck[l],deck[m])
res += 1
}

21
styles/card.css
Unescape View File

@ -1,28 +1,19 @@
.card {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
align-items: center;
width: 6vw;
min-height: 30vh;
padding: 0.5em 1em 0.5em 1em;
margin: 1.2rem; /* for better display */
height: 10rem;
min-width: 20rem;
padding: 3em;
margin: 1.7rem; /* for better display */
border: 0.3em solid black;
border-radius: 2em;
background-color: white;
}
.card:hover {
cursor: pointer;
}
svg {
rotate: 90deg;
height: 10vh;
width: 5vw;
}
.item {
margin: 1rem;
}
#main {

21
styles/index.css
Unescape View File

@ -62,6 +62,27 @@
background-color: white;
}
.action-button {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
padding: 1.2em;
padding-top: 2.1rem;
background-color: white;
border: 0.2rem solid black;
border-radius: 0.5em;
font-family: var(--font);
font-size: 1.5em;
transition: 0.3s;
}
.action-button:hover {
background-color: black;
color: white;
transform: scale(1.2);
cursor: pointer;
}
h1 {
color: black;

72
styles/room.css
Unescape View File

@ -1,72 +0,0 @@
section {
display: flex;
padding: 3em;
flex-direction: column;
height: calc(100vh - 6em);
}
.title2 {
font-size: 4em;
margin-bottom: 1em;
}
.title3 {
font-size: 2em;
}
#left-section {
background-color: white;
width: 70vw;
}
#right-section {
display: flex;
justify-content: space-between;
background-color: white;
width: 30vw;
}
.button {
display: flex;
width: 30vw;
color: black;
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;
transition: 0.3s;
}
.button:hover {
background-color: black;
color: white;
scale: 1.1;
}
.subtitle {
font-family: var(--font);
font-size: 1.6em;
font-weight: bold;
}
input[type="checkbox"] {
margin-left: 1rem;
}
.group {
margin-bottom: 5em;
}
.param {
margin-top: 1em;
}
#start {
bottom: 3vh;
right: 3vw;
}

23
styles/style.css
Unescape View File

@ -8,26 +8,3 @@
border: 0;
font-family: var(--font);
}
.action-button {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
padding: 1.2em;
padding-top: 2.1rem;
background-color: white;
border: 0.2rem solid black;
border-radius: 0.5em;
font-family: var(--font);
font-size: 1.5em;
transition: 0.3s;
}
.action-button:hover {
background-color: black;
color: white;
transform: scale(1.2);
cursor: pointer;
}

20
views/card-module.js
Unescape View File

@ -5,30 +5,16 @@ 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-on:click="clicked">
<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>
`
}

42
views/cards-test.html
Unescape View File

@ -79,11 +79,11 @@
</svg>
<div id="main">
<!-- <div class="card">
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<path
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"
d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
stroke-dasharray="1 20"
stroke-linecap="round"
stroke-width="18"
@ -93,7 +93,7 @@
/>
<path
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"
d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
stroke-dasharray="1 20"
stroke-linecap="round"
stroke-width="18"
@ -103,35 +103,25 @@
/>
</svg>
</div> -->
</div>
</div>
<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/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 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})
// 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);
const testCard1 = new Card5('ed5467',3,'diamond','grid','rect');
const testCard2 = new Card5('78ef56',3,'star','dot','dot');
const testCard3 = new Card5('79ec36',3,'squiggle','stripe','spade');
const testCard4 = new Card5('79ec36',3,'oval','full','full');
const testCard5 = new Card5('79ec36',3,'triangle','none','spade');
CardToHtml.create(testCard1);
CardToHtml.create(testCard2);
CardToHtml.create(testCard3);
CardToHtml.create(testCard4);
CardToHtml.create(testCard5);
</script>
</body>
</html>

163
views/cards.html
Unescape View File

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

50
views/deck-module.js
Unescape View File

@ -1,60 +1,55 @@
export default{
emits:[],
props:{
deck:Deck,
deckR:Deck,
idRoom:String,
mode:Boolean,//true for chrono
hyperSet:Boolean,
mode:Boolean//true for chrono
},
data: function(){
return{
card:new Card({"filling":"empty"}),
id:0,
deck : new Deck([0,1,2,3],3),
selectedCards:[],
selectedCardsindex:[],
nbCardsSelected:0,
connected:'7/8',
timer:'10.51',
win:false,
}
},
methods:{
selected(id){
if(this.nbCardsSelected>=this.deck.nbCards){
this.set();
console.log("deb")
}
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;");
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%");
this.nbCardsSelected-=1
delete this.selectedCards[id]//pb
this.selectedCardsindex.splice(this.selectedCardsindex.indexOf(id),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; cursor: pointer;");
document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%");
this.nbCardsSelected+=1
this.selectedCardsindex.push(id)
if(this.nbCardsSelected==this.deck.nbCards){
console.log("this.selectedCards.length",this.selectedCards.length)
this.set();
}
}
}
},
set(){
console.log("this.selectedCards",this.selectedCards)
let checkSet=this.deck.checkSet(this.selectedCards);
if(checkSet==2){//is set
this.win=true;
}
// remove red outline
this.selectedCardsindex.forEach((e) => {
document.querySelector(`#id${e}`).setAttribute("style","cursor: pointer;");
})
// flush array
console.log("Check Set")
let checkSet=true;
if(checkSet){
console.log("this.selectedCards.length",this.selectedCards.length)
this.deck.checkSet(this.selectedCards);
this.nbCardsSelected=0;
this.selectedCards=[]
this.selectedCardsindex=[]
this.selectedCards.splice(0,this.selectedCards.length+1)
}
},
},
template:`
@ -65,11 +60,10 @@ export default{
<h2>Players: {{connected}}</h2>
</div>
<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 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-if="win">
<h2>Félicitations, vous venez de gagner la partie ! 🎉</h2>
</div>
`
}

94
views/game.html
Unescape View File

@ -9,11 +9,10 @@
<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">
<link rel="stylesheet" type="text/css" href="/styles/room.css">
<link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
</head>
<header>
<ul id="nav-bar">
<li><a href="/index.html">Home</a></li> <!-- maybe put a logo -->
@ -24,75 +23,11 @@
</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">
<room-component id='Room' @send-deck="sendDeck"></room-component>
<deck-module :id-room="00000" :deck=this.deck :mode=false v-if="this.deck != null"></deck-module>
<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>
@ -104,32 +39,17 @@
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
import CardModule from '/views/card-module.js';
import DeckModule from '/views/deck-module.js';
import RoomComponent from '/views/room-component.js';
const app = createApp({
created()
{
},
mounted()
{},
created(){},
data(){
return{
deck: null
}
return{}
},
methods:{
sendDeck:function(deck) {
this.deck = deck
document.querySelector('#Room').setAttribute("style","display: none")
document.querySelector('#Game').setAttribute("style","display: flex");
console.log('send deck')
}
myFun:function(){}
}
});
app.component('CardModule', CardModule)
.component('DeckModule', DeckModule)
.component('RoomComponent', RoomComponent);
app.component('CardModule', CardModule);
app.component('DeckModule', DeckModule);
app.mount('#app');
</script>
</body>

104
views/room-component.js
Unescape View File

@ -1,104 +0,0 @@
export default {
data: function() {
return {
chronoTime: 0,
isHyperset: false,
nbCards: 3,
attr: [0,1,2,3],
errorMessage: "",
// red: "red"
}
},
methods: {
updateNbCard(nb) {
console.log(nb);
this.nbCards = nb
const card3 = document.querySelector("#card3");
const card4 = document.querySelector("#card4");
const card5 = document.querySelector("#card5");
if(nb == 3) {
card4.checked = false
card5.checked = false
} else if (nb == 4){
card3.checked = false
card5.checked = false
}else {
card3.checked = false
card4.checked = false
}
},
updateAttributes(attrNb) {
console.log(attrNb)
console.log(this.attr)
const att1 = document.querySelector("#attr1");
const att2 = document.querySelector("#attr2");
const att3 = document.querySelector("#attr3");
const att4 = document.querySelector("#attr4");
const att5 = document.querySelector("#attr5");
if(this.attr.includes(attrNb)) {
this.attr.splice(this.attr.indexOf(attrNb), 1)
console.log(this.attr)
//`att${attrNb}`.checked = false
} else {
this.attr.push(attrNb);
}
},
startGame: function() {
console.log('startGame')
if( this.nbCards <= this.attr.length) {
try {
const deck = new Deck(this.attr, this.nbCards)
this.$emit('send-deck',deck);
} catch (EmptyParamterException) {
this.errorMessage = "Number of attributes must be superior to number of cards"
}
}
else this.errorMessage = "Number of attributes must be superior to number of cards"
}
},
template:`
<section>
<h2 class="title2">Room Creation</h2>
<div class="group">
<h3 class="title3">Game parameters</h3>
<div id="game-param">
<label id="player-slider-label">Chrono: {{ chronoTime }}min</label><br>
<input type="range" min="0" max="20" value="0" class="slider" id="player-slider" v-model=chronoTime ><br>
<span>HyperSet</span> <input type='checkbox' v-model=isHyperset /><br>
</div>
</div>
<div class="group">
<h3 class="title3">Card number to make a set</h3>
<div id='card-param' class="param">
<input id="card3" type='checkbox' v-on:click="updateNbCard(3)" checked=true /> <span>3</span>
<input id="card4" type='checkbox' v-on:click="updateNbCard(4)" /> <span>4</span>
<input id="card5" type='checkbox' v-on:click="updateNbCard(5)" /> <span>5</span>
</div>
</div>
<div class="group">
<h3 class="title3">Attributes to play with</h3>
<div id='attributes-param' class="param">
<input id="attr1" type='checkbox' checked=true @click="updateAttributes(1)" /> <span>number</span>
<input id="attr2" type='checkbox' checked=true @click="updateAttributes(0)" /> <span>color</span>
<input id="attr3" type='checkbox' checked=true @click="updateAttributes(2)" /> <span>shape</span>
<input id="attr4" type='checkbox' checked=true @click="updateAttributes(3)" /> <span>filling</span>
<input id="attr5" type='checkbox' @click="updateAttributes(4)" /> <span>outline</span>
</div>
<span v-bind:style="{color: 'red'}">{{ errorMessage }}</span>
</div>
<input class='button' type="submit" value="Start Game" @click="startGame()" />
</section>
`
}

77
views/room.html
Unescape View File

@ -1,77 +0,0 @@
<!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' />
<link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
</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" class="action-button">Start</button>
<script>
let button=document.querySelector("#start")
button.addEventListener('click', event => {
window.location.href = "/views/game.html";
});
</script>
</section>
</body>
</html>

45
views/room_multi.html
Unescape View File

@ -1,45 +0,0 @@
<!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">
<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" class="action-button">Start</button>
<script>
let button=document.querySelector("#start")
button.addEventListener('click', event => {
window.location.href = "/views/game.html";
});
</script>
</section>
</body>
</html>
Write Preview
Loading…
Cancel
Save