ClaudeandClaude Opus 4.6
d1bed9ac20
Phase 1 — Project Scaffold: - Vite + React-TS project in frontend/ with Tailwind v3, PostCSS, Autoprefixer - clsx and react-router-dom installed - Vite proxy configured for /api and /ws to localhost:8000 - Tailwind directives in src/index.css - Makefile targets: frontend-dev, frontend-build - app.py updated to serve frontend/dist/ with SPA catch-all fallback Phase 2 — Type Definitions: - TypeScript types in frontend/src/types/game.ts (Phase, Card, Player, GameState, WsIncoming, NarrationLine) - Constants in frontend/src/constants.ts (SEAT_COLOURS, PHASES) Phase 10 — Tailwind Colour Tokens: - Custom color tokens for bg, accent, life, seat, card color groups - Additional tokens from index.html audit: border, phase, btn, text, highlight - Custom pulse animation keyframe Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
83 lines
1.7 KiB
JavaScript
83 lines
1.7 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: {
|
|
base: '#12141e',
|
|
zone: '#1c2034',
|
|
panel: '#161820',
|
|
bar: '#1a1e30',
|
|
phase: '#1e2338',
|
|
hand: '#1a2030',
|
|
},
|
|
accent: {
|
|
blue: '#3c82dc',
|
|
think: '#64b4ff',
|
|
purple: '#7060c0',
|
|
},
|
|
life: {
|
|
high: '#50c87a',
|
|
med: '#dcb432',
|
|
low: '#dc3c3c',
|
|
},
|
|
seat: {
|
|
0: '#4696ff',
|
|
1: '#ff6450',
|
|
2: '#50d278',
|
|
3: '#dcaa32',
|
|
},
|
|
card: {
|
|
bg: '#2a3050',
|
|
hand: '#2a3868',
|
|
selected: '#3a4878',
|
|
},
|
|
border: {
|
|
zone: '#3a4060',
|
|
sep: '#2a2e48',
|
|
btn: '#4060a0',
|
|
overlay: '#4060c0',
|
|
'btn-hover': '#6080d0',
|
|
'btn-primary': '#4080d0',
|
|
'hand-card': '#5060a0',
|
|
chip: '#444444',
|
|
},
|
|
phase: {
|
|
tab: '#252a42',
|
|
text: '#888888',
|
|
},
|
|
btn: {
|
|
primary: '#2a5090',
|
|
},
|
|
text: {
|
|
body: '#e8e8e8',
|
|
muted: '#888888',
|
|
system: '#555566',
|
|
'zone-label': '#666666',
|
|
status: '#777788',
|
|
sub: '#aaaaaa',
|
|
btn: '#cccccc',
|
|
},
|
|
highlight: {
|
|
gold: '#ffdc32',
|
|
commander: '#ffd200',
|
|
},
|
|
},
|
|
keyframes: {
|
|
pulse: {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.7' },
|
|
},
|
|
},
|
|
animation: {
|
|
pulse: 'pulse 1s ease-in-out infinite',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|