From b30b0dcf52c688bd62275f1cde26378c27019a28 Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Thu, 16 May 2024 19:22:03 +0200
Subject: [PATCH] feat: end turn style

---
 components/PlayerSlot.vue | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 346c5dc..69092d6 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -140,8 +140,8 @@ function damage_team_all(team: Team) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" v-if="isSelfTurn" @click="checkEndTurn">END TURN</button>
-                        <div class="warning" v-if="warning">/!\<br> Effets restants!<br> /!\</div>
+                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button" @click="checkEndTurn">END TURN</button>
+                        <div class="warning" v-if="warning">/!\<br> Effets restants!</div>
                     </template>
 
                 </template>
@@ -236,8 +236,9 @@ function damage_team_all(team: Team) {
     color: white;
     padding: 5px;
     border-radius: 5px;
-    width: 60px;
-    font-size: 0.9em;
+    width: 85px;
+    font-size: 0.85em;
+    margin-left: 5px;
 }
 
 #end_turn {
@@ -445,6 +446,30 @@ function damage_team_all(team: Team) {
     transform: translate(-50%, -50%);
 }
 
+.end_turn_button {
+    background-color: #4CAF50; /* Green background color */
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    margin: 0 0 0 5px;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.end_turn_button:hover {
+    background-color: #45a049; /* Darker green on hover */
+}
+
+.end_turn_button:active {
+    transform: translateY(2px); /* Add a slight press effect on click */
+    box-shadow: none; /* Remove shadow on click */
+}
+
 .ready-bubble {
     color: white;
     padding: 0.5em;