feat: redesign spaceship with retro arcade aesthetic

Replace simple geometric spaceship with detailed design featuring metallic
hull with 3D gradient effect, glowing cyan cockpit, extended wings with red
tips, animated engine glow, and triple exhaust flames. Remove debug console
logs from movement and rendering code.

src/useBoard/useBoard.ts

@@ -39,39 +39,96 @@ export function useBoard() {
     // Draw spaceship at player position (already in pixels)
     const spaceshipX = playerPosition.x;
     const spaceshipY = SPACESHIP_Y;
+
+    // Main body (sleek metallic hull)
+    ctx.fillStyle = "#4a90e2";
+    ctx.beginPath();
+    ctx.moveTo(spaceshipX, spaceshipY - 20); // nose
+    ctx.lineTo(spaceshipX - 12, spaceshipY + 8);
+    ctx.lineTo(spaceshipX + 12, spaceshipY + 8);
+    ctx.closePath();
+    ctx.fill();
+
+    // Body highlight (lighter blue for 3D effect)
+    ctx.fillStyle = "#7bb3ff";
+    ctx.beginPath();
+    ctx.moveTo(spaceshipX, spaceshipY - 20);
+    ctx.lineTo(spaceshipX - 6, spaceshipY + 8);
+    ctx.lineTo(spaceshipX + 6, spaceshipY + 8);
+    ctx.closePath();
+    ctx.fill();
+
+    // Cockpit (glowing cyan)
+    const gradient = ctx.createRadialGradient(spaceshipX, spaceshipY - 8, 2, spaceshipX, spaceshipY - 8, 6);
+    gradient.addColorStop(0, "#00ffff");
+    gradient.addColorStop(0.5, "#0088ff");
+    gradient.addColorStop(1, "#004488");
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(spaceshipX, spaceshipY - 8, 5, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Wings (left)
+    ctx.fillStyle = "#2a5a8a";
+    ctx.beginPath();
+    ctx.moveTo(spaceshipX - 12, spaceshipY);
+    ctx.lineTo(spaceshipX - 22, spaceshipY + 8);
+    ctx.lineTo(spaceshipX - 12, spaceshipY + 8);
+    ctx.closePath();
+    ctx.fill();
+
+    // Wings (right)
+    ctx.beginPath();
+    ctx.moveTo(spaceshipX + 12, spaceshipY);
+    ctx.lineTo(spaceshipX + 22, spaceshipY + 8);
+    ctx.lineTo(spaceshipX + 12, spaceshipY + 8);
+    ctx.closePath();
+    ctx.fill();
+
+    // Wing tips (glowing)
+    ctx.fillStyle = "#ff3366";
+    ctx.beginPath();
+    ctx.arc(spaceshipX - 22, spaceshipY + 8, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(spaceshipX + 22, spaceshipY + 8, 2, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Engine exhaust (animated glow)
+    const engineGradient = ctx.createRadialGradient(spaceshipX, spaceshipY + 10, 0, spaceshipX, spaceshipY + 10, 10);
+    engineGradient.addColorStop(0, "rgba(255, 255, 0, 0.8)");
+    engineGradient.addColorStop(0.3, "rgba(255, 150, 0, 0.6)");
+    engineGradient.addColorStop(0.6, "rgba(255, 50, 50, 0.3)");
+    engineGradient.addColorStop(1, "rgba(255, 0, 0, 0)");
+    ctx.fillStyle = engineGradient;
+    ctx.beginPath();
+    ctx.arc(spaceshipX, spaceshipY + 10, 8, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Exhaust flames (triple)
+    ctx.fillStyle = "#ff9900";
+    // Center flame
+    ctx.beginPath();
+    ctx.moveTo(spaceshipX - 2, spaceshipY + 10);
+    ctx.lineTo(spaceshipX, spaceshipY + 22);
+    ctx.lineTo(spaceshipX + 2, spaceshipY + 10);
+    ctx.closePath();
+    ctx.fill();
     
-    console.log('Rendering spaceship at X:', spaceshipX);
-
-    // Spaceship body (triangle pointing up)
-    ctx.fillStyle = "#00ff00";
-    ctx.beginPath();
-    ctx.moveTo(spaceshipX, spaceshipY - 15); // top point
-    ctx.lineTo(spaceshipX - 10, spaceshipY + 10); // left bottom
-    ctx.lineTo(spaceshipX + 10, spaceshipY + 10); // right bottom
-    ctx.closePath();
-    ctx.fill();
-
-    // Spaceship window (circle in center)
-    ctx.fillStyle = "#ffff00";
-    ctx.beginPath();
-    ctx.arc(spaceshipX, spaceshipY - 5, 3, 0, Math.PI * 2);
-    ctx.fill();
-
-    // Spaceship flames (small triangles at bottom)
-    ctx.fillStyle = "#ff6600";
     // Left flame
+    ctx.fillStyle = "#ff6600";
     ctx.beginPath();
-    ctx.moveTo(spaceshipX - 5, spaceshipY + 10);
-    ctx.lineTo(spaceshipX - 3, spaceshipY + 20);
-    ctx.lineTo(spaceshipX - 8, spaceshipY + 15);
+    ctx.moveTo(spaceshipX - 8, spaceshipY + 10);
+    ctx.lineTo(spaceshipX - 6, spaceshipY + 18);
+    ctx.lineTo(spaceshipX - 4, spaceshipY + 10);
     ctx.closePath();
     ctx.fill();
-
+    
     // Right flame
     ctx.beginPath();
-    ctx.moveTo(spaceshipX + 5, spaceshipY + 10);
-    ctx.lineTo(spaceshipX + 3, spaceshipY + 20);
-    ctx.lineTo(spaceshipX + 8, spaceshipY + 15);
+    ctx.moveTo(spaceshipX + 4, spaceshipY + 10);
+    ctx.lineTo(spaceshipX + 6, spaceshipY + 18);
+    ctx.lineTo(spaceshipX + 8, spaceshipY + 10);
     ctx.closePath();
     ctx.fill();
 

src/useCursor/useCursor.ts

@@ -77,11 +77,8 @@ export function useCursor() {
     const newX = startPixelX + (targetPixelX - startPixelX) * progress;
     pixelXRef.current = newX;
 
-    console.log('moveTowardTarget:', { currentPixelX, targetPixelX, progress, newX });
-
     if (progress >= 1) {
       pixelXRef.current = targetPixelX;
-      console.log('Reached target:', targetPixelX);
     }
   };
 

src/useGame/useGame.ts

@@ -21,16 +21,12 @@ export function useGame(
 
   // Game loop tick handler
   const handleGameLoopTick = (deltaTime: number, letters: any) => {
-    // If a letter just spawned, move ship to it
     if (letters.length > 0) {
       const letter = letters[0];
-      console.log('Setting target to:', letter.x);
       cursorManager.setTargetX(letter.x);
     }
     
-    // Move spaceship towards target
     cursorManager.moveTowardTarget(deltaTime);
-    
     renderBoardWrapped(letters);
   };