HyperSet
/
hyper-set
6
3
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

trop de choses

Browse Source
master
remrem 2 years ago
parent c7ddd44f54
commit d3823183d9
7 changed files with 196 additions and 114 deletions
Show Stats Download Patch File Download Diff File

6
index.html
Unescape View File

@ -37,13 +37,13 @@
</div> </div>
<div id="right" class="column"> <div id="right" class="column">
<button class="action-button">Create solo game</button> <button id="soloGame" class="action-button">Create solo game</button>
<button class="action-button">Join game</button> <button class="action-button">Join game</button>
<button id="newGame" class="action-button">New Game</button> <button id="newGame" class="action-button">New Game</button>
<script> <script>
let button=document.querySelector("#newGame") let button=document.querySelector("#soloGame")
button.addEventListener('click', event => { button.addEventListener('click', event => {
window.location.href = "/views/room.html"; window.location.href = "/views/game.html";
}); });
</script> </script>
</div> </div>

45
styles/room.css
Unescape View File

@ -1,9 +1,3 @@
body {
display: flex;
flex-direction: row;
background-color: rebeccapurple;
}
section { section {
display: flex; display: flex;
padding: 3em; padding: 3em;
@ -11,6 +5,15 @@ section {
height: calc(100vh - 6em); height: calc(100vh - 6em);
} }
.title2 {
font-size: 4em;
margin-bottom: 1em;
}
.title3 {
font-size: 2em;
}
#left-section { #left-section {
background-color: white; background-color: white;
width: 70vw; width: 70vw;
@ -23,8 +26,10 @@ section {
width: 30vw; width: 30vw;
} }
button { .button {
display: flex; display: flex;
width: 30vw;
color: black;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1.2em; padding: 1.2em;
@ -34,17 +39,13 @@ button {
border-radius: 0.5em; border-radius: 0.5em;
font-family: var(--font); font-family: var(--font);
font-size: 1.5em; font-size: 1.5em;
transition: 0.3s;
} }
#or { .button:hover {
display: flex; background-color: black;
text-align: center; color: white;
justify-content: center; scale: 1.1;
font-family: var(--font);
font-size: 4rem;
font-weight: bolder;
color: black;
margin: 1em;
} }
.subtitle { .subtitle {
@ -54,7 +55,7 @@ button {
} }
input[type="checkbox"] { input[type="checkbox"] {
margin-left: 1rem;
} }
.group { .group {
@ -65,16 +66,6 @@ input[type="checkbox"] {
margin-top: 1em; margin-top: 1em;
} }
#players {
display: flex;
flex-direction: column;
}
#players span {
margin-top: 1em;
font-size: large;
}
#start { #start {
bottom: 3vh; bottom: 3vh;
right: 3vw; right: 3vw;

4
views/deck-module.js
Unescape View File

@ -1,7 +1,7 @@
export default{ export default{
emits:[], emits:[],
props:{ props:{
deckR:Deck, deck:Deck,
idRoom:String, idRoom:String,
mode:Boolean//true for chrono mode:Boolean//true for chrono
}, },
@ -9,7 +9,7 @@ export default{
return{ return{
card:new Card({"filling":"empty"}), card:new Card({"filling":"empty"}),
id:0, id:0,
deck : new Deck([0,1,2],3), //deck : new Deck([0,1,2],3),
selectedCards:[], selectedCards:[],
selectedCardsindex:[], selectedCardsindex:[],
nbCardsSelected:0, nbCardsSelected:0,

31
views/game.html
Unescape View File

@ -10,10 +10,10 @@
<link rel="stylesheet" type="text/css" href="/styles/index.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/game.css">
<link rel="stylesheet" type="text/css" href="/styles/card.css"> <link rel="stylesheet" type="text/css" href="/styles/card.css">
<link rel="stylesheet" type="text/css" href="/styles/room.css">
<link rel="icon" type="image/x-icon" href="/resources/favicon.ico"> <link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
</head> </head>
<header> <header>
<ul id="nav-bar"> <ul id="nav-bar">
<li><a href="/index.html">Home</a></li> <!-- maybe put a logo --> <li><a href="/index.html">Home</a></li> <!-- maybe put a logo -->
@ -86,7 +86,9 @@
</defs> </defs>
</svg> </svg>
<div id="app"> <div id="app">
<deck-module id-room="00000" :mode=false></deck-module> <room-component id='Room' @send-deck="sendDeck"></room-component>
<deck-module :id-room="00000" :deck=this.deck :mode=false v-if="this.deck != null"></deck-module>
</div> </div>
<section> <section>
</section> </section>
@ -102,17 +104,32 @@
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
import CardModule from '/views/card-module.js'; import CardModule from '/views/card-module.js';
import DeckModule from '/views/deck-module.js'; import DeckModule from '/views/deck-module.js';
import RoomComponent from '/views/room-component.js';
const app = createApp({ const app = createApp({
created(){}, created()
{
},
mounted()
{},
data(){ data(){
return{} return{
deck: null
}
}, },
methods:{ methods:{
myFun:function(){} sendDeck:function(deck) {
this.deck = deck
document.querySelector('#Room').setAttribute("style","display: none")
document.querySelector('#Game').setAttribute("style","display: flex");
console.log('send deck')
}
} }
}); });
app.component('CardModule', CardModule); app.component('CardModule', CardModule)
app.component('DeckModule', DeckModule); .component('DeckModule', DeckModule)
.component('RoomComponent', RoomComponent);
app.mount('#app'); app.mount('#app');
</script> </script>
</body> </body>

104
views/room-component.js
Unescape View File

@ -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>
`
}

75
views/room.html
Unescape View File

@ -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>

45
views/room_multi.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save