/horizoverlay

A simple horizontal damage meter overlay for Final Fantasy XIV. It currently shows player dps, damage %, hps, max hit, encounter duration and total dps. It's super configurable! It supports English, Portuguese, Chinese (S/T) and French.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

H O R I Z O V E R L A Y

URL CHANGED AGAIN, PLEASE UPDATE TO https://bsides.github.io/horizoverlay

URL for ActWebSocket Plugin: Self host it!

A simple horizontal damage meter overlay for Final Fantasy XIV. It currently shows player dps, damage %, hps, encounter duration and total dps. Based on this post on reddit.

Horizontal overlay by https://www.twitch.tv/yuu_tayuun

Example setup

This is how it should be showing for you after setup with everything checked Horizoverlay

Install

Please notice the URL has changed from v1!

  1. Please, be sure you are running version 0.3.3.13 or higher of hibiyasleep Overlay plugin: https://github.com/hibiyasleep/OverlayPlugin/releases | Version x64 | Version x86 |

  2. Just paste this url into the overlay's url field: https://bsides.github.io/horizoverlay and click in the Reload Overlay button. You should see something like this:

First Screen

  1. Now would be the right time to resize the window to something like 70% of your screen's width.

Resize

  1. Right click in the text to open Settings!

Settings If you can't see the Settings window, just alt tab until you do.

  1. To tweak the settings without having to hit something, toggle Setup Mode. With it enabled you can see all changes you do live. All settings are saved automatically.

Congratulations, you have it installed and setup.

Install locally

  1. Install Yarn https://yarnpkg.com/en/
  2. Download the project
  3. Install serve yarn global add serve
  4. Go to the terminal (cmd.exe) and to the project's folder
  5. Once inside the project's folder, type yarn, wait for it to finish, then yarn build
  6. Still inside the project's folder, type serve docs.
  7. Leave the terminal open!
  8. Then inside ACT, the url would be http://localhost:5000

Screenshots

Color by Role and @bmwang's

All By Role By Role @bmwang

Black & White

Black & White

Minimalist AKA version 1

Minimalist

Suggestion, bug report, FAQ

Please, open an issue. Also don't forget to search if it's alerady down here in the known issue section ;)

Contributing

You are welcome to open a PR with anything. Just please try to follow the mindset of what is done.

The project uses:

  • React
  • React Router
  • ES6
  • Prettier with ESLint (react defaults) to autoformat with ease

💲💲💲 If you're looking to donate, please do so at my Patreon page 👍

Credits & other Magicked KnickerKnacks

It's based of the amazing work of this repo that tries to compile a whole bunch of Overlay themes together. Thanks to its repo's testing.js file (and /u/rdmty), I was able to mock the data that ACT throws and built this theme.

The background image from the config window was made by Richard Tabor and was taken from Subtle Patterns.

Thanks to @bmwang for introducing more options and color themes.

A lot of inspiration from Kagerou overlay by @hibiyasleep.

A very special thanks for @yorushika to translating into Simplified / Traditional Chinese!!!

A very special thanks for @moondark to translating into French!!!

This project was bootstrapped with Create React App.

Special thanks to my awesome boyfriend, who test everything everytime I ask ❤