Improve combat and training HUD responsive fit

[Copilot]

Combat and training HUDs needed better fit, sizing, and placement across screenshot-analysis resolutions. This updates HUD layout synchronization and screenshot capture reliability for reviewing UI/UX regressions.

• HUD layout

  • Shared combat/training top and bottom HUD height ratios.
  • Aligned side-HUD offsets with the actual rendered top/bottom bars.
  • Centralized large-display HUD scale calculation for combat and training screens.

• Arena/content fit

  • Rebalanced desktop arena width budget so 3D content stays framed between side HUDs.
  • Updated combat/training layout calculations to reserve real HUD space instead of stale constants.

• Screenshot analysis

  • Hardened screenshot navigation to wait for DOM readiness.
  • Removed forced Brotli preview header that caused resource decode failures in Playwright.

export function getHUDPositionScale(
  screenSize: ScreenSize,
  isMobile: boolean,
): number {
  if (isMobile) return 1.0;
  return screenSize === "xlarge" ? 1.5 : screenSize === "large" ? 1.25 : 1.0;
}

https://github.com/user-attachments/assets/36545104-2a97-432f-9abe-15d41ee48dda

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[github-actions]

🎯 Accessibility Test Results

WCAG 2.1 Level AA Compliance Tests

• ✅ Color contrast validation (4.5:1 for text, 3:1 for UI)
• ✅ ARIA labels and roles validation
• ✅ Keyboard navigation structure validation
• ✅ Focus indicators validation
• ✅ Dialog and menu semantics validation
• ✅ Progress bars and timers validation

Components Tested

• Accessibility utilities (keyboard nav, focus management)
• Bilingual ARIA labels (Korean-English)
• Button groups (VirtualDPad pattern)
• Radiogroups (StanceWheel pattern)
• Dialogs (PauseMenu pattern)
• Progress bars (HealthBar, StaminaBar pattern)
• Timers (CombatTimer pattern)

Test Framework

• Tool: axe-core via jest-axe
• Standard: WCAG 2.1 Level AA
• Test Runner: Vitest

[Copilot]

Pull request overview

This PR improves combat and training HUD fit across responsive screenshot-analysis viewports by centralizing HUD scale/height calculations, aligning arena reservations with rendered HUD bars, and making screenshot navigation more reliable.

Changes:

• Added shared combat/training HUD height constants and a shared large-display HUD position scale helper.
• Updated combat/training layout hooks and HUD components to reserve actual top/bottom HUD space.
• Hardened screenshot capture navigation and removed the forced Brotli preview header.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
vite.config.ts	Removes forced Brotli preview response header.
src/utils/responsiveLayoutHelpers.ts	Adjusts desktop arena width budget and adds shared HUD scale helper.
src/utils/__tests__/responsiveLayoutHelpers.test.ts	Adds coverage for arena width budget and HUD scale helper.
src/types/constants/layout.ts	Adds shared combat/training HUD height ratio constants.
src/hooks/useHUDLayout.ts	Uses shared HUD height constants for side/top/bottom HUD offsets.
src/hooks/useHUDLayout.test.tsx	Adds direct alignment tests for combat and training HUD offsets.
src/hooks/__tests__/useHUDLayout.test.ts	Updates existing expectations for new combat HUD reservations.
src/components/screens/training/TrainingScreen3D.tsx	Reuses shared HUD position scale calculation.
src/components/screens/training/hooks/useTrainingLayout.ts	Reserves actual training HUD heights in training area bounds.
src/components/screens/training/hooks/useTrainingLayout.responsive.test.ts	Adds responsive training viewport fit tests.
src/components/screens/training/components/hud/TrainingBottomHUD.tsx	Uses shared training bottom HUD height constant.
src/components/screens/combat/hooks/useCombatLayout.ts	Reserves actual combat HUD heights in arena bounds.
src/components/screens/combat/hooks/useCombatLayout.test.ts	Updates combat arena positioning expectation.
src/components/screens/combat/components/hud/CombatTopHUD.tsx	Uses shared combat top HUD height constant.
src/components/screens/combat/components/hud/CombatRightHUD.test.tsx	Updates side HUD sizing expectations.
src/components/screens/combat/components/hud/CombatLeftHUD.test.tsx	Updates side HUD sizing expectations.
src/components/screens/combat/components/hud/CombatBottomHUD.tsx	Uses shared combat bottom HUD height constant.
src/components/screens/combat/CombatScreen3D.tsx	Reuses shared HUD scale and top HUD height for overlay offsets.
scripts/capture-screenshots.ts	Adds DOM-ready navigation helper with timeout for screenshot flows.

[github-actions]

📸 Automated UI Screenshots

📋 Screenshots Captured (8)

#	Screenshot
1	01-splash-screen.png - 01 splash screen.png
2	02-intro-screen-menu.png - 02 intro screen menu.png
3	03-intro-screen-archetype-selector.png - 03 intro screen archetype selector.png
4	04-controls-screen.png - 04 controls screen.png
5	05-philosophy-screen.png - 05 philosophy screen.png
6	06-training-screen.png - 06 training screen.png
7	07-combat-screen-practice.png - 07 combat screen practice.png
8	08-combat-screen-versus.png - 08 combat screen versus.png

📦 Download Screenshots

📥 Download all screenshots from workflow artifacts

Screenshots are preserved as workflow artifacts for 30 days.

---

🤖 Generated by Playwright automation