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

Merge branch 'master' of https://codefirst.iut.uca.fr/git/HyperSet/HyperSet into card-class
continuous-integration/drone/push Build is passing Details

Browse Source
pull/88/head
Aurian JAULT 2 years ago
parent 070a72162c e54a8e652f
commit 869d0d6f89
38 changed files with 1413 additions and 359 deletions
Show Stats Download Patch File Download Diff File

0
.drone.yml
Unescape View File

2
.gitignore vendored
Unescape View File

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

0
Dockerfile
Unescape View File

0
README.md
Unescape View File

18
doc/newClassDiagram.md
Unescape View File

@ -0,0 +1,18 @@
# Class diagram
```mermaid
---
title: Diagramme de classe final (ne prenant en compte que les "cards")
---
classDiagram
class Card{
attributes
+getAttributes()
+isEqual()
}
```

62
doc/oldClassDiagram copy.md
Unescape View File

@ -0,0 +1,62 @@
# Class diagram
```mermaid
---
title: Diagramme de classe initial (ne prenant en compte que les "cards")
---
classDiagram
Card <|-- Card4WithNoOutline
Card <|-- Card4WithNoShape
Card <|-- Card4WithNoNumber
Card <|-- Card4WithNoColor
Card <|-- Card4WithNoFilling
class Card{
+getAttributes()
+isEqual()
}
class Card4WithNoOutline{
-string color
-string shape
-string number
-string filling
+getAttributes()
+isEqual()
}
class Card4WithNoShape{
-string color
-string outline
-string number
-string filling
+getAttributes()
+isEqual()
}
class Card4WithNoColor{
-string outline
-string shape
-string number
-string filling
+getAttributes()
+isEqual()
}
class Card4WithNoNumber{
-string color
-string shape
-string outline
-string filling
+getAttributes()
+isEqual()
}
class Card4WithNoFilling{
-string color
-string shape
-string number
-string outline
+getAttributes()
+isEqual()
}
```

BIN
images/logo-no-background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
images/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

17
index.html
Unescape View File

@ -4,16 +4,17 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>HyperSet</title> <title>HyperSet</title>
<base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> <!-- <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/style.css">
<link rel="stylesheet" type="text/css" href="./styles/index.css"> <link rel="stylesheet" type="text/css" href="./styles/index.css">
</head> </head>
<body> <body>
<header> <header>
<ul id="nav-bar"> <ul id="nav-bar">
<li><a href="./index.html">Home</a></li> <!-- maybe put a logo --> <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
<li><a href="./views/cards.html">Card Test</a></li> <li><a href="./views/cards-test.html">Card Test</a></li>
<li><a href="./views/tutorial.html">Tutorial</a></li> <li><a href="./views/tutorial.html">Tutorial</a></li>
<li><a href="./views/leaderboard.html">Leaderboard</a></li> <li><a href="./views/leaderboard.html">Leaderboard</a></li>
<li><a href="./views/about.html">About</a></li> <li><a href="./views/about.html">About</a></li>
@ -36,9 +37,15 @@
</div> </div>
<div id="right" class="column"> <div id="right" class="column">
<button class="action-button">Join Public Game</button> <button class="action-button">Create solo game</button>
<button class="action-button">New Public Game</button> <button class="action-button">Join game</button>
<button class="action-button">New Private Game</button> <button id="newGame" class="action-button">New Game</button>
<script>
let button=document.querySelector("#newGame")
button.addEventListener('click', event => {
window.location.href = "/views/room.html";
});
</script>
</div> </div>
</div> </div>

23
package.json
Unescape View File

@ -0,0 +1,23 @@
{
"name": "hyperset",
"version": "1.0.0",
"description": "Web version of the famous card game \"SET\"",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://codefirst.iut.uca.fr/git/HyperSet/HyperSet.git"
},
"keywords": [
"Set!",
"game",
"logic"
],
"author": "Raphaël Lacote, Aurian Jault, Rémi Arnal, Bastien Jacquelin",
"license": "ISC"
}

BIN
resources/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
resources/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

5
src/Console/Console.html
Unescape View File

@ -11,7 +11,6 @@
<h1>Console - test </h1> <h1>Console - test </h1>
<section> <section>
</section> </section>
<script src="../Model/Exceptions.js"></script> <script src="../Model/Exceptions.js"></script>
<script src="../Model/Card.js"></script> <script src="../Model/Card.js"></script>
@ -19,7 +18,9 @@
<script src="../Model/Const.js"></script> <script src="../Model/Const.js"></script>
<script src="../Model/Factory.js"></script> <script src="../Model/Factory.js"></script>
<script src="../Model/Deck.js"></script> <script src="../Model/Deck.js"></script>
<script src="main.js"></script> <script src="../../test/testsIsHyperset.js"></script>
<script src="../../test/testsNumberHyperset.js"></script>
<!--<script src="main.js"></script>-->
</body> </body>
</html> </html>

119
src/Console/main.js
Unescape View File

