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

npm run format

Browse Source
This commit is contained in:
Dennis Postma
2024-06-02 02:35:42 +02:00
parent 8329afe897
commit 86b80f8244
28 changed files with 572 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,50 +1,50 @@
<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" :class="{active: selected_character == character.id}">
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label :for="character.id">{{ character.name }}</label>
<div class="sprite-container">
<img src="/assets/avatar/default/base_right_down.png" />
<div class="character-select-screen">
<div class="ui-wrapper">
<div class="characters-wrapper">
<div v-for="character in characters" :key="character.id" class="character" :class="{ active: selected_character == character.id }">
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label :for="character.id">{{ character.name }}</label>
<div class="sprite-container">
<img src="/assets/avatar/default/base_right_down.png" />
</div>
<span>Lvl. </span>
</div>
<div class="character new-character">
<button @click="isModalOpen = true">
<img src="/assets/icons/plus-icon.svg" />
<span>Create new</span>
</button>
</div>
<span>Lvl. </span>
</div>
<div class="character new-character">
<button @click="isModalOpen = true">
<img src="/assets/icons/plus-icon.svg" />
<span>Create new</span>
</button>
<div class="buttons-wrapper">
<button v-if="selected_character" @click="select_character()">Play</button>
<!-- @TODO : Add a confirmation dialog -->
<button v-if="selected_character" @click="delete_character()">Delete</button>
</div>
</div>
<div class="buttons-wrapper">
<button v-if="selected_character" @click="select_character()">Play</button>
<!-- @TODO : Add a confirmation dialog -->
<button v-if="selected_character" @click="delete_character()">Delete</button>
</div>
</div>
</div>
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modal-header>
<h2 class="modal-title">Create your character</h2>
</template>
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<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 #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">
@ -53,38 +53,38 @@ import { ref } from 'vue'
import type { Character } from '../../../env'
import Modal from '@/components/utilities/Modal.vue'
const socket = useSocketStore();
const socket = useSocketStore()
// Fetch characters
socket.getConnection.emit('character:list');
socket.getConnection.emit('character:list')
socket.getConnection.on('character:list', (data: any) => {
console.log(data);
characters.value = data;
});
console.log(data)
characters.value = data
})
// Select character logics
const characters = ref([]);
const selected_character = ref(null);
const characters = ref([])
const selected_character = ref(null)
function select_character() {
console.log(selected_character.value);
if (!selected_character.value) return;
socket.getConnection.emit('character:connect', {character_id: selected_character.value});
socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
console.log(selected_character.value)
if (!selected_character.value) return
socket.getConnection.emit('character:connect', { character_id: selected_character.value })
socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data))
}
// Delete character logics
function delete_character() {
if (!selected_character.value) return;
socket.getConnection.emit('character:delete', {character_id: selected_character.value});
if (!selected_character.value) return
socket.getConnection.emit('character:delete', { character_id: selected_character.value })
}
// Create character logics
const isModalOpen = ref(false);
let name: any = ref('');
const isModalOpen = ref(false)
let name: any = ref('')
function create() {
socket.getConnection.emit('character:create', { name: name.value });
name.value = '';
isModalOpen.value = false;
socket.getConnection.emit('character:create', { name: name.value })
name.value = ''
isModalOpen.value = false
}
</script>
@ -92,7 +92,7 @@ function create() {
@import '@/assets/scss/main';
.character-select-screen {
background-image: url("/assets/bglogin.png");
background-image: url('/assets/bglogin.png');
.ui-wrapper {
// vertical and vertical center
height: 100vh;
@ -104,7 +104,6 @@ function create() {
padding: 0 5rem;
&::before {
content: '';
}
.characters-wrapper {
@ -139,7 +138,6 @@ function create() {
text-align: center;
&::before {
content: '';
}
img {
width: 100px;
@ -155,7 +153,8 @@ function create() {
cursor: pointer;
}
}
&::before, &::after {
&::before,
&::after {
display: none;
}
}
@ -181,12 +180,11 @@ function create() {
}
// hide the radio buttons
input[type="radio"] {
input[type='radio'] {
opacity: 0;
height: 100%;
width: 100%;
position: absolute;
}
label {
@ -251,7 +249,4 @@ function create() {
margin: 0;
}
}
</style>
</style>