Fix pixel persistence, improve mobile

backend/src/services/CanvasService.ts

@@ -12,14 +12,21 @@ import { config } from '../config/env';
 export class CanvasService {
   private readonly keyPrefix = config.redis.keyPrefix;
 
-  async placePixel(canvasId: string, x: number, y: number, color: string, userId: string): Promise<boolean> {
+  async placePixel(canvasId: string, x: number, y: number, color: string, userId: string, username?: string): Promise<boolean> {
     try {
       const { chunkX, chunkY } = getChunkCoordinates(x, y);
       const chunkKey = `${this.keyPrefix}canvas:${canvasId}:chunk:${getChunkKey(chunkX, chunkY)}`;
       const pixelKey = getPixelKey(x % CANVAS_CONFIG.DEFAULT_CHUNK_SIZE, y % CANVAS_CONFIG.DEFAULT_CHUNK_SIZE);
       
-      // Simple approach without pipeline for better compatibility
-      await redisClient.hSet(chunkKey, pixelKey, color);
+      // Store pixel with user information as JSON
+      const pixelData = {
+        color,
+        userId,
+        username: username || userId,
+        timestamp: Date.now()
+      };
+      
+      await redisClient.hSet(chunkKey, pixelKey, JSON.stringify(pixelData));
       
       // Update chunk metadata
       await redisClient.hSet(`${chunkKey}:meta`, {
@@ -53,9 +60,16 @@ export class CanvasService {
         return null;
       }
 
-      const pixels = new Map<string, string>();
-      for (const [key, color] of Object.entries(pixelData)) {
-        pixels.set(key, String(color));
+      const pixels = new Map<string, any>();
+      for (const [key, data] of Object.entries(pixelData)) {
+        try {
+          // Try to parse as JSON (new format with user info)
+          const parsedData = JSON.parse(String(data));
+          pixels.set(key, parsedData);
+        } catch {
+          // Fallback for old format (just color string)
+          pixels.set(key, { color: String(data), userId: null, username: null, timestamp: 0 });
+        }
       }
 
       return {