bdejesus / xiv-bars

The source code for the Final Fantasy XIV W Cross Hotbar (WXHB) Planning and Simulation Tool built in NextJS.

XIV Bars – A Final Fantasy XIV Cross Hotbar Layout Planner

https://www.xivbars.com

Welcome to XIV Bars! This is the source code for the Final Fantasy XIV (FFXIV) Cross Hotbar (XHB) planning tool. This is a passion project created for the purpose of serving the FFXIV community who may have use for a way to port hotbar layouts from the web into the game. It is built in NextJS and is continually being updated.

---

Table of Contents

• How to Contribute
  • Reporting Issues
  • Requesting Features
  • Contributing Code
  • Donate
• Dev Environment
  • Requirements
  • Configuration
  • Running the app
  • Running Tests

How to Contribute

This project is updated frequently with fixes and new features. I kind of use this project as a space to try new things with javascript and web design, so there may be some lack of structure when updates are deployed live.

Reporting Issues

1. You can submit bug reports from the Issues page.
2. Make sure that the issue you're submitting doesn't already exist.
3. Include step-by-step instructions on how to reproduce, as well as the operating system (OSX, Windows, etc.) and browser (Chrome, Firefox, etc.) you're using when encountering the issue.

Requesting Features

Submit and discuss feature requests from the Feature Requests page.

Contributing Code

Find an Issue to Work On

If you're interested in contributing code, take a look at open issues and create a pull request that addresses it. I'll review when I get the chance, but please be patient.

• View Open Issues
• View the Web Project
• Setting up a Dev Environment

Donate

If you find this tool helpful, please donate. Donations go towards keeping the app servers and other resources up so that this tool is available to everyone for free.

• Donate

---

Setting up a Dev Environment

Requirements

• Node.js and Yarn (or NPM)
• PostgreSQL

Configuration

The .env.example file contains all the environment variables used by the app. Copy it into the .env file.

> cp ./.env.example ./.env

Authentication

To be able to authenticate with the local app, you'll need to set it up with Discord (OAuth2 Documentation).

DISCORD_ID=
DISCORD_SECRET=
JWT_SECRET=

Database URL

The postgresql database url.

DB_URL=

Running the app

Install dependencies

> yarn install

Fetch and compile static data from XIVAPI

> yarn build:data

Running the app locally

> yarn dev

Once the app is running in development mode, open http://localhost:3000 to view it in the browser.

Running Tests

> yarn test

xiv-bars's Issues

I can select between different languages

I18n Support for additional languages

NextJS i18n - https://nextjs.org/docs/pages/building-your-application/routing/internationalization

Languages:

1. Japanese
2. German
3. French
4. Portuguese
5. Korean

PCT and VPR

Does the site still support the custom actions you setup for SGE and RPR before EW launch? Is there anything a contributor might do to help you?

General actions not displaying when using the url link.

Hello,

Placing general actions ie "Limit Break" adds g3 to the url. However when using the link created the General action will not be displayed.

Also it would be wonderful to add a potion icon to the list of available actions, as pots are frequently used and position if pots on ones Hotbar is important for ease of use during ones opener.
Thank you for your consideration.

Best,
Kashi

Reaper tooltips are wrong

Most of the reaper tool tips are wrong and showing the Paladin ability names and abilities.

SAM (DPS) Missing Action: Fuga

Feature Idea

It would be nice to have a button that hides obsolete skills that were upgraded by traits. For example it would hide Berserk, Inner Beast, Steel Cyclone, and Raw Intuition on Warrior.

Site seems to be down - Application Error

Describe the bug
Tried to use site/application and all I get is an error screen.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://xivbars.bejezus.com/
2. See error

Expected behavior
The site to work

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome and Microsoft Edge
• Version: Latest version

Additional context
If you can't see the screen shot it says:
"Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail"
Might've just been a bad commit/merge. Just letting you know what's going on

Missing Class Job Actions

Describe the bug
Multiple classes are missing their job actions, presuming this is not due to the Endwalker expansion, i.e. this is not about Reaper or Sage

To Reproduce
Machinist
Dark Knight
etc...
missing job actions

Expected behavior
Bard for example, has all its class's Job Actions at upper-left, as do some other classes

My saved layouts are sorted by most recently updated

Can't Publish Bars

Hiya. I don't seem to be able to publish any bars I create even though I've not got any saved yet.

The button is greyed out here:

When I inspect the element in Chrome it has title="You’ve reached your maximum alotted layouts. Delete others to publish new ones." but it doesn't tell me this anywhere on the page itself.

As you can see, I have nothing saved/published yet:

I can copy the URL for the bars and bookmark it though.

First time writing one of these, sorry if there's any information I missed!

