DinoDevs / GladiatusCrazyAddon

This was "A browser addon for the Gladiatus browser game."
https://gladiatus.dinodevs.com
GNU General Public License v3.0
41 stars 29 forks source link

More heal/price ratios for food items #448

Open Arctomachine opened 1 year ago

Arctomachine commented 1 year ago

Brief feature description Show healing/price ratio in tooltip for food items everywhere. Similar to this feature, but in tooltip. Primarily for buying in general goods and player market (use asked market price instead of original). For market specifically put price somewhere near item as well. On left border, for example

Add a image as an example (advanced + optional) image image

Arctomachine commented 1 year ago

I have looked into possibilities of making what I suggested, and made this code snippet for market items. It kind of works on its own, so can be integrated into code if one issue with it is resolved. Query selector by tooltip is not working unless I use html inspector on any one item for the first time on current page. Then it starts working for this page. image

document.querySelectorAll('[data-tooltip*="Using: Heals"]').forEach(function(node) {
  const tr = node.parentNode.parentNode
  const priceNode = tr.querySelectorAll(['td'])[2]

  if (!priceNode) {
    return
  }

  const price = Number(priceNode.innerText.replace('.', ''))
  const heal = Number(node.getAttribute('data-tooltip').match(/Heals (\d+) of life/)[1])

  const ratioElement = document.createElement('span')
  ratioElement.innerText = (heal / price).toFixed(2)

  if (heal/price > 2) {
    ratioElement.style.color = 'cyan'
  } else if (heal/price > 1.5) {
    ratioElement.style.color = 'lime'
  } else if (heal/price > 1.25) {
    ratioElement.style.color = 'yellow'
  } else if (heal/price > 1) {
    ratioElement.style.color = 'orange'
  } else {
    ratioElement.style.color = 'red'
  }

  ratioElement.style.position = 'absolute'
  ratioElement.style.right = '-8px'
  ratioElement.style.bottom = '0'
  ratioElement.style.background = 'rgba(0, 0, 0, 0.85)'
  node.appendChild(ratioElement)
})
Arctomachine commented 1 year ago

Additional clarification: it works in normal mode, but the issue I mentioned only appears in chat mode.

Arctomachine commented 1 year ago

Updated this script, now it works in both modes. Also improved positioning of ratio plate so it no longer overlaps food icon, but stands right next to it, in second cell. For 4 cell foods it stands below seller name. This script now seems to be fully working on its own. How can I integrate it into plugin now? Is there instruction available? image

function addMarketHealToPriceRatios(){
    const iframe = document.getElementById('mainFrame') // if chat mode is enabled, get frame in which the game content is
    const innerDoc = iframe.contentDocument || iframe.contentWindow.document || document // select container for all operations: frame or document

    innerDoc.querySelectorAll('[data-tooltip*="Using: Heals"]').forEach(function(node) {
        const tr = node.parentNode.parentNode
        const priceNode = tr.querySelectorAll(['td'])[2]

        if (!priceNode) {
        return
        }

        const price = Number(priceNode.innerText.replace('.', ''))
        const heal = Number(node.getAttribute('data-tooltip').match(/Heals (\d+) of life/)[1])

        const ratioElement = document.createElement('span')
        ratioElement.innerText = (heal / price).toFixed(2)

        if (heal/price > 2) {
            ratioElement.style.color = 'cyan'
        } else if (heal/price > 1.5) {
            ratioElement.style.color = 'lime'
        } else if (heal/price > 1.25) {
            ratioElement.style.color = 'yellow'
        } else if (heal/price > 1) {
            ratioElement.style.color = 'orange'
        } else {
            ratioElement.style.color = 'red'
        }

        ratioElement.style.position = 'absolute'
        ratioElement.style.right = '0'
        ratioElement.style.bottom = '0'
        ratioElement.style.transform = 'translateX(100%)'
        ratioElement.style.padding = '2px 4px'
        ratioElement.style.borderRadius = '2px'
        ratioElement.style.background = 'rgba(0, 0, 0, 0.95)'
        node.appendChild(ratioElement)
    })
}
GreatApo commented 1 year ago

We have some general instructions under: https://github.com/DinoDevs/GladiatusCrazyAddon/blob/master/documentation/developers/for-developers.md

I think we had a similar feature for the market in the past (don't remember if it is in the current version). I think it would be best if this is fitted within the market table (additional column).

Arctomachine commented 1 year ago

It looks like I am doing something wrong, but not sure what. Trying to follow that instruction, changed 3 files:

Then I run dist/build.sh, disable normal version and load temporary (firefox) version from /dist. After all that I update page and go into markets in settings, but my feature is not there. And it is not working in market, so I assume it is just missing in build.

Also there might be issues with other languages because my implementation specifically targets english tooltip text, which will be different in other languages.