// ==UserScript==
// @name MWI Loadout Manager
// @namespace https://github.com/tobytorn
// @description Setup loadout according to Combat Simulator export files
// @author tobytorn
// @match https://www.milkywayidle.com/*
// @match https://test.milkywayidle.com/*
// @version 1.0.1
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @supportURL https://github.com/tobytorn/mwi-loadout-manager
// @license MIT
// @require https://unpkg.com/jquery@3.7.0/dist/jquery.min.js
// ==/UserScript==
(function () {
'use strict';
const MISC_SVG = '/static/media/misc_sprite.2864433e.svg';
const ITEMS_SVG = '/static/media/items_sprite.8134f2ed.svg';
const ABILITIES_SVG = '/static/media/abilities_sprite.7b4605a0.svg';
const CSS = `
.lmInput {
color: var(--color-text-dark-mode);
background: var(--color-midnight-700);
border: none;
padding: 4px;
resize: none;
outline: none;
}
.lmError {
color: var(--color-warning-hover);
display: none;
}
.lmItemIcon {
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
}
.lmEnhancementLevel {
z-index: 1;
position: absolute;
top: 1px;
left: 1px;
color: var(--color-orange-400);
text-shadow: 1px 1px 3px var(--color-midnight-500);
font-size: 12px;
font-weight: 500;
line-height: 12px;
}
.lmPanelEntry {
margin: 0 auto 8px auto;
width: fit-content;
}
.CombatZones_consumablesAndAbilitiesContainer__rb6Fi.lmSeen > *,
.Party_consumablesAndAbilitiesContainer__2ff8f.lmSeen > * {
margin-left: auto;
}
.lmCombatEntry {
align-self: center;
padding: 8px;
}
.lmCombatEntry.lmEntryCorrect::after {
content: 'Correct';
font-size: 14px;
color: var(--color-jade-600);
}
.lmCombatEntry.lmEntryWrong::after {
content: 'Wrong';
font-size: 14px;
color: var(--color-warning);
}
.lmSetTriggers {
margin-bottom: 8px;
}
.lmNoPick {
margin-bottom: 4px;
text-align: center;
color: var(--color-warning);
}
.lmModalContent {
width: 350px;
height: 550px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.lmModalTitle {
font-size: 16px;
font-weight: 500;
line-height: 20px;
}
.lmModalTabContainer {
flex-shrink: 0;
flex-grow: 0;
margin: 0;
overflow: hidden;
width: 100%;
border-bottom: 2px solid var(--color-divider);
display: flex;
letter-spacing: 0.02857em;
}
.lmTabButton {
color: var(--color-text-dark-mode);
font-size: 14px;
font-weight: 500;
min-height: 32px;
height: 32px;
margin: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 6px;
cursor: pointer;
}
.lmTabButton:hover {
background: var(--color-midnight-300);
}
.lmTabButton.lmActive {
background: var(--color-space-600);
}
.lmModalTabContent {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
gap: 4px;
text-align: left;
overflow: auto;
}
.lmModalTabContent:not(.lmActive) {
display: none;
}
#lmSelectTab .lmSelectTabNote {
font-style: italic;
}
#lmLoadoutList {
display: flex;
flex-direction: column;
gap: 8px;
}
#lmLoadoutList .lmLoadout {
border-radius: 4px;
border: 2px solid var(--color-midnight-700);
background: var(--color-midnight-700);
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
}
#lmLoadoutList .lmLoadout:hover {
background-color: var(--color-midnight-300);
}
#lmLoadoutList .lmLoadout.lmActive {
border: 2px solid var(--color-neutral-200);
}
#lmLoadoutList .lmLoadoutNameContainer {
display: flex;
gap: 4px;
}
#lmLoadoutList .lmLoadoutName {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#lmLoadoutList .lmLoadout.lmActive .lmLoadoutName {
white-space: normal;
}
#lmLoadoutList .lmLoadoutStar {
height: 20px;
width: 20px;
flex-shrink: 0;
}
#lmLoadoutList .lmLoadout:not(.lmCurrent) .lmLoadoutStar {
display: none;
}
#lmLoadoutList .lmLoadoutSummary {
display: grid;
gap: 4px;
grid-template-columns: repeat(6, 45px);
}
#lmLoadoutList .lmLoadoutSummary:empty::after {
content: 'This exactly matches your current loadout';
font-style: italic;
white-space: nowrap;
color: var(--color-market-buy);
}
#lmLoadoutList .lmLoadout.lmActive .lmLoadoutSummary {
display: none;
}
#lmLoadoutList .lmLoadoutDetails {
display: grid;
grid-template-columns: repeat(3, 45px);
gap: 4px;
justify-content: center;
}
#lmLoadoutList .lmLoadout:not(.lmActive) .lmLoadoutDetails {
display: none;
}
#lmLoadoutList .lmLoadoutSlot {
height: 45px;
width: 45px;
background-color: var(--color-midnight-500);
border-radius: 4px;
border: 1px solid var(--color-space-300);
position: relative;
}
#lmLoadoutList .lmTriggerIcon {
display: none;
z-index: 1;
position: absolute;
left: 50%;
bottom: -1px;
transform: translate(-50%, 50%);
width: 16px;
height: 16px;
}
#lmLoadoutList .lmTriggerIcon svg {
filter: brightness(0) saturate(100%) invert(25%) sepia(95%) saturate(3196%) hue-rotate(346deg) brightness(93%) contrast(84%);
}
#lmLoadoutList .lmTriggerIcon > div {
position: absolute;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--color-midnight-500);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
#lmLoadoutList .lmLoadoutSlot.lmBadTriggers .lmTriggerIcon {
display: block;
}
#lmLoadoutList .lmLoadoutDetails .lmLoadoutSlot.lmBad {
border: 3px solid var(--color-warning);
}
#lmLoadoutList .lmLoadoutActions {
display: flex;
gap: 4px;
}
#lmLoadoutList .lmDelete {
background: var(--color-market-sell);
}
#lmLoadoutList .lmDelete:hover {
background: var(--color-market-sell-hover);
}
#lmLoadoutList .lmDelete::after {
content: 'Delete';
}
#lmLoadoutList .lmDelete.lmConfirming {
background: var(--color-disabled);
}
#lmLoadoutList .lmDelete.lmConfirming::after {
content: 'Confirm Delete';
}
#lmLoadoutList .lmDelete.lmConfirming.lmConfirmed {
background: var(--color-warning);
}
#lmLoadoutList .lmDelete.lmConfirming.lmConfirmed:hover {
background: var(--color-warning-hover);
}
#lmLoadoutList .lmLoadout:not(.lmActive) .lmLoadoutActions {
display: none;
}
#lmLoadoutList .lmLoadout.lmCurrent .lmSelect,
#lmLoadoutList .lmLoadout.lmCurrent .lmDelete {
display: none;
}
#lmLoadoutList .lmLoadout:not(.lmCurrent) .lmDeselect {
display: none;
}
#lmImportTab textarea {
flex-grow: 1;
}
.EquipmentPanel_playerModel__3LRB6 > .lmHighlight .ItemSelector_itemSelector__2eTV6,
.AbilitySlot_abilitySlot__22oxh.lmHighlight .AbilitySlot_slot__3BSD4,
.ConsumableSlot_consumableSlotContainer__2DwgD.lmHighlight .ConsumableSlot_itemSelectorContainer__RODer {
position: relative;
}
.EquipmentPanel_playerModel__3LRB6 > .lmHighlight .ItemSelector_itemSelector__2eTV6::after,
.ConsumableSlot_consumableSlotContainer__2DwgD.lmHighlight .ConsumableSlot_itemSelectorContainer__RODer::after,
.AbilitySlot_abilitySlot__22oxh.lmHighlight .AbilitySlot_slot__3BSD4::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
border: 3px solid var(--color-warning);
pointer-events: none;
}
.lmHighlightTriggers .CombatTriggersSetting_combatTriggersSetting__380iI {
filter: brightness(0) saturate(100%) invert(25%) sepia(95%) saturate(3196%) hue-rotate(346deg) brightness(93%) contrast(84%);
}
.lmPick {
position: relative;
grid-area: 1 / 1;
}
.lmPick.lmPickSecond {
grid-column-start: 2;
}
.lmPick::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
border: 3px solid var(--color-jade-600);
pointer-events: none;
}
.lmCombatUnitWrongLoadout::after {
content: 'Wrong Loadout';
width: 100%;
height: 20px;
font-size: 14px;
font-weight: 500;
color: var(--color-warning);
}
`;
const PANEL_ENTRY_HTML = '<div class="lmPanelEntry"><div class="lmEntry Button_button__1Fe9z">Loadout</div></div>';
const COMBAT_ENTRY_HTML = '<div class="lmCombatEntry"><div class="lmEntry Button_button__1Fe9z">Loadout</div></div>';
const SET_TRIGGERS_BUTTON_HTML =
'<div class="lmSetTriggers Button_button__1Fe9z Button_fullWidth__17pVU">Apply Selected Loadout</div>';
const NO_PICK_NOTE_HTML = '<div class="lmNoPick">Item not owned for the selected loadout</div>';
const LOADOUT_HTML = `
<div class="lmLoadout">
<div class="lmLoadoutNameContainer">
<div class="lmLoadoutName"></div>
<div class="lmLoadoutStar">
<svg width="100%" height="100%">
<use href="${MISC_SVG}#elite_2_star"></use>
</svg>
</div>
</div>
<div class="lmLoadoutSummary"></div>
<div class="lmLoadoutDetails"><!-- equipments and abilities --></div>
<div class="lmLoadoutDetails"><!-- consumables --></div>
<div class="lmLoadoutActions">
<div class="lmSelect Button_button__1Fe9z Button_fullWidth__17pVU">Highlight</div>
<div class="lmDelete Button_button__1Fe9z Button_fullWidth__17pVU"></div>
<div class="lmDeselect Button_button__1Fe9z Button_fullWidth__17pVU">Clear highlight</div>
</div>
</div>
`;
const LOADOUT_ITEM_HTML = `
<div class="lmLoadoutSlot">
<div class="lmItemIcon">
<svg width="100%" height="100%"><use href=""></use></svg>
</div>
<div class="lmEnhancementLevel"></div>
<div class="lmTriggerIcon">
<div><!-- a small dot to make the center of this icon opaque --></div>
<svg width="100%" height="100%"><use href="${MISC_SVG}#settings"></use></svg>
</div>
</div>
`;
const SETTING_MODAL_HTML = `
<div id="lmSettingModal" class="Modal_modalContainer__3B80m">
<div class="Modal_background__2B88R"></div>
<div class="Modal_modal__1Jiep">
<div class="lmModalContent">
<div class="lmModalTitle">Loadout Manager</div>
<div class="lmModalTabContainer">
<div class="lmTabButton lmActive" data-lm-tab="lmSelectTab">Loadouts</div>
<div class="lmTabButton" data-lm-tab="lmImportTab">Import</div>
<div class="lmTabButton" data-lm-tab="lmCurrentTab">Current</div>
</div>
<div id="lmSelectTab" class="lmModalTabContent lmActive">
<div class="lmSelectTabNote">Select a loadout to compare with your current one</div>
<div id="lmLoadoutList"></div>
</div>
<div id="lmImportTab" class="lmModalTabContent">
<div>Loadout name:</div>
<input class="lmInput" type="text" maxlength="100">
<div class="lmError" data-lm-field="name"></div>
<div>Combat simulator export file:</div>
<textarea class="lmInput"></textarea>
<div class="lmError" data-lm-field="data"></div>
<div id="lmImportSave" class="Button_button__1Fe9z Button_success__6d6kU Button_fullWidth__17pVU">Save</div>
</div>
<div id="lmCurrentTab" class="lmModalTabContent">
<div>Enter a name to save your current loadout:</div>
<input class="lmInput" type="text" maxlength="100">
<div class="lmError" data-lm-field="name"></div>
<div id="lmSaveCurrent" class="Button_button__1Fe9z Button_success__6d6kU Button_fullWidth__17pVU">Save</div>
</div>
</div>
<div class="Modal_closeButton__3eTF7">
<div role="img" alt="Close" class="Icon_icon__2LtL_">
<svg width="100%" height="100%"><use href="${MISC_SVG}#close_menu"></use></svg>
</div>
</div>
</div>
</div>
`;
const ITEM_HRID_PREFIX = '/items/';
const ABILITY_HRID_PREFIX = '/abilities/';
const LOCATION_HRID_PREFIX = '/item_locations/';
const ITEM_HREF_PREFIX = `${ITEMS_SVG}#`;
const ABILITY_HREF_PREFIX = `${ABILITIES_SVG}#`;
const TRIGGER_COMPARATOR_PREFIX = '/combat_trigger_comparators/';
const TRIGGER_CONDITION_PREFIX = '/combat_trigger_conditions/';
const TRIGGER_DEPENDENCY_PREFIX = '/combat_trigger_dependencies/';
const EQUIPMENT_GRID_POSITION = {
head: [1, 2],
body: [2, 2],
legs: [3, 2],
feet: [4, 2],
hands: [3, 1],
main_hand: [2, 1],
two_hand: [2, 1],
off_hand: [2, 3],
pouch: [3, 3],
back: [1, 1],
neck: [1, 5],
earrings: [2, 5],
ring: [3, 5],
};
const SLOT_WITH_TRIGGERS = {
abilities: {
hrefPrefix: ABILITY_HREF_PREFIX,
hridPrefix: ABILITY_HRID_PREFIX,
hridField: 'abilityHrid',
gridIndex: 0,
gridPosition: [5, 1],
},
food: {
hrefPrefix: ITEM_HREF_PREFIX,
hridPrefix: ITEM_HRID_PREFIX,
hridField: 'itemHrid',
gridIndex: 1,
gridPosition: [1, 1],
},
drinks: {
hrefPrefix: ITEM_HREF_PREFIX,
hridPrefix: ITEM_HRID_PREFIX,
hridField: 'itemHrid',
gridIndex: 1,
gridPosition: [1, 4],
},
};
const $ = window.jQuery;
class LoadoutManager {
constructor() {
this.id = null;
this.playerName = '';
this.loadouts = [];
this.selected = null;
this.current = {};
}
onInitCharacterData(msg) {
this.id = msg.character.id.toString();
this.playerName = msg.character.name;
const savedData = GM_getValue(this.id, {});
this.loadouts = savedData.loadouts ?? [];
this.selected = this.loadouts.find((x) => x.name === savedData.selectedName) ?? null;
this.current = {
abilities: Array.from({ length: 5 }, () => ({ abilityHrid: '' })),
drinks: [],
food: [],
equipment: [],
triggerMap: { ...msg.abilityCombatTriggersMap, ...msg.consumableCombatTriggersMap },
};
this.onConsumableSlotsUpdated(msg);
for (const ability of msg.characterAbilities) {
if (ability.slotNumber > 0) {
this.current.abilities[ability.slotNumber - 1].abilityHrid = ability.abilityHrid;
}
}
for (const item of msg.characterItems) {
const location = item.itemLocationHrid.slice(LOCATION_HRID_PREFIX.length);
if (location in EQUIPMENT_GRID_POSITION) {
this.current.equipment.push({
itemLocationHrid: item.itemLocationHrid,
itemHrid: item.itemHrid,
enhancementLevel: item.enhancementLevel,
});
}
}
}
onConsumableSlotsUpdated(msg) {
this.current.drinks = msg.actionTypeDrinkSlotsMap['/action_types/combat'].slice(0, 3).map((x) => ({
itemHrid: x?.itemHrid ?? '',
}));
this.current.food = msg.actionTypeFoodSlotsMap['/action_types/combat'].slice(0, 3).map((x) => ({
itemHrid: x?.itemHrid ?? '',
}));
}
onItemsUpdated(msg) {
const removedLocations = (msg.endCharacterItems ?? [])
.filter((x) => x.count === 0)
.map((x) => x.itemLocationHrid);
this.current.equipment = this.current.equipment.filter((x) => !removedLocations.includes(x.itemLocationHrid));
for (const item of msg.endCharacterItems) {
if (item.count === 1 && item.itemLocationHrid.slice(LOCATION_HRID_PREFIX.length) in EQUIPMENT_GRID_POSITION) {
this.current.equipment.push({
itemLocationHrid: item.itemLocationHrid,
itemHrid: item.itemHrid,
enhancementLevel: item.enhancementLevel,
});
}
}
}
onAbilitiesUpdated(msg) {
for (const ability of msg.endCharacterAbilities) {
for (const currentAbility of this.current.abilities) {
if (currentAbility.abilityHrid === ability.abilityHrid) {
currentAbility.abilityHrid = '';
}
}
if (ability.slotNumber > 0) {
this.current.abilities[ability.slotNumber - 1].abilityHrid = ability.abilityHrid;
}
}
}
onCombatTriggersUpdated(msg) {
let target;
if (msg.combatTriggerTypeHrid === '/combat_trigger_types/ability') {
target = msg.abilityHrid;
} else if (msg.combatTriggerTypeHrid === '/combat_trigger_types/consumable') {
target = msg.itemHrid;
}
this.current.triggerMap[target] = msg.combatTriggers;
}
save() {
if (this.id === null) {
throw new Error('LoadoutManager not initialized');
}
GM_setValue(this.id, {
loadouts: this.loadouts,
selectedName: this.selected?.name ?? null,
});
}
add(loadout) {
this.loadouts.push(loadout);
this.save();
}
addCurrent(name) {
const data = structuredClone(this.current);
try {
validateLoadoutData(data);
} catch (err) {
console.log('[Loadout Manager] addCurrent error', err);
return;
}
this.add({ name, data });
}
select(name) {
const loadout = this.loadouts.find((x) => x.name === name);
if (!loadout) {
return;
}
this.selected = loadout;
this.save();
}
deselect() {
this.selected = null;
this.save();
}
delete(name) {
const index = this.loadouts.findIndex((x) => x.name === name);
if (index < 0) {
return;
}
this.loadouts.splice(index, 1);
if (this.selected?.name === name) {
this.selected = null;
}
this.save();
}
/**
* @param {keyof typeof EQUIPMENT_GRID_POSITION} location
* @param {Loadout | undefined} loadout
* @returns {Item | null}
*/
compareEquipment(location, loadout = undefined) {
loadout = loadout ?? this.selected;
if (!loadout) {
return null;
}
const item = loadout.data.equipment.find((x) => x.itemLocationHrid === `${LOCATION_HRID_PREFIX}${location}`);
if (!item) {
return null;
}
const currentItem = this.current.equipment.find(
(x) => x.itemLocationHrid === `${LOCATION_HRID_PREFIX}${location}`,
);
if (currentItem?.itemHrid === item.itemHrid && currentItem.enhancementLevel >= item.enhancementLevel) {
return null;
} else {
return item;
}
}
/**
* @param {'abilities' | 'food' | 'drinks'} type
* @param {number} index
* @param {Loadout | undefined} loadout
* @returns {{ slot: Ability | Item } | { triggers: Trigger[] } | {}}
*/
compareSlotWithTriggers(type, index, loadout = undefined) {
loadout = loadout ?? this.selected;
if (!loadout) {
return {};
}
const item = loadout.data[type][index];
const currentItem = manager.current[type][index];
const hridField = type === 'abilities' ? 'abilityHrid' : 'itemHrid';
if (currentItem?.[hridField] === item[hridField]) {
const triggers = loadout.data.triggerMap[item[hridField]] ?? [];
const currentTriggers = manager.current.triggerMap[item[hridField]] ?? [];
if (!this.compareTriggers(triggers, currentTriggers)) {
return { triggers };
}
} else {
return { slot: item };
}
return {};
}
compareTriggers(t1, t2) {
if (t1.length !== t2.length) {
return false;
}
return t1.every(
(x, i) =>
x.comparatorHrid === t2[i].comparatorHrid &&
x.conditionHrid === t2[i].conditionHrid &&
x.dependencyHrid === t2[i].dependencyHrid &&
x.value === t2[i].value,
);
}
/** @returns { boolean } true if the selected loadout exactly matches the current one or no loadout is selected */
compareSelectedAndCurrent() {
if (!this.selected) {
return true;
}
if (Object.keys(EQUIPMENT_GRID_POSITION).some((x) => manager.compareEquipment(x) !== null)) {
return false;
}
for (const type of Object.keys(SLOT_WITH_TRIGGERS)) {
for (let i = 0; i < this.selected.data[type].length; i++) {
if (!$.isEmptyObject(manager.compareSlotWithTriggers(type, i))) {
return false;
}
}
}
return true;
}
}
class DomMonitor {
constructor() {
this.equipmentPanels = document.body.getElementsByClassName('EquipmentPanel_equipmentPanel__29pDG');
this.abilitiesPanels = document.body.getElementsByClassName('AbilitiesPanel_abilitiesPanel__2kLc9');
this.combatZoneSettings = document.body.getElementsByClassName(
'CombatZones_consumablesAndAbilitiesContainer__rb6Fi',
);
this.combatPartySettings = document.body.getElementsByClassName('Party_consumablesAndAbilitiesContainer__2ff8f');
this.equipmentContainers = document.body.getElementsByClassName('EquipmentPanel_playerModel__3LRB6');
this.consumablesContainers = document.body.getElementsByClassName(
'ActionTypeConsumableSlots_actionTypeConsumableSlots__1VwJx',
);
this.combatAbilitiesContainers = document.body.getElementsByClassName('CombatZones_abilitiesContainer__1mYiZ');
this.partyAbilitiesContainers = document.body.getElementsByClassName('Party_abilitiesContainer__VAksm');
this.abilitiesPanelAbilitiesContainers = document.body.getElementsByClassName(
'AbilitiesPanel_abilityGrid__-p-VF',
);
this.combatUnits = document.body.getElementsByClassName('CombatUnit_combatUnit__1m3XT');
}
run() {
const bodyOb = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const added of mutation.addedNodes) {
if (added instanceof HTMLElement) {
this.onChange();
return;
}
}
}
});
bodyOb.observe(document.body, { childList: true, subtree: true });
const tooltipOb = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const added of mutation.addedNodes) {
if (
added instanceof HTMLElement &&
added.getAttribute('role') === 'tooltip' &&
added.classList.contains('MuiTooltip-popperInteractive')
) {
this.onTooltipAdded(added);
}
}
}
});
tooltipOb.observe(document.body, { childList: true });
}
onChange() {
this.checkCollection(this.equipmentPanels, addEntryButtonInEquipmentPanel);
this.checkCollection(this.abilitiesPanels, addEntryButtonInAbilitiesPanel);
this.checkCollection(this.combatZoneSettings, updateEntryButtonInCombatSettings);
this.checkCollection(this.combatPartySettings, updateEntryButtonInCombatSettings);
this.checkCollection(this.equipmentContainers, highlightEquipments);
this.checkCollection(this.consumablesContainers, highlightConsumables);
this.checkCollection(this.combatAbilitiesContainers, highlightAbilities);
this.checkCollection(this.partyAbilitiesContainers, highlightAbilities);
this.checkCollection(this.abilitiesPanelAbilitiesContainers, highlightAbilities);
this.checkCollection(this.combatUnits, highlightCombatUnit);
}
checkCollection(collection, fn) {
for (const element of collection) {
if (!element.classList.contains('lmSeen')) {
element.classList.add('lmSeen');
fn(element);
}
}
}
refresh() {
this.refreshCollection(this.combatZoneSettings, updateEntryButtonInCombatSettings);
this.refreshCollection(this.combatPartySettings, updateEntryButtonInCombatSettings);
this.refreshCollection(this.equipmentContainers, highlightEquipments);
this.refreshCollection(this.consumablesContainers, highlightConsumables);
this.refreshCollection(this.combatAbilitiesContainers, highlightAbilities);
this.refreshCollection(this.partyAbilitiesContainers, highlightAbilities);
this.refreshCollection(this.abilitiesPanelAbilitiesContainers, highlightAbilities);
this.refreshCollection(this.combatUnits, highlightCombatUnit);
}
refreshCollection(collection, fn) {
for (const element of collection) {
fn(element);
}
}
onTooltipAdded(tooltip) {
const $tooltip = $(tooltip);
if ($tooltip.find('.ItemSelector_menu__12sEM').length > 0) {
updateItemTooltip($tooltip);
} else if ($tooltip.find('.AbilitySlot_abilitySelector__kwDWq').length > 0) {
updateAbilitiesTooltip($tooltip);
} else if ($tooltip.find('.CombatTriggersSetting_combatTriggersEditMenu__QL_kp').length > 0) {
updateTriggersTooltip($tooltip);
}
}
}
const manager = new LoadoutManager();
const domMonitor = new DomMonitor();
// For debug only
// eslint-disable-next-line no-unused-vars
function debugInjectJq() {
const script = document.createElement('script');
script.src = 'https://unpkg.com/jquery@3.7.0/dist/jquery.min.js';
document.head.appendChild(script);
}
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
// https://stackoverflow.com/a/70267397
function interceptWebSocket(fn) {
const property = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'data');
const data = property.get;
function lookAtMessage() {
const msg = data.call(this);
if (!(this.currentTarget instanceof WebSocket)) {
return msg;
}
Object.defineProperty(this, 'data', { value: msg }); //anti-loop
fn(msg);
return msg;
}
property.get = lookAtMessage;
Object.defineProperty(MessageEvent.prototype, 'data', property);
}
// https://github.com/facebook/react/issues/10135#issuecomment-314441175
function changeReactInput($element, value) {
if ($element.length === 0) {
return;
}
const element = $element[0];
const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
const prototype = Object.getPrototypeOf(element);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
prototypeValueSetter.call(element, value);
} else {
valueSetter.call(element, value);
}
element.dispatchEvent(new Event('input', { bubbles: true }));
}
// https://stackoverflow.com/a/53754780
function changeReactSelect($element, value) {
$element.val(value)[0]?.dispatchEvent(new Event('change', { bubbles: true }));
}
function validatePrefix(s, prefix) {
return s.startsWith(prefix) && /^[a-z0-9_]+$/.test(s.slice(prefix.length));
}
function validateLoadoutData(data) {
if (
data.abilities.length !== 5 ||
!data.abilities.every((x) => validatePrefix(x.abilityHrid, ABILITY_HRID_PREFIX) || x.abilityHrid === '')
) {
throw new Error('Invalid abilities');
}
if (
data.drinks.length !== 3 ||
!data.drinks.every((x) => validatePrefix(x.itemHrid, ITEM_HRID_PREFIX) || x.itemHrid === '')
) {
throw new Error('Invalid drinks');
}
if (
data.food.length !== 3 ||
!data.food.every((x) => validatePrefix(x.itemHrid, ITEM_HRID_PREFIX) || x.itemHrid === '')
) {
throw new Error('Invalid food');
}
for (const [key, triggers] of Object.entries(data.triggerMap)) {
if (!validatePrefix(key, ABILITY_HRID_PREFIX) && !validatePrefix(key, ITEM_HRID_PREFIX)) {
throw new Error('Invalid trigger key');
}
if (
!triggers.every(
(x) =>
validatePrefix(x.comparatorHrid, TRIGGER_COMPARATOR_PREFIX) &&
validatePrefix(x.conditionHrid, TRIGGER_CONDITION_PREFIX) &&
validatePrefix(x.dependencyHrid, TRIGGER_DEPENDENCY_PREFIX) &&
Number.isFinite(x.value),
)
) {
throw new Error(`Invalid trigger of "${key}"`);
}
}
if (
!data.equipment.every(
(x) =>
validatePrefix(x.itemHrid, ITEM_HRID_PREFIX) &&
validatePrefix(x.itemLocationHrid, LOCATION_HRID_PREFIX) &&
x.enhancementLevel >= 0,
)
) {
throw new Error('Invalid equipment');
}
}
function parseLoadoutData(str) {
const data = JSON.parse(str);
const loadoutData = {
abilities: data.abilities.slice(0, 5),
drinks: data.drinks['/action_types/combat'].slice(0, 3),
food: data.food['/action_types/combat'].slice(0, 3),
equipment: data.player.equipment,
triggerMap: data.triggerMap,
};
validateLoadoutData(loadoutData);
return loadoutData;
}
function formatTriggers(triggers) {
const lines = triggers.map((x) =>
[
x.dependencyHrid.slice(TRIGGER_DEPENDENCY_PREFIX.length),
x.conditionHrid.slice(TRIGGER_CONDITION_PREFIX.length),
x.comparatorHrid.slice(TRIGGER_COMPARATOR_PREFIX.length),
x.value.toString(),
].join(' '),
);
return lines.join('\n');
}
function renderLoadoutDetails($row, loadout) {
const $summary = $row.find('.lmLoadoutSummary');
const $details = $row.find('.lmLoadoutDetails');
for (const [location, [r, c]] of Object.entries(EQUIPMENT_GRID_POSITION)) {
const $item = $(LOADOUT_ITEM_HTML);
$item.attr('data-lm-location', location);
const item = loadout.data.equipment.find((x) => x.itemLocationHrid === `${LOCATION_HRID_PREFIX}${location}`);
if (item) {
$item.find('.lmItemIcon use').attr('href', ITEM_HREF_PREFIX + item.itemHrid.slice(ITEM_HRID_PREFIX.length));
if (item.enhancementLevel > 0) {
$item.find('.lmEnhancementLevel').text(`+${item.enhancementLevel}`);
}
if (manager.compareEquipment(location, loadout)) {
$item.addClass('lmBad');
$summary.append($item.clone());
}
}
$item.css('grid-row', r);
$item.css('grid-column', c);
if (location === 'two_hand') {
if (item) {
$details.find('[data-lm-location=main_hand]').remove();
} else {
continue;
}
}
$details.eq(0).append($item);
}
for (const [type, slotInfo] of Object.entries(SLOT_WITH_TRIGGERS)) {
for (let i = 0; i < loadout.data[type].length; i++) {
const item = loadout.data[type][i];
const $item = $(LOADOUT_ITEM_HTML);
if (item[slotInfo.hridField] !== '') {
$item
.find('.lmItemIcon use')
.attr('href', slotInfo.hrefPrefix + item[slotInfo.hridField].slice(slotInfo.hridPrefix.length));
}
const highlight = manager.compareSlotWithTriggers(type, i, loadout);
if ('slot' in highlight) {
$item.addClass('lmBad');
$summary.append($item.clone());
} else if ('triggers' in highlight) {
$item.attr('title', formatTriggers(highlight.triggers));
$summary.append($item.clone());
$item.addClass('lmBadTriggers');
}
$item.css('grid-row', slotInfo.gridPosition[0]);
$item.css('grid-column', slotInfo.gridPosition[1] + i);
$details.eq(slotInfo.gridIndex).append($item);
}
}
}
function refreshLoadouts(activeName) {
const $content = $('#lmLoadoutList');
$content.empty();
for (const loadout of manager.loadouts) {
const $row = $(LOADOUT_HTML);
$row.find('.lmLoadoutName').text(loadout.name);
$row.attr('data-lm-name', loadout.name);
renderLoadoutDetails($row, loadout);
if (loadout === manager.selected) {
$row.addClass('lmCurrent');
}
if (loadout.name === activeName) {
$row.addClass('lmActive');
}
$content.append($row);
}
$content.find('.lmLoadout').on('click', function () {
const $this = $(this);
const isActive = $this.hasClass('lmActive');
$content.find('.lmLoadout').removeClass('lmActive');
$this.toggleClass('lmActive', !isActive);
const $confirming = $content.find('.lmConfirming');
$confirming.removeClass('lmConfirming');
$confirming.removeClass('lmConfirmed');
});
$content.find('.lmSelect').on('click', function () {
const name = $(this).closest('.lmLoadout').attr('data-lm-name');
manager.select(name);
refreshLoadouts(name);
domMonitor.refresh();
return false; // stop propagation
});
$content.find('.lmDelete').on('click', function () {
const $this = $(this);
if ($this.hasClass('lmConfirmed')) {
const name = $this.closest('.lmLoadout').attr('data-lm-name');
manager.delete(name);
refreshLoadouts(null);
} else if (!$this.hasClass('lmConfirming')) {
$this.addClass('lmConfirming');
setTimeout(() => {
if ($this.hasClass('lmConfirming')) {
$this.addClass('lmConfirmed');
}
}, 1000);
}
return false; // stop propagation
});
$content.find('.lmDeselect').on('click', function () {
const name = $(this).closest('.lmLoadout').attr('data-lm-name');
manager.deselect();
refreshLoadouts(name);
domMonitor.refresh();
return false; // stop propagation
});
}
function checkLoadoutName(name) {
if (name.length === 0) {
return 'Empty name';
}
if (manager.loadouts.some((x) => x.name === name)) {
return 'Duplicate name';
}
}
function saveImportedLoadout() {
const $importTab = $('#lmImportTab');
$importTab.find('.lmError').hide();
const name = $importTab.find('input').val().trim();
const dataStr = $importTab.find('textarea').val();
const nameError = checkLoadoutName(name);
if (nameError) {
$importTab.find('.lmError[data-lm-field="name"]').text(nameError).show();
return;
}
let data;
try {
data = parseLoadoutData(dataStr);
} catch (err) {
$importTab
.find('.lmError[data-lm-field="data"]')
.text(`Invalid data: ${String(err)}`)
.show();
return;
}
manager.add({ name, data });
$importTab.find('input').val('');
$importTab.find('textarea').val('');
$('.lmModalContent .lmTabButton[data-lm-tab="lmSelectTab"]').trigger('click');
refreshLoadouts(name);
}
function saveCurrentLoadout() {
const $tab = $('#lmCurrentTab');
$tab.find('.lmError').hide();
const name = $tab.find('input').val().trim();
const nameError = checkLoadoutName(name);
if (nameError) {
$tab.find('.lmError[data-lm-field="name"]').text(nameError).show();
return;
}
manager.addCurrent(name);
$tab.find('input').val('');
$('.lmModalContent .lmTabButton[data-lm-tab="lmSelectTab"]').trigger('click');
refreshLoadouts(name);
}
function showSettingModal() {
const $modal = $(SETTING_MODAL_HTML);
$modal.insertAfter($('.GamePage_gamePage__ixiPl').first());
$modal.find('.Modal_background__2B88R').on('click', closeSettingModal);
$modal.find('.Modal_closeButton__3eTF7').on('click', closeSettingModal);
$modal.find('.lmTabButton').on('click', function () {
const $this = $(this);
$this.siblings().removeClass('lmActive');
$this.addClass('lmActive');
const tabName = this.dataset.lmTab;
const $modal = $this.closest('.lmModalContent');
$modal.find('.lmModalTabContent').removeClass('lmActive');
$modal.find(`#${tabName}`).addClass('lmActive');
$modal.find('.lmError').hide();
});
$modal.find('#lmImportSave').on('click', saveImportedLoadout);
$modal.find('#lmSaveCurrent').on('click', saveCurrentLoadout);
refreshLoadouts(null);
}
function closeSettingModal() {
$('#lmSettingModal').remove();
}
function onWebSocketMessage(msg) {
try {
const parsed = JSON.parse(msg);
switch (parsed.type) {
case 'init_character_data':
manager.onInitCharacterData(parsed);
break;
case 'action_type_consumable_slots_updated':
manager.onConsumableSlotsUpdated(parsed);
break;
case 'items_updated':
manager.onItemsUpdated(parsed);
break;
case 'abilities_updated':
manager.onAbilitiesUpdated(parsed);
break;
case 'combat_triggers_updated':
manager.onCombatTriggersUpdated(parsed);
break;
default:
return;
}
domMonitor.refresh();
} catch (err) {
console.log('[Loadout Manager] error parsing websocket message', err);
return;
}
}
function addEntryButtonInEquipmentPanel(panel) {
const $entry = $(PANEL_ENTRY_HTML);
$entry.find('.lmEntry').on('click', showSettingModal);
$(panel).find('[class=EquipmentPanel_title__CY-rf]').first().after($entry);
}
function addEntryButtonInAbilitiesPanel(panel) {
const $entry = $(PANEL_ENTRY_HTML);
$entry.find('.lmEntry').on('click', showSettingModal);
$(panel).find('[class=AbilitiesPanel_title__2_8WC]').first().after($entry);
}
function updateEntryButtonInCombatSettings(container) {
const $container = $(container);
let $entry = $container.find('.lmCombatEntry');
if ($entry.length === 0) {
$entry = $(COMBAT_ENTRY_HTML);
$entry.find('.lmEntry').on('click', showSettingModal);
$container.append($entry);
}
const isCorrect = manager.compareSelectedAndCurrent();
$entry.toggleClass('lmEntryCorrect', manager.selected !== null && isCorrect);
$entry.toggleClass('lmEntryWrong', manager.selected !== null && !isCorrect);
}
function highlightEquipments(container) {
const $equipments = $(container).children();
$equipments.each(function () {
const $equipment = $(this);
const r = Number($equipment.css('grid-row-start'));
const c = Number($equipment.css('grid-column-start'));
const locations = Object.entries(EQUIPMENT_GRID_POSITION)
.filter(([, pos]) => r === pos[0] && c === pos[1])
.map(([location]) => location);
for (const location of locations) {
const item = manager.compareEquipment(location);
$equipment.toggleClass('lmHighlight', item !== null);
$equipment.data('lmItem', item);
if (item !== null) {
break;
}
}
});
}
function highlightConsumables(container) {
const $container = $(container);
const $slots = $container.find('.ConsumableSlot_consumableSlotContainer__2DwgD');
if ($slots.length !== 6) {
return;
}
for (let i = 0; i < 3; i++) {
const $slot = $slots.eq(i);
const highlight = manager.compareSlotWithTriggers('food', i);
$slot.toggleClass('lmHighlight', 'slot' in highlight);
$slot.toggleClass('lmHighlightTriggers', 'triggers' in highlight);
$slot.data('lmItem', highlight.slot);
$slot.data('lmTriggers', highlight.triggers);
}
for (let i = 0; i < 3; i++) {
const $slot = $slots.eq(i + 3);
const highlight = manager.compareSlotWithTriggers('drinks', i);
$slot.toggleClass('lmHighlight', 'slot' in highlight);
$slot.toggleClass('lmHighlightTriggers', 'triggers' in highlight);
$slot.data('lmItem', highlight.slot);
$slot.data('lmTriggers', highlight.triggers);
}
}
function highlightAbilities(container) {
const $container = $(container);
const $slots = $container.find('.AbilitySlot_abilitySlot__22oxh');
if ($slots.length !== 5) {
return;
}
for (let i = 0; i < 5; i++) {
const $slot = $slots.eq(i);
const highlight = manager.compareSlotWithTriggers('abilities', i);
$slot.toggleClass('lmHighlight', 'slot' in highlight);
$slot.toggleClass('lmHighlightTriggers', 'triggers' in highlight);
$slot.data('lmAbility', highlight.slot);
$slot.data('lmTriggers', highlight.triggers);
}
}
function highlightCombatUnit(combatUnit) {
const $combatUnit = $(combatUnit);
const name = $combatUnit.find('.CombatUnit_name__1SlO1').text();
if (name !== manager.playerName) {
return;
}
$combatUnit.toggleClass('lmCombatUnitWrongLoadout', !manager.compareSelectedAndCurrent());
}
function updateItemTooltip($tooltip) {
const tooltipId = $tooltip.attr('id');
const item = $(`[aria-labelledby="${tooltipId}"]`).closest('.lmHighlight').data('lmItem');
if (!item) {
return;
}
if (item.itemHrid === '') {
$tooltip.find('.ItemSelector_removeButton__3i8Lj').addClass('lmPick');
return;
}
const itemName = item.itemHrid.slice(ITEM_HRID_PREFIX.length);
const $items = $tooltip.find(`use[href$="#${itemName}"]`).closest('.ItemSelector_itemContainer__3olqe');
let isMatched;
if ('enhancementLevel' in item) {
let $matched = null;
let $best = null;
let bestLevel = item.enhancementLevel;
$items.each(function () {
const $this = $(this);
const level = Number($this.find('.Item_enhancementLevel__19g-e').text());
if (level === item.enhancementLevel) {
$matched = $this;
}
if (level > bestLevel) {
$best = $this;
}
});
$matched?.addClass('lmPick');
$best?.addClass('lmPick');
$best?.toggleClass('lmPickSecond', $matched !== null && $best !== null);
isMatched = $matched !== null || $best !== null;
} else {
$items.first().addClass('lmPick');
isMatched = $items.length > 0;
}
if (!isMatched) {
$tooltip.find('.ItemSelector_menu__12sEM').before(NO_PICK_NOTE_HTML);
}
}
function updateAbilitiesTooltip($tooltip) {
const tooltipId = $tooltip.attr('id');
const ability = $(`[aria-labelledby="${tooltipId}"]`).closest('.lmHighlight').data('lmAbility');
if (!ability) {
return;
}
if (ability.abilityHrid === '') {
$tooltip.find('.AbilitySlot_removeButton__1GpmP').addClass('lmPick');
return;
}
const abilityName = ability.abilityHrid.slice(ABILITY_HRID_PREFIX.length);
const $svgUse = $tooltip.find(`use[href$="${abilityName}"]`);
if ($svgUse.length > 0) {
const $grid = $tooltip.find('.AbilitySlot_availableAbilities__s-5qp');
$grid.children().addClass('lmTemp');
$svgUse.closest('.lmTemp').addClass('lmPick');
$grid.children().removeClass('lmTemp');
} else {
$tooltip.find('.AbilitySlot_abilitySelector__kwDWq').before(NO_PICK_NOTE_HTML);
}
}
function updateTriggersTooltip($tooltip) {
const tooltipId = $tooltip.attr('id');
const triggers = $(`[aria-labelledby="${tooltipId}"]`).closest('.lmHighlightTriggers').data('lmTriggers');
if (!triggers) {
return;
}
const $button = $(SET_TRIGGERS_BUTTON_HTML);
$tooltip.find('.Button_success__6d6kU').before($button);
$button.on('click', async function () {
$button.off('click');
$button.text('Please wait');
$button.addClass('Button_disabled__wCyIq');
// Add/remove trigger inputs
const REMOVE_SELECTOR = '.CombatTriggersSetting_removeButtonContainer__dpk_o .Button_warning__1-AMI';
const oldCount = $tooltip.find(REMOVE_SELECTOR).length;
for (let i = 0; i < oldCount - triggers.length; i++) {
const $remove = $tooltip.find(REMOVE_SELECTOR).last();
while ($remove.hasClass('Button_disabled__wCyIq')) {
await sleep(100);
}
$remove.trigger('click');
}
for (let i = 0; i < triggers.length - oldCount; i++) {
const $addCondition = $tooltip
.find('.CombatTriggersSetting_buttonContainer__1NSkb .Button_button__1Fe9z')
.first();
while ($addCondition.hasClass('Button_disabled__wCyIq')) {
await sleep(100);
}
$addCondition.trigger('click');
}
// Set each trigger
const $groups = $tooltip.find('.CombatTriggersSetting_inputs__2lxPR');
if ($groups.length !== triggers.length) {
$button.text('Unexpected dropdown count');
return;
}
for (let i = 0; i < triggers.length; i++) {
const trigger = triggers[i];
const $group = $groups.eq(i);
changeReactSelect($group.find('.CombatTriggersSetting_dependencySelect__3foBB'), trigger.dependencyHrid);
changeReactSelect($group.find('.CombatTriggersSetting_conditionSelect__njiG5'), trigger.conditionHrid);
changeReactSelect($group.find('.CombatTriggersSetting_comparatorSelect__tFrQS'), trigger.comparatorHrid);
changeReactInput($group.find('.CombatTriggersSetting_valueInput__3B34p'), trigger.value.toString());
}
$button.text('Done. Please click Save.');
});
}
function main() {
// debugInjectJq();
GM_addStyle(CSS);
interceptWebSocket(onWebSocketMessage);
domMonitor.run();
}
main();
})();
