From b967cc199b7ea239aeab430b902367c1c83c0d93 Mon Sep 17 00:00:00 2001
From: Lennert Claeys <claeyslennert@gmail.com>
Date: Sun, 23 Jun 2024 23:05:47 +0200
Subject: [PATCH] Add subtitle to team display

---
 src/components/organisms/TeamDisplay.vue | 13 +++++++++++--
 src/components/pages/Host.vue            |  1 +
 src/components/pages/Join.vue            |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/TeamDisplay.vue b/src/components/organisms/TeamDisplay.vue
index 15e32a5..cfaf871 100644
--- a/src/components/organisms/TeamDisplay.vue
+++ b/src/components/organisms/TeamDisplay.vue
@@ -2,8 +2,9 @@
 import { COLORS } from "../../data/network/constants";
 import { IPlayer } from "../types";
 
-const { onDelete, onEdit, player } = defineProps<{
+const { onDelete, onEdit, player, subTitle } = defineProps<{
   player: IPlayer;
+  subTitle?: string;
   onDelete?: (player: IPlayer) => void;
   onEdit?: (IPlayer: IPlayer) => void;
 }>();
@@ -36,6 +37,7 @@ const handleDelete = (event: MouseEvent) => {
         </button>
       </div>
     </div>
+    <span v-if="subTitle" class="sub-title">{{ subTitle }}</span>
     <ul class="characters">
       <li v-for="character in player.team.getLimitedCharacters()">
         {{ character }}
@@ -82,7 +84,7 @@ const handleDelete = (event: MouseEvent) => {
   }
 
   .header {
-    padding: 5px;
+    padding: 5px 5px 0;
     display: flex;
     justify-content: space-between;
     overflow: hidden;
@@ -95,6 +97,13 @@ const handleDelete = (event: MouseEvent) => {
     }
   }
 
+  .sub-title {
+    padding-left: 5px;
+    font-size: 12px;
+    display: block;
+    position: absolute;
+  }
+
   .characters {
     margin-top: 120px;
     display: grid;
diff --git a/src/components/pages/Host.vue b/src/components/pages/Host.vue
index b1da098..1307e37 100644
--- a/src/components/pages/Host.vue
+++ b/src/components/pages/Host.vue
@@ -242,6 +242,7 @@ const handleSelectMap = (map: Map, name: string) => {
           :player="player"
           :onDelete="index !== 0 ? () => handleKick(index) : undefined"
           :onEdit="!player.connection ? handleEditPlayer : undefined"
+          :subTitle="!player.connection ? 'Local player' : ''"
         />
         <TeamDialog
           v-if="editingPlayer"
diff --git a/src/components/pages/Join.vue b/src/components/pages/Join.vue
index dcd596c..410419b 100644
--- a/src/components/pages/Join.vue
+++ b/src/components/pages/Join.vue
@@ -169,6 +169,7 @@ const handleSave = (name: string, characters: string[]) => {
             :key="player.color"
             :player="player"
             :onEdit="index === you ? handleEditPlayer : undefined"
+            :sub-title="index === you ? 'You' : ''"
           />
           <TeamDialog
             v-if="editingPlayer"