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); };