From a907f52913b32104a50b45a8d993c1d76870a4ba Mon Sep 17 00:00:00 2001
From: Erzangel <ertche@hotmail.fr>
Date: Tue, 14 May 2024 18:59:56 +0200
Subject: [PATCH] feat: new playericon component, style for ready

---
 components/PlayerIcon.vue | 40 +++++++++++++++++++++++++++++++++++++++
 components/PlayerSlot.vue | 29 ++++++++++++++++++++--------
 2 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 components/PlayerIcon.vue

diff --git a/components/PlayerIcon.vue b/components/PlayerIcon.vue
new file mode 100644
index 0000000..5b469bb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 91dc712..30e5945 100644
--- a/components/PlayerSlot.vue
+++ b/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 :player="props.player"></PlayerStats>
-
-
+               
+                <PlayerStats v-if="!goStore.current_game?.started" :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>