1
0
forked from noxious/client

#244: Allow nickname changes, fixed listening for notifications

This commit is contained in:
Dennis Postma 2025-02-19 11:46:05 +01:00
parent ffc7efb17c
commit 51e885cfdf
2 changed files with 9 additions and 6 deletions

View File

@ -27,7 +27,7 @@
</div>
</div>
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6 justify-center" v-if="selectedCharacterId">
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" />
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" v-model="newNickname" />
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-3">
<div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
@ -133,6 +133,7 @@ const isLoading = ref<boolean>(true)
const characters = ref<CharacterT[]>([])
const selectedCharacterId = ref<string | null>(null)
const isCreateNewCharacterModalOpen = ref<boolean>(false)
const newNickname = ref<string>('')
const newCharacterName = ref<string>('')
const characterHairs = ref<CharacterHair[]>([])
const selectedHairId = ref<string | null>(null)
@ -179,7 +180,8 @@ function loginWithCharacter() {
SocketEvent.CHARACTER_CONNECT,
{
characterId: selectedCharacterId.value,
characterHairId: selectedHairId.value
characterHairId: selectedHairId.value,
newNickname: newNickname.value
},
(response: { character: CharacterT; map: Map; characters: CharacterT[] }) => {
gameStore.setCharacter(response.character)
@ -198,6 +200,7 @@ function createCharacter() {
// Watch changes for selected character and update hairs
watch(selectedCharacterId, (characterId) => {
if (!characterId) return
newNickname.value = ''
selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHair ?? null
})

View File

@ -14,7 +14,7 @@ import { SocketEvent } from '@/application/enums'
import Modal from '@/components/utilities/Modal.vue'
import { socketManager } from '@/managers/SocketManager'
import { useGameStore } from '@/stores/gameStore'
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
import { onMounted, onUnmounted, watch } from 'vue'
const gameStore = useGameStore()
@ -37,13 +37,13 @@ function setupNotificationListener(connection: any) {
}
onMounted(() => {
const connection = gameStore.connection
const connection = socketManager.connection
if (connection) {
setupNotificationListener(connection)
} else {
// Watch for changes in the socket connection
watch(
() => gameStore.connection,
() => socketManager.connection,
(newConnection) => {
if (newConnection) setupNotificationListener(newConnection)
}
@ -52,7 +52,7 @@ onMounted(() => {
})
onUnmounted(() => {
const connection = gameStore.connection
const connection = socketManager.connection
if (connection) {
connection.off(SocketEvent.NOTIFICATION)
}