Enhance Hero Details with Defense, Ability and Video Content

[patinen]

✨ Enhancement Description

• What is it?: Update the hero detail content to include separate Defense and Ability descriptions and support optional Defense and Ability videos. The videos should be embedded from YouTube. The catchphrase is no longer needed and should not be included in the updated hero presentation.
• Why improve it?: The current hero data model and page do not support all of the content planned for the updated hero presentation. Adding these fields allows hero-specific gameplay information and demonstration videos to be managed through Directus instead of being hard-coded or omitted.

---

🌟 Benefits of the Enhancement

• User Experience: Players get clearer information about each hero's defensive characteristics and special ability, with optional videos demonstrating both in practice.
• Project Impact: Keeps hero content centralized in Directus and extends the existing heroApi structure without introducing separate static content handling or storing video files in the project.

---

🛠️ Proposed Implementation

• Technical Details:

  • Add localized fields for Defense description and Ability description to the hero translation data in Directus.
  • Add optional fields for:
    • Defense video URL
    • Ability video URL
  • Video fields should contain YouTube URLs or video IDs rather than uploaded video files.
  • Update the hero types and heroApi field selection/mapping to include the new content.
  • Update the hero detail UI to render:
    • Defense description
    • Defense video
    • Ability description
    • Ability video
  • Both videos must use conditional rendering and should not leave empty containers when no URL has been assigned.
  • Convert or validate YouTube URLs as needed before using them in the embedded player.
  • Remove the catchphrase from the hero detail presentation if it is still present in the current UI or data mapping.
  • Reuse an existing YouTube/video embed component if the project already provides one.

• Implementation Plan:

  1. Add the Defense description, Ability description, Defense video URL and Ability video URL fields in Directus.
  2. Extend Hero / HeroWithGroup types with the new properties.
  3. Update heroApi fields and hero mapping to return the new Directus data.
  4. Add the Defense and Ability sections to the hero detail UI.
  5. Embed the corresponding YouTube video when a valid URL exists.
  6. Verify the page works correctly for heroes with no videos, one video or both videos configured.

---

📎 Additional Information

• Links & References:

  • Hero data/API: src/entities/Hero/model/heroApi.ts
  • Hero types: src/entities/Hero/types/hero.ts
  • Directus documentation: https://directus.io/docs/
  • YouTube embedded player documentation: https://developers.google.com/youtube/player_parameters

• Mockups/Examples:

  • Follow the latest Hero page design in Figma for placement and styling of the Defense and Ability sections and their videos.