Migrate frontend to SvelteKit with comprehensive deployment (#2)
* Migrate frontend to SvelteKit with comprehensive deployment documentation - Create new SvelteKit project structure with routing, stores, and components - Implement complete authentication system with auth store and protected routes - Build all application pages: Home, Login, Register, Dashboard, Games, Stats, Commanders, Profile, and Round Counter - Configure Vite, TailwindCSS, PostCSS, and Nginx for production deployment - Add Dockerfile.svelte for containerized builds with multi-stage optimization - Create comprehensive SVELTE_DEPLOYMENT.md and SVELTE_MIGRATION.md guides - Update deployment scripts and package dependencies for SvelteKit ecosystem * feat: Add user authentication and game tracking pages to EDH Stats Tracker * Migrate frontend to SvelteKit and update Docker configuration - Replace Alpine.js with SvelteKit for improved DX and hot module replacement - Switch frontend service to `Dockerfile.dev` with volume mounts and Vite dev server - Update `docker-compose.yml` to map ports 5173 and use `http://localhost:5173` for CORS - Add `Dockerfile.svelte` for production static builds - Configure Vite proxy to target `http://backend:3000` in containers and `localhost:3002` locally - Migrate existing components to new routes and update authentication store logic - Add Chart.js integration to stats page and handle field name mapping for forms - Include static assets (`fonts/Beleren-Bold.ttf`) and update deployment scripts - Document migration status, testing checklist, and known minor issues in guides * Refactor frontend state properties from snake_case to camelCase This commit standardizes frontend property access across Dashboard, Games, and Stats pages. Changes include: - Renaming API data fields (e.g., `commanderName`, `playerCount`, `winRate`). - Updating `startEdit` logic to normalize mixed snake_case/camelCase inputs. - Replacing template literals like `_player_won` with camelCase versions. - Consistent usage of `totalGames` and `wins` instead of snake_case variants. * Update version to 2.1.12 and refactor commander management - Upgrade application version to 2.1.12 - Add Footer component and include in all pages - Refactor `/commanders` page to fetch commanders and stats separately - Fix commander API endpoint to load all commanders instead of only those with stats - Add stats merging logic to calculate wins, win rate, and avg rounds - Split add/edit command logic into shared `loadCommanders` function - Fix color toggle logic to work with both new and editing command modes - Update API methods for update requests to send `PUT` for existing commanders - Enhance commander delete functionality with proper API response handling - Refactor dashboard and stats pages to reuse shared data loading logic - Add chart cleanup on destroy for both dashboard and stats pages - Implement Chart.js for Win Rate by Color and Player Count charts - Reorganize round counter component state and timer functions - Add localStorage persistence for round counter with pause/resume support - Update game log page to integrate footer component * Refactor auth store and backend to use stable user ID * Backend: Switch user lookup from username to ID in auth routes to maintain stability across username changes. * Frontend: Update user store to reflect ID-based updates. * UI: Refactor user menu Svelte component to use ID-based user data. * Profile: Switch profile page to use ID-based user data for validation and state management. * format date formatting options consistently across dashboard and games pages * format date formatting options consistently across dashboard and games pages * Refactor card action buttons to use icons with semantic text - Switch "Edit" and "Delete" button text to SVG icons in `commanders` and `games` pages - Update icon colors and font styles to match standard design tokens (indigo/red, bold text) - Improve responsive spacing by adding `lg:grid-cols-3` * grids - Clarify hover states and titles for better UX accessibility Bump application versions to 2.2.0 and update deployment configuration * Convert `+page.svelte` to use template strings for multiline strings and fix syntax errors. * Update static version to 2.2.2 and tighten nginx cache headers
This commit is contained in:
GitHub
152
frontend/static/css/styles.css
Normal file
152
frontend/static/css/styles.css
Normal file
@@ -0,0 +1,152 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/* Alpine.js x-cloak - hide elements until Alpine initializes */
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Custom Font for Magic: The Gathering feel */
|
||||
.font-mtg {
|
||||
font-family: 'Cinzel', serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Custom Colors */
|
||||
:root {
|
||||
--edh-primary: #0f172a;
|
||||
--edh-secondary: #1e293b;
|
||||
--edh-accent: #3b82f6;
|
||||
}
|
||||
|
||||
/* MTG Color Identity Classes */
|
||||
.color-w {
|
||||
background-color: #f0e6d2;
|
||||
border: 1px solid #e0d6c2;
|
||||
}
|
||||
.color-u {
|
||||
background-color: #0e68ab;
|
||||
border: 1px solid #0c5a8a;
|
||||
}
|
||||
.color-b {
|
||||
background-color: #2c2b2d;
|
||||
border: 1px solid #1a1a1c;
|
||||
}
|
||||
.color-r {
|
||||
background-color: #c44536;
|
||||
border: 1px solid #a63a2d;
|
||||
}
|
||||
.color-g {
|
||||
background-color: #5a7a3b;
|
||||
border: 1px solid #486330;
|
||||
}
|
||||
|
||||
/* Utility Components */
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.5rem 0.75rem;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
transition-property: background-color, border-color, color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--edh-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--edh-secondary);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: white;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 3px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top: 3px solid #6366f1;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--edh-primary) 0%,
|
||||
var(--edh-secondary) 100%
|
||||
);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
color: white;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user