1
0
forked from noxious/client

Worked on zone manager

This commit is contained in:
2024-06-11 01:10:22 +02:00
parent 399e994bbe
commit 8e174a063a
29 changed files with 658 additions and 379 deletions

View File

@ -1,23 +1,7 @@
<template>
<Container>
<Rectangle
:x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)"
:y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)"
:origin-x="0.5"
:origin-y="10.5"
:fillColor="0xFFFFFF"
:width="74"
:height="8"
>
<Rectangle
:x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)"
:y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)"
:origin-x="0.5"
:origin-y="20.5"
:fillColor="0x09ad19"
:width="70"
:height="4"
/>
<Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="10.5" :fillColor="0xffffff" :width="74" :height="8">
<Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="20.5" :fillColor="0x09ad19" :width="70" :height="4" />
</Rectangle>
<Text
@create="createText"
@ -29,20 +13,16 @@
:style="{
fontFamily: 'Helvetica, Arial',
color: '#FFF',
fontSize: '14px',
fontSize: '14px'
}"
/>
<Sprite
ref="sprite"
:x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)"
:y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)"
play="walk" />
<Sprite ref="sprite" :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" play="walk" />
</Container>
</template>
<script lang="ts" setup>
import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer'
import { onMounted, ref } from 'vue'
import { onBeforeMount, onMounted, ref } from 'vue'
import { useSocketStore } from '@/stores/socket'
import { type Character as CharacterT } from '@/types'
import { getTile, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
@ -55,33 +35,32 @@ const props = defineProps({
})
const scene = useScene()
const isSelf = props.character.id === socket.character.id;
const isSelf = props.character.id === socket.character.id
const createText = (text: Phaser.GameObjects.Text) => {
text.setLetterSpacing(1.5);
text.setLetterSpacing(1.5)
}
onMounted(() => {
onBeforeMount(() => {
if (isSelf) setupSelf()
});
})
function setupSelf()
{
function setupSelf() {
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
}
function onPointerClick(pointer: Phaser.Input.Pointer) {
if (!isSelf) return;
if (!isSelf) return
const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y
const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
if (!pointer_tile) {
return;
return
}
socket.getConnection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
socket.connection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
//Directions for player sprites + animations
if (px < 0 && py > 0) {
@ -95,9 +74,6 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
}
}
// spacing
/**
* Resources:
* https://www.youtube.com/watch?v=9sWrGohw9qo