XHB labeling for WXHB/Expanded

Is your feature request related to a problem? Please describe.
Not a problem, just informational

Describe the solution you'd like
Right now the "WXHB" section lists sets 1,2,3, (+ to 8).
First, I need to point out that WXHB specifically means Double Cross Hotbar (In Japanese, "W" and "Double" are both pronounced "Da-buru" so that's how the naming for W = Double came to be). The regular cross hotbar sets are just called XHB.
But the feature request would be to label a set as being part of WHXB or Expanded. This would help people visualize the setup better.

Describe alternatives you've considered
The alternative is to explain this outside of the site.

Additional context
WXHB (double tap) and Expanded (L2+R2) fundamentally change how a person accesses their hotbars, so a visual indicator of which sets are being used as part of WXHB and Expanded would make it more shareable so other people viewing the linked set can understand what is going on.

Clone saved layout

First of all, thanks for the awesome tool! 🙂 It's been really helpful for homogenizing my layouts across different jobs in the same role, and for experimenting with ways to work around the awkwardness of dpad targeting + dpad hotbar.

ANYWAY the actual FR: I mostly use the site for tracking / comparing changes to my hotbar layouts that I'm testing out, so it'd be nice to have a way to duplicate a saved layout to a new slot & then edit that while preserving the old one.

As an alternative, a way to get the unsaved/logged-out URL corresponding to a saved layout would also work since you could grab that URL, edit from that, and save it as a new layout.

I'd offer to throw together a PR for this myself, but I have almost no web dev (or js in general) experience, sorry 🙁

Macro Button issue

Describe the bug
When the macro button is pressed, it doesn't work correctly and doesn't display over the XHB icons
there is also no obvious option to close it besides refreshing the page

To Reproduce
Steps to reproduce the behavior:

1. Go to a XHB page (https://xivbars.bejezus.com/job/SGE/2536 for example)
2. Click on the macro button
3. See error

Expected behavior
the macro popup appears above everything or on top of the left side with all the info

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information if relevant):

• OS: Windows 10
• Chrome Version 123.0.6312.106 (Official Build) (64-bit)

Additional context or notes
this issue is not exclusive to XHB, but it's where i encountered it first

Allow browsing other peoples' configurations

It would be very handy to be able to brows other peoples' submissions to see what strategies they might be using.
What would make this extra powerful would be an option to thumbsup/thumbsdown and to sort the output by likes.
Not sure how you'd present this in the UI.

Add Reaper and Sage as supported Jobs.

The embargo has been lifted yesterday. I assume this is already in the works (or planned, at least), so please ignore if so!

Add potions to the list of available actions

Is your feature request related to a problem? Please describe.

It would be wonderful to add a potion icon to the list of available actions, as pots are frequently used and position if pots on ones Hotbar is important for ease of use during ones opener.

Job Actions Sorting

when i try to look at the job actions in the list i can loose track of which one is which, since i'm used to the "compact view" of the menu in FFXIV

it'd be cool if we could sort the actions like the compact view does, removing lower level actions that get replaced and even showing actions that combo together

having them sorted the way they are in the menu would be enough, at least for me, in a 3 wide grid instead of the current 4

Feature Request: Generate Macros

If possible, could you add the ability to generate in-game macros from the planner layout?

Option for visual hotbar layout style?

When planning out our hotbars, we often may wish to do so based on how our hotbars will look in game.
The hotbar options allows each bar to be 12x1 (the default), 6x2, 4x3, 3x4, 2x6, and 1x12
Currently the only hotbar layout you display is the 12x1.
Would there be any change that your online tool could be updated to allow us to also change the layout of each hotbar to one of the in game supported layout, so as to help us visually see how our actions would be positioned next to each other please?

Only first 7 RPR/SGE skills have tooltips

To Reproduce

1. Choose Reaper
2. Hover on the Infernal Slice icon.
3. The tooltip for "Shot" is shown.
   (But the generated macro is ok)

Expected behavior
Infernal Slice tooltip should show; or at least the name Infernal Slice.

Screenshots

Desktop (please complete the following information):

• OS: Win10
• Browser Chrome
• Version 95.0.4638.69

Additional context
Add any other context about the problem here.

TypeError: Cannot read properties of undefined (reading 'Name')

TypeError: P.default(pages/job/[id]/index)
Ongoing
Unhandled – Cannot read properties of undefined (reading 'Name')

webpack://xiv-bars/pages/job/[id]/index.tsx in P.default at line 41:38

https://bejezus.sentry.io/issues/4639700444/events/3e7e11474b0c4c28aceb126ef0ffb824/

Ability list not showing up

The ability list on the left no longer shows up for me at all.

Fix code scanning alert - Incomplete string escaping or encoding

Tracking issue for:

• https://github.com/bdejesus/xiv-bars/security/code-scanning/3

DoH Skills

Was wondering if the DoH are not implemented yet or I'm missing something? Thx

Update Sentry npm package

Clicking my layouts shows an error message

The error shown is:
APPLICATION ERROR: A CLIENT-SIDE EXCEPTION HAS OCCURRED (SEE THE BROWSER CONSOLE FOR MORE INFORMATION).
I'm wondering if it might be that there are too many sets saved since I didn't "publish" them all as I went through them and then tried to at the end, and it capped the number of sets? I tried erasing cookies and history and cache, but it didn't do anything. I would like to be able to delete some sets off my account but the error shows up when I go to that page.

Editing a layout is not working

Describe the bug
When editing an existing layout, making any changes to the slotted actions will reload the page as a new layout instead of editing.

To Reproduce
Steps to reproduce the behavior:

1. Go to an existing layout
2. Click on the "Edit" button
3. Slot a new action
4. The layout will switch to a "New Layout" state instead of "Editing"

Expected behavior
The view should persist when in the editing state.

Unable to edit after publishing

the edit button is subdued and won't let me make changes to layouts.

SGE and RPR?

Hello, are there any plans for the near future to include Sage and Reaper jobs in the website?
Thank you

Setup for Actions, Companions, System Settings, etc.

I love this tool! My only complaint and thing that would be a great addition to it would be the inclusion of all FFXIV elements that are able to be added to Hotbars.

What I mean is adding the icons from the player actions menu or any other menu like system configuration, character configuration, etc.

Since this is built using the FFXIV API, from what I understand anyways, all those icons are already available.

I also add items like food and potions, stuff like that to my Hotbars but those are things I can live without bein added to the tool. With so many items it would be tie consuming for the developers to include them and I’m sure most users wouldn’t mind not having them included.

I included a picture of what some of my Hotbars look like. Sorry for the resolution as I’m currently playing on my PS4 and not at a computer to take better screenshots.

As you can see in the screenshots I use a lot of the system icons and a lot of macros icons added to my Hotbars and it’s becoming really common for a lot of players to use these types of UI setups. Configurations like the “collapsing or adaptive” UI Hotbars are, IMO, commonplace.

When I start a new job class this tool really helps out a lot. It’s also great for saving references to past setups or sharing setups with friends easily.

I’m not saying to include the various ways each Hotbar can be configured, though it would be a nice gesture, but the icons that are in them. Sure some players use different setups other that the default “12x1” row setup but doing the positioning of the icons on the screen is something we, the users can do ourselves.

Refactoring role actions to be fetched via XIVAPI

I've implemented getting role actions from API Instead of using ROLE_ACTION_IDS table.
Also I've added PvP common actions. (Still printed as Role Actions in app though)

You may try XIVAPI queries of those.

• PvE: https://xivapi.com/search?indexes=Action,CraftAction&filters=ClassJobCategory.SAM=1,IsRoleAction=1
• PvP: https://xivapi.com/search?indexes=Action,CraftAction&filters=ClassJobCategoryTargetID=85,IsPlayerAction=1

Note that ClassJobCategoryTargetID=85 may or may not be changed in future patches.

Toggling between XHB and Hotbar layouts causes an error

Describe the bug
Toggling between the XHB and Hotbar layouts when actions are slotted results in an error.

To Reproduce
Steps to reproduce the behavior:

1. Create a new layout (or edit an existing one)
2. Slot any action to the layout
3. Switch to the Hotbars layout and then back to the XHB layout
4. See the error "Something went wrong"

Additional context
This seems to be related to lib/utils/slots#setActionsByGroup where the slotRow may not exist between the XHB or Hotbar layout resulting in an undefined error.

A possible cause is when switching between XHB and HB, the slots URL param gets set to undefined -- you'll see the s1 URL param get set to a blank string (i.e.: ...&s1=)

Improved Usernav Component Layout

Support Mobile Viewports

The UI should be usable inside of mobile viewports (mobile devices with small screens such as phones)

ToDo:

• Layout design mockups
• Media query styles for mobile devices
• Ensure functionality is maintained with touch interactions (translate mouse clicks into taps)

Additional XHB Layout Configuration

...with the cross hotbar, it has a version where the inner two crosses are swapped in the settings and kind of makes it hard to set them up when your brain thinks one thing and the app needs another.

• #70

Layouts not saving or updating

I have attempted this on multiple browsers with all extensions disabled (Chrome, Firefox, Opera).

2 days ago, I was able to successfully create 2 layouts. I did not publish them, but saved as drafts. Today I went to create a 3rd layout, After placing my abilities, naming the layout (no description given so it should save as draft), I get a red banner saying layout could not be saved. If I press the save button again, I get a green layout save successful banner. When I check my layouts, the layout is not there.

This happens no matter which class I choose and also if I attempt to update my previous 2 saved layouts.

Sage & Reaper

Hoping can be updated to show new jobs Sage and Reaper.

https://gamerescape.com/2021/10/13/final-fantasy-xiv-endwalker-hands-on-with-sage/
https://gamerescape.com/2021/10/13/final-fantasy-xiv-endwalker-hands-on-with-reaper/

Display Layout properties as tags

Layout details and summaries should display some visual representation of their configurations (PvP vs PvE, XHB vs HB, etc) to provide more information on their intended usage.

• Selected JobClass abbreviation
• PvE / PvP (dependent on PvP actions support)
• HB / XHB layouts
• PS vs XBOX button labels? (maybe not necessary)

Role Color/jobstone icons

when i browse my configs they're all white text on black backgrounds and it takes me an embarassing amount of time to find which one is which

it'd be cool if the icons could be colored based on role (blue,green,red) or based on the Soul Stones

Additional context
Add any other context or screenshots about the feature request here.

here's a mockup i quickly and jankily made

Cannot save layout

I have a bunch of saved urls from before the update was made to save layouts to your linked discord account. I'd like to save all of these layouts to my account, rather than create them all from scratch, but when I click the "publish" button to save one of these existing layouts, I get "Couldn’t save layout. Please try again."

The Export to Macro modal displays too large of a gap between textarea elements

Describe the bug
When exporting to Macros, the modal popup with the macro textarea elements are separated by too large of a spatial gap. This occurs when displaying 2 textareas.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://xivbars.bejezus.com/job/BRD/1240
2. Click on the Export to Macros button
3. See visual bug

Expected behavior
The textarea elements should be left justified.

Screenshots

Additional context
The ExportToMacros.module.scss that contains the css that control these styles have the justify-content rule set to space-between this should probably be set to flex-start to left justify, but retaining some smaller gap between elements might need some additional adjustments.

Add toggle ability names display

I don't know all of the abilities by their icons yet. Is it possible to add a toggle that will add the ability name below its respective icon?

DoH classes display incomplete skill lists

By my count, all crafting classes essentially have the same 34 skills (although one is only for Specialists and several have different icons). The planner currently only shows ten skills for all DoH classes.

The ten you choose seem to all share icons; however, not all cross-class skills still appear. For one, Name of the Elements displays while Brand of the Elements does not.

As a quick query of the database you're drawing from, a la

search?filters=ClassJob.ID=10&string=

seems to show all of the skills, something must be going wrong with fetching them.

Not updated for Reaper/Sage

And I think it should be :D

Lots of ability details out now https://www.reddit.com/r/ffxiv/comments/qib72w/endwalker_new_jobs_including_smn_hotbar_planning/

Saving or Editing a layout is presented in a consistent and intuitive UI

Application error when linking to Sage hotbar

Describe the bug
This is reported in the Chrome console when trying to use this link generated by the app.

The chrome extension references appear to be the extension DelugeSiphon, and I would doubt are related.

To Reproduce
Steps to reproduce the behavior:

1. Make a sage build using Hotbars
2. Click "Copy URL"
3. Attempt to view copied URL
4. See error

Expected behavior
The action bars to load as intended.

Screenshots
Already provided above

Desktop (please complete the following information):

• OS: Windows 11 Pro 64bit
• Browser: Chrome
• Version: Version 96.0.4664.45 (Official Build) (64-bit)

Missing Sleep spell

Describe the bug
The Sleep spell is missing in the the Role Actions list for Magical Range DPS jobs (BLM, SMN, RDM, BLU).

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome Version 109.0.5414.74 (Official Build) (64-bit)

I am shown an informative 404/500 page if I run into a problem

I can toggle between PvP and PvE

Allow toggling between PvP and PvE actions.

• Add PvP toggle button with Icon in ControlBar component for new/edit views
• Toggle between PvP and PvE actions
• Save/capture PvP/PvE value to Layout
• Render a PvP/PvE indicator or tag in the layout card and view

Clicking on the "Share URL" button causes hotbar rows to disappear when working on a New Layout

Describe the bug
When working on a New Layout, clicking on the "Share URL" button causes (cross)hotbar rows to disappear.

To Reproduce
Steps to reproduce the behavior:

1. Go to a 'New Layout'
2. Click on the 'Share URL' button
3. See all but the first row of hotbars disappear

Expected behavior
Displayed hotbar rows should stay visible and not be affected by this action.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
This seems to be related to the URL params being updated w/ the encodedSlots being set to undefined

Related Issue: #172