tomeSettingsMenu.html

<div id="tomeSettingsContainer" class="tooltip-container" 
  style="position: absolute; width: 25rem; max-height:25rem; z-index:1; overflow:scroll; display: none;"
>
  <div class="item-card light-background-border p-2 m-1" style="width: 100%; display: grid; grid-template-columns: 1fr;">
    <!-- Buttons to switch between setting types -->
    <div style="display: flex; justify-content: space-around; width: 100%; height: fit-content">
      <button type="button" class="mat-focus-indicator mat-raised-button mat-button-base" id="toggleThresholdSettings">
        Use thresholds
      </button>
      <button type="button" class="mat-focus-indicator mat-raised-button mat-button-base" id="toggleWeightSettings">
        Use weights
      </button>
    </div>
    
    <form style="width: inherit">
      <!-- Threshold settings -->
      <div style="width: inherit" id="thresholdSettingsBlock">
        <!-- Regular tome settings -->
        <details>
          <summary style="text-align: center;">
            Regular Tomes Setting
          </summary>
          <div style="display: flex; justify-content: space-around;">
            <div style="width: 40%">
              <label for="rewardHighlightSetting">Reward %:</label>
              <input type="number" id="rewardHighlightSetting" value="" placeholder="150.00" style="width: 100%">
            </div>
            <div style="width: 40%" style="justify-content: space-around;">
              <label for="rewardSpaceSetting">Max space:</label>
              <input type="number" id="rewardSpaceSetting" value="" placeholder="6" style="width: 100%">
            </div>
          </div>
          <div style="display: flex; justify-content: space-around;">
            <div style="width: 40%">
              <label for="mobHighlightSetting">Mob Debuff %:</label>
              <input type="number" id="mobHighlightSetting" value="" placeholder="150.00" style="width: 100%">
            </div>
            <div style="width: 40%">
              <label for="mobSpaceSetting">Max space:</label>
              <input type="number" id="mobSpaceSetting" value="" placeholder="6" style="width: 100%">
            </div>
          </div>
          <div style="display: flex; justify-content: space-around;">
            <div style="width: 40%">
              <label for="characterHighlightSetting">Character %:</label>
              <input type="number" id="characterHighlightSetting" value="" placeholder="150.00" style="width: 100%">
            </div>
            <div style="width: 40%">
              <label for="characterSpaceSetting">Max space:</label>
              <input type="number" id="characterSpaceSetting" value="" placeholder="6" style="width: 100%">
            </div>
          </div>
          
          <div style="display: flex; justify-content: space-around;">
            <div style="display: inherit; justify-content: center;  margin: 0.5em 0 0.5em 2em;">
              <label for="numGoodRolls">Minimum number of good rolls:</label>
              <input type="number" id="numGoodRolls" value="" placeholder="1" style="width: 15%; margin-left: 0.5rem">
            </div>
          </div>
        </details>
        
        <!-- Rare/Legendary roll settings -->
        <details>
          <summary style="text-align: center;">
            Rare/Legendary Rolls Setting
          </summary>
          <div style="display: flex; justify-content: space-around;">
            <div style="width: 40%">
              <label for="rareSpaceSetting">Rare max space:</label>
              <input type="number" id="rareSpaceSetting" value="" placeholder="6" style="width: 100%">
            </div>
            <div style="width: 40%">
              <label for="legendarySpaceSetting">Legendary max space:</label>
              <input type="number" id="legendarySpaceSetting" value="" placeholder="6" style="width: 100%">
            </div>
          </div>
      
          <div style="display: flex; justify-content: space-around;">
            <div style="width: 40%">
              <label for="multiMobHighlightSetting">Multi mob %:</label>
              <input type="number" id="multiMobHighlightSetting" value="" placeholder="150.00" style="width: 100%">
            </div>
            <div style="width: 40%">
              <label for="lifestealHighlightSetting">Lifesteal %:</label>
              <input type="number" id="lifestealHighlightSetting" value="" placeholder="150.00" style="width: 100%">
            </div>
          </div>
          <div style="display: flex; justify-content: space-around; margin-bottom: 1em;">
            <div style="width: 40%">
              <label for="actionSpeedHighlightSetting">Action speed %:</label>
              <input type="number" id="actionSpeedHighlightSetting" value="" placeholder="150.00" style="width: 100%">
            </div>
            <div style="width: 40%">
              <label for="mobSkipHighlightSetting">Mob skip %:</label>
              <input type="number" id="mobSkipHighlightSetting" value="" placeholder="150.00" style="width: 100%">
            </div>
          </div>
        </details>
      
        <!-- World boss settings -->
        <details>
          <summary style="text-align: center;">
            World Boss Tomes Setting
          </summary>
          <div style="display: flex; justify-content: space-around; align-items: flex-end;">
            <div>
              <label for="characterWbHighlightSetting">Character %:</label>
              <input type="number" id="characterWbHighlightSetting" value="" placeholder="150.00" style="width: 70%">
            </div>
            <div>
              <label for="elementalConvHighlightSetting">Elemental Conv %:</label>
              <input type="number" id="elementalConvHighlightSetting" value="" placeholder="150.00" style="width: 70%">
            </div>
            <div>
              <label for="wbSpaceSetting">Max space requirement:</label>
              <input type="number" id="wbSpaceSetting" value="" placeholder="6" style="width: 70%">
            </div>
          </div>
          <div style="display: flex; justify-content: space-around;">
            <div style="display: inherit; justify-content: center; margin: 0.5rem;">
              <label for="numGoodRollsWb">Minimum number of good rolls:</label>
              <input type="number" id="numGoodRollsWb" value="" placeholder="1" style="width: 15%; margin-left: 0.5rem">
            </div>
          </div>
        </details>
      </div>

      <!-- Tome weights settings -->
      <div id="tomeWeightSettingsBlock" style="display:none; width:inherit; margin: 1rem 0;">
        <details>
          <summary style="text-align: center;">
            Income Per Space
          </summary>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="actionSpeedWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="actionSpeedWeight">Action Speed</label>
          </div>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="mobSkipWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="mobSkipWeight">Mob Skip</label>
          </div>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="multiMobWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="multiMobWeight">Multi Mob</label>
          </div>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="lifestealWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="lifestealWeight">Lifesteal</label>
          </div>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="rewardWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="rewardWeight">Reward Multiplier</label>
          </div>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="mobDebuffWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="mobDebuffWeight">Mob Debuff</label>
          </div>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="characterWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="characterWeight">Character Multiplier</label>
          </div>
          
          <div style="display: flex; justify-content: space-around;">
            <div style="display: inherit; justify-content: center; margin: 0.5em;">
              <label for="incomePerSpaceThreshold">Minimum income per space:</label>
              <input type="number" id="incomePerSpaceThreshold" value="" placeholder="100" style="width: 40%; margin-left: 0.5em">
            </div>
          </div>
        </details>

        <details>
          <summary style="text-align: center;">
            World Boss Power Per Space
          </summary>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="wbCharacterWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="wbCharacterWeight">Character Multiplier:</label>
          </div>
          <div style="display: flex; justify-content: flex-start; width: 80%; margin: 0.5em 0 0.5em 2em;">
            <input type="number" id="wbElementalConvWeight" value="" placeholder="0" style="width: 25%; margin-right: 1em;">
            <label for="wbElementalConvWeight">Elemental Conversion:</label>
          </div>

          <div style="display: flex; justify-content: space-around;">
            <div style="display: inherit; justify-content: center; margin: 0.5em;">
              <label for="wbPowerPerSpaceThreshold">Minimum WB power per space:</label>
              <input type="number" id="wbPowerPerSpaceThreshold" value="" placeholder="100" style="width: 40%; margin-left: 0.5em">
            </div>
          </div>
        </details>
      </div>

      <!-- Hide mods settings -->
      <details>
        <summary style="text-align: center;">
          Hide Tome Modifiers
        </summary>
        <div style="display: flex; justify-content: flex-start; margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideAddedMobs" value="true" style="width: 15%">
          <label for="hideAddedMobs">Added Mobs</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideReward" value="true" style="width: 15%">
          <label for="hideReward">Reward Multiplier</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideMobDebuff" value="true" style="width: 15%">
          <label for="hideMobDebuff">Mob Debuff</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideCharacter" value="true" style="width: 15%">
          <label for="hideCharacter">Character Multiplier</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideWaterResistance" value="true" style="width: 15%">
          <label for="hideWaterResistance">Water Resistance</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideThunderResistance" value="true" style="width: 15%">
          <label for="hideThunderResistance">Thunder Resistance</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideFireResistance" value="true" style="width: 15%">
          <label for="hideFireResistance">Fire Resistance</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideMeleeResistance" value="true" style="width: 15%">
          <label for="hideMeleeResistance">Melee Resistance</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideRangedResistance" value="true" style="width: 15%">
          <label for="hideRangedResistance">Ranged Resistance</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideElementalConversion" value="true" style="width: 15%">
          <label for="hideElementalConversion">Elemental Conversion</label>
        </div>
        <div style="display: flex; justify-content: flex-start;  margin: 0.5em 0 0.5em 2em">
          <input type="checkbox" id="hideFortifyReduction" value="true" style="width: 15%">
          <label for="hideFortifyReduction">Fortify Reduction</label>
        </div>
      </details>
      
      <details>
        <summary style="text-align: center;">
          Other Catacomb Settings
        </summary>
        <p style="text-align: center; margin-bottom: 0.5em;">
          Highlight catacomb start button if tomes are equipped and it's under a gold threshold
        </p>
        <div style="display: flex; justify-content: center;">
          <label for="goldPerKillForTomesEquipped" style="margin-right: 0.5em;">Gold per kill:</label>
          <input type="number" id="goldPerKillForTomesEquipped" value="" placeholder="4000" style="width: 25%">
        </div>
        <p style="text-align: center; margin: 0.5em;">
          Disable the refresh button if a tome is highlighted
        </p>
        <div style="display: flex; justify-content: center;">
          <label for="disableRefreshOnHighlight" style="margin-right: 0.5em;">Disable refresh:</label>
          <input type="checkbox" id="disableRefreshOnHighlight" value="true" style="width: 5%">
        </div>
      </details>
      
      <!-- Save button -->
      <div style="display: flex; justify-content: center; padding-top: 1rem;">
        <button id="tomeSettingsSaveButton" type="button"
          class="mat-focus-indicator mat-raised-button mat-button-base" 
        >
          Save
        </button>
      </div>
    </form>
  </div>
</div>