Giter Club home page Giter Club logo

twitch-hdt-frontend's Introduction

Twitch Extension for Hearthstone Deck Tracker

This repository contains the official Twitch extension for Hearthstone Deck Tracker.

Follow the setup guide to add the extension to your channel.

Features

  • Twitch overlay extension for Hearthstone streams
  • Automatic deck list and game state from Hearthstone Deck Tracker (Windows)
  • Fully configurable by the broadcaster using the Twitch Dashboard
  • Viewers can hover over minions, heroes, hero powers, weapons, secrets and quests
  • Movable deck list with hoverable cards and "Copy Deck" button for viewers
  • Card statistics panel powered by HSReplay.net
  • High resolution card art

Supported browsers

  • Internet Explorer 11
  • Last 2 Chrome versions
  • Last 2 Firefox versions
  • Safari 9

Development

  • Install dependencies: yarn install
  • Run development server: yarn dev
  • Release build: yarn build
  • (Re)format code: yarn format
  • Lint code: yarn lint

How it works

System Diagram

Testing

  • Clone twitch-ext-pubsub-simulator
  • Clone hdt-twitch-test-data
  • Create an twitch extension in your account with types: Video - FullScreen, Mobile
  • Make sure that Testing Base URI is https://localhost:8080/ in Assets-Hosting tab
  • Make sure that Video - Fullscreen Viewer Path is viewer.html in Assets-Hosting tab
  • Enable the extension using the Test Extension on your channel option in Status tab
  • In a live stream, request a fake board state using twitch-ext-pubsub-simulator/index.js using:
    • -f as ..\hdt-twitch-test-data\pubsub\v2\hdt-payload-dump-4.json
    • --channel as your userId
    • --extension as the extension client id
    • --secret as the extension base64 secret

Related projects

License

Copyright ยฉ HearthSim - All Rights Reserved

twitch-hdt-frontend's People

Contributors

azeier avatar beheh avatar edipo2s avatar jleclanche avatar jonysegal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

twitch-hdt-frontend's Issues

Default to a deck name if not set

Some streamers (like RDU) do not name their decks:

grafik

We can do better! Either default to a name ("Hunter Deck") or figure out the archetype (scalable?).

Display localized card assets in Twitch HDT extension

As a user viewing a Twitch Hearthstone stream in which the streamer has configured the Twitch HDT extension, I would like to see card metadata / assets in my native language, so that I can better enjoy the game that I am watching.

This story is an attempt to make some small localization enhancements to the user experience without making major investment in localizing the Twitch extension. It seems like this is possible by making react-hs-components locale-aware and pull the appropriate assets from hearthstonejson.com.

This story is complete when:

  • The Card component in react-hs-components can be configured (via a property) with a "Hearthstone locale," e.g., "enUS" or "frFR"
  • The Twitch HDT extension accepts the viewer's preferred language (supplied via Twitch) and maps it to a Hearthstone locale, falling back to "enUS" when the language cannot be detected or mapped.
  • The extension initializes hearthstonejson-client with the configured locale
  • The extension renders the Card and CardTile components by passing the respective language or data in the language to the components
  • These enhancements are covered by unit tests

Add a Broadcaster Dashboard Panel

It should confirm to broadcasters that we're receiving data from HDT simply by subscribing to PubSub. It might also contain a setting to adjust the Stream delay, without having to go the full configuration page.

Deck Code Chatbot Integration?

Suggestion from customer:

The overlay is super awesome and really great for streamers, but in my opinion it is missing some way for chatbots to provide the deck code through a command. Some people just have extensions disabled, others are on devices that don't support the extensions and then there are of course people who just don't know how to use the extension and blindly type the !decklist command in hopes of getting a code.

Would it be possible to get some type of custom api going so the bots can automatically fetch the current deck's code from it, without mods having to change the decklist command or copy the code manually every time, similar to how hey can grab a youtube channel's latest video for example? Or any other way you can think of how that could be possible?

Add hover areas for cards in hand

We want viewers to be able to hover cards in hand. Unfortunately we need to work around the player controls limiting us from using the top/bottom few dozen pixels of the stream, but apart from that we should be fine.

Write game state manager

Time-aware game state manager, similar to Joust, can accept game state payloads and play it back (asynchronously).

Add more features to Extension Overlay

  • Hover over Weapons
  • Hover over Hero Powers
  • Hover over Heroes
  • Hover over Quests
  • Hover over Secrets
  • Hover over Decklist (in branch)
  • Copy Deckstring
  • Hover over Deck to show Deck Depth / Hand Size
  • Hover for quest progress
  • Hover cards in hand (needs experimentation due to blocked hover area)
  • Hover over in-video decklist (needs position information via protocol)

Add a way to change the extension language independently of Twitch

Twitch users currently do not realize they have to change the Twitch site language in order to change the card language. This is not explained anywhere and isn't intuitive at all.
Furthermore, it's a common configuration for a viewer to have their UI in a non-english language but still be used to Hearthstone in English and there is no way to support this at this time.

Adding a language selector to allow viewers to change the extension's language fixes this.

This story is complete once:

  • A language selector is available somewhere obvious-but-nonintrusive in the UI (eg. in the Deck titlebar)
  • The language selector allows viewers to update the extension's Hearthstone language on a semi-permanent basis (eg. in a cookie) to any of the supported languages
  • A Twitch extension release has been made with the added functionality

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.