Click on the sprite and display a tooltip with VueJS

Samarium

Click on the sprite and display a tooltip with VueJS

Description

When the character is clicked, a tooltip appears to accompany the character's movements.

Structure

main
- maps
- characters
- gui
  - tooltip.vue
- sprite.ts
- scene-map.ts
rpg.toml

Files

scene-map.ts

import { RpgGui, type RpgSpriteHooks } from '@rpgjs/client'

const sceneMap: RpgSpriteHooks = {
	onAfterLoading() {
		RpgGui.display('my-tooltip')
	}
}

export default sceneMap

sprite.ts

import { RpgSprite, type RpgSpriteHooks } from '@rpgjs/client'

const sprite: RpgSpriteHooks = {
    onInit(sprite: RpgSprite) {
        sprite.eventMode = 'static'
        sprite.on('click', () => {
            sprite.guiDisplay = !sprite.guiDisplay
        })
    }
}

export default sprite

tooltip.vue

<template>
    <div class="speech-bubble">Sprite Id: {{ id }}</div>
</template>

<script>
export default {
  name: "my-tooltip",
  rpgAttachToSprite: true,
  props: ["spriteData"],
  inject: ["rpgScene"],
  data() {
    return {
      id: ''
    };
  },
  mounted() {
    const sprite = this.rpgScene().getSprite(this.spriteData.id)
    this.id = this.spriteData.id
  }
};
</script>

<style>
.speech-bubble {
    position: absolute;
    background: #f0f0f0;
    border-radius: .4em;
    padding: 10px;
    max-width: 400px;
    text-align: center;
    bottom: 30px;
    left: 50%; 
    transform: translateX(-24px);
}

.speech-bubble:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #f0f0f0;
    border-bottom: 0;
    margin-left: -10px;
    margin-top: -1px; 
}
</style>