From 04332effa6842955253aa1948bd62dd65b606d98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Mon, 3 Nov 2025 22:24:47 +0000 Subject: [PATCH] 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 | 109 ++++++++++++++++++++++++++++--------- src/useCursor/useCursor.ts | 3 - src/useGame/useGame.ts | 4 -- 3 files changed, 83 insertions(+), 33 deletions(-) diff --git a/src/useBoard/useBoard.ts b/src/useBoard/useBoard.ts index 65c3934..170fbfc 100644 --- a/src/useBoard/useBoard.ts +++ b/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(); diff --git a/src/useCursor/useCursor.ts b/src/useCursor/useCursor.ts index b696252..9889ae1 100755 --- a/src/useCursor/useCursor.ts +++ b/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); } }; diff --git a/src/useGame/useGame.ts b/src/useGame/useGame.ts index 1727944..3eae488 100755 --- a/src/useGame/useGame.ts +++ b/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); };