a3e07b5898
Adds X and Y axis labels to the canvas, displays mouse coordinates on hover, and updates the project documentation to reflect these new features. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/zNDeQGA
88 lines
3.9 KiB
Markdown
88 lines
3.9 KiB
Markdown
# replit.md
|
|
|
|
## Overview
|
|
|
|
This is a collaborative pixel art application similar to r/place, where multiple users can place colored pixels on a shared canvas in real-time. The application features a React frontend with a Node.js/Express backend, real-time WebSocket communication for live updates, and PostgreSQL database storage using Drizzle ORM. Users can select colors from a palette, place pixels with cooldown restrictions, and see other users' pixel placements instantly. The system includes administrative configuration options for canvas dimensions, cooldown periods, and event settings.
|
|
|
|
## User Preferences
|
|
|
|
Preferred communication style: Simple, everyday language.
|
|
Language: German (Deutsch) - User communicates in German and prefers responses in German.
|
|
|
|
## System Architecture
|
|
|
|
**Frontend Architecture**
|
|
- React 18 with TypeScript using Vite as the build tool
|
|
- Component architecture using shadcn/ui components built on Radix UI primitives
|
|
- TailwindCSS for styling with custom CSS variables for theming
|
|
- TanStack Query for server state management and caching
|
|
- Wouter for lightweight client-side routing
|
|
- Custom hooks for WebSocket connections and mobile detection
|
|
|
|
**Backend Architecture**
|
|
- Express.js server with TypeScript support
|
|
- RESTful API endpoints for pixel operations, canvas configuration, and recent activity
|
|
- WebSocket server for real-time pixel placement notifications and user count tracking
|
|
- Abstracted storage interface (IStorage) with in-memory implementation for development
|
|
- Middleware for request logging and error handling
|
|
|
|
**Database Design**
|
|
- PostgreSQL database with Drizzle ORM for type-safe database operations
|
|
- Three main tables: pixels (pixel placements), canvas_config (system settings), user_cooldowns (rate limiting)
|
|
- Drizzle-zod integration for runtime schema validation
|
|
- Migration support through drizzle-kit
|
|
|
|
**Real-time Communication**
|
|
- WebSocket connections for live pixel placement updates
|
|
- Broadcasting system for notifying all connected clients of new pixels
|
|
- User connection count tracking and real-time display
|
|
- Automatic reconnection handling on the client side
|
|
|
|
**State Management**
|
|
- TanStack Query for server state caching and synchronization
|
|
- Local state for UI interactions (color selection, zoom controls, grid visibility)
|
|
- WebSocket message handling for real-time updates without full data refetches
|
|
|
|
**User Experience Features**
|
|
- Interactive canvas with zoom and pan capabilities
|
|
- Official r/place 2022 color palette with 32 authentic colors arranged in 8x4 grid
|
|
- Coordinate system with X/Y axis labels showing every 10th position
|
|
- Real-time mouse coordinate tracking and display
|
|
- Cooldown system to prevent pixel spam
|
|
- Recent placements tracking and display
|
|
- Canvas size and zoom level information display
|
|
- Toast notifications for user feedback
|
|
|
|
## External Dependencies
|
|
|
|
**Core Framework Dependencies**
|
|
- React 18 with TypeScript for the frontend framework
|
|
- Express.js for the backend HTTP server
|
|
- WebSocket (ws) library for real-time communication
|
|
|
|
**Database and ORM**
|
|
- PostgreSQL as the primary database (configured via DATABASE_URL)
|
|
- Drizzle ORM for database operations and migrations
|
|
- @neondatabase/serverless for PostgreSQL connectivity
|
|
|
|
**UI and Styling**
|
|
- Radix UI primitives for accessible component foundations
|
|
- TailwindCSS for utility-first styling
|
|
- Lucide React for consistent iconography
|
|
- shadcn/ui component library for pre-built components
|
|
|
|
**Development and Build Tools**
|
|
- Vite for frontend development and building
|
|
- esbuild for backend compilation
|
|
- tsx for TypeScript execution in development
|
|
- PostCSS and Autoprefixer for CSS processing
|
|
|
|
**State Management and Data Fetching**
|
|
- TanStack React Query for server state management
|
|
- React Hook Form with Zod resolvers for form validation
|
|
|
|
**Utility Libraries**
|
|
- date-fns for date manipulation
|
|
- clsx and tailwind-merge for conditional styling
|
|
- nanoid for unique ID generation
|
|
- Zod for runtime schema validation |