51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, watch } from 'vue'
|
||
|
|
import { generatePosterFrame } from '../game/sprites/poster'
|
||
|
|
import { ANIMATIONS } from '../game/sprites'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
seed: string
|
||
|
|
archetype?: string
|
||
|
|
tier?: number
|
||
|
|
size?: number
|
||
|
|
pose?: keyof typeof ANIMATIONS
|
||
|
|
glowColor?: 'cyan' | 'pink' | 'purple' | 'yellow'
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const imgSrc = ref('')
|
||
|
|
|
||
|
|
async function generate() {
|
||
|
|
// Always render at high resolution (480px) for quality, display size is controlled by CSS
|
||
|
|
imgSrc.value = await generatePosterFrame(
|
||
|
|
props.seed,
|
||
|
|
props.tier || 0,
|
||
|
|
props.archetype,
|
||
|
|
props.pose || 'attack',
|
||
|
|
480,
|
||
|
|
undefined,
|
||
|
|
props.glowColor || 'cyan',
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => generate())
|
||
|
|
|
||
|
|
watch(() => [props.seed, props.archetype, props.tier, props.pose, props.glowColor], () => generate())
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<img
|
||
|
|
v-if="imgSrc"
|
||
|
|
:src="imgSrc"
|
||
|
|
alt=""
|
||
|
|
class="poster-sprite-img"
|
||
|
|
:style="{ width: `${size || 400}px`, height: `${size || 400}px` }"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.poster-sprite-img {
|
||
|
|
image-rendering: pixelated;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|