forked from noxious/client
Fixed modal fullscreen icons, made types compatible with server changes made for #174, npm update, npm run format, minor improvements
This commit is contained in:
@ -16,25 +16,25 @@
|
||||
<div class="flex w-full h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
|
||||
<div class="w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 border-r border-solid border-gray-500 rounded-bl-md relative">
|
||||
<div class="absolute right-full -top-px flex gap-1 flex-col">
|
||||
<div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ 'active': selected_character == character.id }">
|
||||
<div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: selected_character == character.id }">
|
||||
<img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
|
||||
<input class="opacity-0 h-full w-full absolute m-0 z-10 hover:cursor-pointer" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
||||
</div>
|
||||
<div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{'active': characters.length == 0}" v-if="characters.length < 4">
|
||||
<div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
|
||||
<button class="p-0 h-full w-full flex flex-col justify-between" @click="isModalOpen = true">
|
||||
<img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6" v-if="selected_character">
|
||||
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find(c => c.id == selected_character)?.name" />
|
||||
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selected_character)?.name" />
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<div class="flex flex-col gap-3">
|
||||
<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-between">
|
||||
<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-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar"/>
|
||||
<img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar" />
|
||||
<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>
|
||||
@ -46,11 +46,11 @@
|
||||
</div>
|
||||
<!-- TODO: update gender on (selected) character -->
|
||||
<div class="flex justify-between w-[190px]">
|
||||
<button class="btn-empty flex gap-2" :class="{'selected': characters.find(c => c.id == selected_character)?.characterType?.gender === 'MALE'}">
|
||||
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selected_character)?.characterType?.gender === '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': characters.find(c => c.id == selected_character)?.characterType?.gender === 'FEMALE'}">
|
||||
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selected_character)?.characterType?.gender === 'FEMALE' }">
|
||||
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
|
||||
<span class="text-white">Female</span>
|
||||
</button>
|
||||
@ -67,9 +67,7 @@
|
||||
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
|
||||
</button>
|
||||
<!-- TODO: replace with hairstyles -->
|
||||
<button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400">
|
||||
|
||||
</button>
|
||||
<button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 w-full">
|
||||
@ -88,19 +86,8 @@
|
||||
</div>
|
||||
|
||||
<div class="button-wrapper flex self-center justify-end gap-4 max-w-[860px] w-full" v-if="!isLoading">
|
||||
<button
|
||||
class="btn-empty min-w-48"
|
||||
@click.stop="gameStore.disconnectSocket()"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed"
|
||||
:disabled="!selected_character"
|
||||
@click="select_character()"
|
||||
>
|
||||
Play now
|
||||
</button>
|
||||
<button class="btn-empty min-w-48" @click.stop="gameStore.disconnectSocket()">Back</button>
|
||||
<button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selected_character" @click="select_character()">Play now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -171,15 +158,15 @@ const selected_character = ref(null)
|
||||
function select_character() {
|
||||
if (!selected_character.value) return
|
||||
deletingCharacter.value = null
|
||||
gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
|
||||
gameStore.connection?.emit('character:connect', { characterId: selected_character.value })
|
||||
gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
|
||||
}
|
||||
|
||||
// Delete character logics
|
||||
function delete_character(character_id: number) {
|
||||
if (!character_id) return
|
||||
function delete_character(characterId: number) {
|
||||
if (!characterId) return
|
||||
deletingCharacter.value = null
|
||||
gameStore.connection?.emit('character:delete', { character_id: character_id })
|
||||
gameStore.connection?.emit('character:delete', { characterId: characterId })
|
||||
}
|
||||
|
||||
// Create character logics
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</Container>
|
||||
<!-- Character name and health -->
|
||||
<Container :depth="999" :x="currentX" :y="currentY">
|
||||
<Text @create="createNicknameText" :text="character.name" />
|
||||
<Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
|
||||
<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="0x00b3b3" :width="70" :height="3" :radius="5" />
|
||||
</Container>
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import config from '@/config'
|
||||
import { type ExtendedCharacter, type Sprite as SpriteT } from '@/types'
|
||||
import { type Sprite as SpriteT, type ZoneCharacter } from '@/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
@ -34,7 +34,7 @@ enum Direction {
|
||||
|
||||
const props = defineProps<{
|
||||
layer: Phaser.Tilemaps.TilemapLayer
|
||||
character: ExtendedCharacter
|
||||
zoneCharacter: ZoneCharacter
|
||||
}>()
|
||||
|
||||
const charChatContainer = refObj<Phaser.GameObjects.Container>()
|
||||
@ -110,19 +110,19 @@ const calcDirection = (oldX: number, oldY: number, newX: number, newY: number):
|
||||
return Direction.UNCHANGED
|
||||
}
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.character.rotation ?? 0))
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
|
||||
|
||||
const charTexture = computed(() => {
|
||||
const { rotation, characterType, isMoving } = props.character
|
||||
const { rotation, characterType } = props.zoneCharacter.character
|
||||
const spriteId = characterType?.sprite?.id ?? 'idle_right_down'
|
||||
const action = isMoving ? 'walk' : 'idle'
|
||||
const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
|
||||
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
|
||||
|
||||
return `${spriteId}-${action}_${direction}`
|
||||
})
|
||||
|
||||
const updateSprite = () => {
|
||||
if (props.character.isMoving) {
|
||||
if (props.zoneCharacter.isMoving) {
|
||||
charSprite.value!.anims.play(charTexture.value, true)
|
||||
return
|
||||
}
|
||||
@ -133,11 +133,11 @@ const updateSprite = () => {
|
||||
}
|
||||
|
||||
const createChatBubble = (container: Phaser.GameObjects.Container) => {
|
||||
container.setName(`${props.character.name}_chatBubble`)
|
||||
container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
|
||||
}
|
||||
|
||||
const createChatText = (text: Phaser.GameObjects.Text) => {
|
||||
text.setName(`${props.character.name}_chatText`)
|
||||
text.setName(`${props.zoneCharacter.character.name}_chatText`)
|
||||
text.setFontSize(13)
|
||||
text.setFontFamily('Arial')
|
||||
text.setOrigin(0.5, 10.9)
|
||||
@ -168,7 +168,7 @@ const createNicknameText = (text: Phaser.GameObjects.Text) => {
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.character,
|
||||
() => props.zoneCharacter.character,
|
||||
(newChar, oldChar) => {
|
||||
if (!newChar) return
|
||||
|
||||
@ -179,10 +179,9 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
watch(() => props.character.isMoving, updateSprite)
|
||||
watch(() => props.character.rotation, updateSprite)
|
||||
watch(() => props.zoneCharacter, updateSprite)
|
||||
|
||||
loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT)
|
||||
loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as SpriteT)
|
||||
.then(() => {
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
charSprite.value!.setFlipX(isFlippedX.value)
|
||||
@ -192,11 +191,11 @@ loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
charChatContainer.value!.setName(`${props.character!.name}_chatContainer`)
|
||||
charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
|
||||
charChatContainer.value!.setVisible(false)
|
||||
charContainer.value!.setName(props.character!.name)
|
||||
charContainer.value!.setName(props.zoneCharacter.character!.name)
|
||||
|
||||
if (props.character.id === gameStore.character!.id) {
|
||||
if (props.zoneCharacter.character.id === gameStore.character!.id) {
|
||||
zoneStore.setCharacterLoaded(true)
|
||||
|
||||
// #146 : Set camera position to character, need to be improved still
|
||||
@ -204,7 +203,7 @@ onMounted(() => {
|
||||
scene.cameras.main.stopFollow()
|
||||
}
|
||||
|
||||
updatePosition(props.character.positionX, props.character.positionY, props.character.rotation)
|
||||
updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<div class="flex gap-2.5">
|
||||
<button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
|
||||
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
|
||||
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
|
||||
</button>
|
||||
<button v-if="closable" @click="emit('modal:close')" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||
<img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="item" />
|
||||
<Character v-for="item in zoneStore.characters" :key="item.character.id" :layer="tilemap" :zoneCharacter="item" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Character from '@/components/sprites/Character.vue'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { calculateIsometricDepth } from '@/composables/zoneComposable'
|
||||
|
||||
const zoneStore = useZoneStore()
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ import { useScene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
|
||||
import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
|
||||
import type { Zone as ZoneT, ZoneCharacter } from '@/types'
|
||||
import ZoneTiles from '@/components/zone/ZoneTiles.vue'
|
||||
import ZoneObjects from '@/components/zone/ZoneObjects.vue'
|
||||
import Characters from '@/components/zone/Characters.vue'
|
||||
@ -23,7 +23,7 @@ const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
|
||||
|
||||
type zoneLoadData = {
|
||||
zone: ZoneT
|
||||
characters: CharacterT[]
|
||||
characters: ZoneCharacter[]
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
@ -41,17 +41,17 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
|
||||
zoneStore.setCharacters(data.characters)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('zone:character:join', async (data: ExtendedCharacterT) => {
|
||||
gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
|
||||
// If data is from the current user, don't add it to the store
|
||||
if (data.id === gameStore.character?.id) return
|
||||
zoneStore.addCharacter(data)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('zone:character:leave', (character_id: number) => {
|
||||
zoneStore.removeCharacter(character_id)
|
||||
gameStore.connection!.on('zone:character:leave', (characterId: number) => {
|
||||
zoneStore.removeCharacter(characterId)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
|
||||
gameStore.connection!.on('character:move', (data: ZoneCharacter) => {
|
||||
zoneStore.updateCharacter(data)
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user