matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add animated card mosaic background to home, collection, community, and deck list views

Browse Source
This commit is contained in:
Matthieu
2025-11-27 17:10:06 +01:00
parent 2acf50e46f
commit 60bbeb9737
5 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.tsx
View File

@@ -11,6 +11,7 @@ import Community from './components/Community';
import PWAInstallPrompt from './components/PWAInstallPrompt';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import { ToastProvider } from './contexts/ToastContext';
import CardMosaicBackground from "./components/CardMosaicBackground.tsx";
type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'search' | 'life-counter' | 'community';
@@ -40,7 +41,7 @@ function AppContent() {
switch (currentPage) {
case 'home':
return (
<div className="relative bg-gray-900 text-white p-3 sm:p-6 animate-fade-in md:min-h-screen">
<div className="relative text-white p-3 sm:p-6 animate-fade-in md:min-h-screen">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 animate-slide-in-left">My Decks</h1>
<DeckList
@@ -78,9 +79,12 @@ function AppContent() {
};
return (
<div className="min-h-screen bg-gray-900 flex flex-col">
<div className="min-h-screen bg-gray-900 flex flex-col relative">
{/* Animated card mosaic overlay */}
<CardMosaicBackground />
<Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
<main className="relative flex-1 overflow-y-auto">
<main className="relative flex-1 overflow-y-auto z-20">
<div className="relative min-h-full md:min-h-0 pt-0 md:pt-16 pb-20 md:pb-0">
{renderPage()}
</div>

2
src/components/CardSearch.tsx
View File

@@ -201,7 +201,7 @@ const CardSearch = () => {
};
return (
<div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
<div className="relative text-white p-3 sm:p-6 md:min-h-screen">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Card Search</h1>
<form onSubmit={handleSearch} className="mb-8 space-y-4">

2
src/components/Collection.tsx
View File

@@ -321,7 +321,7 @@ export default function Collection() {
};
return (
<div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
<div className="relative text-white p-3 sm:p-6 md:min-h-screen">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">My Collection</h1>

4
src/components/Community.tsx
View File

@@ -696,7 +696,7 @@ export default function Community() {
);
return (
<div className="relative bg-gray-900 text-white min-h-screen">
<div className="relative text-white min-h-screen">
<div className="max-w-7xl mx-auto p-3 sm:p-6">
{/* Header with Back and Trade buttons */}
<div className="flex items-center justify-between gap-2 mb-4 md:mb-6">
@@ -1027,7 +1027,7 @@ export default function Community() {
// ============ MAIN VIEW ============
return (
<div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
<div className="relative text-white p-3 sm:p-6 md:min-h-screen">
<div className="max-w-7xl mx-auto">
{/* Header */}
<h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Community</h1>

2
src/components/DeckList.tsx
View File

@@ -77,7 +77,7 @@ const DeckList = ({ onDeckEdit, onCreateDeck }: DeckListProps) => {
{/* Create New Deck Card */}
<button
onClick={onCreateDeck}
className="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group aspect-[5/7] flex flex-col items-center justify-center gap-3 p-4"
className="rounded-lg overflow-hidden shadow-lg hover:shadow-xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group aspect-[5/7] flex flex-col items-center justify-center gap-3 p-4"
>
<PlusCircle size={48} className="text-gray-600 group-hover:text-blue-500 transition-colors" />
<div className="text-center">