Hunter's Handbook banner. A brown book logo with a purple bookmark and the words 'Hunter's Handbook' next to it.

A game-matched Twitch extension for Monster Hunter: World and Iceborne.


About

Hunter's Handbook is all the power of a search engine for Monster Hunter: World (and Iceborne) right in your Twitch stream. Search by name or location to find the monster you're seeking. You'll find general info as well as strategic stats like weaknesses and resistances.

Inspiration

Monster Hunter: World throws a ton of information at you (player and viewer alike) from the moment you jump into battle. There are so many different aspects and data points that inform and impact both strategy and outcome. We wanted to build something to empower both parties with the knowledge needed to navigate that landscape. Plus we thought the possibility for interaction was a cool bonus. Streamers can get a quick tip from their audience and viewers can make accurate suggestions and chat amongst themselves. All without leaving the channel.

How we built it

  • Bootstrapped with Create React App
  • Rescripts to rewire webpack to include custom settings to make the application do what we needed for it to work on Twitch
  • Discord, Twitch Dev Office Hours (Thanks Jameka!) and, of course, the ancient art of Google-fu
  • Paying careful attention to design docs and requirements
  • Late nights, early mornings, blood, sweat, tears

Challenges we ran into

  • Designing a responsive "web app" meant to live in an iFrame
  • Customizing webpack for Create React App without ejecting
  • Animations
  • Condensing several sources of data into a unified database

Accomplishments that we're proud of

We overcame all the hurdles above, harnessed all the resources available to us and pulled this project together. If you think about it, it's kind of amazing. We didn't know each other. We met on DevPost in the "looking for teammates" section. And just agreed to work together. We ended up meshing really well and just started brainstorming and ideating. And continued from there. Neither of us has ever built anything for Twitch before. We both have whole lives with obligations, jobs, etc. And we did it! We couldn't be prouder of each other and what we've done here. Honestly.

What we learned

First rule of understanding how webpack works? You don't understand how webpack works. XD

What's next for Hunter's Handbook

We actually have a long wishlist of cool features, including:

  • Keyboard navigability
  • Expand the handbook to include items, equipment, etc that aren't currently indexed
  • UI for searching for monsters per location (locations are indexed but the UI isn't there yet)
  • Slicker MHW-like animations (think: the green orb in the dark menus on MHW)
  • More icons and imagery! For example, elemental icons for resistances and weaknesses, ailments, etc to aid with quick scannability and overall readability
  • We're excited to see what features users are interested in!

Project status

v0.0.2 officially released!
Under active development as of 10/21/19

Installation

Installing the Hunter's Handbook extension on Twitch

  1. Go to https://www.twitch.tv/ext/ooxsaqhgb6q1ky0z15285umuhfnyg5-0.0.2
  2. Click "Install"
  3. Head to https://www.twitch.tv/<YOUR_TWITCH_USERNAME>/dashboard/extensions/manage and Hunter's Handbook should now be under the "Installed" column
  4. Click the "Activate" dropdown and select "Set as Overlay 1" in order to activate it on your channel
    > NOTE: You can only have 1 (one) overlay extension enabled on your Twitch channel at any given time. If you decide to activate Hunter's Handbook, any other overlay extension will likely be disabled as a result.
  5. That's all the config you need! Check out the usage instructions below if you need to know where to go from here!

How to Use

(Haven't installed it yet? Check the installation instructions above!)

Instructions:

  1. Hover over the Twitch video player to bring up the Hunter's Handbook search icon
    • It's the brown book with purple bookmark on the left side of the player (the one without the purple box around it)
  2. Click the Hunter's Handbook icon to bring up the search box
  3. Enter a search term (monster name or monster location) to bring up some results
  4. Click a result to bring up a "details" view for the selected monster

Usage Notes:

  • Use the white arrow in the top left to minimize Hunter's Handbook to the book icon state
  • If you mouse out of the Twitch player, Hunter's Handbook will fade into the background, quietly saving your place
  • Hunter's Handbook is "always on" on mobile (no hover or mouseover necessary to bring it up)

Attributions & Acknowledgements

We are super grateful to have found so many good resources that allowed us to get up and running relatively quickly.

Check out Hunter's Handbook on Twitch and GitHub

Share this project:

Updates