diff --git a/langs/en-ca.json b/langs/en-ca.json index 0a10f5a..fb9462f 100644 --- a/langs/en-ca.json +++ b/langs/en-ca.json @@ -5,17 +5,29 @@ "name": "Chat Background", "hint": "(v13+) Adds a background to the chat tab of the right-hand sidebar." }, + "hotbarButtonGap": { + "name": "Hotbar Button Gap", + "hint": "(v13+) Allows changing the amount of space between the hotbar buttons." + }, + "hotbarButtonSize": { + "name": "Hotbar Button Size", + "hint": "(v13+) Changes the size of the hotbar buttons to a size you prefer." + }, "preventUserConfigOpen": { "name": "Prevent Auto User Config", "hint": "(v13+) Prevents Foundry from opening the User Configuration when a player loads into the world." }, + "repositionHotbar": { + "name": "Reposition Hotbar", + "hint": "(v13+) This moves the hotbar into a position similar to where it was in ~v11, making it so that it doesn't move when you expand or collapse the right-hand sidebar." + }, "startSidebarExpanded": { "name": "Start Sidebar Expanded", "hint": "(v13+) Starts the right-hand sidebar expanded when logging in." }, "startingSidebarTab": { "name": "Starting Sidebar Tab", - "hint": "(v13+) Determines what sidebar tab to have selected initially when loading Foundry", + "hint": "(v13+) Determines what sidebar tab to have selected initially when loading Foundry.", "choices": { "blank": "No Custom Default Tab" } diff --git a/module/oft.mjs b/module/oft.mjs index ce3fafd..b3af40b 100644 --- a/module/oft.mjs +++ b/module/oft.mjs @@ -1,18 +1,18 @@ // Settings import { chatSidebarBackground } from "./settings/chatSidebarBackground.mjs"; +import { hotbarButtonGap } from "./settings/hotbarButtonGap.mjs"; +import { hotbarButtonSize } from "./settings/hotbarButtonSize.mjs"; import { preventUserConfigOpen } from "./settings/preventUserConfigOpen.mjs"; +import { repositionHotbar } from "./settings/repositionHotbar.mjs"; import { startingSidebarTab } from "./settings/startingSidebarTab.mjs"; import { startSidebarExpanded } from "./settings/startSidebarExpanded.mjs"; -Hooks.once(`init`, () => { - - // Sidebar Settings +Hooks.on(`init`, () => { chatSidebarBackground(); startSidebarExpanded(); startingSidebarTab(); - - // App Settings + hotbarButtonSize(); + hotbarButtonGap(); + repositionHotbar(); preventUserConfigOpen(); - - // Dev Settings }); diff --git a/module/settings/hotbarButtonGap.mjs b/module/settings/hotbarButtonGap.mjs new file mode 100644 index 0000000..d4c9286 --- /dev/null +++ b/module/settings/hotbarButtonGap.mjs @@ -0,0 +1,39 @@ +import { __ID } from "../consts.mjs"; +import { Logger } from "../utils/Logger.mjs"; + +const key = `hotbarButtonGap`; + +export function hotbarButtonGap() { + + const prevented = Hooks.call(`${__ID}.preventSetting`, key); + if (!prevented) { + Logger.log(`Preventing setting "${key}" from being registered`); + return; + }; + + // #region Registration + Logger.log(`Registering setting: ${key}`); + document.body.classList.add(`${__ID}-${key}`); + game.settings.register(__ID, key, { + name: `OFT.setting.${key}.name`, + hint: `OFT.setting.${key}.hint`, + scope: `user`, + type: new foundry.data.fields.NumberField({ + min: 0, + max: 16, + step: 1, + }), + default: 8, + config: true, + requiresReload: false, + onChange: (newValue) => { + document.body.style.setProperty(`--hotbar-button-gap`, `${newValue}px`); + }, + }); + // #endregion Registration + + // #region Implementation + const buttonGap = game.settings.get(__ID, key); + document.body.style.setProperty(`--hotbar-button-gap`, `${buttonGap}px`); + // #endregion Implementation +}; diff --git a/module/settings/hotbarButtonSize.mjs b/module/settings/hotbarButtonSize.mjs new file mode 100644 index 0000000..2ec067f --- /dev/null +++ b/module/settings/hotbarButtonSize.mjs @@ -0,0 +1,39 @@ +import { __ID } from "../consts.mjs"; +import { Logger } from "../utils/Logger.mjs"; + +const key = `hotbarButtonSize`; + +export function hotbarButtonSize() { + + const prevented = Hooks.call(`${__ID}.preventSetting`, key); + if (!prevented) { + Logger.log(`Preventing setting "${key}" from being registered`); + return; + }; + + // #region Registration + Logger.log(`Registering setting: ${key}`); + document.body.classList.add(`${__ID}-${key}`); + game.settings.register(__ID, key, { + name: `OFT.setting.${key}.name`, + hint: `OFT.setting.${key}.hint`, + scope: `user`, + type: new foundry.data.fields.NumberField({ + min: 45, + max: 75, + step: 5, + }), + default: 60, // this is the value Foundry uses + config: true, + requiresReload: false, + onChange: (newValue) => { + document.body.style.setProperty(`--hotbar-size`, `${newValue}px`); + }, + }); + // #endregion Registration + + // #region Implementation + const hotbarSize = game.settings.get(__ID, key); + document.body.style.setProperty(`--hotbar-size`, `${hotbarSize}px`); + // #endregion Implementation +}; diff --git a/module/settings/repositionHotbar.mjs b/module/settings/repositionHotbar.mjs new file mode 100644 index 0000000..50883e9 --- /dev/null +++ b/module/settings/repositionHotbar.mjs @@ -0,0 +1,45 @@ +import { __ID } from "../consts.mjs"; +import { Logger } from "../utils/Logger.mjs"; + +const key = `repositionHotbar`; + +export function repositionHotbar() { + + const prevented = Hooks.call(`${__ID}.preventSetting`, key); + if (!prevented) { + Logger.log(`Preventing setting "${key}" from being registered`); + return; + }; + + // #region Registration + Logger.log(`Registering setting: ${key}`); + game.settings.register(__ID, key, { + name: `OFT.setting.${key}.name`, + hint: `OFT.setting.${key}.hint`, + scope: `user`, + type: Boolean, + default: true, + config: true, + requiresReload: true, + }); + // #endregion Registration + + // #region Implementation + if (game.settings.get(__ID, key)) { + Logger.debug(`setting:${key} | Repositioning hotbar`); + document.body.classList.add(`oft-${key}`); + + const container = document.createElement(`div`); + container.id = `oft-repositionHotbar-container`; + + const playersPlaceholder = document.getElementById(`players`); + const hotbarPlaceholder = document.getElementById(`hotbar`); + + container.insertAdjacentElement(`afterbegin`, hotbarPlaceholder); + container.insertAdjacentElement(`afterbegin`, playersPlaceholder); + + const uiPosition = document.getElementById(`ui-left-column-1`); + uiPosition.insertAdjacentElement(`beforeend`, container); + }; + // #endregion Implementation +}; diff --git a/styles/hotbarButtonGap.css b/styles/hotbarButtonGap.css new file mode 100644 index 0000000..e328edd --- /dev/null +++ b/styles/hotbarButtonGap.css @@ -0,0 +1,10 @@ +.oft-hotbarButtonGap #hotbar { + &.sm #action-bar { + width: calc((var(--hotbar-size) * 5) + (var(--hotbar-button-gap) * 4)); + } + + #action-bar { + row-gap: min(var(--hotbar-button-gap, 8px), 8px); + column-gap: var(--hotbar-button-gap, 8px); + } +} diff --git a/styles/hotbarButtonSize.css b/styles/hotbarButtonSize.css new file mode 100644 index 0000000..87904ef --- /dev/null +++ b/styles/hotbarButtonSize.css @@ -0,0 +1,7 @@ +/* +Making it so that the hotbar uses the style attribute from +"document.body" instead of the one the application assigns +*/ +.oft-hotbarButtonSize #hotbar { + --hotbar-size: unset; +} diff --git a/styles/main.css b/styles/main.css index 079b84a..7c87f40 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,4 +1,7 @@ @import url("./chatSidebarBackground.css"); +@import url("./hotbarButtonGap.css"); +@import url("./hotbarButtonSize.css"); +@import url("./repositionHotbar.css"); /* Make the chat sidebar the same width as all the other tabs */ .chat-sidebar:not(.sidebar-popout) { width: unset; } diff --git a/styles/repositionHotbar.css b/styles/repositionHotbar.css new file mode 100644 index 0000000..73f8458 --- /dev/null +++ b/styles/repositionHotbar.css @@ -0,0 +1,14 @@ +#oft-repositionHotbar-container { + display: flex; + flex-direction: row; + gap: 12px; + align-items: end; + + #hotbar { + margin-bottom: 0; + + &.min { + transform: none; + } + } +}