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

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

const props = defineProps<{
  path: string,
  top?: string,
  right?: string,
  left?: string,
  bottom?: 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;
    width: 1300px;
    
    @media screen and (max-width: 1200px) and (min-width: 900px) {
        width: 975px;
    }

    @media screen and (max-width: 900px) and (min-width: 600px) {
        width: 650px;
    }

    @media screen and (max-width: 600px){
        width: 425px;
    }
}
</style>