noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed modal fullscreen icons, made types compatible with server changes made for #174, npm update, npm run format, minor improvements

Browse Source
This commit is contained in:
Dennis Postma
2024-11-13 13:22:20 +01:00
parent 48fef2313b
commit 1888521762
11 changed files with 192 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/screens/Characters.vue
View File

@ -16,25 +16,25 @@
<div class="flex w-full h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
<div class="w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 border-r border-solid border-gray-500 rounded-bl-md relative">
<div class="absolute right-full -top-px flex gap-1 flex-col">
<div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ 'active': selected_character == character.id }">
<div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: selected_character == character.id }">
<img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
<input class="opacity-0 h-full w-full absolute m-0 z-10 hover:cursor-pointer" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
</div>
<div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{'active': characters.length == 0}" v-if="characters.length < 4">
<div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
<button class="p-0 h-full w-full flex flex-col justify-between" @click="isModalOpen = true">
<img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
</button>
</div>
</div>
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6" v-if="selected_character">
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find(c => c.id == selected_character)?.name" />
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selected_character)?.name" />
<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">
<button class="ml-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
</button>
<img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar"/>
<img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar" />
<button class="mr-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
</button>
@ -46,11 +46,11 @@
</div>
<!-- TODO: update gender on (selected) character -->
<div class="flex justify-between w-[190px]">
<button class="btn-empty flex gap-2" :class="{'selected': characters.find(c => c.id == selected_character)?.characterType?.gender === 'MALE'}">
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selected_character)?.characterType?.gender === 'MALE' }">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
<span class="text-white">Male</span>
</button>
<button class="btn-empty flex gap-2" :class="{'selected': characters.find(c => c.id == selected_character)?.characterType?.gender === 'FEMALE'}">
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selected_character)?.characterType?.gender === 'FEMALE' }">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
<span class="text-white">Female</span>
</button>
@ -67,9 +67,7 @@
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
</button>
<!-- TODO: replace with hairstyles -->
<button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400">
</button>
<button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400"></button>
</div>
</div>
<div class="flex flex-col gap-3 w-full">
@ -88,19 +86,8 @@
</div>
<div class="button-wrapper flex self-center justify-end gap-4 max-w-[860px] w-full" v-if="!isLoading">
<button
class="btn-empty min-w-48"
@click.stop="gameStore.disconnectSocket()"
>
Back
</button>
<button
class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed"
:disabled="!selected_character"
@click="select_character()"
>
Play now
</button>
<button class="btn-empty min-w-48" @click.stop="gameStore.disconnectSocket()">Back</button>
<button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selected_character" @click="select_character()">Play now</button>
</div>
</div>
</div>
@ -171,15 +158,15 @@ const selected_character = ref(null)
function select_character() {
if (!selected_character.value) return
deletingCharacter.value = null
gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
gameStore.connection?.emit('character:connect', { characterId: selected_character.value })
gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
}
// Delete character logics
function delete_character(character_id: number) {
if (!character_id) return
function delete_character(characterId: number) {
if (!characterId) return
deletingCharacter.value = null
gameStore.connection?.emit('character:delete', { character_id: character_id })
gameStore.connection?.emit('character:delete', { characterId: characterId })
}
// Create character logics