@ -1,7 +1,3 @@
// import { Card5 } from "../Model/Card5";
// import('../Model/Card5');
//import {Card} from '../Model/Card';
console.log("~#Test#~"); console.log("~#Test#~");
console.group('Card');//DONE console.group('Card');//DONE
@ -18,93 +14,56 @@ console.log(card1.equals(card3));//FALSE
console.log(card1.equals(card4));//FALSE console.log(card1.equals(card4));//FALSE
*/ */
console.groupEnd(); console.groupEnd();
console.group('Factory'); console.group('Factory');
console.log('Passed') console.log('Passed')
let fact3=new Factory([0,1,2]); // let fact3=new Factory([0,1,2]);
let fact4=new Factory([0,1,2,3]); // let fact4=new Factory([0,1,2,3],3);
let fact5=new Factory([0,1,2,3,4]); //console.log(fact4.attributesDictionnary);
// let fact5=new Factory([0,1,2,3,4]);
console.groupEnd(); console.groupEnd();
// CREATE DECK
console.group('Deck'); console.group('Deck');
/*
console.log("~~BEGINNING~~");
let deck = new Deck([0,1,2,3],3); let deck = new Deck([0,1,2,3],3);
console.log(`All cards : ${deck.allCards.length}`); console.log("deck.outputCards",deck.outputCards)
//Display all cards console.log("deck.outputCards length",deck.outputCards.length)
console.log(`All cards display`); //console.log("deck.remainingCards",deck.remainingCards)
// deck.allCards.forEach(e => { console.log("deck.remainingCards length",deck.remainingCards.length)
// console.log(e.color,e.number,e.shape,e.filling);//no outline console.log("check set");
// console.log(e.color,e.number,e.filling,e.outline);//no shape deck.checkSet([deck.outputCards[0],deck.outputCards[1],deck.outputCards[2]])
// console.log(e.color,e.number,e.shape,e.outline);//no filling console.log("deck.outputCards",deck.outputCards)
// }); console.log("deck.outputCards length",deck.outputCards.length)
console.log(`remaining cards : ${deck.remainingCards.length}`)
console.log(`size output ${deck.outputCards.length}`);
console.group('Output cards');
deck.outputCards.forEach(e => {
console.log(e.getAttributes());
});
console.groupEnd();
console.log(`set already made :${deck.setMade}`);
deck.setMade.forEach(e => {
console.log(e.color,e.number,e.shape,e.filling);
});
//console.log("deck.remainingCards",deck.remainingCards)
console.log("deck.remainingCards length",deck.remainingCards.length)
console.groupEnd();
// CHECK SET // let tab=[]
console.log("~~CHECKING SET~~") // tab.push("yeyee")
// console.log(tab)
// tab.push("gngngn")
// console.log(tab)
// CREATE HYPERSET
console.log("Card to remove: ") function checkList(list) {
console.log(deck.outputCards[0].getAttributes(),deck.outputCards[1].getAttributes(),deck.outputCards[2].getAttributes()) // Vérifier si tous les éléments sont identiques
let customCard=[deck.outputCards[0],deck.outputCards[1],deck.outputCards[2]]; if (list.every(element => element === list[0])) {
deck.checkSet(customCard); return 1;
console.log(`remaining cards : ${deck.remainingCards.length}`) }
console.log(`All cards : ${deck.allCards.length}`)
console.log(`size output ${deck.outputCards.length}`);
console.group('Output cards');
deck.outputCards.forEach(e => {
console.log(e.getAttributes());
});
console.groupEnd();
console.log("~~SET MADE~~"); if ([...new Set(list)].length === list.length) {
console.log(`set already made : ${deck.setMade.length}`); return 0;
deck.setMade.forEach(e => {//tab of tab of cards of set made }
e.forEach(a=>{
console.log(a.color,a.number,a.shape,a.filling);
})
});
// console.log(deck.setMade)
*/
console.groupEnd();
//let deck5 = new Deck([0,1,2,3,4]);
//console.log(`All cards with 5 attributes size ${deck5.allCards.length}`);
// deck5.allCards.forEach(e => {
// console.log(e.color,e.number,e.shape,e.filling,e.outline);
// });
//console.log(`Remaining cards ${deck.remainingCards}`);
//console.log(`random : ${deck.getRandCard()}`);
console.groupEnd(); // Si tous les éléments ne sont ni identiques ni différents
return 2;
}
// Exemple d'utilisation
const list1 = [1, 2, 3, 4];
console.log(checkList(list1)); // Retourne 0
// CHECK SET const list2 = [1, 1, 1, 1];
// console.log("~~CHECKING ALL SET~~") console.log(checkList(list2)); // Retourne 1
// for (let i=0; i<26;i++){ const list3 = [1, 2, 3, 1];
// console.log(`-----${i}emme itérations-----`) console.log(checkList(list3)); // Retourne 2
// console.log("Card to remove: ")
// console.log(deck.outputCards[0].getAttributes(),deck.outputCards[1].getAttributes(),deck.outputCards[2].getAttributes())
// customCard=[deck.outputCards[0],deck.outputCards[1],deck.outputCards[2]];
// deck.checkSet(customCard);
// console.log(`remaining cards : ${deck.remainingCards.length}`)
// console.log(`All cards : ${deck.allCards.length}`)
// console.log(`size output ${deck.outputCards.length}`);
// console.group('Output cards');
// deck.outputCards.forEach(e => {
// console.log(e.getAttributes());
// });
// }
// deck.checkSet(customCard);

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

30
src/Model/Const.js
Unescape View File

@ -1,7 +1,23 @@
const TAB_COLOR = ['red','purple','green','blue','orange']; const TAB_COLOR = ['red', 'purple', 'green', 'blue', 'orange'];
const TAB_NUMBER = [1,2,3,4,5]; const TAB_NUMBER = [1, 2, 3, 4, 5];
const TAB_SHAPE = ['diamond','oval','wave','star','triangle']; const TAB_SHAPE = ['diamond', 'oval', 'squiggle', 'star', 'triangle'];
const TAB_FILLING = ['empty','stripped','full','pointed','squared']; const TAB_FILLING = ['empty', 'stripped', 'full', 'pointed', 'squared'];
const TAB_OUTLINE = ['continuous','dotted','hyphen','cloudy','sharpy']; const TAB_OUTLINE = ['continuous', 'dot', 'rect', 'spade', 'sharp'];
const ATTRIBUTES=[TAB_COLOR,TAB_NUMBER,TAB_SHAPE,TAB_FILLING,TAB_OUTLINE]; const ATTRIBUTES = [TAB_COLOR, TAB_NUMBER, TAB_SHAPE, TAB_FILLING, TAB_OUTLINE];
const IDX_ATTRIBUTES=["color","number","shape","filling","outline"]; const IDX_ATTRIBUTES = ["color", "number", "shape", "filling", "outline"];
const SHAPE_PATH = {
squiggle: "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",
diamond: "m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z",
triangle: "M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z",
star: "m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z",
oval: "m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
};
const OUTLINE_SPEC = {
continuous: {},
dot: { "stroke-dasharray": "1 25", "stroke-linecap": "round" },
rect: { "stroke-dasharray": 70 },
spade: { "stroke-dasharray": "10 15", "stroke-width": 40 },
sharp: {}
};

111
src/Model/Deck.js
Unescape View File

