Martin/Collaborative-pixel-art
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix pixel persistence and improve mobile UX

Browse source 
- Fix pixel data storage to include user information (userId, username, timestamp)
- Enhance zoom controls to center properly without drift
- Improve mobile modal centering with flexbox layout
- Add dynamic backend URL detection for network access
- Fix CORS configuration for development mode
- Add mobile-optimized touch targets and safe area support

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
martin 2025-08-22 20:14:48 +02:00
commit 415919b3e1
14 changed files with 172 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/app/page.tsx
View file

@ -127,25 +127,27 @@ export default function HomePage() {
const handleZoomIn = useCallback(() => {
const newZoom = Math.min(viewport.zoom * 1.2, 5.0);
// Zoom towards center of screen
// Zoom towards center of viewport (canvas center)
if (typeof window !== 'undefined') {
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const screenCenterX = window.innerWidth / 2;
const screenCenterY = window.innerHeight / 2;
// Calculate world position at center of screen
const pixelSize = 32 * viewport.zoom; // BASE_PIXEL_SIZE * current zoom
const worldX = (centerX + viewport.x) / pixelSize;
const worldY = (centerY + viewport.y) / pixelSize;
// Calculate what canvas coordinate is currently at screen center
const BASE_PIXEL_SIZE = 32;
const currentPixelSize = BASE_PIXEL_SIZE * viewport.zoom;
const newPixelSize = BASE_PIXEL_SIZE * newZoom;
// Calculate new viewport position to keep center point stable
const newPixelSize = 32 * newZoom;
const newViewportX = worldX * newPixelSize - centerX;
const newViewportY = worldY * newPixelSize - centerY;
const canvasCenterX = (screenCenterX + viewport.x) / currentPixelSize;
const canvasCenterY = (screenCenterY + viewport.y) / currentPixelSize;
// Calculate new viewport to keep same canvas point at screen center
const newViewportX = canvasCenterX * newPixelSize - screenCenterX;
const newViewportY = canvasCenterY * newPixelSize - screenCenterY;
setViewport({
zoom: newZoom,
x: Math.max(0, newViewportX),
y: Math.max(0, newViewportY),
x: newViewportX,
y: newViewportY,
});
} else {
setZoom(newZoom);
@ -155,25 +157,27 @@ export default function HomePage() {
const handleZoomOut = useCallback(() => {
const newZoom = Math.max(viewport.zoom / 1.2, 0.1);
// Zoom towards center of screen
// Zoom towards center of viewport (canvas center)
if (typeof window !== 'undefined') {
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const screenCenterX = window.innerWidth / 2;
const screenCenterY = window.innerHeight / 2;
// Calculate world position at center of screen
const pixelSize = 32 * viewport.zoom; // BASE_PIXEL_SIZE * current zoom
const worldX = (centerX + viewport.x) / pixelSize;
const worldY = (centerY + viewport.y) / pixelSize;
// Calculate what canvas coordinate is currently at screen center
const BASE_PIXEL_SIZE = 32;
const currentPixelSize = BASE_PIXEL_SIZE * viewport.zoom;
const newPixelSize = BASE_PIXEL_SIZE * newZoom;
// Calculate new viewport position to keep center point stable
const newPixelSize = 32 * newZoom;
const newViewportX = worldX * newPixelSize - centerX;
const newViewportY = worldY * newPixelSize - centerY;
const canvasCenterX = (screenCenterX + viewport.x) / currentPixelSize;
const canvasCenterY = (screenCenterY + viewport.y) / currentPixelSize;
// Calculate new viewport to keep same canvas point at screen center
const newViewportX = canvasCenterX * newPixelSize - screenCenterX;
const newViewportY = canvasCenterY * newPixelSize - screenCenterY;
setViewport({
zoom: newZoom,
x: Math.max(0, newViewportX),
y: Math.max(0, newViewportY),
x: newViewportX,
y: newViewportY,
});
} else {
setZoom(newZoom);
@ -281,8 +285,8 @@ export default function HomePage() {
{/* Connection Status */}
{!isConnected && (
<ErrorBoundary>
<div className="fixed top-6 left-1/2 transform -translate-x-1/2 z-50">
<div className="bg-red-500/90 backdrop-blur-md rounded-xl px-4 py-2 text-white text-sm">
<div className="fixed top-4 sm:top-6 left-1/2 transform -translate-x-1/2 z-50">
<div className="bg-red-500/90 backdrop-blur-md rounded-xl px-3 sm:px-4 py-2 text-white text-xs sm:text-sm font-medium">
Connecting...
</div>
</div>