forked from noxious/client
121 lines
5.7 KiB
Vue
121 lines
5.7 KiB
Vue
<template>
|
|
<div class="bg-gray-300 relative">
|
|
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
|
|
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
|
|
<div class="filler"></div>
|
|
<div class="flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
|
|
<div v-for="character in characters" :key="character.id" class="group m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
|
|
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
|
<label class="font-bold absolute left-1/2 top-[20px] max-w-[130px] translate-x-[-50%] translate-y-[-50%] text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
|
|
<!-- @TODO : Add a confirmation dialog -->
|
|
<button class="delete bg-red w-[30px] h-[30px] p-[3px] rounded-full absolute right-[-15px] top-0 translate-y-[-50%] z-10 border-2 border-solid border-white hover:bg-red-100" @click="delete_character(character.id)">
|
|
<img draggable="false" src="/assets/icons/trashcan.svg" />
|
|
</button>
|
|
|
|
<div class="sprite-container flex flex-col items-center m-auto">
|
|
<img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
|
|
</div>
|
|
<span class="absolute bottom-[20px] w-full text-center translate-y-1/2 z-10 drop-shadow-text">Lvl. {{ character.level }}</span>
|
|
<div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
|
|
</div>
|
|
|
|
<div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50 bg-opacity-50 bg-no-repeat shadow-character" v-if="characters.length < 4">
|
|
<button class="h-full w-full py-[40px] flex flex-col justify-between" @click="isModalOpen = true">
|
|
<div class="filler"></div>
|
|
<img class="w-[100px] h-[100px] m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
|
|
<span class="self-center text-base absolute bottom-[20px] w-full text-center translate-y-1/2 z-10 drop-shadow-text">Create new</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<img class="w-[80px] invert-80" src="/assets/icons/loading-icon1.svg" />
|
|
</div>
|
|
|
|
<div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
|
|
<button
|
|
class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
|
|
:disabled="!selected_character"
|
|
@click="select_character()"
|
|
>
|
|
PLAY
|
|
<img class="h-[30px] drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
|
|
<template #modalHeader>
|
|
<h3 class="m-0 font-medium shrink-0">Create your character</h3>
|
|
</template>
|
|
|
|
<template #modalBody>
|
|
<div class="m-[15px] character-form">
|
|
<form method="post" @submit.prevent="create" class="inline">
|
|
<div class="flex flex-col mb-5">
|
|
<label class="mb-1.5 font-titles" for="name">Name</label>
|
|
<input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
|
|
</div>
|
|
<button class="btn-cyan py-1.5 px-[15px] mr-[20px] min-w-[100px] inline-block" type="submit">CREATE</button>
|
|
</form>
|
|
<button class="btn-cyan py-1.5 px-[15px] min-w-[100px] inline-block" @click="isModalOpen = false">CANCEL</button>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSocketStore } from '@/stores/socket'
|
|
import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import Modal from '@/components/utilities/Modal.vue'
|
|
import { type Character as CharacterT } from '@/types'
|
|
|
|
const isLoading = ref(true)
|
|
const characters = ref([])
|
|
const socket = useSocketStore()
|
|
|
|
// Fetch characters
|
|
socket.connection.on('character:list', (data: any) => {
|
|
characters.value = data
|
|
})
|
|
|
|
onMounted(() => {
|
|
// wait 1.5 sec
|
|
setTimeout(() => {
|
|
socket.connection.emit('character:list')
|
|
isLoading.value = false
|
|
}, 1000)
|
|
})
|
|
|
|
// Select character logics
|
|
const selected_character = ref(null)
|
|
function select_character() {
|
|
if (!selected_character.value) return
|
|
socket.connection.emit('character:connect', { character_id: selected_character.value })
|
|
socket.connection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
|
|
}
|
|
|
|
// Delete character logics
|
|
function delete_character(character_id: number) {
|
|
if (!character_id) return
|
|
socket.connection.emit('character:delete', { character_id: character_id })
|
|
}
|
|
|
|
// Create character logics
|
|
const isModalOpen = ref(false)
|
|
const name = ref('')
|
|
function create() {
|
|
socket.connection.on('character:create:success', (data: CharacterT) => {
|
|
socket.setCharacter(data)
|
|
isModalOpen.value = false
|
|
})
|
|
socket.connection.emit('character:create', { name: name.value })
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
socket.connection.off('character:list')
|
|
socket.connection.off('character:connect')
|
|
socket.connection.off('character:create:success')
|
|
})
|
|
</script>
|