From 0e5f32f6738e495d7a001d59326d912976db9a07 Mon Sep 17 00:00:00 2001
From: RemRem <remrem@github.com>
Date: Wed, 15 Mar 2023 15:02:47 +0100
Subject: [PATCH] roomPage.html css + idk

---
 styles/room.css  | 44 ++++++++++++++++++---
 views/cards.html | 99 ------------------------------------------------
 views/room.html  | 68 ++++++++++++++++++++-------------
 3 files changed, 80 insertions(+), 131 deletions(-)

diff --git a/styles/room.css b/styles/room.css
index 63ae76e..b4c95e9 100644
--- a/styles/room.css
+++ b/styles/room.css
@@ -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;
 }
\ No newline at end of file
diff --git a/views/cards.html b/views/cards.html
index eb0ddac..e7ecc45 100755
--- a/views/cards.html
+++ b/views/cards.html
@@ -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>
diff --git a/views/room.html b/views/room.html
index 391111e..79ed025 100644
--- a/views/room.html
+++ b/views/room.html
@@ -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>