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
parent
68c2bce5f9
commit
93ddcaf807
275
INSTALLATION.md
Normal file
275
INSTALLATION.md
Normal file
@ -0,0 +1,275 @@
|
||||
# r/place - Collaborative Pixel Art Platform
|
||||
## Installationsanleitung für deinen Server
|
||||
|
||||
Diese Anleitung zeigt dir, wie du die r/place Webseite auf deinem eigenen Server installierst und startest.
|
||||
|
||||
## Systemanforderungen
|
||||
|
||||
- **Node.js 18 oder höher** (empfohlen: Node.js 20)
|
||||
- **PostgreSQL 12 oder höher** (optional, standardmäßig wird In-Memory-Storage verwendet)
|
||||
- **Git** (zum Herunterladen des Codes)
|
||||
- **Mindestens 1GB RAM**
|
||||
- **Port 5000** verfügbar (kann in der Konfiguration geändert werden)
|
||||
|
||||
## Schritt 1: Code herunterladen
|
||||
|
||||
```bash
|
||||
# Repository klonen (ersetze mit deiner Git-URL)
|
||||
git clone <deine-repository-url> r-place
|
||||
cd r-place
|
||||
```
|
||||
|
||||
## Schritt 2: Abhängigkeiten installieren
|
||||
|
||||
```bash
|
||||
# Node.js Pakete installieren
|
||||
npm install
|
||||
```
|
||||
|
||||
## Schritt 3: Konfiguration anpassen
|
||||
|
||||
Bearbeite die Datei `config.cfg` für deine Anforderungen:
|
||||
|
||||
```bash
|
||||
nano config.cfg
|
||||
```
|
||||
|
||||
**Wichtige Einstellungen:**
|
||||
```ini
|
||||
# Canvas Einstellungen
|
||||
CANVAS_WIDTH=100 # Breite in Pixeln
|
||||
CANVAS_HEIGHT=100 # Höhe in Pixeln
|
||||
|
||||
# Cooldown Einstellungen
|
||||
DEFAULT_COOLDOWN_SECONDS=5 # Wartezeit zwischen Pixel-Platzierungen
|
||||
|
||||
# Export Einstellungen
|
||||
AUTO_EXPORT_INTERVAL_SECONDS=60 # Export alle 60 Sekunden
|
||||
EXPORT_PATH=./exports/ # Speicherort für SVG-Exports
|
||||
|
||||
# Event Einstellungen (optional)
|
||||
ENABLE_AUTOMATIC_EVENTS=false # Automatische Events deaktiviert
|
||||
EVENT_DURATION_MINUTES=30 # Event-Dauer
|
||||
EVENT_INTERVAL_HOURS=6 # Abstand zwischen Events
|
||||
```
|
||||
|
||||
## Schritt 4: PostgreSQL Datenbank einrichten (optional)
|
||||
|
||||
**Wenn du eine persistente Datenbank möchtest:**
|
||||
|
||||
1. PostgreSQL installieren:
|
||||
```bash
|
||||
# Ubuntu/Debian
|
||||
sudo apt install postgresql postgresql-contrib
|
||||
|
||||
# CentOS/RHEL
|
||||
sudo yum install postgresql-server postgresql-contrib
|
||||
```
|
||||
|
||||
2. Datenbank erstellen:
|
||||
```bash
|
||||
sudo -u postgres createdb rplace
|
||||
sudo -u postgres createuser rplace_user
|
||||
sudo -u postgres psql -c "ALTER USER rplace_user PASSWORD 'dein_passwort';"
|
||||
sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE rplace TO rplace_user;"
|
||||
```
|
||||
|
||||
3. Umgebungsvariable setzen:
|
||||
```bash
|
||||
export DATABASE_URL="postgresql://rplace_user:dein_passwort@localhost:5432/rplace"
|
||||
```
|
||||
|
||||
**Ohne Datenbank:** Das System verwendet automatisch In-Memory-Storage (Daten gehen bei Neustart verloren).
|
||||
|
||||
## Schritt 5: Export-Verzeichnis erstellen
|
||||
|
||||
```bash
|
||||
mkdir -p exports
|
||||
chmod 755 exports
|
||||
```
|
||||
|
||||
## Schritt 6: Anwendung starten
|
||||
|
||||
### Entwicklungsmodus (empfohlen für Tests):
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Produktionsmodus:
|
||||
```bash
|
||||
# Frontend builden
|
||||
npm run build
|
||||
|
||||
# Server starten
|
||||
npm start
|
||||
```
|
||||
|
||||
## Schritt 7: Webseite aufrufen
|
||||
|
||||
Öffne deinen Browser und gehe zu:
|
||||
```
|
||||
http://localhost:5000
|
||||
```
|
||||
|
||||
Oder von einem anderen Computer:
|
||||
```
|
||||
http://deine-server-ip:5000
|
||||
```
|
||||
|
||||
## Schritt 8: Als Systemdienst einrichten (optional)
|
||||
|
||||
Für dauerhaften Betrieb erstelle einen systemd Service:
|
||||
|
||||
```bash
|
||||
sudo nano /etc/systemd/system/rplace.service
|
||||
```
|
||||
|
||||
Inhalt:
|
||||
```ini
|
||||
[Unit]
|
||||
Description=r/place Pixel Art Platform
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=www-data
|
||||
WorkingDirectory=/path/to/r-place
|
||||
Environment=NODE_ENV=production
|
||||
Environment=DATABASE_URL=postgresql://rplace_user:dein_passwort@localhost:5432/rplace
|
||||
ExecStart=/usr/bin/npm start
|
||||
Restart=on-failure
|
||||
RestartSec=10
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
```
|
||||
|
||||
Service aktivieren:
|
||||
```bash
|
||||
sudo systemctl daemon-reload
|
||||
sudo systemctl enable rplace
|
||||
sudo systemctl start rplace
|
||||
sudo systemctl status rplace
|
||||
```
|
||||
|
||||
## Schritt 9: Nginx Reverse Proxy (optional)
|
||||
|
||||
Für bessere Performance und HTTPS:
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/sites-available/rplace
|
||||
```
|
||||
|
||||
Inhalt:
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name deine-domain.de;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:5000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
|
||||
# WebSocket Support
|
||||
location /ws {
|
||||
proxy_pass http://localhost:5000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Aktivieren:
|
||||
```bash
|
||||
sudo ln -s /etc/nginx/sites-available/rplace /etc/nginx/sites-enabled/
|
||||
sudo nginx -t
|
||||
sudo systemctl reload nginx
|
||||
```
|
||||
|
||||
## Fehlerbehebung
|
||||
|
||||
### Port bereits in Verwendung:
|
||||
```bash
|
||||
# Anderen Port verwenden
|
||||
export PORT=3000
|
||||
npm start
|
||||
```
|
||||
|
||||
### Berechtigungsfehler:
|
||||
```bash
|
||||
# Dateiberechtigungen prüfen
|
||||
sudo chown -R www-data:www-data /path/to/r-place
|
||||
sudo chmod -R 755 /path/to/r-place
|
||||
```
|
||||
|
||||
### Logs überprüfen:
|
||||
```bash
|
||||
# Systemd Service logs
|
||||
sudo journalctl -u rplace -f
|
||||
|
||||
# Node.js direktes logging
|
||||
NODE_ENV=production npm start
|
||||
```
|
||||
|
||||
### WebSocket-Verbindung fehlschlägt:
|
||||
- Firewall-Regeln prüfen
|
||||
- Nginx WebSocket-Konfiguration überprüfen
|
||||
- Browser-Entwicklertools verwenden
|
||||
|
||||
## Backup und Wartung
|
||||
|
||||
### Automatisches Backup der Exports:
|
||||
```bash
|
||||
# Cron-Job für tägliches Backup
|
||||
0 2 * * * tar -czf /backup/rplace-exports-$(date +\%Y\%m\%d).tar.gz /path/to/r-place/exports/
|
||||
```
|
||||
|
||||
### Datenbank-Backup (falls PostgreSQL verwendet):
|
||||
```bash
|
||||
# Tägliches Datenbank-Backup
|
||||
0 3 * * * pg_dump rplace > /backup/rplace-db-$(date +\%Y\%m\%d).sql
|
||||
```
|
||||
|
||||
### Log-Rotation:
|
||||
```bash
|
||||
# Logs automatisch rotieren
|
||||
sudo nano /etc/logrotate.d/rplace
|
||||
```
|
||||
|
||||
## Performance-Optimierung
|
||||
|
||||
### Für viele gleichzeitige Nutzer:
|
||||
- Node.js Cluster-Modus verwenden
|
||||
- Redis für Session-Speicherung
|
||||
- PostgreSQL mit Connection Pooling
|
||||
- CDN für statische Dateien
|
||||
|
||||
### Monitoring:
|
||||
- PM2 für Process Management
|
||||
- Prometheus für Metriken
|
||||
- Grafana für Visualisierung
|
||||
|
||||
## Support
|
||||
|
||||
Bei Problemen:
|
||||
1. Logs überprüfen (`journalctl -u rplace`)
|
||||
2. Konfiguration kontrollieren (`config.cfg`)
|
||||
3. Netzwerk-Verbindung testen
|
||||
4. Browser-Entwicklertools verwenden
|
||||
|
||||
## Lizenz
|
||||
|
||||
Dieses Projekt steht unter der MIT-Lizenz.
|
||||
33
START.md
Normal file
33
START.md
Normal file
@ -0,0 +1,33 @@
|
||||
# r/place - Schnellstart
|
||||
|
||||
## Sofort starten (Entwicklung)
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Dann öffne: http://localhost:5000
|
||||
|
||||
## Konfiguration
|
||||
|
||||
Bearbeite `config.cfg` für:
|
||||
- Canvas-Größe (CANVAS_WIDTH, CANVAS_HEIGHT)
|
||||
- Cooldown-Zeit (DEFAULT_COOLDOWN_SECONDS)
|
||||
- Export-Intervall (AUTO_EXPORT_INTERVAL_SECONDS)
|
||||
|
||||
## Wichtige Dateien
|
||||
|
||||
- `config.cfg` - Alle Einstellungen
|
||||
- `exports/` - Automatische SVG-Exports
|
||||
- `INSTALLATION.md` - Detaillierte Server-Installation
|
||||
|
||||
## Features
|
||||
|
||||
✓ 32 offizielle r/place 2022 Farben
|
||||
✓ Koordinatensystem mit Achsenbeschriftung
|
||||
✓ Live-Mauskoordinaten
|
||||
✓ Automatische SVG-Exports
|
||||
✓ WebSocket Live-Updates
|
||||
✓ Cooldown-System
|
||||
✓ Deutsche Benutzeroberfläche
|
||||
@ -62,11 +62,9 @@ export function Canvas({
|
||||
}, [zoom]);
|
||||
|
||||
const canvasStyle = {
|
||||
gridTemplateColumns: `repeat(${canvasWidth}, ${pixelSize}px)`,
|
||||
gridTemplateRows: `repeat(${canvasHeight}, ${pixelSize}px)`,
|
||||
width: `${canvasWidth * pixelSize}px`,
|
||||
height: `${canvasHeight * pixelSize}px`,
|
||||
backgroundSize: `${pixelSize}px ${pixelSize}px`,
|
||||
position: 'relative' as const,
|
||||
};
|
||||
|
||||
return (
|
||||
@ -115,7 +113,7 @@ export function Canvas({
|
||||
|
||||
{/* Main Canvas */}
|
||||
<div
|
||||
className="grid border border-gray-400 relative"
|
||||
className="border border-gray-400 relative"
|
||||
style={canvasStyle}
|
||||
data-testid="pixel-canvas"
|
||||
>
|
||||
@ -126,13 +124,15 @@ export function Canvas({
|
||||
<div
|
||||
key={`${x}-${y}`}
|
||||
className={cn(
|
||||
"pixel cursor-pointer transition-all duration-100 hover:scale-110 hover:z-10 relative",
|
||||
"pixel cursor-pointer transition-all duration-100 hover:scale-110 hover:z-10 absolute",
|
||||
cooldownActive && "cursor-not-allowed"
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: pixelColor,
|
||||
width: `${pixelSize}px`,
|
||||
height: `${pixelSize}px`
|
||||
height: `${pixelSize}px`,
|
||||
left: `${x * pixelSize}px`,
|
||||
top: `${y * pixelSize}px`
|
||||
}}
|
||||
onClick={() => handlePixelClick(x, y)}
|
||||
onMouseEnter={() => handlePixelMouseEnter(x, y)}
|
||||
|
||||
1
exports/canvas-2025-08-18T12-32-01-722Z.svg
Normal file
1
exports/canvas-2025-08-18T12-32-01-722Z.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="#FFFFFF"/></svg>
|
||||
|
After Width: | Height: | Size: 120 B |
1
exports/canvas-2025-08-18T12-33-01-722Z.svg
Normal file
1
exports/canvas-2025-08-18T12-33-01-722Z.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="#FFFFFF"/></svg>
|
||||
|
After Width: | Height: | Size: 120 B |
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user