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

About — Status — Install — Usage — Authors — Support — License — Attributions

---

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

Follow these instructions to install the Hunter's Handbook extension on your Twitch channel

1. Go to https://www.twitch.tv/ext/ooxsaqhgb6q1ky0z15285umuhfnyg5-0.0.2
2. Click "Install" in the top right corner
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 if you need to know where to go from here!

Back to top

Using the dev server

Follow these instructions to run the Hunter's Handbook React app locally on your machine

1. Clone this repo or fork it
2. Navigate to project directory in your terminal
3. Run yarn install or npm install in your terminal to install dependencies
4. Run yarn start or npm run start in your terminal to start the dev server

How to Use

(Haven't installed it yet? Check here)

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)

Authors

Kevon Eaglin 💻

Matt 💻

Support

You can reach out to us with any support needs, concerns, or even feedback. Email us here!

License

This project is licensed under AGPL 3.0. The gist is that you're free to modify it, distribute it, and even use it commercially, given certain conditions are met. See LICENSE for more detailed information.
Additionally, you may need to get permission from the creators/owners of the images we've used here (under fair use) if you intend to sell your derivative work(s).

Attributions & Acknowledgements

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

• MHWDB monster list and the bulk of our data
• IGN's monster list, icons and images
• Fandom's list, monster info, and icons
• Create React App
• Rescripts allowed us to rewire CRA to make a Twitch-compatible React app
• Twitch Dev's Bot Commander
• Handbook Icon: Rafael Chiamenti
• Monster Hunter World for border imagery

Top — About — Status — Install — Usage — Authors — Support — License — Attributions