- Backend: FastAPI + Python-SocketIO + SQLAlchemy - Models for categories, questions, game sessions, events - AI services for answer validation and question generation (Claude) - Room management with Redis - Game logic with stealing mechanics - Admin API for question management - Frontend: React + Vite + TypeScript + Tailwind - 5 visual themes (DRRR, Retro, Minimal, RGB, Anime 90s) - Real-time game with Socket.IO - Achievement system - Replay functionality - Sound effects per theme - Docker Compose for deployment - Design documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// DRRR Theme
|
|
drrr: {
|
|
bg: '#0a0a0a',
|
|
primary: '#FFE135',
|
|
secondary: '#00FFFF',
|
|
accent: '#FF00FF',
|
|
},
|
|
// Retro Arcade Theme
|
|
retro: {
|
|
bg: '#1a1a2e',
|
|
primary: '#9B59B6',
|
|
secondary: '#E91E63',
|
|
accent: '#00FFFF',
|
|
},
|
|
// Gaming RGB Theme
|
|
rgb: {
|
|
bg: '#0D0D0D',
|
|
primary: '#FF0000',
|
|
secondary: '#00FF00',
|
|
accent: '#0000FF',
|
|
},
|
|
// Anime 90s Theme
|
|
anime: {
|
|
bg: '#FFF5F5',
|
|
primary: '#FFB6C1',
|
|
secondary: '#E6E6FA',
|
|
accent: '#FF69B4',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
'pixel': ['"Press Start 2P"', 'cursive'],
|
|
'urban': ['Bebas Neue', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
'glitch': 'glitch 0.3s infinite',
|
|
'pulse-neon': 'pulse-neon 2s infinite',
|
|
'scanline': 'scanline 8s linear infinite',
|
|
'sparkle': 'sparkle 1.5s infinite',
|
|
'rgb-shift': 'rgb-shift 3s infinite',
|
|
},
|
|
keyframes: {
|
|
glitch: {
|
|
'0%, 100%': { transform: 'translate(0)' },
|
|
'20%': { transform: 'translate(-2px, 2px)' },
|
|
'40%': { transform: 'translate(-2px, -2px)' },
|
|
'60%': { transform: 'translate(2px, 2px)' },
|
|
'80%': { transform: 'translate(2px, -2px)' },
|
|
},
|
|
'pulse-neon': {
|
|
'0%, 100%': { boxShadow: '0 0 5px currentColor, 0 0 10px currentColor' },
|
|
'50%': { boxShadow: '0 0 20px currentColor, 0 0 30px currentColor' },
|
|
},
|
|
scanline: {
|
|
'0%': { transform: 'translateY(-100%)' },
|
|
'100%': { transform: 'translateY(100%)' },
|
|
},
|
|
sparkle: {
|
|
'0%, 100%': { opacity: 1, transform: 'scale(1)' },
|
|
'50%': { opacity: 0.5, transform: 'scale(0.8)' },
|
|
},
|
|
'rgb-shift': {
|
|
'0%': { filter: 'hue-rotate(0deg)' },
|
|
'100%': { filter: 'hue-rotate(360deg)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|