Cleaned, improved character overview
This commit is contained in:
parent
dc2afba82b
commit
febb924f75
12
package-lock.json
generated
12
package-lock.json
generated
@ -3103,9 +3103,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.102",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.102.tgz",
|
||||
"integrity": "sha512-eHhqaja8tE/FNpIiBrvBjFV/SSKpyWHLvxuR9dPTdo+3V9ppdLmFB7ZZQ98qNovcngPLYIz0oOBF9P0FfZef5Q==",
|
||||
"version": "1.5.103",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.103.tgz",
|
||||
"integrity": "sha512-P6+XzIkfndgsrjROJWfSvVEgNHtPgbhVyTkwLjUM2HU/h7pZRORgaTlHqfAikqxKmdJMLW8fftrdGWbd/Ds0FA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@ -6181,9 +6181,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.18.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
|
||||
"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz",
|
||||
"integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="mb-5 flex flex-col gap-1">
|
||||
<h1 class="text-white font-bold">{{ isCreatingCharacter ? 'CREATE CHARACTER' : 'SELECT CHARACTER TO PLAY' }}</h1>
|
||||
<p class="m-0" v-if="!isCreatingCharacter">Maximum of 4 characters can be created per player</p>
|
||||
<p class="m-0" v-if="isCreatingCharacter">Some text lol</p>
|
||||
<p class="m-0" v-if="isCreatingCharacter">Customize your new character</p>
|
||||
</div>
|
||||
<div class="flex w-full max-lg:flex-col lg:h-[400px] default-border rounded-md bg-gray">
|
||||
<div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-t-md lg:rounded-l-md relative">
|
||||
@ -45,21 +45,27 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="isCreatingCharacter">
|
||||
<div class="form-field-full mb-6">
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<input class="input-field" v-model="newCharacterName" name="name" id="name" placeholder="Enter a nickname..." />
|
||||
</div>
|
||||
<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-center">
|
||||
<img class="w-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + defaultCharacterTypeId + '/' + (selectedHairId ?? 'default')" />
|
||||
</div>
|
||||
<div class="flex justify-between w-[190px]">
|
||||
<button class="btn-empty flex gap-2" :class="{ selected: selectedGender === 'MALE' }" @click="selectedGender = '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: selectedGender === 'FEMALE' }" @click="selectedGender = 'FEMALE'">
|
||||
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Female symbol" />
|
||||
<span class="text-white">Female</span>
|
||||
</button>
|
||||
<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-center">
|
||||
<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-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + defaultCharacterTypeId + '/' + (selectedHairId ?? 'default')" />
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex justify-between w-[190px]">
|
||||
<button class="btn-empty flex gap-2" :class="{ selected: selectedGender === 'MALE' }" @click="selectedGender = '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: selectedGender === 'FEMALE' }" @click="selectedGender = 'FEMALE'">
|
||||
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Female symbol" />
|
||||
<span class="text-white">Female</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -121,90 +127,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CREATE CHARACTER MODAL -->
|
||||
<Modal :isModalOpen="isCreateNewCharacterModalOpen" @modal:close="isCreateNewCharacterModalOpen = false" :modal-width="800" :modal-height="500">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium text-white">Create your character</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="p-4 h-[calc(100%_-_32px)]">
|
||||
<form method="post" @submit.prevent="createCharacter" class="h-full flex flex-col justify-between">
|
||||
<div class="flex gap-8">
|
||||
<div class="w-1/2">
|
||||
<div class="form-field-full mb-6">
|
||||
<label for="name" class="text-white">Nickname</label>
|
||||
<input class="input-field" v-model="newCharacterName" name="name" id="name" placeholder="Enter a nickname..." />
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 w-full mb-6">
|
||||
<span class="text-sm">Hair color</span>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<div
|
||||
class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
>
|
||||
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
|
||||
<input type="radio" name="new-hair-color" :value="null" v-model="selectedHairColor" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
|
||||
</div>
|
||||
<div
|
||||
v-for="color in uniqueHairColors"
|
||||
class="relative flex justify-center items-center default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
>
|
||||
<div class="w-full h-full rounded-sm" :style="{ backgroundColor: color }"></div>
|
||||
<input type="radio" name="new-hair-color" :value="color" v-model="selectedHairColor" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 w-full">
|
||||
<span class="text-sm">Hairstyle</span>
|
||||
<div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
|
||||
<div
|
||||
class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
>
|
||||
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
|
||||
<input type="radio" name="new-hair" :value="null" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
|
||||
</div>
|
||||
<div
|
||||
v-for="hair in filteredHairs"
|
||||
class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
>
|
||||
<img class="h-16 -m-5 mt-4 object-contain" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite + '/front.png'" alt="Hair sprite" />
|
||||
<input type="radio" name="new-hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 flex-col items-center justify-center">
|
||||
<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-center">
|
||||
<img class="w-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + defaultCharacterTypeId + '/' + (selectedHairId ?? 'default')" />
|
||||
</div>
|
||||
<div class="flex justify-between w-[190px]">
|
||||
<button class="btn-empty flex gap-2 selected">
|
||||
<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">
|
||||
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
|
||||
<span class="text-white">Female</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-flow-col justify-stretch gap-4">
|
||||
<button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isCreateNewCharacterModalOpen = false">Cancel</button>
|
||||
<button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useSoundComposable } from '@/composables/useSoundComposable'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { CharacterHairStorage, CharacterTypeStorage } from '@/storage/storages'
|
||||
@ -223,7 +151,6 @@ const gameStore = useGameStore()
|
||||
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[]>([])
|
||||
@ -242,14 +169,6 @@ const filteredHairs = computed(() => {
|
||||
return characterHairs.value.filter((hair) => hair.color === selectedHairColor.value)
|
||||
})
|
||||
|
||||
function handleHairColorChange(color: string | null) {
|
||||
selectedHairColor.value = color
|
||||
// Reset hair selection if the current selection doesn't exist in filtered results
|
||||
if (!filteredHairs.value.find((hair) => hair.id === selectedHairId.value)) {
|
||||
selectedHairId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function getHairColorStyle(color: string | null) {
|
||||
return {
|
||||
backgroundColor: color,
|
||||
@ -330,7 +249,7 @@ watch(selectedCharacterId, (characterId) => {
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
playSound('/assets/music/intro.mp3')
|
||||
await playSound('/assets/music/intro.mp3')
|
||||
const characterHairStorage = new CharacterHairStorage()
|
||||
const characterTypeStorage = new CharacterTypeStorage()
|
||||
characterHairs.value = await characterHairStorage.getAll()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user