feat: new playericon component, style for ready

components/PlayerIcon.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Player } from '~/netcode/Player';
+
+
+export interface Props {
+    player: Player;
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+    <div class="player-icon-container">
+        <img class="avatar" v-if="props.player.image" :src="props.player.image">
+        <b class="player-name">{{ props.player.username }}</b>
+    </div>
+</template>
+
+<style scoped>
+.player-icon-container {
+    display: flex;
+    align-items: center;
+    margin: 10px;
+}
+
+.avatar {
+    height: 50px;
+    border-radius: 25px;
+}
+
+.player-name {
+    font-size: 20px;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin-left: 10px;
+
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+</style>

components/PlayerSlot.vue

@@ -87,18 +87,15 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
             </div>
         </template>
         <div id="player_banner">
+            <div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore prêt...</div>
+            <div class="ready-bubble ready" v-if="props.player.ready && !goStore.current_game?.started">Prêt!</div>
             <div id="player_info">
-
+                <PlayerIcon :player="props.player"></PlayerIcon>
-
             </div>
             <div id="player_stats">
-                <img v-if="props.player.image" :src="props.player.image">
+               
-                <b>{{ props.player.username }}</b>
+                <PlayerStats v-if="!goStore.current_game?.started" :player="props.player"></PlayerStats>
-                <PlayerStats :player="props.player"></PlayerStats>
-
-
             </div>
-            <div v-if="props.player.ready && !goStore.current_game?.started">READY</div>
         </div>
         <div id="current_player_board">
             <button @click.stop="damage_team(props.player.team)"
@@ -260,4 +257,20 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
     left: 50%;
     transform: translate(-50%, -50%);
 }
+
+.ready-bubble {
+    color: white;
+    padding: 0.5em;
+    border-radius: 1em;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    margin-bottom: 3%;
+}
+
+.ready {
+    background-color: green;
+}
+
+.not-ready {
+    background-color: maroon;
+}
 </style>