158 lines
3.8 KiB
Vue
158 lines
3.8 KiB
Vue
<template>
|
|
<div class="character-select-screen">
|
|
<div class="ui-wrapper">
|
|
<div class="characters-wrapper">
|
|
<div v-for="character in characters" :key="character.id" class="character">
|
|
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
|
<label :for="character.id">
|
|
{{ character.name }}
|
|
<img src="/assets/avatar/default/base_right_down.png" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="buttons-wrapper">
|
|
<button @click="select_character()">Play</button>
|
|
<button @click="isModalOpen = true">Create New</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal :isModalOpen="isModalOpen">
|
|
<template #modal-header>
|
|
<h2 class="modal-title">Create your character</h2>
|
|
</template>
|
|
<template #modal-body>
|
|
<form method="post" @submit.prevent="create" class="modal-form">
|
|
<div class="form-fields">
|
|
<label for="name">Name</label>
|
|
<input v-model="name" name="name" id="name">
|
|
</div>
|
|
<div class="submit">
|
|
<button @click="create">Create</button>
|
|
</div>
|
|
</form>
|
|
<button @click="isModalOpen = false">Cancel</button>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSocketStore } from '@/stores/socket'
|
|
import { ref } from 'vue'
|
|
import type { Character } from '../../../env'
|
|
import Modal from '@/components/utilities/Modal.vue'
|
|
|
|
const socket = useSocketStore();
|
|
|
|
// Fetch characters
|
|
socket.getConnection.emit('character:list');
|
|
socket.getConnection.on('character:list', (data: any) => {
|
|
console.log(data);
|
|
characters.value = data;
|
|
});
|
|
|
|
// Select character logics
|
|
const characters = ref([]);
|
|
const selected_character = ref(null);
|
|
function select_character() {
|
|
console.log(selected_character.value);
|
|
if (selected_character.value) {
|
|
socket.getConnection.emit('character:connect', {character_id: selected_character.value});
|
|
socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
|
|
}
|
|
}
|
|
|
|
// Create character logics
|
|
const isModalOpen = ref(false);
|
|
let name: any = ref('');
|
|
function create() {
|
|
socket.getConnection.emit('character:create', { name: name.value });
|
|
name.value = '';
|
|
isModalOpen.value = false;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/assets/scss/main';
|
|
|
|
.character-select-screen {
|
|
background-image: url("/assets/bglogin.png");
|
|
.ui-wrapper {
|
|
// vertical and vertical center
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6.25rem;
|
|
padding: 0 5rem;
|
|
&::before {
|
|
content: '';
|
|
|
|
}
|
|
|
|
.characters-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 5rem;
|
|
width: 100%;
|
|
|
|
.character {
|
|
min-width: 150px;
|
|
min-height: 250px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: rgba($white, 0.8);
|
|
border-radius: 20px;
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: rgba($purple, 0.6);
|
|
border-radius: 20px 20px 0 0;
|
|
}
|
|
|
|
// hide the radio buttons
|
|
input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
// img under the label
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: auto;
|
|
}
|
|
|
|
// for selected radio, give bg color
|
|
input[type="radio"]:checked + label {
|
|
background: rgba($purple, 0.6);
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.buttons-wrapper {
|
|
display: flex;
|
|
gap: 30px;
|
|
button {
|
|
padding: 10px 16px;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-title {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style> |