Pre-empting new tooltips update

CHANGELOG

@@ -1,3 +1,4 @@
+1.28.17: Pre-empting new tooltips update
 1.28.16: Pre-empting home screen timers update
 1.28.15: Fixing event girl shard counts on villain menu
 1.28.14: Fixing position of game links in the home screen right-side rearrange

dist/hh-plus-plus.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name Hentai Heroes++ BDSM version
 // @description Adding things here and there in the Hentai Heroes game. Also supports HHCore-based games such as GH and CxH.
-// @version 1.28.16
+// @version 1.28.17
 // @match https://*.hentaiheroes.com/*
 // @match https://nutaku.haremheroes.com/*
 // @match https://*.gayharem.com/*

package.json

@@ -1,6 +1,6 @@
 {
  "name": "hh-plus-plus",
- "version": "1.28.16",
+ "version": "1.28.17",
  "description": "Adding things here and there in the Hentai Heroes game. Also supports HHCore-based games such as GH and CxH.",
  "private": "true",
  "scripts": {

src/common/TooltipManager.js

@@ -0,0 +1,28 @@
+class TooltipManager {
+ static initTooltipType(selector, callback) {
+ $('body').off('touchstart', selector)
+ $('body').off('touchend', selector)
+ $('body').off('touchcancel', selector)
+
+ $('body').off('mouseenter', selector)
+ $('body').off('mouseleave', selector)
+
+ if (window.TooltipManager) {
+ // Old
+ const { is_mobile, is_tablet, Tooltip } = window
+ const isMobile = is_mobile && is_mobile() || is_tablet && is_tablet()
+
+ window.TooltipManager.initTooltipType(isMobile, selector, false, (target) => {
+ const { title, body } = callback()
+ let newTooltip = new Tooltip($(target), title, body)
+ window.TooltipManager.initNewTooltip(target, newTooltip)
+ })
+ } else if (window.tooltips) {
+ // New
+ window.tooltips[selector] = callback
+ window.addEventHandlers(selector)
+ }
+ }
+}
+
+export default TooltipManager

src/config/index.js

@@ -192,7 +192,7 @@ class Config {
  }
 
  renderConfigButton () {
- this.$configButton = $(`<div class="hh-plus-plus-config-button" hh_title="${this.gameTitle} ++"></div>`)
+ this.$configButton = $(`<div class="hh-plus-plus-config-button" hh_title="${this.gameTitle} ++" tooltip></div>`)
  this.$configButton.click(this.openConfigPane.bind(this))
  $('#contains_all').append(this.$configButton)
  }

src/modules/GemStockModule/index.js

@@ -49,7 +49,7 @@ class GemStockModule extends CoreModule {
  }
 
  buildGemsStockElem () {
- return $('<div class="gemStock"></div>').attr('hh_title', this.buildGemsTable())
+ return $('<div class="gemStock" tooltip></div>').attr('hh_title', this.buildGemsTable())
  }
 
  run () {

src/modules/HaremInfoModule/index.js

@@ -128,31 +128,31 @@ class HaremInfoModule extends CoreModule {
  <h1>${this.label('haremStats')}</h1>
  <div>${this.aggregates.girls} <span class="clubGirl_mix_icn"></span></div>
  <ul class="summary-grid caracs-summary">
- ${Object.entries(this.aggregates.caracs).map(([carac, count]) => `<li><span hh_title="${GT.caracs[carac]}"><span carac="${carac}"></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
+ ${Object.entries(this.aggregates.caracs).map(([carac, count]) => `<li><span hh_title="${GT.caracs[carac]}" tooltip><span carac="${carac}"></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
  </ul>
  <ul class="summary-grid elements-summary">
- ${Object.entries(this.aggregates.elements).map(([element, count]) => `<li><span hh_title="${GT.design[`${element}_flavor_element`]}"><span class="${element}_element_icn"></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
+ ${Object.entries(this.aggregates.elements).map(([element, count]) => `<li><span hh_title="${GT.design[`${element}_flavor_element`]}" tooltip><span class="${element}_element_icn"></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
  </ul>
  <ul class="summary-grid rarity-summary">
- ${Object.entries(this.aggregates.rarities).map(([rarity, count]) => `<li><span hh_title="${GT.design[`girls_rarity_${rarity}`]}"><span class="rarity-icon slot ${rarity}"><span class="initial">${GT.design[`girls_rarity_${rarity}`][0].normalize('NFD').replace(/[\u0300-\u036f]/g, '')}</span></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
+ ${Object.entries(this.aggregates.rarities).map(([rarity, count]) => `<li><span hh_title="${GT.design[`girls_rarity_${rarity}`]}" tooltip><span class="rarity-icon slot ${rarity}"><span class="initial">${GT.design[`girls_rarity_${rarity}`][0].normalize('NFD').replace(/[\u0300-\u036f]/g, '')}</span></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
  </ul>
  <ul class="summary-grid xp-aff-summary">
  <li>
- <span hh_title="${this.label('haremLevel')}">
+ <span hh_title="${this.label('haremLevel')}" tooltip>
  <span class="xp-aff-label">${GT.design.Lvl}</span>
  <span>${I18n.nThousand(this.aggregates.levelSum)}<br>/ ${I18n.nThousand(GIRL_MAX_LEVEL * this.aggregates.girls)}</span>
  </span>
  </li>
  <li>
- <span hh_title="${this.label('unlockedScenes')}">
+ <span hh_title="${this.label('unlockedScenes')}" tooltip>
  <span class="xp-aff-label unlocked-scenes-icon" style="background-image:url(${Helpers.getCDNHost()}/design_v2/affstar.png);"></span>
  <span>${I18n.nThousand(this.aggregates.unlockedScenes)}<br>/ ${I18n.nThousand(this.aggregates.totalScenes)}</span>
  </span>
  </li>
  </ul>
  <ul class="summary-grid salary-summary">
  <li>
- <span hh_title="${this.label('income')}">
+ <span hh_title="${this.label('income')}" tooltip>
  <span class="salary-label" cur="soft_currency"></span>
  <span>${I18n.nThousand(this.aggregates.scPerHour)} / ${GT.time.h}<br>${I18n.nThousand(this.aggregates.scCollectAll)} / ${GT.design.harem_collect}</span>
  </span>
@@ -172,13 +172,13 @@ class HaremInfoModule extends CoreModule {
  <span>${this.label('toUpgrade')}</span>
  <ul class="summary-grid upgrade-costs">
  <li>
- <span hh_title="${GT.design.Affection}">
+ <span hh_title="${GT.design.Affection}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design/ic_gifts_gray.svg)"></span>
  <span class="cost-value">${I18n.nThousand(this.aggregates.aff)} ${GT.design.Aff}<br>(<span cur="soft_currency"> ${I18n.nThousand(this.aggregates.aff * SC_PER_AFF)}</span>)</span>
  </span>
  </li>
  <li>
- <span hh_title="${this.label('affectionScenes')}">
+ <span hh_title="${this.label('affectionScenes')}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design_v2/affstar.png)"></span>
  <span class="cost-value">${this.label('or', {left: `<span cur="soft_currency"> ${I18n.nThousand(this.aggregates.affSC)}</span><br>`, right: `<span cur="hard_currency"> ${I18n.nThousand(this.aggregates.affHC)}</span>`})}</span>
  </span>
@@ -188,7 +188,7 @@ class HaremInfoModule extends CoreModule {
  <span>${this.label('toLevelCap')}</span>
  <ul class="summary-grid upgrade-costs">
  <li>
- <span hh_title="${GT.design.Experience}">
+ <span hh_title="${GT.design.Experience}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design/ic_books_gray.svg)"></span>
  <span class="cost-value">${I18n.nThousand(this.aggregates.xpToCap)} ${GT.design.XP}<br>(<span cur="soft_currency"> ${I18n.nThousand(this.aggregates.xpToCap * SC_PER_XP)}</span>)</span>
  </span>
@@ -198,14 +198,14 @@ class HaremInfoModule extends CoreModule {
  <div class="to-max-combi">
  <ul class="summary-grid upgrade-costs">
  <li>
- <span hh_title="${GT.design.Experience}">
+ <span hh_title="${GT.design.Experience}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design/ic_books_gray.svg)"></span>
  <span class="cost-value">${I18n.nThousand(this.aggregates.xpToMax)} ${GT.design.XP}<br>(<span cur="soft_currency"> ${I18n.nThousand(this.aggregates.xpToMax * SC_PER_XP)}</span>)</span>
  </span>
  </li>
  </ul>
  <ul class="summary-grid gems-summary">
- ${Object.entries(this.aggregates.gems).map(([element, count]) => `<li><span hh_title="${GT.design[`${element}_gem`]}"><span class="gem-icon" style="background-image: url(${Helpers.getCDNHost()}/pictures/design/gems/${element}.png)"></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
+ ${Object.entries(this.aggregates.gems).map(([element, count]) => `<li><span hh_title="${GT.design[`${element}_gem`]}" tooltip><span class="gem-icon" style="background-image: url(${Helpers.getCDNHost()}/pictures/design/gems/${element}.png)"></span><span>${I18n.nThousand(count)}</span></span></li>`).join('')}
  </ul>
  </div>
  </div>
@@ -237,7 +237,7 @@ class HaremInfoModule extends CoreModule {
  <span>${this.label('buyable')}</span>
  <ul class="summary-grid upgrade-costs">
  <li>
- <span hh_title="${this.label('books')}">
+ <span hh_title="${this.label('books')}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design/ic_books_gray.svg)"></span>
  <span class="cost-value">
  ${this.label('canBeBought', {item: `${I18n.nThousand(xp.sc.value)} ${GT.design.XP} (${xp.sc.count})`, amount: `<span cur="soft_currency"> ${I18n.nThousand(xp.sc.cost)}</span>`})}<br>
@@ -246,7 +246,7 @@ class HaremInfoModule extends CoreModule {
  </span>
  </li>
  <li>
- <span hh_title="${this.label('gifts')}">
+ <span hh_title="${this.label('gifts')}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design/ic_gifts_gray.svg)"></span>
  <span class="cost-value">
  ${this.label('canBeBought', {item: `${I18n.nThousand(aff.sc.value)} ${GT.design.Aff} (${aff.sc.count})`, amount: `<span cur="soft_currency"> ${I18n.nThousand(aff.sc.cost)}</span>`})}<br>
@@ -272,7 +272,7 @@ class HaremInfoModule extends CoreModule {
  <span>${this.label('sellable')}</span>
  <ul class="summary-grid upgrade-costs">
  <li>
- <span hh_title="${this.label('books')}">
+ <span hh_title="${this.label('books')}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design/ic_books_gray.svg)"></span>
  <span class="cost-value">
  ${I18n.nThousand(xp.value)} ${GT.design.XP} (${xp.count})<br>
@@ -281,7 +281,7 @@ class HaremInfoModule extends CoreModule {
  </span>
  </li>
  <li>
- <span hh_title="${this.label('gifts')}">
+ <span hh_title="${this.label('gifts')}" tooltip>
  <span class="affection-label" style="background-image:url(${Helpers.getCDNHost()}/design/ic_gifts_gray.svg)"></span>
  <span class="cost-value">
  ${I18n.nThousand(aff.value)} ${GT.design.Aff} (${aff.count})<br>
@@ -291,7 +291,7 @@ class HaremInfoModule extends CoreModule {
  </li>
  </ul>
  <ul class="summary-grid gems-stock">
- ${ELEMENTS.map((element) => `<li><span hh_title="${GT.design[`${element}_gem`]}"><span class="gem-icon" style="background-image: url(${Helpers.getCDNHost()}/pictures/design/gems/${element}.png)"></span><span>${I18n.nThousand(parseInt(player_gems_amount[element].amount),10)}</span></span></li>`).join('')}
+ ${ELEMENTS.map((element) => `<li><span hh_title="${GT.design[`${element}_gem`]}" tooltip><span class="gem-icon" style="background-image: url(${Helpers.getCDNHost()}/pictures/design/gems/${element}.png)"></span><span>${I18n.nThousand(parseInt(player_gems_amount[element].amount),10)}</span></span></li>`).join('')}
  </ul>
  `
  } else {
@@ -388,6 +388,7 @@ class HaremInfoModule extends CoreModule {
  `.replace(/(\n| {4})/g, '')
 
  $el.attr('hh_title', ttContent)
+ $el.attr('tooltip', '')
  })
  }
 

src/modules/HomeScreenModule/index.js

@@ -9,6 +9,7 @@ import pantheonIcon from '../../assets/pantheon.svg'
 import styles from './styles.lazy.scss'
 import AvailableFeatures from '../../common/AvailableFeatures'
 import Sheet from '../../common/Sheet'
+import TooltipManager from '../../common/TooltipManager'
 
 const { $ } = Helpers
 
@@ -302,19 +303,15 @@ class HomeScreenModule extends CoreModule {
  }
 
  manageSalaryTimers() {
- const { GirlSalaryManager, is_mobile, is_tablet, TooltipManager, Tooltip, GT } = window
- const isMobile = is_mobile && is_mobile() || is_tablet && is_tablet()
+ const { GirlSalaryManager, GT } = window
 
- const handleTooltip = (target) => {
+ const handleTooltip = () => {
  const aggregateSalaries = this.aggregateSalaries()
  if (!aggregateSalaries) { return }
  const { text } = aggregateSalaries
 
  const wrappedText = `<div class="script-salary-summary">${text}</div>`
 
- let newTooltip = new Tooltip($(target), '', wrappedText)
- TooltipManager.initNewTooltip(target, newTooltip)
-
  if (!this.salaryTimerHacked && GirlSalaryManager.updateHomepageTimer) {
  const existingUpdate = GirlSalaryManager.updateHomepageTimer.bind(GirlSalaryManager)
  GirlSalaryManager.updateHomepageTimer = () => {
@@ -333,11 +330,13 @@ class HomeScreenModule extends CoreModule {
 
  this.salaryTimerHacked = true
  }
+
+ return {title: '', body: wrappedText}
  }
 
  $('#collect_all').append('<span class="script-event-handler-hack"></span>')
 
- TooltipManager.initTooltipType(isMobile, '#collect_all, #collect_all .script-event-handler-hack', false, handleTooltip)
+ TooltipManager.initTooltipType('#collect_all, #collect_all .script-event-handler-hack', handleTooltip)
  }
 
  addLeaguePos() {

src/modules/LeagueInfoModule/index.js

@@ -191,7 +191,7 @@ class LeagueInfoModule extends CoreModule {
  const scoreDisplayData = getScoreDisplayDataForTop(playerRank, playerScore, top, tops[top], tops[top+1])
  const {diff, score, symbol, labelKey} = scoreDisplayData
 
- return `<span class="minTop${top}" hh_title="${this.label(labelKey, {points: I18n.nThousand(score), top})}"><span class="scriptLeagueInfoIcon top${top}"></span>${symbol}${I18n.nThousand(diff)}</span>`
+ return `<span class="minTop${top}" hh_title="${this.label(labelKey, {points: I18n.nThousand(score), top})}" tooltip><span class="scriptLeagueInfoIcon top${top}"></span>${symbol}${I18n.nThousand(diff)}</span>`
  }).join('')
  }
  if (promo) {
@@ -235,7 +235,7 @@ class LeagueInfoModule extends CoreModule {
  const promotionInfoTooltip = [textStagnate, textNonDemote, textDemote].filter(a=>a).map(text=>`<p>${text}</p>`).join('')
 
  promoHtml = `
- <span class="promotionInfo" hh_title="${promotionInfoTooltip}">
+ <span class="promotionInfo" hh_title="${promotionInfoTooltip}" tooltip>
  <img src="${Helpers.getCDNHost()}/leagues/ic_rankup.png" style="height: 15px; width: 12px; margin-left: 6px; margin-bottom: 0px;">
  </span>
  `
@@ -247,8 +247,8 @@ class LeagueInfoModule extends CoreModule {
 
  const summaryHtml = `
  <div class="scriptLeagueInfo">
- <span class="averageScore" hh_title="${this.label('averageScore', {average: I18n.nThousand(avg)})}<br/>${this.label('scoreExpected', {score: I18n.nThousand(scoreExpected)})}"><img src="${meanIcon}" style="height: 15px; width: 16px; margin-left: 2px; margin-bottom: 0px;">${I18n.nThousand(avg)}</span>
- <span class="possibleChallenges" hh_title="${this.possibleChallengesTooltip}"><img src="${Helpers.getCDNHost()}/league_points.png" style="height: 15px; width: 16px; margin-left: 6px; margin-bottom: 0px;">${challengesPossible}/${challengesLeft}</span>
+ <span class="averageScore" hh_title="${this.label('averageScore', {average: I18n.nThousand(avg)})}<br/>${this.label('scoreExpected', {score: I18n.nThousand(scoreExpected)})}" tooltip><img src="${meanIcon}" style="height: 15px; width: 16px; margin-left: 2px; margin-bottom: 0px;">${I18n.nThousand(avg)}</span>
+ <span class="possibleChallenges" hh_title="${this.possibleChallengesTooltip}" tooltip><img src="${Helpers.getCDNHost()}/league_points.png" style="height: 15px; width: 16px; margin-left: 6px; margin-bottom: 0px;">${challengesPossible}/${challengesLeft}</span>
  ${topsHtml}
  ${promoHtml}
  </div>