lfg2025/botfights
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Creator human companion — deep hood, detailed Guy Fawkes mask, cloak, gloves

Browse Source 
- 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
2026-03-08 14:30:31 +00:00
co-authored by Claude Opus 4.6
parent 1f8e8569ef
commit abe4efe760
4 changed files with 277 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/HomePage.vue
+70 -10
View File
@@ -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>