I'm developing a plugin and need to send data from server to client which is later passed to gui component.
server/spawn.ts:
import { RpgPlayerHooks, RpgPlayer, RpgMap } from "@rpgjs/server";
export const spawn: RpgPlayerHooks = {
onJoinMap(player: RpgPlayer, map: RpgMap) {
const spawnedPet = { level: 5, gender: 'Male', name: 'Dog', image: 'path/to/image' };
player.socket.emit('pet-spawned', { spawnedPet });
}
}
client/map.ts:
import { RpgSceneMapHooks, RpgGui } from '@rpgjs/client';
export const sceneMap: RpgSceneMapHooks = {
onAfterLoading(map: any) {
const spawnedPokemon = "HOW TO RECEIVE?"
RpgGui.display('rpg-spawn', { spawnedPet });
}
}
client/gui/spawn.vue:
<template>
<div class="spawn">
<img v-if="spawnedPet" :src="spawnedPet.image" alt="Spawned Pet">
<div v-if="spawnedPet">
You have encountered {{ spawnedPet.level }} {{ spawnedPet.gender }} {{ spawnedPet.name }}
<br>
<input type="button" value="Battle" style="margin-bottom:5px;">
</div>
<div v-else>
No pet spawned.
</div>
</div>
</template>
<script>
export default {
name: 'rpg-spawn',
props: ['spawnedPet']
}
</script>
<style scoped>
.spawn {
text-align: center;
font-size: 11px;
padding-right: 50px;
width: 25%;
height: 15%;
color: rgb(255, 255, 255);
padding-top: 5px;
position: absolute;
top: 50%;
}
</style>