Improve canvas positioning and add detailed installation instructions

Remove grid layout for canvas and implement absolute positioning for pixels, along with a comprehensive installation guide for server deployment.

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/7Hr2NPt
This commit is contained in:
freesemar93
2025-08-18 12:33:44 +00:00
parent 68c2bce5f9
commit 93ddcaf807
6 changed files with 321 additions and 8 deletions

View File

@@ -2,7 +2,7 @@
## 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.
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 from the official r/place 2022 color palette (32 colors), place pixels with cooldown restrictions, and see other users' pixel placements instantly. The system includes coordinate system with axis labels, live mouse tracking, automatic SVG exports, and configuration through config.cfg file only.
## User Preferences
@@ -44,13 +44,16 @@ Language: German (Deutsch) - User communicates in German and prefers responses i
- WebSocket message handling for real-time updates without full data refetches
**User Experience Features**
- Interactive canvas with zoom and pan capabilities
- Interactive canvas with zoom and pan capabilities using absolute positioning (no CSS grid)
- 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
- Automatic SVG export every 60 seconds to exports/ directory
- Configuration exclusively through config.cfg file (no web interface)
- German user interface
- Toast notifications for user feedback
## External Dependencies