imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

npm run format

Browse Source
This commit is contained in:
Dennis Postma 2024-08-20 02:16:18 +02:00
parent a32d62417a
commit ed28a3213f
11 changed files with 198 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/gui/Chat.vue
View File

@ -79,4 +79,4 @@ onMounted(() => {
onBeforeUnmount(() => {
gameStore.connection?.off('chat:message')
})
</script>
</script>

8
src/components/gui/Menu.vue
View File

@ -1,6 +1,6 @@
<template>
<ul class="list-none flex gap-2.5 items-center">
<li class="menu-item group relative">
<li class="menu-item group relative" @click="gameStore.toggleChat">
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>
<div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
@ -38,3 +38,9 @@
</li>
</ul>
</template>
<script setup lang="ts">
import { useGameStore } from '@/stores/game'
const gameStore = useGameStore()
</script>

45
src/components/sprites/Character.vue
View File

@ -1,26 +1,10 @@
<template>
<Container
v-if="props.character"
:x="currentX"
:y="currentY"
>
<Text
@create="createText"
:text="props.character.name"
:origin-x="0.5"
:origin-y="9"
/>
<Container v-if="props.character" :x="currentX" :y="currentY">
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x09ad19" :width="70" :height="3" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
<Sprite
v-else
:texture="charTexture"
:play="props.character.isMoving ? charTexture : undefined"
:origin-y="1"
:flipX="props.character.rotation === 6 || props.character.rotation === 4"
:flipY="false"
/>
<Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
</Container>
</template>
@ -71,17 +55,21 @@ const updatePosition = (x: number, y: number) => {
onUpdate: (tween) => {
currentX.value = tween.targets[0].x ?? 0
currentY.value = tween.targets[0].y ?? 0
},
}
})
}
watch(() => props.character, (newChar, oldChar) => {
if (newChar) {
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
updatePosition(newChar.position_x, newChar.position_y)
watch(
() => props.character,
(newChar, oldChar) => {
if (newChar) {
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
updatePosition(newChar.position_x, newChar.position_y)
}
}
}
}, { immediate: true, deep: true })
},
{ immediate: true, deep: true }
)
const charTexture = computed(() => {
if (!props.character?.characterType?.sprite) {
@ -102,6 +90,7 @@ const charTexture = computed(() => {
})
const createText = (text: Phaser.GameObjects.Text) => {
text.setColor('#ffffff')
text.setFontSize(13)
text.setFontFamily('Arial')
}
@ -117,4 +106,4 @@ onUnmounted(() => {
tween.value.stop()
}
})
</script>
</script>

296
src/components/utilities/inventory/Inventory.vue
View File

@ -1,152 +1,150 @@
<template>
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
<div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
<div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
<div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
<div class="h-full flex flex-col justify-center items-center">
<h3 class="mt-4">Ethereal</h3>
<img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
<span class="block mb-4">Level 69</span>
</div>
</div>
<div class="max-w-[875px] w-[65%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
<div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
<h3 class="m-0 font-medium shrink-0">Inventory</h3>
<div class="flex gap-2.5">
<button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
</button>
</div>
</div>
<div class="grow flex flex-col">
<div class="w-full h-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
<div class="flex flex-col gap-3 m-5">
<div class="flex gap-3 justify-center">
<!-- Helmet -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
</div>
<!-- Head charm -->
<div class=" bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
</div>
</div>
<div class="flex gap-3 justify-center">
<!-- Bracers -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
</div>
<!-- Chestplate -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20"/>
</div>
<!-- Primary Weapon -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
</div>
</div>
<div class="flex gap-3 justify-center">
<!-- Legs -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
</div>
<div class="flex flex-col gap-3">
<!-- Belt/pouch -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
</div>
<!-- Boots -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
</div>
</div>
</div>
</div>
<div class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
<div v-for="n in 25" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
</div>
</div>
<div class="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
<div class="w-full xl:w-1/2 h-full">
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
<div class="flex gap-2">
<h4>Armor piece name</h4>
<span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
</div>
<div class="flex gap-8 xl:justify-between items-center grow">
<img src="/assets/placeholders/chestplate.png" class="max-w-36"/>
<ul class="p-0 m-0 list-none">
<li class="flex gap-8 justify-between">
<span>Health:</span>
<span>+15</span>
</li>
<li class="flex gap-8 justify-between">
<span>Defense:</span>
<span>500</span>
</li>
<li class="flex gap-8 justify-between">
<span>Stats:</span>
<span></span>
</li>
<li class="flex gap-8 justify-between">
<span>More stats:</span>
<span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200 xl:block hidden"></div>
<div class="w-full xl:w-1/2 h-full">
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
<h4>Character stats</h4>
<div class="flex justify-between items-center grow">
<ul class="p-0 m-0 list-none">
<li class="flex gap-8 justify-between">
<span>Health:</span>
<p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
</li>
<li class="flex gap-8 justify-between">
<span>Defense:</span>
<p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
</li>
<li class="flex gap-8 justify-between">
<span>Stats:</span>
<p class="m-0 relative"></p>
</li>
<li class="flex gap-8 justify-between">
<span>More stats:</span>
<p class="m-0 relative"></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
<div class="h-full flex flex-col items-center">
<h3 class="mt-4">Chest</h3>
<div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
<div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
</div>
</div>
</div>
</div>
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
<div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
<div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
<div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
<div class="h-full flex flex-col justify-center items-center">
<h3 class="mt-4">Ethereal</h3>
<img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
<span class="block mb-4">Level 69</span>
</div>
</div>
<div class="max-w-[875px] w-[65%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
<div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
<h3 class="m-0 font-medium shrink-0">Inventory</h3>
<div class="flex gap-2.5">
<button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
</button>
</div>
</div>
<div class="grow flex flex-col">
<div class="w-full h-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
<div class="flex flex-col gap-3 m-5">
<div class="flex gap-3 justify-center">
<!-- Helmet -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<!-- Head charm -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
<img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
</div>
<div class="flex gap-3 justify-center">
<!-- Bracers -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<!-- Chestplate -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
<img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
</div>
<!-- Primary Weapon -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
</div>
<div class="flex gap-3 justify-center">
<!-- Legs -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<div class="flex flex-col gap-3">
<!-- Belt/pouch -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
<!-- Boots -->
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
<img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
</div>
</div>
</div>
</div>
<div class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
<div v-for="n in 25" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
</div>
</div>
<div class="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
<div class="w-full xl:w-1/2 h-full">
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
<div class="flex gap-2">
<h4>Armor piece name</h4>
<span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
</div>
<div class="flex gap-8 xl:justify-between items-center grow">
<img src="/assets/placeholders/chestplate.png" class="max-w-36" />
<ul class="p-0 m-0 list-none">
<li class="flex gap-8 justify-between">
<span>Health:</span>
<span>+15</span>
</li>
<li class="flex gap-8 justify-between">
<span>Defense:</span>
<span>500</span>
</li>
<li class="flex gap-8 justify-between">
<span>Stats:</span>
<span></span>
</li>
<li class="flex gap-8 justify-between">
<span>More stats:</span>
<span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200 xl:block hidden"></div>
<div class="w-full xl:w-1/2 h-full">
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
<h4>Character stats</h4>
<div class="flex justify-between items-center grow">
<ul class="p-0 m-0 list-none">
<li class="flex gap-8 justify-between">
<span>Health:</span>
<p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
</li>
<li class="flex gap-8 justify-between">
<span>Defense:</span>
<p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
</li>
<li class="flex gap-8 justify-between">
<span>Stats:</span>
<p class="m-0 relative"></p>
</li>
<li class="flex gap-8 justify-between">
<span>More stats:</span>
<p class="m-0 relative"></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
<div class="h-full flex flex-col items-center">
<h3 class="mt-4">Chest</h3>
<div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
<div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</template>

2
src/config.ts
View File

@ -1,4 +1,4 @@
const dev: boolean = false
const dev: boolean = true
export default {
name: 'New Quest',

7
src/screens/Characters.vue
View File

@ -4,7 +4,12 @@
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
<div class="filler"></div>
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
<div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
<div
v-for="character in characters"
:key="character.id"
class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl 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-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
<!-- @TODO : Add a confirmation dialog -->

20
src/screens/Game.vue
View File

@ -1,18 +1,20 @@
<template>
<GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
<GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
<div class="flex justify-center items-center h-dvh p-8 relative">
<GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
<GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
<div v-if="!zoneEditorStore.active">
<Game :config="gameConfig" @create="createGame">
<Scene name="main" @preload="preloadScene" @create="createScene">
<div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
<Hud />
</div>
<!-- <Inventory />-->
<!-- <Inventory />-->
<World v-if="isLoaded" :key="gameStore.character?.zoneId" />
<div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
<Chat />
<div class="w-full">
<Chat v-show="gameStore.isChatOpen" />
</div>
<Menubar />
</div>
</Scene>
@ -62,13 +64,7 @@ const gameConfig = {
height: window.innerHeight,
type: Phaser.AUTO,
resolution: 5,
pixelArt: true,
scale: {
mode: Phaser.Scale.RESIZE,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth,
height: window.innerHeight
}
pixelArt: true
}
const createGame = (game: Phaser.Game) => {

2
src/stores/assets.ts
View File

@ -4,7 +4,7 @@ import config from '@/config'
export const useAssetStore = defineStore('assets', {
state: () => ({
assets: [] as Asset[],
assets: [] as Asset[]
}),
actions: {
setAssets(assets: Asset[]) {

6
src/stores/game.ts
View File

@ -12,7 +12,8 @@ export const useGameStore = defineStore('game', {
user: null as User | null,
character: null as Character | null,
isGmPanelOpen: false,
isMovingCamera: false
isMovingCamera: false,
isChatOpen: false
}),
actions: {
setScreen(screen: string) {
@ -36,6 +37,9 @@ export const useGameStore = defineStore('game', {
setMovingCamera(moving: boolean) {
this.isMovingCamera = moving
},
toggleChat() {
this.isChatOpen = !this.isChatOpen
},
initConnection() {
this.connection = io(config.server_endpoint, {
secure: !config.development,

8
src/stores/zone.ts
View File

@ -8,7 +8,7 @@ export const useZoneStore = defineStore('zone', {
}),
getters: {
getCharacterById: (state) => {
return (id: number) => state.characters.find(char => char.id === id)
return (id: number) => state.characters.find((char) => char.id === id)
},
getCharacterCount: (state) => {
return state.characters.length
@ -28,17 +28,17 @@ export const useZoneStore = defineStore('zone', {
this.characters.push(character)
},
updateCharacter(updatedCharacter: ExtendedCharacter) {
const index = this.characters.findIndex(char => char.id === updatedCharacter.id)
const index = this.characters.findIndex((char) => char.id === updatedCharacter.id)
if (index !== -1) {
this.characters[index] = { ...this.characters[index], ...updatedCharacter }
}
},
removeCharacter(character_id: number) {
this.characters = this.characters.filter(char => char.id !== character_id)
this.characters = this.characters.filter((char) => char.id !== character_id)
},
reset() {
this.zone = null
this.characters = []
}
}
})
})

2
src/utilities.ts
View File

@ -1,3 +1,3 @@
export function uuidv4() {
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
}
}