Discover Your Nen Type through the Water Divination Quiz

Introduction

HxH Arena is a Hunter x Hunter fan web application that lets users discover their Nen type through an interactive Water Divination quiz. Inspired by the iconic Nen system from the anime and manga, the app presents 15 randomly selected scenario-based questions from a pool of 20, with shuffled answer orders each run, and scores users across all six canonical Nen types: Enhancer, Transmuter, Emitter, Conjurer, Manipulator, and Specialist.

Key Features

  • Water Divination Quiz: A randomized personality-style quiz with scenario-based questions that determine your Nen type
  • Nen Aptitude Radar Chart: A visual score breakdown across all 6 Nen types using Chart.js
  • Nen Affinity Chart: Displays type compatibility and opposition based on the canon Nen wheel
  • Staged Result Reveal: Type name, description, and details animate in sequence for dramatic impact
  • Character Profiles: Clickable character cards showing abilities on the result page
  • Share Result Card: Download or copy results as a PNG image, shareable via URL parameter
  • Dark/Light Theme: Toggle persisted via localStorage
  • Mobile Responsive: Compact layout optimized for small screens

Tech Stack

  • Nuxt 4 (SPA mode) as the application framework
  • Vue 3 with Composition API for the UI layer
  • Tailwind CSS for styling
  • Chart.js + vue-chartjs for radar chart visualization
  • html2canvas for share card PNG generation
  • Vitest for unit testing (146 tests covering data integrity, quiz logic, and sharing)
  • TypeScript throughout the codebase

Disclaimer

Hunter x Hunter is the intellectual property of Yoshihiro Togashi / Shueisha. This is a fan project, not affiliated with or endorsed by the rights holders. Character and ability data sourced from Hunterpedia.