@ -1,79 +1,98 @@
class Deck{ class Deck {
/** /**
* *
* @param {*} attributes : array with the attributes index for the cards * @param {*} attributes : array with the attributes index for the cards
* @author Bastien Jacquelin * @author Bastien Jacquelin
*/ */
constructor(attributes,nbCards){ constructor(attributes, nbCards) {
//console.log(attributes); this.nbCards = nbCards;// number of card to do a set
this.allCards=this.createCards(attributes);// All the cards in the game this.allCards = this.createCards(attributes);// All the cards in the game
this.remainingCards=[] this.remainingCards = [];//init tab null
this.nbCards=nbCards; this.remainingCards = this.remainingCards.concat(this.allCards);// cards in the stack, init = all before creation of deck -> remove
this.remainingCards=this.remainingCards.concat(this.allCards);// cards in the stack this.outputCards = [];// 12 cards lay on the table
this.outputCards=[];// 12 cards lay on the table this.setMade = [];// array of array with all the set already mades (array of set)
this.setMade=[];// array of array with all the set already mades (array of set)
this.createDeck(12); this.createDeck(12);
} }
/** /**
* @brief creation of the deck : 12 cards lay in front of the player *
* @param attributes : index of the attributes used
* @returns all cards: 81 in case of 4 attributes and 1024 if 5 attributes
* @author Bastien Jacquelin * @author Bastien Jacquelin
*/ */
createDeck(nbCards){ createCards(attributes) {//working✅
if(this.remainingCards.length==0){ let factory = new Factory(attributes, this.nbCards);
return factory.product;
}
/**
* @brief creation of the deck : 12 random cards lay in front of the playe and remove card from the remainingCard array
* @author Bastien Jacquelin
*/
createDeck(nbCards) {//toTest⌛when more than 12c to d't add other cards
if (this.remainingCards.length < this.nbCards) {// no more cards
console.log("PLUS DE CARTES"); console.log("PLUS DE CARTES");
return; return 2;
}
else {
let nbSets = setsCounter(this.outputCards, this.nbCards);
if(this.outputCards.length>=12 && nbSets!=0){
return
} }
else{ else{
for (let i=0; i<nbCards; i++){ for (let i = 0; i < nbCards; i++) {
const rand = this.getRandCard(); const rand = this.getRandCard();
this.outputCards.push(this.remainingCards[rand]); this.outputCards.push(this.remainingCards[rand]);
this.remainingCards.splice(rand,1); this.remainingCards.splice(rand, 1);
} }
if(setsCounter(this.outputCards,this.nbCards)==0){ 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) this.createDeck(this.nbCards)
} }
} }
} }
}
/** /**
* *
* @returns random number in range of the array size * @returns random number in range of the array size
* @author Bastien Jacquelin * @author Bastien Jacquelin
*/ */
getRandCard(){ getRandCard() {//working✅
const random = Math.floor(Math.random() * this.remainingCards.length); const random = Math.floor(Math.random() * this.remainingCards.length);
return random; return random;
} }
/**
*
* @param attributes : index of the attributes used
* @returns all cards: 81 in case of 4 attributes and 1024 if 5 attributes
* @author Bastien Jacquelin
*/
createCards(attributes){
let factory = new Factory(attributes);
return factory.product;
}
/** /**
* @brief verification of the validity of the set selected * @brief verification of the validity of the set selected, call removeFromoutputCards when set is confirmed
* @param {*} selectedCards array of cards : set * @param {*} selectedCards array of cards : set
* @author Bastien Jacquelin * @author Bastien Jacquelin
*/ */
checkSet(selectedCards){ checkSet(selectedCards) {//toTest⌛
if(true){//isSet(selectedCards)){ if (isSet(selectedCards)){// is a set
if(this.outputCards.length==0){ if (this.outputCards.length == 0) {//plus de deck
console.log("C'est win") console.log("C'est win")
return; return 2;
} }
else{ 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
this.removeFromoutputCards(selectedCards); this.removeFromoutputCards(selectedCards);
return 1;
} }
} }
else if(this.remainingCards.length==0){ else{// encore de la pile
console.log("C'est win") this.removeFromoutputCards(selectedCards);
return; return 1;
}
}
}
else{// pas un set
return -1;
} }
} }
@ -82,24 +101,24 @@ class Deck{
* @param {*} selectedCards cards which need to be removed from the outputcards * @param {*} selectedCards cards which need to be removed from the outputcards
* @author Bastien Jacquelin * @author Bastien Jacquelin
*/ */
removeFromoutputCards(selectedCards){//better check of card type more opti removeFromoutputCards(selectedCards) {//working✅
let set=[]; console.log(JSON.parse(JSON.stringify(selectedCards)))
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++) {
let e = this.outputCards[i] let e = this.outputCards[i]
if(e.equals(element)){ if (e.equals(element)) {
set.push(e); set.push(e);
this.outputCards.splice(i,1); this.outputCards.splice(i, 1);
} }
} }
}); });
if (set.length < 1) {
if(set.length<1){
throw new UnFoundCardException(selectedCards); throw new UnFoundCardException(selectedCards);
} }
else{ else {
this.setMade.push(set); this.setMade.push(set);
this.createDeck(this.nbCards) return this.createDeck(this.nbCards)
} }
} }
} }

0
src/Model/Exceptions.js
Unescape View File

120
src/Model/Factory.js
Unescape View File

