Feat : Various css changes

components/PlayerSlot.vue

@@ -100,8 +100,6 @@ function check_for_guard(player: Player) {
                     <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
                 </CardsGrouped>
             </div>
-            <div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
-                @click="() => discard_unwrapped = false"></div>
             <div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
                 <div class="discard_container" @click="() => discard_unwrapped = true">
                     <CardsGrouped :stack="props.player.discard_pile" v-if="!discard_unwrapped"> </CardsGrouped>
@@ -127,9 +125,11 @@ function check_for_guard(player: Player) {
                         </template>
                     </CardPreview>
                 </div>
+                <div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
+                    @click="() => discard_unwrapped = false"></div>
             </div>
         </template>
-        <div id="player_banner">
+        <div id="player_banner" :class="hide_stack_and_discard ? 'small' : 'big'">
             <div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore
                 prêt...
             </div>
@@ -142,10 +142,13 @@ function check_for_guard(player: Player) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button" @click="checkEndTurn">END
+                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button turn_icon"
+                            @click="checkEndTurn">END
                             TURN</button>
-                        <div class="warning" v-if="warning"
-                            :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?' }">/!\<br>{{ warningText }}
+
+                        <div class="warning"
+                            :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
+                            /!\<br>{{ warningText }}
                         </div>
                     </template>
 
@@ -251,9 +254,14 @@ function check_for_guard(player: Player) {
     color: white;
     padding: 5px;
     border-radius: 5px;
-    width: 90px;
+    width: 100px;
     font-size: 0.85em;
     margin-left: 5px;
+    visibility: hidden
+}
+
+.warning.visible {
+    visibility: visible
 }
 
 .warning-fire-gem {
@@ -276,10 +284,11 @@ function check_for_guard(player: Player) {
 
 .stack {
     grid-area: stack;
+    margin-left: 75px;
 }
 
 .discard {
-    margin-top: 50px;
+    margin-top: 40px;
     grid-area: discard;
     justify-content: start;
     cursor: pointer;
@@ -287,18 +296,23 @@ function check_for_guard(player: Player) {
 }
 
 .discard.unwrapped {
-    z-index: 9;
+    margin-top: 0px;
+
     cursor: default;
     position: absolute;
     padding-bottom: 100px;
+    height: 100%;
 }
 
 .discard_container {
+    z-index: 9;
     display: flex;
     /* background: blue; */
     pointer-events: none;
-    flex-wrap: wrap;
     gap: 2px;
+    padding-left: 40px;
+    flex-wrap: wrap-reverse;
+    align-content: flex-end;
 }
 
 #discard_unwrapped_bg {
@@ -309,7 +323,8 @@ function check_for_guard(player: Player) {
     height: 100%;
     width: 100%;
     z-index: 8;
-    background: rgba(0, 0, 0, 0.5)
+    background: rgba(0, 0, 0, 0.5);
+    pointer-events: all;
 }
 
 #discard_unwrapped_bg.unwrapped {
@@ -331,8 +346,9 @@ function check_for_guard(player: Player) {
 .player.discard_unwrapped {
     grid-template-areas:
         "player_stats   player_stats"
-        "stack          player"
-        "discard        discard";
+        "stack          player";
+    position: relative;
+    isolation: isolate;
 }
 
 #current_player_board {
@@ -427,23 +443,38 @@ function check_for_guard(player: Player) {
     position: relative;
 }
 
+
 #player_banner {
     display: flex;
     grid-area: player_stats;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     position: sticky;
     top: 0;
     padding-top: 1em;
     z-index: 1;
+    pointer-events: none;
 }
 
+#player_banner.small {
+    flex-direction: column
+}
+
+#player_banner>* {
+    pointer-events: all;
+}
+
+
 #player_info {
     display: flex;
     align-items: center;
 }
 
+#player_banner.big>#player_info {
+    margin-left: 500px;
+}
+
 #player_stats {
     display: flex;
     grid-area: player_stats;
@@ -474,7 +505,7 @@ function check_for_guard(player: Player) {
     color: white;
     border: none;
     border-radius: 8px;
-    padding: 5px 10px;
+    padding: 13px 10px;
     margin: 0 0 0 5px;
     font-size: 16px;
     font-weight: bold;