conflict index.html ok

2 years ago · 8c99f9408b
parent c73b7b6859 1c22444211
commit 8c99f9408b
19 changed files with 481 additions and 72 deletions
--- a/doc/newClassDiagram.md
+++ b/doc/newClassDiagram.md
@ -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()
+    }
+
+```
--- a/doc/oldClassDiagram
+++ b/doc/oldClassDiagram
@ -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()
+    }
+
+```
--- a/index.html
+++ b/index.html
@ -10,6 +10,7 @@
 </head>

 <body>
+
 <header>
    <ul id="nav-bar">
        <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
@ -36,9 +37,9 @@

    </div>
    <div id="right" class="column">
-        <button class="action-button">Join Public Game</button>
-        <button class="action-button"><a href="/views/room.html">New Public Game</a></button>
-        <button class="action-button">New Private Game</button>
+        <button class="action-button">Create solo game</button>
+        <button class="action-button">Join game</button>
+        <button class="action-button">New Game</button>
    </div>
 </div>

--- a/package.json
+++ b/package.json
@ -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"
+}
--- a/resources/logo.png
+++ b/resources/logo.png
--- a/src/Console/Console.html
+++ b/src/Console/Console.html
@ -19,7 +19,8 @@
    <script src="../Model/Factory.js"></script>
    <script src="../Model/Deck.js"></script>
    <script src="../../test/testsIsHyperset.js"></script>
-    <script src="main.js"></script>
+    <script src="../../test/testsNumberHyperset.js"></script>
+    <!--<script src="main.js"></script>-->
 </body>

 </html>
--- a/src/Console/main.js
+++ b/src/Console/main.js
@ -26,22 +26,22 @@ console.group('Deck');
 let deck = new Deck([0,1,2,3],3);
 console.log("deck.outputCards",deck.outputCards)
 console.log("deck.outputCards length",deck.outputCards.length)
-console.log("deck.remainingCards",deck.remainingCards)
+//console.log("deck.remainingCards",deck.remainingCards)
 console.log("deck.remainingCards length",deck.remainingCards.length)
 console.log("check set");
 deck.checkSet([deck.outputCards[0],deck.outputCards[1],deck.outputCards[2]])
 console.log("deck.outputCards",deck.outputCards)
 console.log("deck.outputCards length",deck.outputCards.length)

-console.log("deck.remainingCards",deck.remainingCards)
+//console.log("deck.remainingCards",deck.remainingCards)
 console.log("deck.remainingCards length",deck.remainingCards.length)
 console.groupEnd();