@ -1,11 +1,12 @@
class Factory{ class Factory{
constructor(arrayOfAttributes){ constructor(arrayOfAttributes, nbAttributes){
this.nbAttr=nbAttributes;
this.dicoAttributes=this.attributesDictionnary(arrayOfAttributes,this.funArrayOfAttributes(arrayOfAttributes)); this.dicoAttributes=this.attributesDictionnary(arrayOfAttributes,this.funArrayOfAttributes(arrayOfAttributes));
this.product=this.concreteCardCreation(arrayOfAttributes); this.product=this.concreteCardCreation(arrayOfAttributes);
//console.log("arrayOfAttributes",this.funArrayOfAttributes(arrayOfAttributes)); // console.log("arrayOfAttributes",this.funArrayOfAttributes(arrayOfAttributes));
//console.log("attributesDictionnary",this.dicoAttributes) // console.log("attributesDictionnary",this.dicoAttributes)
//console.log("attributesName",this.attributesName(this.dicoAttributes)); // console.log("attributesName",this.attributesName(this.dicoAttributes));
//console.log("allCards",this.product); // console.log("allCards",this.product);
} }
/** /**
@ -15,7 +16,7 @@ class Factory{
*/ */
funArrayOfAttributes(arrayOfIdxAttributes){//working✅ funArrayOfAttributes(arrayOfIdxAttributes){//working✅
let attr=[]; let attr=[];
let l=arrayOfIdxAttributes.length; let l=this.nbAttr;
arrayOfIdxAttributes.forEach(e => { arrayOfIdxAttributes.forEach(e => {
for (let i=0;i<l;i++){ for (let i=0;i<l;i++){
attr.push(ATTRIBUTES[e][i]); attr.push(ATTRIBUTES[e][i]);
@ -34,8 +35,8 @@ class Factory{
let dico={}; let dico={};
for (let i=0;i<l;i++){ for (let i=0;i<l;i++){
let tmp=[] let tmp=[]
for(let j=0;j<l;j++){ for(let j=0;j<this.nbAttr;j++){
tmp.push(arrayOfAllAttributes[(i*l)+j]); tmp.push(arrayOfAllAttributes[(i*this.nbAttr)+j]);
} }
dico[IDX_ATTRIBUTES[arrayOfIdxAttributes[i]]]=tmp; dico[IDX_ATTRIBUTES[arrayOfIdxAttributes[i]]]=tmp;
} }
@ -78,47 +79,49 @@ class Factory{
let tabOfAllCards=[]; let tabOfAllCards=[];
let dicoAttributes=this.dicoAttributes let dicoAttributes=this.dicoAttributes
let attributes=this.attributesName(dicoAttributes); let attributes=this.attributesName(dicoAttributes);
let nbAttributes=attributes.length; let nbAttributes=this.nbAttr;
console.log('nbAttributes',nbAttributes) if(attributes.length==3){
if(nbAttributes==3){ for (let a=0; a<nbAttributes; a++){
for (let b=0; b<nbAttributes; b++){
for (let c=0; c<nbAttributes; c++){ for (let c=0; c<nbAttributes; c++){
for (let n=0; n<nbAttributes; n++){ let attribDic = {};
for (let s=0; s<nbAttributes; s++){ attribDic[attributes[0]]=dicoAttributes[attributes[0]][a]
let attr1=attributes[0]; attribDic[attributes[1]]=dicoAttributes[attributes[1]][b]
let attr2=attributes[1]; attribDic[attributes[2]]=dicoAttributes[attributes[2]][c]
let attr3=attributes[2]; tabOfAllCards.push(new Card(attribDic))
tabOfAllCards.push(new Card({attr1:dicoAttributes[attr1][c],attr2:dicoAttributes[attr2][n],attr3:dicoAttributes[attr3][s]}))
} }
} }
} }
} }
else if(nbAttributes==4){ else if(attributes.length==4){
for (let a=0; a<nbAttributes; a++){ for (let a=0; a<nbAttributes; a++){
for (let b=0; b<nbAttributes; b++){ for (let b=0; b<nbAttributes; b++){
for (let c=0; c<nbAttributes; c++){ for (let c=0; c<nbAttributes; c++){
for (let d=0; d<nbAttributes; d++){ for (let d=0; d<nbAttributes; d++){
let attr1=attributes[0]; let attribDic = {};
let attr2=attributes[1]; attribDic[attributes[0]]=dicoAttributes[attributes[0]][a]
let attr3=attributes[2]; attribDic[attributes[1]]=dicoAttributes[attributes[1]][b]
let attr4=attributes[3]; attribDic[attributes[2]]=dicoAttributes[attributes[2]][c]
tabOfAllCards.push(new Card({attr1:dicoAttributes[attr1][a],attr2:dicoAttributes[attr2][b],attr3:dicoAttributes[attr3][c],attr4:dicoAttributes[attr4][d]})) attribDic[attributes[3]]=dicoAttributes[attributes[3]][d]
tabOfAllCards.push(new Card(attribDic))
} }
} }
} }
} }
} }
else if(nbAttributes==5){ else if(attributes.length==5){
for (let a=0; a<nbAttributes; a++){ for (let a=0; a<nbAttributes; a++){
for (let b=0; b<nbAttributes; b++){ for (let b=0; b<nbAttributes; b++){
for (let c=0; c<nbAttributes; c++){ for (let c=0; c<nbAttributes; c++){
for (let d=0; d<nbAttributes; d++){ for (let d=0; d<nbAttributes; d++){
for (let e=0; e<nbAttributes; e++){ for (let e=0; e<nbAttributes; e++){
let attr1=attributes[0]; let attribDic = {};
let attr2=attributes[1]; attribDic[attributes[0]]=dicoAttributes[attributes[0]][a]
let attr3=attributes[2]; attribDic[attributes[1]]=dicoAttributes[attributes[1]][b]
let attr4=attributes[3]; attribDic[attributes[2]]=dicoAttributes[attributes[2]][c]
let attr5=attributes[4]; attribDic[attributes[3]]=dicoAttributes[attributes[3]][d]
tabOfAllCards.push(new Card({attr1:dicoAttributes[attr1][a],attr2:dicoAttributes[attr2][b],attr3:dicoAttributes[attr3][c],attr4:dicoAttributes[attr4][d],attr5:dicoAttributes[attr5][e]})) attribDic[attributes[4]]=dicoAttributes[attributes[4]][e]
tabOfAllCards.push(new Card(attribDic))
} }
} }
} }
@ -130,61 +133,4 @@ class Factory{
} }
return tabOfAllCards return tabOfAllCards
} }
/*
concreteCardCreation(attributesDico){//progress
let tabOfAllCards=[];
let attributes=this.attributesRequiredFun(arrayOfAttributes);
let nbAttributes=length
if(nbAttributes==3){
for (let c=0; c<nbAttributes-1; c++){
for (let n=0; n<nbAttributes-1; n++){
for (let s=0; s<nbAttributes-1; s++){
tabOfAllCards.push(new Card3(ATTRIBUTES[0][c],ATTRIBUTES[1][n],ATTRIBUTES[2][s]));
}
}
}
}
else if(nbAttributes==4){
for (let n=0; n<nbAttributes-1; n++){
for (let s=0; s<nbAttributes-1; s++){
for (let f=0; f<nbAttributes-1; f++){
for (let o=0; o<nbAttributes-1; o++){
if(attributes[0][0]===0){
tabOfAllCards.push(new Card4WithoutColor(attributes[1][n],attributes[2][s],attributes[3][f],attributes[4][o]));
}
else if(attributes[1][0]===0){
tabOfAllCards.push(new Card4WithoutNumber(attributes[0][n],attributes[2][s],attributes[3][f],attributes[4][o]));
}
else if(attributes[2][0]===0){
tabOfAllCards.push(new Card4WithoutShape(attributes[0][n],attributes[1][s],attributes[3][f],attributes[4][o]));
}
else if(attributes[3][0]===0){
tabOfAllCards.push(new Card4WithoutFilling(attributes[0][n],attributes[1][s],attributes[2][f],attributes[4][o]));
}
else if(attributes[4][0]===0){
tabOfAllCards.push(new Card4WithoutOutline(attributes[0][n],attributes[1][s],attributes[2][f],attributes[3][o]));
}
}
}
}
}
}
else if(nbAttributes==5){
for (let c=0; c<nbAttributes-1; c++){
for (let n=0; n<nbAttributes-1; n++){
for (let s=0; s<nbAttributes-1; s++){
for (let f=0; f<nbAttributes-1; f++){
for (let o=0; o<nbAttributes-1; o++){
tabOfAllCards.push(new Card5(attributes[0][c],attributes[1][n],attributes[2][s],attributes[3][f],attributes[4][o]));
}
}
}
}
}
}
else{
throw new EmptyParamaterException("ilegal number of attributes");
}
return tabOfAllCards
}*/
} }

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

@ -0,0 +1,70 @@
class CardToHtml {
static create(card) {
// const gamewindow = document.querySelector('#main');
const div = document.createElement('div');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
div.setAttribute('class','card');
svg.setAttribute('class','item');
svg.setAttribute('height','160');
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);
svg.appendChild(path);
}
// Loop to add svg card.number times
for(let i = 0; i < card.attributes['number']; i++) {
div.appendChild(svg.cloneNode(true))
}
// gamewindow.appendChild(div);
return 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 = 'none';
// Add lots of attributes
path.setAttribute("d",SHAPE_PATH[shape]);
path.setAttribute('stroke',`${color}`);
path.setAttribute('fill',`${color}`);
path.setAttribute('stroke-width','18');
// Case shape do not have color
if(filling === 'none' || filling === 'empty') {
path.setAttribute('fill','none');
}
// Add svg attributes for shape outline
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 between two paths in svg
if (step === 0) {
path.setAttribute('mask',`url(#mask-${filling})`);
} else {
path.setAttribute('fill', 'none');
}
return path;
}
}

168
src/algo.js
Unescape View File

@ -1,4 +1,4 @@
import('./Model/Card.js') //import('./Model/Card.js')
function isSet(cards) function isSet(cards)
@ -18,6 +18,7 @@ function isSet(cards)
return false; return false;
} }
} }
console.log(cards)
return true; return true;
} }
@ -77,7 +78,7 @@ function numberOfSets3(deck){
for(j=i+1;j<deck.length-1;j++){ for(j=i+1;j<deck.length-1;j++){
for(k=j+1;k<deck.length;k++){ for(k=j+1;k<deck.length;k++){
if(isSet([deck[i],deck[j],deck[k]])){ if(isSet([deck[i],deck[j],deck[k]])){
console.log(deck[i],deck[j],deck[k]) //console.log(deck[i],deck[j],deck[k])
res += 1 res += 1
} }
} }
@ -92,8 +93,8 @@ function numberOfSets4(deck){
for(j = i+1 ; j < deck.length - 2; j++){ for(j = i+1 ; j < deck.length - 2; j++){
for(k = j+1 ; k < deck.length - 1 ; k++){ for(k = j+1 ; k < deck.length - 1 ; k++){
for(l = k + 1 ; l < deck.length;l++){ for(l = k + 1 ; l < deck.length;l++){
if(isSet([deck[i],deck[j],deck[k]])){ if(isSet([deck[i],deck[j],deck[k],deck[l]])){
console.log(deck[i],deck[j],deck[k],deck[l]) //console.log(deck[i],deck[j],deck[k],deck[l])
res += 1 res += 1
} }
} }
@ -110,8 +111,8 @@ function numberOfSets5(deck){
for(k = j+1 ; k < deck.length - 2 ; k++){ for(k = j+1 ; k < deck.length - 2 ; k++){
for(l = k + 1 ; l < deck.length - 1;l++){ for(l = k + 1 ; l < deck.length - 1;l++){
for(m = l + 1; m <deck.length;m++){ for(m = l + 1; m <deck.length;m++){
if(isSet([deck[i],deck[j],deck[k]])){ if(isSet([deck[i],deck[j],deck[k],deck[l],deck[m]])){
console.log(deck[i],deck[j],deck[k],deck[l],deck[m]) //console.log(deck[i],deck[j],deck[k],deck[l],deck[m])
res += 1 res += 1
} }
} }
@ -141,4 +142,159 @@ function setsCounter(deck, numberForSet){
console.error('The number of cards in a Set is not existing', numberForSet) console.error('The number of cards in a Set is not existing', numberForSet)
} }
function createElements(attributsCartes, listeAttributs) {
let l = []
let verif;
listeAttributs.forEach(element => {
verif = false;
attributsCartes.forEach(attribCartes => {
if (element == attribCartes) {
verif = true;
}
})
if (verif == false) {
l.push(element);
}
});
return l
}
function trouveElements(attributsCartes) {
let x;
TAB_COLOR.forEach(element => {
if (element == attributsCartes[0]) {
x = createElements(attributsCartes, TAB_COLOR);
}
});
TAB_NUMBER.forEach(element => {
if (element == attributsCartes[0]) {
x = createElements(attributsCartes, TAB_NUMBER);
}
});
TAB_SHAPE.forEach(element => {
if (element == attributsCartes[0]) {
x = createElements(attributsCartes, TAB_SHAPE);
}
});
TAB_FILLING.forEach(element => {
if (element == attributsCartes[0]) {
x = createElements(attributsCartes, TAB_FILLING);
}
});
TAB_OUTLINE.forEach(element => {
if (element == attributsCartes[0]) {
x = createElements(attributsCartes, TAB_OUTLINE);
}
});
return x;
}
function createCard(cards) {
let attributesMatrix = [];
let carteFinale = [];
let listeInter = [];
cards.forEach(element => {
attributesMatrix.push(element.getAttributes());
});
for (let i = 0; i < attributesMatrix[0].length; i++) {
listeInter = [];
attributesMatrix.forEach(element => {
listeInter.push(element[i]);
});
//S'ils sont tous égaux
if (listeInter.every(element => element === listeInter[0])) {
l = []
l.push(listeInter[0])
carteFinale.push(l);
}
else {
//S'ils sont tous différents
if ([...new Set(listeInter)].length === listeInter.length) {
carteFinale.push(trouveElements(listeInter));
}
//Sinon
else {
carteFinale.push([]);
}
}
}
return carteFinale;
}
function isHyperset(cardsLeft, cardsRight) {
left = createCard(cardsLeft)
right = createCard(cardsRight)
let verif;
for (let i = 0; i < left.length; i++) {
verif = false;
left[i].forEach(elementG => {
right[i].forEach(elementD => {
if (elementD == elementG) {
verif=true
}
})
})
if (verif == false) {
return false;
}
}
return true;
}
function numberOfHyperset2(deck) {
let res = 0
for (i = 0; i < deck.length - 3; i++) {
for (j = i + 1; j < deck.length - 2; j++) {
for (k = j + 1; k < deck.length - 1; k++) {
for (lapin = k + 1; lapin < deck.length; lapin++) {
console.log(" i,j,k,l :", i, j, k, lapin)
if (isHyperset([deck[i], deck[j]], [deck[k], deck[lapin]])) {
console.log(deck[i],deck[j],deck[k],deck[lapin])
res += 1
}
}
}
}
}
return res
}
function numberOfHyperset3(deck) {
let res = 0
for (i = 0; i < deck.length - 5; i = i + 1) {
for (j = i + 1; j < deck.length - 4; j = j + 1) {
for (k = j + 1; k < deck.length - 3; k = k + 1) {
for (lolita = k + 1; lolita < deck.length - 2; lolita = lolita + 1) {
for (m = lolita + 1; m < deck.length - 1; m = m + 1) {
for (n = m + 1; n < deck.length; n = n + 1) {
//console.log(i, j, k, lolita, m, n)
if (isHyperset([deck[i], deck[j], deck[k]], [deck[lolita], deck[m], deck[n]])) {
res += 1
}
}
}
}
}
}
}
return res
}

21
styles/card.css
Unescape View File

@ -1,19 +1,28 @@
.card { .card {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 10rem; width: 6vw;
min-width: 20rem; min-height: 30vh;
padding: 3em; padding: 0.5em 1em 0.5em 1em;
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;
} }
.card:hover {
cursor: pointer;
}
svg {
rotate: 90deg;
height: 10vh;
width: 5vw;
}
.item { .item {
margin: 1rem;
} }
#main { #main {

11
styles/game.css
Unescape View File

@ -0,0 +1,11 @@
.description{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 2rem 4rem 2rem 4rem;
}
h2{
font-size: 28px;
}

51
styles/index.css
Unescape View File

@ -62,27 +62,6 @@
background-color: white; 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 { h1 {
color: black; color: black;
@ -108,3 +87,33 @@ h1 {
flex-direction: column; flex-direction: column;
margin-top: auto; margin-top: auto;
} }
#tuto-block {
height: 86.7vh;
background-color: white;
border: 0.5rem solid black;
}
#p-block {
height: 75%;
width: 75%;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
#picture-logo {
display: block;
margin: 0 auto;
}
#phrase-finale{
font-size:18pt;
color:red;
font-family:'Comic Sans MS';
}

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

23
styles/style.css
Unescape View File

@ -8,3 +8,26 @@
border: 0; border: 0;
font-family: var(--font); 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;
}

0
test/.gitkeep
Unescape View File

45
test/testIsSet.js
Unescape View File

@ -0,0 +1,45 @@
console.log("TEST FOR ISSET")
let card1 = new Card5("bleu","1","rond","remplis","plein")
let card2 = new Card5("bleu","2","rond","remplis","plein")
let card3 = new Card5("bleu","3","rond","remplis","plein")
let card4 = new Card5("bleu","4","rond","remplis","plein")
let card5 = new Card5("bleu","5","rond","remplis","plein")
let card6 = new Card5("vert","6","carre","vide","tapis")
let realSet = [card1,card2,card3,card4,card5]
let unRealSet = [card2,card3,card4,card5,card6]
console.group("FOR SET OF 5")
console.log("Number of Sets -> 1")
console.assert(numberOfSets5(realSet)==1)
console.log("Number of Sets -> 0")
console.assert(numberOfSets5(unRealSet)==0)
console.groupEnd()
card1 = new Card4WithoutColor("1","rond","plein","tapis")
card2 = new Card4WithoutColor("2","rond","plein","tapis")
card3 = new Card4WithoutColor("3","rond","plein","tapis")
card4 = new Card4WithoutColor("4","rond","plein","tapis")
card5 = new Card4WithoutColor("4","carre","vide","plein")
realSet = [card1,card2,card3,card4]
unRealSet = [card2,card3,card4,card5]
console.group("FOR SET OF 4")
console.log("Number of Sets -> 1")
console.assert(numberOfSets4(realSet)==1)
console.log("Number of Sets -> 0")
console.assert(numberOfSets4(unRealSet)==0)
console.groupEnd()

44
test/testsIsHyperset.js
Unescape View File

@ -0,0 +1,44 @@
let card1 = new Card({ 'color': 'red', 'number': 3, 'shape':'squiggle','filling':'full'});
let card2 = new Card({'color':'red', 'number':3, 'shape':'oval','filling':'empty'});
let card3 = new Card({'color':'blue', 'number':2, 'shape':'oval', 'fillin':'full'});
let card4 = new Card({ 'color': 'green', 'number': 1, 'shape':'squiggle', 'fillin':'pointed'});
let card5 = new Card({ 'color': 'green', 'number': 1, 'shape':'squiggle', 'fillin':'full'});
deckA = [];
deckB = [];
deckC = [];
deckA.push(card1, card2);
deckB.push(card3, card4);
deckC.push(card3, card5);
console.assert(isHyperset(deckA, deckB) == true);
console.assert(isHyperset(deckA, deckC) == false);
let BcardG1 = new Card({ 'color': 'red', 'number': 4, 'shape':'diamond','filling':'empty','outline':'continuous'});
let BcardG2 = new Card({ 'color': 'red', 'number': 3, 'shape':'squiggle','filling':'full','outline':'continuous'});
let BcardG3 = new Card({ 'color': 'red', 'number': 2, 'shape':'star','filling':'squared','outline':'continuous'});
let BcardG4 = new Card({ 'color': 'red', 'number': 1, 'shape':'triangle','filling':'pointed','outline':'continuous'});
let BcardD1 = new Card({'color':'green', 'number':3, 'shape':'oval','filling':'pointed','outline':'dot'});
let BcardD2 = new Card({'color':'blue', 'number':2, 'shape':'oval','filling':'squared','outline':'rect'});
let BcardD3 = new Card({'color':'purple', 'number':4, 'shape':'oval','filling':'full','outline':'spade'});
let BcardD4 = new Card({'color':'orange', 'number':1, 'shape':'oval','filling':'empty','outline':'sharp'});
let BcardD5 = new Card({'color':'purple', 'number':4, 'shape':'oval','filling':'stripped','outline':'spade'});
BdeckA = [];
BdeckB = [];
BdeckC = [];
BdeckD = [];
BdeckE = [];
BdeckA.push(BcardG1, BcardG2, BcardG3);
BdeckB.push(BcardD1, BcardD2, BcardD3);
BdeckC.push(BcardD1, BcardD2, BcardD5);
BdeckD.push(BcardG1, BcardG2, BcardG3, BcardG4);
BdeckE.push(BcardD1, BcardD2, BcardD3, BcardD4);
console.assert(isHyperset(BdeckA, BdeckB) == true);
console.assert(isHyperset(BdeckA, BdeckC) == false);
console.assert(isHyperset(BdeckD, BdeckE) == true);

9
test/testsNumberHyperset.js
Unescape View File

@ -0,0 +1,9 @@
// CREATE DECK
let deck = new Deck([0, 1, 2, 3], 4);
// CHECK HYPERSET
console.log(deck.outputCards)
console.log(numberOfHyperset3(deck.outputCards))

34
views/card-module.js
Unescape View File

@ -0,0 +1,34 @@
export default{
emits:['selected'],
props: ['card','id'],
data: function(){
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>
`
}

137
views/cards-test.html
Unescape View File

@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Card Géneration</title>
<!-- <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/card.css">
</head>
<body>
<!--
stroke-dasharray="10 15" tapis stroke-width=40
stroke-dasharray="70" rect
stroke-dasharray="1 20" round
stroke-linecap="round" round
-->
<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-stripe">
<rect
x="0"
y="0"
width="200"
height="400"
fill="url(#pattern-stripe)"
/>
</mask>
<mask id="mask-dot">
<rect
x="0"
y="0"
width="200"
height="400"
fill="url(#pattern-dot)"
/>
</mask>
<mask id="mask-grid">
<rect
x="0"
y="0"
width="200"
height="400"
fill="url(#pattern-grid)"
/>
</mask>
</defs>
</svg>
<div id="main">
<!-- <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"
stroke-dasharray="1 20"
stroke-linecap="round"
stroke-width="18"
stroke="#000000"
fill="#800080"
mask="url(#mask-grid)"
/>
<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"
stroke-dasharray="1 20"
stroke-linecap="round"
stroke-width="18"
stroke="#000000"
fill="none"
mask="none"
/>
</svg>
</div> -->
</div>
<script src="../src/Model/Card.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);
</script>
</body>
</html>

121
views/cards.html
Unescape View File

@ -10,28 +10,50 @@
</head> </head>
<body> <body>
<!--
stroke-dasharray="10 15" tapis
stroke-dasharray="70" rect
stroke-dasharray="1 20" round
stroke-linecap="round" round
-->
<svg width="200" height="400" style="position: fixed; z-index: -1"> <svg width="200" height="400" style="position: fixed; z-index: -1">
<defs> <defs>
<path <path
id="squiggle" id="squiggle"
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="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="70"
stroke="#000000"
/> />
<path <path
id="oval" id="oval"
d="m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z" d="m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
stroke-dasharray="10 15"
stroke="#000000"
/> />
<path <path
id="diamond" id="diamond"
d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z" 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="#000000"
/> />
<path <path
id="star" id="star"
d="m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z" d="m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z"
stroke-dasharray="30"
stroke="#000000"
/> />
<path <path
id="triangle" id="triangle"
d="M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z" d="M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z"
stroke="#000000"
/> />
<pattern <pattern
id="pattern-stripe" id="pattern-stripe"
width="2" width="2"
@ -95,125 +117,126 @@
<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">
<use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use> <use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use>
<use href="#squiggle" stroke="#008002" 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="#008002" mask="url(#mask-stripe)"></use> <use href="#oval" fill="#800080" mask="url(#mask-grid)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use> <use href="#oval" stroke="#800080" fill="none" stroke-width="40"></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="#008002" mask="url(#mask-grid)"></use> <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use> <use href="#oval" stroke="#800080" fill="none" stroke-width="40"></use>
</svg> </svg>
</div>
<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" fill="#0000FF" mask="url(#mask-stripe)"></use> <use href="#oval" fill="#800080" mask="url(#mask-dot)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use> <use href="#oval" stroke="#800080" fill="none" stroke-width="40"></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="#0000FF" mask="url(#mask-stripe)"></use> <use href="#oval" stroke="#800080" fill="none" stroke-width="40">'</use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
</svg> </svg>
</div>
<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" fill="#0000FF" mask="url(#mask-stripe)"></use> <use href="#squiggle" stroke="#FF0000" fill="#FF0000" stroke-width="18"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg> </svg>
</div>
<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" fill="#FFA500" mask="url(#mask-stripe)"></use> <use href="#squiggle" fill="#FF0000" mask="url(#mask-grid)"></use>
<use href="#star" stroke="#FFA500" 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="#star" fill="#FFA500" mask="url(#mask-dot)"></use> <use href="#squiggle" fill="#FF0000" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" 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="#star" fill="#FFA500" mask="url(#mask-grid)"></use> <use href="#squiggle" fill="#FF0000" mask="url(#mask-dot)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use> <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
</svg> </svg>
</div>
<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" fill="#ff0000" mask="url(#mask-stripe)"></use> <use href="#squiggle" stroke="#FF0000" fill="none" stroke-width="18"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg> </svg>
</div>
<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" fill="#ff0000" mask="url(#mask-stripe)"></use> <use href="#diamond" stroke="#008000" fill="#008000" stroke-width="18"></use>
<use href="#diamond" 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="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use> <use href="#diamond" fill="#008000" mask="url(#mask-grid)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use> <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
</svg> </svg>
</div>
<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" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#diamond" fill="#008000" mask="url(#mask-stripe)"></use>
<use href="#oval" 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="#oval" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#diamond" fill="#008000" mask="url(#mask-dot)"></use>
<use href="#oval" 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="#oval" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#diamond" stroke="#008000" fill="none" stroke-width="18"></use>
<use href="#oval" stroke="#800080" 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="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use> <use href="#star" stroke="#0000FF" fill="#0000FF" 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>
</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>
</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="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use> <use href="#star" fill="#0000FF" mask="url(#mask-dot)"></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="#oval" stroke="#800080" fill="#800080" 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="#oval" 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="#oval" fill="#800080" mask="url(#mask-grid)"></use> <use href="#triangle" fill="#FFA500" mask="url(#mask-grid)"></use>
<use href="#oval" 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="#oval" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#triangle" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#oval" 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="#oval" fill="#800080" mask="url(#mask-dot)"></use> <use href="#triangle" fill="#FFA500" mask="url(#mask-dot)"></use>
<use href="#oval" 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="#oval" 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>

75
views/deck-module.js
Unescape View File

@ -0,0 +1,75 @@
export default{
emits:[],
props:{
deckR:Deck,
idRoom:String,
mode:Boolean//true for chrono
},
data: function(){
return{
card:new Card({"filling":"empty"}),
id:0,
deck : new Deck([0,1,2],3),
selectedCards:[],
selectedCardsindex:[],
nbCardsSelected:0,
connected:'7/8',
timer:'10.51',
win:false,
}
},
methods:{
selected(id){
if(this.nbCardsSelected>=this.deck.nbCards){
this.set();
}
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;");
this.nbCardsSelected-=1
delete this.selectedCards[id]//pb
this.selectedCardsindex.splice(this.selectedCardsindex.indexOf(id),1)
}
else{
this.selectedCards[id]=this.deck.outputCards[id-1]
document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; cursor: pointer;");
this.nbCardsSelected+=1
this.selectedCardsindex.push(id)
if(this.nbCardsSelected==this.deck.nbCards){
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
this.nbCardsSelected=0;
this.selectedCards=[]
this.selectedCardsindex=[]
},
},
template:`
<div class="description">
<h2>Room: {{idRoom}}</h2>
<h2 v-if="mode">{{timer}}</h2>
<h2 v-else="!mode"> Remaining cards: {{deck.remainingCards.length}}/{{deck.allCards.length}}</h2>
<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>
<div v-if="win">
<h2>Félicitations, vous venez de gagner la partie ! 🎉</h2>
</div>
`
}

120
views/game.html
Unescape View File

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game</title>
<!-- <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="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">
</head>
<header>
<ul id="nav-bar">
<li><a href="/index.html">Home</a></li> <!-- maybe put a logo -->
<li><a href="/views/cards-test.html">Card Test</a></li>
<li><a href="/views/tutorial.html">Tutorial</a></li>
<li><a href="/views/leaderboard.html">Leaderboard</a></li>
<li><a href="/views/about.html">About</a></li>
</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>
<script src="/src/Model/Const.js"></script>
<script src="/src/Model/Factory.js"></script>
<script src="/src/Model/Deck.js"></script>
<script type="module">
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';
const app = createApp({
created(){},
data(){
return{}
},
methods:{
myFun:function(){}
}
});
app.component('CardModule', CardModule);
app.component('DeckModule', DeckModule);
app.mount('#app');
</script>
</body>
</html>

24
views/navBar.html
Unescape View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<!--
Si vous rrouvez une unitilité à ce truc, n'hésitez pas.'
-->
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../styles/style.css">
<link rel="stylesheet" type="text/css" href="../styles/index.css">
</head>
<header>
<ul id="nav-bar">
<li><a href="./index.html">Home</a></li>
<li><a href="./views/cards-test.html">Card Test</a></li>
<li><a href="./tutorial.html">Tutorial</a></li>
<li><a href="./views/leaderboard.html">Leaderboard</a></li>
<li><a href="./views/about.html">About</a></li>
</ul>
</header>
</html>

75
views/room.html
Unescape View File

@ -0,0 +1,75 @@
<!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" 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>

53
views/tutorial.html
Unescape View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial</title>
<!-- <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">
</head>
<header>
<ul id="nav-bar">
<li><a href="../index.html">Home</a></li>
<li><a href="./cards-test.html">Card Test</a></li>
<li><a href="./tutorial.html">Tutorial</a></li>
<li><a href="./leaderboard.html">Leaderboard</a></li>
<li><a href="./about.html">About</a></li>
</ul>
</header>
<body>
<div id="tuto-block">
<div id="p-block">
<img src="../resources/logo.png"
id="picture-logo"
width="200"
height=auto
alt="Picture not found" /><br /><br />
<p>
Cette application web vous permet de joueur au célèbre jeu Set.<br />
Votre but est d'engendrer un maximum de points avant la fin du temps imparti,
pour cela, vous devez réunir des ensembles de 3 cartes.<br />
Un ensemble est constitué de trois cartes où chaque caractéristique est soit identique, soit différente pour chacune des cartes.<br />
Par exemple, un ensemble pourrait être composé d'une carte rouge pleine en forme de losange avec un remplissage rayé,<br />
une carte verte vide en forme d'ovale avec un remplissage plein et une carte violette pleine en forme de vague avec un remplissage vide.<br />
Vous pourrez jouer en solo ou en multijoueur ou vous devez être plus rapide que vos adversaire<br />
De nombreuses variantes sont disponibles et vous pourrez modifier vos attributs, le nombre de cartes...<br />
Pour une première partie nous vous conseillons la version du jeu Set en 3*4<br /><br />
</p>
<p id="phrase-finale">
A vous de jouer !!!
</p>
</div>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save