Skip to content

Instantly share code, notes, and snippets.

@mschneider247
Last active September 5, 2024 19:11
Show Gist options
  • Save mschneider247/542c037f398bee7986e8eafb7e60a579 to your computer and use it in GitHub Desktop.
Save mschneider247/542c037f398bee7986e8eafb7e60a579 to your computer and use it in GitHub Desktop.
Fantasy Top HUD

Fantasy Top HUD

Introduction

The Fantasy Top HUD is a Chrome extension designed to act as a heads-up display (HUD) for users interacting with Fantasy Top cards. The extension enhances gameplay by providing real-time metadata when a user hovers over a Fantasy Top card. By extracting a unique player handle from the card image or related html, the extension fetches and displays relevant player data from the Fantasy Top Pro API or as a backup a Google Sheets database.

Objectives

The objective of this project is to provide a seamless experience for Fantasy Top users, allowing them to quickly access player statistics and metadata on hover. The extension should be lightweight, customizable, and easily expandable for future features. Success will be measured by the accuracy and speed of data retrieval, as well as user satisfaction with the display and customization options.

Feature List for V1, MVP

Feature 1: Menu Options for Metadata

Description: Users will have the ability to customize what metadata is displayed when they hover over a Fantasy Top card.

Details:

  • The menu should be accessible via a dropdown in the extension’s toolbar.
  • Users can select from preset metadata options such as:
  • Average score from past tournaments, EV. Specifically: Total all the points the hero has earned across tournaments(currently 20) then divide by the number of tournaments where the player's score was greater than zero or non null. In other words tournaments where the hero didn't participate or earned a zero will not be counted against their average.
  • Running 7 day EV average
  • Running 14 day EV average
  • Running 21 day EV average
  • The menu should be customizable, allowing users to add or remove specific metadata options. For V1, customized choices will not persist, will only be held in state for current session.
  • A default configuration should be provided for first-time users.

Feature 2: Extract Unique Handle from Image

Description: The extension will extract the unique player handle from a Fantasy Top card when the user hovers over the card image.

Details:

  • The image data will be parsed on a mouse hover event to extract the unique handle Id needed for DB query
  • Handles are assumed to be consistent in their format (e.g., a specific font and placement on the card), however better methods for grabbing the unique handle id should be kept in mind. If the format changes, an update to the extraction algorithm will be required.
  • If the handle is not found or an error occurs, an error message will be displayed in the popup.
  • The extension should handle multiple hover events gracefully, ensuring that new data is fetched only if the handle changes.

Feature 3: Fantasy Top Pro API Integration

Description: The extension will use the Fantasy Top Pro API to access a shared database of player data based on the extracted handle.

Details:

  • The Fantasy Top Pro API will return data in a currently unknown json format. Understand how that data is being returned and parse it into the necessary metrics
  • Only one method is required: to calculate total average EV
  • 7d 14d and 21d running averages should already be part of hero data
  • Authentication with use of an API Key
  • Currently unknown how API key is passed to backend. Possibly as part of the url, body of the message, or one time auth?
  • The data should be fetched asynchronously to ensure the UI remains responsive.

API authentication:

  • The extension should use a provided API key for authentication with the Fantasy Top Pro API
  • API keys should be stored securely using environment variables Error handling:
  • If there’s an issue retrieving data (e.g., network failure or invalid handle), the extension should display an appropriate error message.
  • A retry mechanism should be implemented for intermittent network errors.

Technical Specifications

Technology Stack

Frontend: HTML, CSS, JavaScript(ES6 and React)
Backend: No backend required, as all data will be fetched client-side using the Fantasy Top Pro API.
Authentication: API key for secure access to Fantasy Top Pro.

Data Security All data fetched from Fantasy Top Pro will be read-only. No sensitive personal information should be handled or displayed. Ensure the extension does not expose API keys or sensitive information in the client-side code.

Timeline and Milestones

Sept 6th: Technical specifications for V1 ready
Sept 13th: V1 MVP, demo of basic functionality

Design Mockups:

mockup

menuMock

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment