Abyss Explorer Plus is a mod for the https://acelisweaven.github.io/AbyssExplorer/, which adds some changes as well as making the tool available as a standalone application.

README.md

Abyss Explorer Plus

Abyss Explorer Plus is a mod for the Abyss Explorer utility, which adds some changes as well as making the tool available as a standalone application.

📝 Features:

• (Optionnal) Porting to a standalone application
• Design change for a better quality of life
• The search bar is emptied if you are no longer in the window after a short period of time, with a transition effect so as not to surprise you during your game
• No more need to select the search bar before typing a word
• You can use the ,, + or Enter to do a multiple search
• Abyss Explorer+ warns you if the mod potentially alters the state of Abyss Explorer

💾 Installation

There are two ways to install and use Abyss Explorer+, either as a standalone application with Nativefier, or via a script injector extension on your browser (Tampermonkey, Greasemonkey…)

Installation (Standalone app)

⚠️ Before creating the application, you must install Node.js as well as Nativefier.

1. Download the following two files:
   • inject.css
   • inject.js
2. Execute the following command:

nativefier https://acelisweaven.github.io/AbyssExplorer -n AbyssExplorerPlus --inject .\inject.css --inject .\inject.js  --single-instance --background-color "#16161E"

3. Launch AbyssExplorerPlus program

Installation (Browser extension)

⚠️ You need to install a script injector (Tampermonkey, Greasemonkey…) as an extension/plugin on your browser.

Nb: Only Tampermonkey (on Vivaldi) was tested.

• Open the following page, your extension/plugin should offer you to install the script.
• (Optionnal) If your extension/plugin does not offer installation, you must create a new script on your extension and copy-paste the content of AbyssExplorerPlus.user.js and save, of course.
• Refresh your Abyss Explorer page, the script should be active, congratulations!

AbyssExplorerPlus.user.js

// ==UserScript==
// @name            Abyss Explorer+
// @namespace       http://acelisweaven.github.io/AbyssExplorer/
// @version         1.1
// @description     Abyss Explorer Plus is a mod for the Abyss Explorer utility, which adds some changes.
// @description:fr  Abyss Explorer Plus est un mod pour l'utilitaire Abyss Explorer, qui ajoute quelques changements.
// @icon            https://raw.githubusercontent.com/AcelisWeaven/AbyssExplorer/gh-pages/icon/favicon.ico
// @website         https://gist.github.com/Glaived/bf80a268fdbc5ed8ffd71e7786c8cfa6
// @supportURL      https://gist.github.com/Glaived/bf80a268fdbc5ed8ffd71e7786c8cfa6
// @updateURL       https://gist.githubusercontent.com/raw/bf80a268fdbc5ed8ffd71e7786c8cfa6/AbyssExplorerPlus.user.js
// @downloadURL     https://gist.githubusercontent.com/raw/bf80a268fdbc5ed8ffd71e7786c8cfa6/AbyssExplorerPlus.user.js
// @require         https://gist.githubusercontent.com/raw/bf80a268fdbc5ed8ffd71e7786c8cfa6/inject.js
// @resource        style https://gist.githubusercontent.com/raw/bf80a268fdbc5ed8ffd71e7786c8cfa6/inject.css
// @author          Glaived
// @match           *://acelisweaven.github.io/AbyssExplorer/*
// @connect         api.github.com
// @grant           GM_addStyle
// @grant           GM_getResourceText
// @grant           GM_xmlhttpRequest
// ==/UserScript==
; (() => {
  GM_addStyle(GM_getResourceText('style'))
})()

inject.css

:root {
  --background: #16161e;
  --background-light: #1a1b26;
  --hover: #304376;
  --cost: #304376;
}

html,
body {
  background-color: var(--background) !important;
}

.body {
  padding: 0 !important;
}

/* Disable Add to homepage button */
button.button-pink {
  display: none !important;
}

body,
section[class^='layout'] {
  transition: opacity 1.2s;
}

.orange-line {
  position: relative;
}

.orange-line:after {
  position: absolute;
  content: '';
  bottom: -10px;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: 0 0 1px hsla(0, 0%, 100%, 0.65),
    0 0 5px 5px rgba(241, 111, 36, 0.7);
}

.background,
.search {
  background: var(--background) !important;
  background-color: var(--background) !important;
}

.button:hover,
select:hover {
  background: linear-gradient(90deg, var(--hover), var(--hover)) !important;
}

.dropdown-options .option {
  background: var(--background-light) !important;
}

.dropdown-options .option.active,
.dropdown-options .option:hover {
  background: var(--hover) !important;
}

.variants .costs .cost {
  background-color: var(--cost) !important;
}

/* Cards */
.layout-cards .item {
  background-color: var(--background-light) !important;
}

/* Compact */
.layout-compact .item.is-active {
  background: var(--background) !important;
  background-color: var(--background) !important;
}

.layout-compact .item:not(.is-active).is-hover .item-content {
  background-color: var(--background-light) !important;
}

