feat: botfights v1 — full fighting game with Kaplay engine
- Vue 3 + Vite + Tailwind 4 frontend with synthwave aesthetic - Hono backend on port 9100 with SQLite/Drizzle - Procedural pixel-art sprite generator (48x48, 8 animation states) - Kaplay fight scene with punch/kick/special/knockback/KO animations - 12 mock bots across 6 tiers with Elo rating system - 9 challenge types, 10 fight arenas with modifiers - Fight replay with staggered battle log and ~1 min timing - Sprite preview page at /sprites Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
@@ -0,0 +1,187 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-arcade: "Press Start 2P", monospace;
|
||||
--font-display: "Orbitron", sans-serif;
|
||||
--font-neon: "Bungee Shade", sans-serif;
|
||||
--font-retro: "Monoton", sans-serif;
|
||||
--font-marker: "Permanent Marker", cursive;
|
||||
--font-glitch: "Rubik Glitch", sans-serif;
|
||||
--font-funky: "Honk", sans-serif;
|
||||
--font-pixel: "Silkscreen", monospace;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-sans: "Inter", sans-serif;
|
||||
|
||||
--color-neon-pink: #ff2d7b;
|
||||
--color-neon-cyan: #00f0ff;
|
||||
--color-neon-purple: #b83dff;
|
||||
--color-neon-yellow: #ffe14d;
|
||||
--color-neon-orange: #ff6b2b;
|
||||
--color-neon-green: #39ff14;
|
||||
--color-ring: #00ff41;
|
||||
--color-ring-dim: #00aa2a;
|
||||
--color-ring-glow: #00ff4140;
|
||||
--color-ko: #ff2d2d;
|
||||
--color-ko-glow: #ff2d2d40;
|
||||
--color-gold: #ffd700;
|
||||
--color-gold-dim: #b8960f;
|
||||
--color-amber: #ffb000;
|
||||
--color-surface: #07050a;
|
||||
--color-surface-raised: #110e18;
|
||||
--color-surface-overlay: #1a1525;
|
||||
--color-border: #2a2040;
|
||||
--color-border-bright: #3d3060;
|
||||
--color-text-primary: #e8e0f0;
|
||||
--color-text-secondary: #9088a0;
|
||||
--color-text-muted: #605070;
|
||||
}
|
||||
|
||||
/* Synthwave grid background */
|
||||
.synthwave-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(184, 61, 255, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(184, 61, 255, 0.06) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
/* CRT scanline overlay */
|
||||
.crt-overlay {
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.12) 0px,
|
||||
rgba(0, 0, 0, 0.12) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Neon glow effects -- EXTRA BOLD */
|
||||
.glow-pink {
|
||||
text-shadow:
|
||||
0 0 7px var(--color-neon-pink),
|
||||
0 0 20px rgba(255, 45, 123, 0.5),
|
||||
0 0 40px rgba(255, 45, 123, 0.25),
|
||||
0 0 80px rgba(255, 45, 123, 0.1);
|
||||
}
|
||||
.glow-cyan {
|
||||
text-shadow:
|
||||
0 0 7px var(--color-neon-cyan),
|
||||
0 0 20px rgba(0, 240, 255, 0.5),
|
||||
0 0 40px rgba(0, 240, 255, 0.25),
|
||||
0 0 80px rgba(0, 240, 255, 0.1);
|
||||
}
|
||||
.glow-purple {
|
||||
text-shadow:
|
||||
0 0 7px var(--color-neon-purple),
|
||||
0 0 20px rgba(184, 61, 255, 0.5),
|
||||
0 0 40px rgba(184, 61, 255, 0.25);
|
||||
}
|
||||
.glow-green {
|
||||
text-shadow:
|
||||
0 0 7px var(--color-ring),
|
||||
0 0 20px var(--color-ring-glow),
|
||||
0 0 40px rgba(0, 255, 65, 0.15);
|
||||
}
|
||||
.glow-yellow {
|
||||
text-shadow:
|
||||
0 0 7px var(--color-neon-yellow),
|
||||
0 0 20px rgba(255, 225, 77, 0.5),
|
||||
0 0 40px rgba(255, 225, 77, 0.2);
|
||||
}
|
||||
.glow-orange {
|
||||
text-shadow:
|
||||
0 0 7px var(--color-neon-orange),
|
||||
0 0 20px rgba(255, 107, 43, 0.5);
|
||||
}
|
||||
|
||||
/* Neon box glow */
|
||||
.neon-border-pink {
|
||||
box-shadow: 0 0 8px rgba(255, 45, 123, 0.4), 0 0 20px rgba(255, 45, 123, 0.15), inset 0 0 8px rgba(255, 45, 123, 0.05);
|
||||
}
|
||||
.neon-border-cyan {
|
||||
box-shadow: 0 0 8px rgba(0, 240, 255, 0.4), 0 0 20px rgba(0, 240, 255, 0.15), inset 0 0 8px rgba(0, 240, 255, 0.05);
|
||||
}
|
||||
.neon-border-purple {
|
||||
box-shadow: 0 0 8px rgba(184, 61, 255, 0.4), 0 0 20px rgba(184, 61, 255, 0.15), inset 0 0 8px rgba(184, 61, 255, 0.05);
|
||||
}
|
||||
.neon-border-yellow {
|
||||
box-shadow: 0 0 8px rgba(255, 225, 77, 0.4), 0 0 20px rgba(255, 225, 77, 0.15), inset 0 0 8px rgba(255, 225, 77, 0.05);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--color-neon-cyan), var(--color-neon-pink), var(--color-neon-purple));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.gradient-text-hot {
|
||||
background: linear-gradient(135deg, var(--color-neon-orange), var(--color-neon-pink), var(--color-neon-yellow));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.gradient-text-ice {
|
||||
background: linear-gradient(135deg, var(--color-neon-cyan), var(--color-neon-purple), var(--color-neon-cyan));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Health bar */
|
||||
.health-bar {
|
||||
transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* Screen shake */
|
||||
@keyframes screen-shake {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
10% { transform: translate(-3px, -2px); }
|
||||
20% { transform: translate(4px, 3px); }
|
||||
30% { transform: translate(-2px, 4px); }
|
||||
40% { transform: translate(3px, -3px); }
|
||||
50% { transform: translate(-4px, 2px); }
|
||||
60% { transform: translate(2px, -4px); }
|
||||
70% { transform: translate(4px, 3px); }
|
||||
80% { transform: translate(-3px, -2px); }
|
||||
90% { transform: translate(2px, 3px); }
|
||||
}
|
||||
.shake { animation: screen-shake 0.3s ease-in-out; }
|
||||
|
||||
/* Flicker */
|
||||
@keyframes flicker {
|
||||
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
|
||||
20%, 24%, 55% { opacity: 0.3; }
|
||||
}
|
||||
.flicker { animation: flicker 1.5s infinite; }
|
||||
|
||||
/* Pulse glow */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { opacity: 0.6; filter: brightness(0.8); }
|
||||
50% { opacity: 1; filter: brightness(1.2); }
|
||||
}
|
||||
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
|
||||
|
||||
/* Neon flicker -- like a real neon sign */
|
||||
@keyframes neon-flicker {
|
||||
0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
|
||||
20%, 24%, 55% { opacity: 0.6; }
|
||||
21%, 54% { opacity: 0.8; }
|
||||
}
|
||||
.neon-flicker { animation: neon-flicker 3s ease-in-out infinite; }
|
||||
|
||||
/* Slide up */
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.slide-up { animation: slide-up 0.6s ease-out; }
|
||||
|
||||
/* Tier colors */
|
||||
.tier-0 { color: var(--color-text-muted); }
|
||||
.tier-1 { color: #8b8b8b; }
|
||||
.tier-2 { color: var(--color-neon-cyan); }
|
||||
.tier-3 { color: var(--color-neon-purple); }
|
||||
.tier-4 { color: var(--color-neon-pink); }
|
||||
.tier-5 { color: var(--color-neon-yellow); text-shadow: 0 0 10px rgba(255, 225, 77, 0.5); }
|
||||
Reference in New Issue
Block a user