parent
c7ddd44f54
commit
d3823183d9
@ -0,0 +1,104 @@
|
|||||||
|
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,75 +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">
|
|
||||||
<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,45 @@
|
|||||||
|
<!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