Feat : various fixes, sounds and multiplayer additions

components/PlayerIcon.vue

@@ -1,40 +1,43 @@
 <script setup lang="ts">
-import type { Player } from '~/netcode/Player';
-
+import type { Player } from "~/netcode/interfaces";
 
 export interface Props {
-    player: Player;
+  player: Player;
 }
 
-const props = defineProps<Props>()
-
+const props = defineProps<Props>();
 </script>
 
 <template>
-    <div class="player-icon-container">
-        <img class="avatar" v-if="props.player.image" :src="props.player.image" draggable="false">
-        <b class="player-name">{{ props.player.username }}</b>
-    </div>
+  <div class="player-icon-container">
+    <img
+      class="avatar"
+      v-if="props.player.user.avatar"
+      :src="`https://cdn.discordapp.com/avatars/${props.player.user.userId}/${props.player.user.avatar}.webp`"
+      draggable="false"
+    />
+    <b class="player-name">{{ props.player.user.username }}</b>
+  </div>
 </template>
 
 <style scoped>
 .player-icon-container {
-    display: flex;
-    align-items: center;
-    margin: 10px;
+  display: flex;
+  align-items: center;
+  margin: 10px;
 }
 
 .avatar {
-    height: 50px;
-    border-radius: 25px;
+  height: 50px;
+  border-radius: 25px;
 }
 
 .player-name {
-    font-size: 20px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin-left: 10px;
+  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);
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
 }
-</style>
+</style>