-let tab=[]
-tab.push("yeyee")
-console.log(tab)
-tab.push("gngngn")
-console.log(tab)
+// let tab=[]
+// tab.push("yeyee")
+// console.log(tab)
+// tab.push("gngngn")
+// console.log(tab)
 // CREATE HYPERSET

 function checkList(list) {
--- a/src/Model/Const.js
+++ b/src/Model/Const.js
@ -1,8 +1,8 @@
 const TAB_COLOR = ['red', 'purple', 'green', 'blue', 'orange'];
 const TAB_NUMBER = [1, 2, 3, 4, 5];
 const TAB_SHAPE = ['diamond', 'oval', 'squiggle', 'star', 'triangle'];
-const TAB_FILLING = ['empty', 'stripped', 'fullO', 'pointed', 'squared'];
-const TAB_OUTLINE = ['full', 'dot', 'rect', 'spade', 'sharp'];
+const TAB_FILLING = ['empty', 'stripped', 'full', 'pointed', 'squared'];
+const TAB_OUTLINE = ['continuous', 'dot', 'rect', 'spade', 'sharp'];
 const ATTRIBUTES = [TAB_COLOR, TAB_NUMBER, TAB_SHAPE, TAB_FILLING, TAB_OUTLINE];
 const IDX_ATTRIBUTES = ["color", "number", "shape", "filling", "outline"];

--- a/src/Model/Deck.js
+++ b/src/Model/Deck.js
@ -27,26 +27,32 @@ class Deck {
   * @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⌛
+  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;
    }
+    else {
+        let nbSets = setsCounter(this.outputCards, this.nbCards);
+        if(this.outputCards.length>=12 && nbSets!=0){
+            return
+        }
        else{
            for (let i = 0; i < nbCards; i++) {
                const rand = this.getRandCard();
                this.outputCards.push(this.remainingCards[rand]);
                this.remainingCards.splice(rand, 1);
            }
-      let nbSets = setsCounter(this.outputCards, this.nbCards);
+            nbSets = setsCounter(this.outputCards, this.nbCards);
            console.log("nbSets", nbSets);
-      console.log("outputCards.length", this.outputCards.length);
-      console.log("remainingCards.length", this.remainingCards.length);
+            // console.log("outputCards.length", this.outputCards.length);
+            // console.log("remainingCards.length", this.remainingCards.length);
            if (nbSets == 0) {
                this.createDeck(this.nbCards)
            }
        }
    }
+  }

  /**
   * 
--- a/src/algo.js
+++ b/src/algo.js
@ -152,33 +152,33 @@ function trouveElements(attributsCartes) {

    let x;

-    tabColor.forEach(element => {
+    TAB_COLOR.forEach(element => {
        if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabColor);
+            x = createElements(attributsCartes, TAB_COLOR);
        }
    });

-    tabNumber.forEach(element => {
+    TAB_NUMBER.forEach(element => {
        if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabNumber);
+            x = createElements(attributsCartes, TAB_NUMBER);
        }
    });

-    tabShape.forEach(element => {
+    TAB_SHAPE.forEach(element => {
        if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabShape);
+            x = createElements(attributsCartes, TAB_SHAPE);
        }
    });

-    tabFilling.forEach(element => {
+    TAB_FILLING.forEach(element => {
        if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabFilling);
+            x = createElements(attributsCartes, TAB_FILLING);
        }
    });

-    tabOutline.forEach(element => {
+    TAB_OUTLINE.forEach(element => {
        if (element == attributsCartes[0]) {
-            x = createElements(attributsCartes, tabOutline);
+            x = createElements(attributsCartes, TAB_OUTLINE);
        }
    });

@ -191,6 +191,7 @@ function createCard(cards) {
    let carteFinale = [];
    let listeInter = [];

+
    cards.forEach(element => {
        attributesMatrix.push(element.getAttributes());
    });
@ -201,6 +202,7 @@ function createCard(cards) {
            listeInter.push(element[i]);
        });

+
        //S'ils sont tous égaux
        if (listeInter.every(element => element === listeInter[0])) {
            l = []
@ -218,8 +220,6 @@ function createCard(cards) {
            }
        }
    }
-
-    console.log(carteFinale);
    return carteFinale;
 }

@ -244,3 +244,46 @@ function isHyperset(cardsLeft, cardsRight) {
    }
    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
+
+}
+
--- a/styles/game.css
+++ b/styles/game.css
@ -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;
+}
--- a/styles/index.css
+++ b/styles/index.css
@ -108,3 +108,33 @@ h1 {
    flex-direction: column;
    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';
+}
--- a/test/testsIsHyperset.js
+++ b/test/testsIsHyperset.js
@ -1,9 +1,8 @@
-let card1 = new Card4WithoutOutline('red', 3, 'wave', 'full');
-let card2 = new Card4WithoutOutline('red', 3, 'oval', 'empty');
-let card3 = new Card4WithoutOutline('blue', 2, 'oval', 'full');
-let card4 = new Card4WithoutOutline('green', 1, 'wave', 'pointed');
-let card5 = new Card4WithoutOutline('green', 1, 'wave', 'full');
-
+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 = [];
@ -15,16 +14,17 @@ deckC.push(card3, card5);
 console.assert(isHyperset(deckA, deckB) == true);
 console.assert(isHyperset(deckA, deckC) == false);

-let BcardG1 = new Card5('red', 4, 'oval', 'empty', 'fullO');
-let BcardG2 = new Card5('red', 3, 'oval', 'full', 'fullO');
-let BcardG3 = new Card5('red', 2, 'oval', 'squared', 'fullO');
-let BcardG4 = new Card5('red', 1, 'oval', 'pointed', 'fullO');
+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'});

-let BcardD1 = new Card5('green', 3, 'oval', 'pointed', 'cloudy');
-let BcardD2 = new Card5('blue', 2, 'oval', 'squared', 'sharpy');
-let BcardD3 = new Card5('purple', 4, 'oval', 'full', 'hyphen');
-let BcardD4 = new Card5('orange', 1, 'oval', 'empty', 'dotted');
-let BcardD5 = new Card5('purple', 4, 'oval', 'stripped', 'hyphen');

 BdeckA = [];
 BdeckB = [];
@ -42,20 +42,3 @@ BdeckE.push(BcardD1, BcardD2, BcardD3, BcardD4);
 console.assert(isHyperset(BdeckA, BdeckB) == true);
 console.assert(isHyperset(BdeckA, BdeckC) == false);
 console.assert(isHyperset(BdeckD, BdeckE) == true);
-
-
-let Ccard1 = new Card4WithoutShape('blue', 3, 'empty', 'cloudy');
-let Ccard2 = new Card4WithoutShape('red', 3, 'empty', 'cloudy');
-let Ccard3 = new Card4WithoutShape('green', 3, 'empty', 'cloudy');
-let Ccard4 = new Card4WithoutShape('purple', 3, 'empty', 'sharpy');
-let Ccard5 = new Card4WithoutShape('purple', 3, 'empty', 'sharpy');
-let Ccard6 = new Card4WithoutShape('purple', 3, 'empty', 'sharpy');
-
-CdeckA = [];
-CdeckB = [];
-
-CdeckA.push(Ccard1, Ccard2, Ccard3);
-CdeckB.push(Ccard4, Ccard5, Ccard6);
-
-console.assert(isHyperset(CdeckA, CdeckB) == false);
-
--- a/test/testsNumberHyperset.js
+++ b/test/testsNumberHyperset.js
@ -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))
--- a/views/card-module.js
+++ b/views/card-module.js
@ -0,0 +1,20 @@
+export default{
+    emits:['selected'],
+    props: ['card','id'],
+    data: function(){
+        return{
+            idUsed:"id"+this.id,
+            isClicked:false,
+        }
+    },
+    methods:{
+        clicked() {
+            this.$emit('selected',this.id);
+        }
+    },
+    template:`
+    <div v-bind:id="idUsed" v-bind:style="{border: '2px solid black', color: 'red', fontSize: '20px', cursor: 'pointer',width:'100%',height:'100%' }" v-on:click="clicked">
+        {{card.attributes}}
+    </div>
+    `
+}
--- a/views/deck-module.js
+++ b/views/deck-module.js
@ -0,0 +1,69 @@
+export default{
+    emits:[],
+    props:{
+        deckR:Deck,
+        idRoom:String,
+        mode:String//true for chrono
+    },
+    data: function(){
+        return{
+            card:new Card({"filling":"empty"}),
+            id:0,
+            deck : new Deck([0,1,2,3],3),
+            selectedCards:[],
+            nbCardsSelected:0,
+            connected:'7/8',
+            timer:'10.51',
+        }
+    },
+    methods:{
+        selected(id){
+            if(this.nbCardsSelected>=this.deck.nbCards){
+                this.set();
+                console.log("deb")
+            }
+            else{
+                if(this.selectedCards[id]!=null){
+                    console.log("deselec")
+                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid black; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%");
+                    this.nbCardsSelected-=1
+                    this.selectedCards[id]=null
+                }
+                else{
+                    console.log("Selec")
+                    this.selectedCards[id]=this.deck.outputCards[id-1]
+                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%");
+                    this.nbCardsSelected+=1
+                    if(this.nbCardsSelected==this.deck.nbCards){
+                        console.log("this.selectedCards.length",this.selectedCards.length)
+                        this.set();
+                    }
+                }
+            }
+        },
+        set(){
+            console.log("Check Set")
+            let checkSet=true;
+            if(checkSet){
+                console.log("this.selectedCards.length",this.selectedCards.length)
+                this.deck.checkSet(this.selectedCards);
+                this.nbCardsSelected=0;
+                this.selectedCards.splice(0,this.selectedCards.length+1)
+            }
+        },
+    },
+    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-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 25rem 20px 20px'}">
+        <div class="Cardframe" v-bind:style="{ width:'12%', height:'15rem', margin:'2% 2% 2% 2%'}" v-for="n in deck.outputCards.length">
+            <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1]></card-module>
+        </div>
+    </div>
+    `
+}
--- a/views/game.html
+++ b/views/game.html
@ -0,0 +1,56 @@
+<!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">
+</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>
+    <div id="app">
+        <deck-module id-room="00000" :mode=false></deck-module>
+    </div>
+    <section>
+    </section>
+    <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>
--- a/views/navBar.html
+++ b/views/navBar.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>
--- a/views/tutorial.html
+++ b/views/tutorial.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>