/* List */
.layout-list .item {
  background-color: var(--background-light) !important;
}

inject.js

const sha = '66ed4d0fe4143366c56f12a12737aba1030bbe20'

const body = document.querySelector('body'),
  footer = document.querySelector('footer p:nth-child(2)'),
  search = document.querySelector('input#search'),
  section = document.querySelector('section[class^="layout"]')

/**
 * When the window is no longer active, after an ms delay, execute cb
 * @param {integer} ms
 * @param {function} cb
 */
const onblur = (ms, cb) => {
  let wait

  window.onblur = () => (wait = setTimeout(cb, ms))
  window.onfocus = () => {
    body.style.opacity = 1
    clearTimeout(wait)
  }
}

const Cookie = {
  get: name => {
    let nameEQ = name + '=',
      ca = document.cookie.split(';')

    for (let i = 0; i < ca.length; i++) {
      let c = ca[i]

      while (c.charAt(0) === ' ') c = c.substring(1, c.length)
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
    }

    return null
  },
  set: (name, value, days) => {
    let expires = ''

    if (days) {
      let date = new Date()

      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
      expires = '; expires=' + date.toGMTString()
    }

    document.cookie = name + '=' + value + expires + '; path=/'
  },
  del: name => this.set(name, '', -1),
  toggle: name => {
    let val = this.get(name)

    if (val == '1') val = '0'
    else val = '1'

    this.set(name, val)

    return val
  },
}

document.querySelector('h1.red-line span').textContent += '+'
footer.innerHTML +=
  ' | <a href="https://gist.github.com/Glaived/bf80a268fdbc5ed8ffd71e7786c8cfa6">Abyss Explorer+</a>'

search.addEventListener('click', () => search.select())

window.addEventListener('focus', () => search.select())

document.addEventListener('keydown', e => {
  let event = e || window.event,
    key = event.key

  if (!event.ctrlKey) {
    search.focus()

    if (
      ['+', ',', 'Enter'].indexOf(key) > -1 &&
      search.value.substring(
        event.target.selectionStart - 2,
        event.target.selectionStart
      ) !== ', '
    ) {
      event.preventDefault()

      search.value =
        search.value.substring(0, event.target.selectionStart) +
        ', ' +
        search.value.substring(event.target.selectionEnd)

      search.dispatchEvent(new Event('input'))
    } else if (['Backspace', 'Delete'].indexOf(key) > -1) {
      let before = search.value.substring(
          event.target.selectionStart - 2,
          event.target.selectionStart
        ),
        inSplit = search.value.substring(
          event.target.selectionStart - 1,
          event.target.selectionStart + 1
        ),
        after = search.value.substring(
          event.target.selectionStart,
          event.target.selectionStart + 2
        )

      if ([before, inSplit, after].indexOf(', ') > -1) event.preventDefault()

      if (before === ', ') {
        search.value =
          search.value.substring(0, event.target.selectionStart - 2) +
          search.value.substring(event.target.selectionEnd)
      } else if (inSplit === ', ') {
        search.value =
          search.value.substring(0, event.target.selectionStart - 1) +
          search.value.substring(event.target.selectionStart + 1)
      } else if (after === ', ') {
        search.value =
          search.value.substring(0, event.target.selectionStart) +
          search.value.substring(event.target.selectionStart + 2)
      }

      if ([before, inSplit, after].indexOf(', ') > -1)
        search.dispatchEvent(new Event('input'))
    }
  }
})

document.addEventListener('click', e => {
  if (e.target && e.target.className === 'button aeplus') {
    Cookie.set('aeplus', e.target.dataset.sha, 31)

    document.querySelector('.update-available.orange-line').remove()
  }
})

// Clear searchbar if idle after a few seconds
onblur(30 * 1000, () => {
  window.scrollTo(0, 0)

  body.style.opacity = 0.3

  if (search.value !== '') {
    section.style.opacity = 0

    setTimeout(() => {
      search.value = ''
      search.focus()

      search.dispatchEvent(new Event('input'))

      section.style.opacity = 1
    }, 1200)
  }
})

fetch(
  'https://api.github.com/repos/AcelisWeaven/AbyssExplorer/branches/gh-pages',
  {
    method: 'GET',
    redirect: 'follow',
  }
)
  .then(response => response.json())
  .then(data => {
    if (
      sha !== data.commit.sha &&
      (Cookie.get('aeplus') === null ||
        Cookie.get('aeplus') !== data.commit.sha)
    )
      document.querySelector('body').insertAdjacentHTML(
        'afterbegin',
        `<div class="update-available orange-line">
          <a href="https://gist.github.com/Glaived/bf80a268fdbc5ed8ffd71e7786c8cfa6">Abyss Explorer+</a> may no longer be up to date compare to Abyss Explorer
          <span class="button aeplus" data-sha="${data.commit.sha}">Stop displaying this alert for one month</span>
      </div>`
      )
  })
  .catch(error => console.error(error))