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

roomPage.html css + idk
continuous-integration/drone/push Build is passing Details

Browse Source
pull/84/head
remrem 2 years ago
parent 5a68199adb
commit 0e5f32f673
3 changed files with 80 additions and 131 deletions
Show Stats Download Patch File Download Diff File

44
styles/room.css
Unescape View File

@ -6,17 +6,21 @@ body {
section {
display: flex;
padding: 3em;
flex-direction: column;
height: 100vh;
width: 50vw;
height: calc(100vh - 6em);
}
#right-section {
background-color: aqua;
#left-section {
background-color: white;
width: 70vw;
}
#left-section {
#right-section {
display: flex;
justify-content: space-between;
background-color: white;
width: 30vw;
}
button {
@ -24,6 +28,7 @@ button {
justify-content: center;
align-items: center;
padding: 1.2em;
margin-bottom: 1em;
background-color: white;
border: 0.2rem solid black;
border-radius: 0.5em;
@ -32,13 +37,17 @@ button {
}
#or {
display: flex;
text-align: center;
justify-content: center;
font-family: var(--font);
font-size: 4rem;
font-weight: bolder;
color: black;
margin: 1em;
}
.sub-title {
.subtitle {
font-family: var(--font);
font-size: 1.6em;
font-weight: bold;
@ -46,4 +55,27 @@ button {
input[type="checkbox"] {
}
.group {
margin-bottom: 5em;
}
.param {
margin-top: 1em;
}
#players {
display: flex;
flex-direction: column;
}
#players span {
margin-top: 1em;
font-size: large;
}
#start {
bottom: 3vh;
right: 3vw;
}

99
views/cards.html
Unescape View File

@ -115,105 +115,6 @@
</svg>
<div id="main">
<!-- <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-grid)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-dot)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-grid)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
</div> -->
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use>

68
views/room.html
Unescape View File

@ -11,42 +11,58 @@
<section id="left-section">
<button>Orignal Set Game</button>
<div>
<label>Private</label>
<input type='checkbox' />
</div>
<span id="or">OR</span>
<span class="sub-title">Card number to make a set</span>
<div id='card-param'>
<input type='checkbox' /> <span>3</span>
<input type='checkbox' /> <span>4</span>
<input type='checkbox' /> <span>5</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>
<span class="sub-title">Attributes to play with</span>
<div id='attributes-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 (c'est nul)</span>
<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">
<span>Game parameters</span>
<span>Private</span> <input type='checkbox' />
<span>JE SUIS UN SLIDER</span>
<span>HyperSet</span> <input type='checkbox' />
<div id="players">
<span>List of player in room:</span>
<span>Aurianus</span>
<span>Basuw</span>
<span>Raph</span>
<span>Remrem</span>
<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>START</button>
<button id="start">START</button>
</section>
</body>

Write Preview
Loading…
Cancel
Save