feat: new playericon component, style for ready

2024-05-14 18:59:56 +02:00
parent 546f881b2e
commit a907f52913
2 changed files with 61 additions and 8 deletions
@@ -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>