DorianandClaude Opus 4.6
f6eb7d2845
- Fight Card page: dramatic poster background with cross-hatch, spotlights, vignettes, corner brackets, scan lines; 3D VS orb with punch animation; selectable undercard with main event always pinned at top - PosterSprite: high-quality 480px poster frame with 6-pass renderer (aura, glow, bevel, specular, particles); PixelGlove component - 12-char bot name limit across all forms and server validation - Mock bots: all 100 now have diverse archetypes (25 types), 25% human fighters; seedMockBots updates existing bots on restart - Leaderboard: inline SpritePreview next to each bot name - Nostr auth: persistent login, nsec copy button - Wallet: NWC + Lightning Address, ranked fight flow - Server: payments, ranked queue, customization endpoint Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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>
|