<template>
<img ref="sprite" v-show="loaded"
    class="sprite pixelated"
    :src="props.path" 
    :width="props.width">
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps<{
  path: string,
  top?: string,
  right?: string,
  left?: string,
  bottom?: string,
  width: string
}>();

const sprite = ref(null);
const loaded = ref(false);

onMounted(() => {
    sprite.value.style.top = props.top;
    sprite.value.style.left = props.left;
    sprite.value.style.bottom = props.bottom;
    sprite.value.style.right = props.right;
    
    loaded.value = true;
});
</script>

<style lang="scss" scoped>
.sprite {
    position: absolute;
    z-index: 1;
}
</style>