Add subtitle to team display

lorgan3 · Jun 23, 2024 · b967cc1 · b967cc1
1 parent 735bcc6
commit b967cc1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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"