Merge branch 'master' of https://codefirst.iut.uca.fr/git/HyperSet/HyperSet into card-class
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
commit
869d0d6f89
@ -0,0 +1,2 @@
|
|||||||
|
# because you don't need to know what's in here
|
||||||
|
note.txt
|
||||||
@ -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()
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
@ -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()
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 243 KiB |
@ -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"
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
@ -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: {}
|
||||||
|
};
|
||||||
|
|||||||
@ -1,105 +1,124 @@
|
|||||||
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);
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @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) {//working✅
|
||||||
|
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");
|
||||||
|
return 2;
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
/**
|
let nbSets = setsCounter(this.outputCards, this.nbCards);
|
||||||
* @brief creation of the deck : 12 cards lay in front of the player
|
if(this.outputCards.length>=12 && nbSets!=0){
|
||||||
* @author Bastien Jacquelin
|
return
|
||||||
*/
|
|
||||||
createDeck(nbCards){
|
|
||||||
if(this.remainingCards.length==0){
|
|
||||||
console.log("PLUS DE CARTES");
|
|
||||||
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
|
||||||
this.removeFromoutputCards(selectedCards);
|
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);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @brief when a set is made, need to remove the card from the array remainingCards
|
* @brief when a set is made, need to remove the card from the array remainingCards
|
||||||
* @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)))
|
||||||
selectedCards.forEach(element => {
|
let set = [];
|
||||||
for(let i=0; i<this.outputCards.length;i++){
|
selectedCards.forEach(element => {
|
||||||
let e = this.outputCards[i]
|
for (let i = 0; i < this.outputCards.length; i++) {
|
||||||
if(e.equals(element)){
|
let e = this.outputCards[i]
|
||||||
set.push(e);
|
if (e.equals(element)) {
|
||||||
this.outputCards.splice(i,1);
|
set.push(e);
|
||||||
}
|
this.outputCards.splice(i, 1);
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if(set.length<1){
|
|
||||||
throw new UnFoundCardException(selectedCards);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
this.setMade.push(set);
|
|
||||||
this.createDeck(this.nbCards)
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (set.length < 1) {
|
||||||
|
throw new UnFoundCardException(selectedCards);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.setMade.push(set);
|
||||||
|
return this.createDeck(this.nbCards)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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()
|
||||||
@ -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);
|
||||||
@ -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))
|
||||||
@ -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>
|
||||||
|
`
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
|
`
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in new issue