Compare commits
3 Commits
master
...
RaphouBran
| Author | SHA1 | Date |
|---|---|---|
 Raphael LACOTE
|
e2b718624c | 2 years ago |
|
Raphael LACOTE
|
90de25cc81 | 2 years ago |
|
Raphael LACOTE
|
24ef8900a6 | 2 years ago |
@ -1,2 +0,0 @@
|
||||
# because you don't need to know what's in here
|
||||
note.txt
|
||||
@ -1,18 +0,0 @@
|
||||
# Class diagram
|
||||
|
||||
```mermaid
|
||||
|
||||
---
|
||||
title: Diagramme de classe final (ne prenant en compte que les "cards")
|
||||
---
|
||||
|
||||
classDiagram
|
||||
|
||||
|
||||
class Card{
|
||||
attributes
|
||||
+getAttributes()
|
||||
+isEqual()
|
||||
}
|
||||
|
||||
```
|
||||
@ -1,62 +0,0 @@
|
||||
# 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()
|
||||
}
|
||||
|
||||
```
|
||||
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 243 KiB |
|
Before Width: | Height: | Size: 15 KiB |
@ -1,11 +0,0 @@
|
||||
.description{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 2rem 4rem 2rem 4rem;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 28px;
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
section {
|
||||
display: flex;
|
||||
padding: 3em;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 6em);
|
||||
}
|
||||
|
||||
.title2 {
|
||||
font-size: 4em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.title3 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#left-section {
|
||||
background-color: white;
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#right-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
width: 30vw;
|
||||
color: black;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1.2em;
|
||||
margin-bottom: 1em;
|
||||
background-color: white;
|
||||
border: 0.2rem solid black;
|
||||
border-radius: 0.5em;
|
||||
font-family: var(--font);
|
||||
font-size: 1.5em;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
scale: 1.1;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--font);
|
||||
font-size: 1.6em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
||||
.param {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#start {
|
||||
bottom: 3vh;
|
||||
right: 3vw;
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
|
||||
console.log('Debut de l\'execution');
|
||||
|
||||
/*setTimeout(function () {
|
||||
let fin = new Date().getTime();
|
||||
let tempsEcoule = fin - debut;
|
||||
console.log("Temps ecoulé : " + tempsEcoule + " millisecondes");
|
||||
|
||||
}, 5000);
|
||||
*/
|
||||
|
||||
let ite = 0;
|
||||
let cpt=0
|
||||
|
||||
while (ite < 5) {
|
||||
let deck = new Deck([0, 1, 2, 3], 4);
|
||||
|
||||
let debut = new Date().getTime()
|
||||
|
||||
numberOfSets3(deck.outputCards)
|
||||
//numberOfHyperset2(deck.outputCards)
|
||||
|
||||
|
||||
|
||||
let fin = new Date().getTime()
|
||||
let tempsEcoule = fin - debut
|
||||
console.log("Temps ecoule : " + tempsEcoule + " millisecondes")
|
||||
|
||||
cpt = cpt + tempsEcoule
|
||||
ite=ite+1
|
||||
}
|
||||
|
||||
console.log(cpt/5)
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
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>
|
||||
`
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
export default{
|
||||
emits:[],
|
||||
props:{
|
||||
deck:Deck,
|
||||
idRoom:String,
|
||||
mode:Boolean,//true for chrono
|
||||
hyperSet:Boolean,
|
||||
},
|
||||
data: function(){
|
||||
return{
|
||||
card:new Card({"filling":"empty"}),
|
||||
id:0,
|
||||
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,96 @@
|
||||
<!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="horizontale-center">
|
||||
<h2>BEST SCORES</h2>
|
||||
<br /><br />
|
||||
|
||||
|
||||
<form action="#">
|
||||
<div id="div-all-select">
|
||||
|
||||
|
||||
<div id="div-select">
|
||||
<h5>Select a type of game</h5>
|
||||
<select name="pets" id="high-score-option">
|
||||
<option value="T0">--Choose an option--</option>
|
||||
<option value="T1">Set</option>
|
||||
<option value="T2">Hyperset</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="div-select">
|
||||
<h5>Select a variant</h5>
|
||||
<select name="pets" id="high-score-option">
|
||||
<option value="V0">--Choose an option--</option>
|
||||
<option value="V1">3*3</option>
|
||||
<option value="V2">3*4</option>
|
||||
<option value="V3">3*5</option>
|
||||
<option value="V4">4*4</option>
|
||||
<option value="V5">4*5</option>
|
||||
<option value="V6">5*5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tableau des meilleures scores</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>The table body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The table body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The table body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The table body</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The table body</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,104 +0,0 @@
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
chronoTime: 0,
|
||||
isHyperset: false,
|
||||
nbCards: 3,
|
||||
attr: [0,1,2,3],
|
||||
errorMessage: "",
|
||||
// red: "red"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateNbCard(nb) {
|
||||
console.log(nb);
|
||||
this.nbCards = nb
|
||||
|
||||
const card3 = document.querySelector("#card3");
|
||||
const card4 = document.querySelector("#card4");
|
||||
const card5 = document.querySelector("#card5");
|
||||
|
||||
if(nb == 3) {
|
||||
card4.checked = false
|
||||
card5.checked = false
|
||||
} else if (nb == 4){
|
||||
card3.checked = false
|
||||
card5.checked = false
|
||||
}else {
|
||||
card3.checked = false
|
||||
card4.checked = false
|
||||
}
|
||||
},
|
||||
updateAttributes(attrNb) {
|
||||
console.log(attrNb)
|
||||
console.log(this.attr)
|
||||
|
||||
const att1 = document.querySelector("#attr1");
|
||||
const att2 = document.querySelector("#attr2");
|
||||
const att3 = document.querySelector("#attr3");
|
||||
const att4 = document.querySelector("#attr4");
|
||||
const att5 = document.querySelector("#attr5");
|
||||
|
||||
if(this.attr.includes(attrNb)) {
|
||||
this.attr.splice(this.attr.indexOf(attrNb), 1)
|
||||
console.log(this.attr)
|
||||
//`att${attrNb}`.checked = false
|
||||
} else {
|
||||
this.attr.push(attrNb);
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
startGame: function() {
|
||||
console.log('startGame')
|
||||
if( this.nbCards <= this.attr.length) {
|
||||
try {
|
||||
const deck = new Deck(this.attr, this.nbCards)
|
||||
this.$emit('send-deck',deck);
|
||||
} catch (EmptyParamterException) {
|
||||
this.errorMessage = "Number of attributes must be superior to number of cards"
|
||||
}
|
||||
|
||||
}
|
||||
else this.errorMessage = "Number of attributes must be superior to number of cards"
|
||||
}
|
||||
},
|
||||
template:`
|
||||
<section>
|
||||
<h2 class="title2">Room Creation</h2>
|
||||
|
||||
<div class="group">
|
||||
<h3 class="title3">Game parameters</h3>
|
||||
<div id="game-param">
|
||||
<label id="player-slider-label">Chrono: {{ chronoTime }}min</label><br>
|
||||
<input type="range" min="0" max="20" value="0" class="slider" id="player-slider" v-model=chronoTime ><br>
|
||||
<span>HyperSet</span> <input type='checkbox' v-model=isHyperset /><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3 class="title3">Card number to make a set</h3>
|
||||
<div id='card-param' class="param">
|
||||
<input id="card3" type='checkbox' v-on:click="updateNbCard(3)" checked=true /> <span>3</span>
|
||||
<input id="card4" type='checkbox' v-on:click="updateNbCard(4)" /> <span>4</span>
|
||||
<input id="card5" type='checkbox' v-on:click="updateNbCard(5)" /> <span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3 class="title3">Attributes to play with</h3>
|
||||
<div id='attributes-param' class="param">
|
||||
<input id="attr1" type='checkbox' checked=true @click="updateAttributes(1)" /> <span>number</span>
|
||||
<input id="attr2" type='checkbox' checked=true @click="updateAttributes(0)" /> <span>color</span>
|
||||
<input id="attr3" type='checkbox' checked=true @click="updateAttributes(2)" /> <span>shape</span>
|
||||
<input id="attr4" type='checkbox' checked=true @click="updateAttributes(3)" /> <span>filling</span>
|
||||
<input id="attr5" type='checkbox' @click="updateAttributes(4)" /> <span>outline</span>
|
||||
</div>
|
||||
<span v-bind:style="{color: 'red'}">{{ errorMessage }}</span>
|
||||
</div>
|
||||
|
||||
<input class='button' type="submit" value="Start Game" @click="startGame()" />
|
||||
</section>
|
||||
`
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Room - HyperSet</title>
|
||||
<link rel='stylesheet' type='text/css' href='/styles/style.css' />
|
||||
<link rel='stylesheet' type='text/css' href='/styles/room.css' />
|
||||
<link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="left-section">
|
||||
<button>Orignal Set Game</button>
|
||||
|
||||
<div>
|
||||
<label>Private</label>
|
||||
<input type='checkbox' />
|
||||
</div>
|
||||
|
||||
<span id="or">OR</span>
|
||||
|
||||
<div class="group">
|
||||
<span class="subtitle">Game parameters</span>
|
||||
<div id="game-param">
|
||||
<label id="chrono-slider-label">js</label><br>
|
||||
<input type="range" min="1" max="8" value="1" class="slider" id="chrono-slider"><br>
|
||||
<label id="player-slider-label">js</label><br>
|
||||
<input type="range" min="0" max="20" value="0" class="slider" id="player-slider"><br>
|
||||
<span>HyperSet</span> <input type='checkbox' /><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<span class="subtitle">Card number to make a set</span>
|
||||
<div id='card-param' class="param">
|
||||
<input type='checkbox' /> <span>3</span>
|
||||
<input type='checkbox' /> <span>4</span>
|
||||
<input type='checkbox' /> <span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<span class="subtitle">Attributes to play with</span>
|
||||
<div id='attributes-param' class="param">
|
||||
<input type='checkbox' /> <span>number</span>
|
||||
<input type='checkbox' /> <span>color</span>
|
||||
<input type='checkbox' /> <span>shape</span>
|
||||
<input type='checkbox' /> <span>filling</span>
|
||||
<input type='checkbox' /> <span>outline (honnêtement c'est nul)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="right-section">
|
||||
<div>
|
||||
<span class="subtitle">List of players waiting in the room:</span>
|
||||
<div id="players">
|
||||
<span>Aurianus</span>
|
||||
<span>Basuw</span>
|
||||
<span>Raph</span>
|
||||
<span>Remrem</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="start" class="action-button">Start</button>
|
||||
<script>
|
||||
let button=document.querySelector("#start")
|
||||
button.addEventListener('click', event => {
|
||||
window.location.href = "/views/game.html";
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Room - HyperSet</title>
|
||||
<link rel='stylesheet' type='text/css' href='/styles/style.css' />
|
||||
<link rel='stylesheet' type='text/css' href='/styles/room.css' />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="left-section">
|
||||
<button>Orignal Set Game</button>
|
||||
|
||||
<div>
|
||||
<label>Private</label>
|
||||
<input type='checkbox' />
|
||||
</div>
|
||||
|
||||
<span id="or">OR</span>
|
||||
|
||||
<div class="group">
|
||||
|
||||
|
||||
<section id="right-section">
|
||||
<div>
|
||||
<span class="subtitle">List of players waiting in the room:</span>
|
||||
<div id="players">
|
||||
<span>Aurianus</span>
|
||||
<span>Basuw</span>
|
||||
<span>Raph</span>
|
||||
<span>Remrem</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="start" class="action-button">Start</button>
|
||||
<script>
|
||||
let button=document.querySelector("#start")
|
||||
button.addEventListener('click', event => {
|
||||
window.location.href = "/views/game.html";
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue