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