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) => {
+ {{ subTitle }}
-
{{ 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' : ''"
/>
{
:key="player.color"
:player="player"
:onEdit="index === you ? handleEditPlayer : undefined"
+ :sub-title="index === you ? 'You' : ''"
/>