feat: Creator human companion — deep hood, detailed Guy Fawkes mask, cloak, gloves
- Rewrote Creator human sprite: taller hood peak, face-framing shadows, neck-to-cloak coverage, wider flowing cloak with hem detail, 6 matrix code streams, dramatic arched brows, 3px golden eye slits with glow, wider curled mustache, wider smile arc, extended goatee, larger Bitcoin emblem with serifs, laptop with terminal glow + coach sparks, dark gloves covering skin, 6-particle gold orbit, 8-particle shadow aura - docker-compose: pass wallet/payment env vars from Portainer - JoinBoutPage: fix isLoading ref access bug, add max 12-char name validation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
1f8e8569ef
commit
abe4efe760
@@ -360,45 +360,81 @@ onUnmounted(() => {
|
||||
<PixelGlove :size="40" flip class="hidden sm:block md:!w-[56px] shrink-0" />
|
||||
</h1>
|
||||
|
||||
<!-- Hero bots: vertical on mobile, flanking on desktop -->
|
||||
<!-- Mobile: stacked vertically -->
|
||||
<div class="sm:hidden flex items-center justify-center gap-6 mb-4">
|
||||
<!-- Hero bots flanking The Creator -->
|
||||
<!-- Mobile -->
|
||||
<div class="sm:hidden flex items-center justify-center gap-3 mb-4">
|
||||
<div class="hero-fighter hero-fighter-left shrink-0">
|
||||
<SpritePreview
|
||||
seed="hero_samurai"
|
||||
archetype="samurai"
|
||||
:tier="5"
|
||||
:size="90"
|
||||
:size="72"
|
||||
class="drop-shadow-[0_0_16px_rgba(255,68,136,0.4)]"
|
||||
/>
|
||||
</div>
|
||||
<div class="creator-host shrink-0 relative">
|
||||
<div class="creator-glow" />
|
||||
<SpritePreview
|
||||
seed="the_creator"
|
||||
archetype="the_creator"
|
||||
:tier="5"
|
||||
:size="100"
|
||||
class="relative z-10 drop-shadow-[0_0_20px_rgba(255,215,0,0.5)]"
|
||||
/>
|
||||
<HumanPreview
|
||||
seed="the_creator"
|
||||
archetype="the_creator"
|
||||
:size="60"
|
||||
:win-rate="1.0"
|
||||
anim="coach"
|
||||
class="absolute -bottom-2 -right-3 z-20 drop-shadow-[0_0_12px_rgba(0,255,65,0.4)]"
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-fighter hero-fighter-right shrink-0" style="transform: scaleX(-1)">
|
||||
<SpritePreview
|
||||
seed="hero_dragon"
|
||||
archetype="dragon"
|
||||
:tier="5"
|
||||
:size="90"
|
||||
:size="72"
|
||||
class="drop-shadow-[0_0_16px_rgba(0,240,255,0.4)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Desktop: flanking (hidden on mobile) -->
|
||||
<div class="hidden sm:flex items-center justify-center mb-6">
|
||||
<!-- Desktop -->
|
||||
<div class="hidden sm:flex items-center justify-center gap-6 mb-6">
|
||||
<div class="hero-fighter hero-fighter-left shrink-0">
|
||||
<SpritePreview
|
||||
seed="hero_samurai"
|
||||
archetype="samurai"
|
||||
:tier="5"
|
||||
:size="140"
|
||||
:size="120"
|
||||
class="drop-shadow-[0_0_24px_rgba(255,68,136,0.4)]"
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-fighter hero-fighter-right shrink-0 ml-8" style="transform: scaleX(-1)">
|
||||
<div class="creator-host shrink-0 relative">
|
||||
<div class="creator-glow" />
|
||||
<SpritePreview
|
||||
seed="the_creator"
|
||||
archetype="the_creator"
|
||||
:tier="5"
|
||||
:size="160"
|
||||
class="relative z-10 drop-shadow-[0_0_32px_rgba(255,215,0,0.5)]"
|
||||
/>
|
||||
<HumanPreview
|
||||
seed="the_creator"
|
||||
archetype="the_creator"
|
||||
:size="90"
|
||||
:win-rate="1.0"
|
||||
anim="coach"
|
||||
class="absolute -bottom-4 -right-6 z-20 drop-shadow-[0_0_16px_rgba(0,255,65,0.4)]"
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-fighter hero-fighter-right shrink-0" style="transform: scaleX(-1)">
|
||||
<SpritePreview
|
||||
seed="hero_dragon"
|
||||
archetype="dragon"
|
||||
:tier="5"
|
||||
:size="140"
|
||||
:size="120"
|
||||
class="drop-shadow-[0_0_24px_rgba(0,240,255,0.4)]"
|
||||
/>
|
||||
</div>
|
||||
@@ -497,4 +533,28 @@ onUnmounted(() => {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.creator-host {
|
||||
animation: creatorFloat 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes creatorFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
.creator-glow {
|
||||
position: absolute;
|
||||
inset: -20px;
|
||||
background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.15) 0%, rgba(0, 255, 65, 0.05) 40%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
animation: creatorPulse 3s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes creatorPulse {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.1); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -144,7 +144,7 @@ function handleGenerateLogin() {
|
||||
}
|
||||
|
||||
async function handleNsecBackupDone() {
|
||||
if (isLoading) return
|
||||
if (isLoading.value) return
|
||||
showNsecBackup.value = false
|
||||
try {
|
||||
const result = await login()
|
||||
@@ -211,8 +211,8 @@ const isCheckingName = ref(false)
|
||||
|
||||
async function confirmName() {
|
||||
const name = botName.value.trim()
|
||||
if (!name || name.length < 2) {
|
||||
error.value = 'Name must be at least 2 characters.'
|
||||
if (!name || name.length < 2 || name.length > 12) {
|
||||
error.value = 'Name must be 2-12 characters.'
|
||||
return
|
||||
}
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
|
||||
@@ -278,8 +278,8 @@ function pickHumanAvatar(seed: string) {
|
||||
|
||||
async function confirmHumanName() {
|
||||
const name = humanName.value.trim()
|
||||
if (!name || name.length < 2) {
|
||||
error.value = 'Name must be at least 2 characters.'
|
||||
if (!name || name.length < 2 || name.length > 12) {
|
||||
error.value = 'Name must be 2-12 characters.'
|
||||
return
|
||||
}
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
|
||||
|
||||
Reference in New Issue
Block a user