diff --git a/changelog.md b/changelog.md index 0e7e3ad..36abfca 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,6 @@ # The Modding Tree changelog: +- Completely reworked tooltips. Shift-click a node to force its tooltip to stay displayed. (And hopefully finally fixed flickering!) - Added 2 new input components, text-input and slider. - The red layer highlight will not appear before a layer is unlocked. diff --git a/js/components.js b/js/components.js index 0157c5d..ea4b64d 100644 --- a/js/components.js +++ b/js/components.js @@ -439,6 +439,7 @@ function loadVue() { Vue.component('overlay-head', systemComponents['overlay-head']) Vue.component('info-tab', systemComponents['info-tab']) Vue.component('options-tab', systemComponents['options-tab']) + Vue.component('tooltip', systemComponents['tooltip']) app = new Vue({ diff --git a/js/technical/systemComponents.js b/js/technical/systemComponents.js index eca6285..ff001c8 100644 --- a/js/technical/systemComponents.js +++ b/js/technical/systemComponents.js @@ -12,29 +12,24 @@ var systemComponents = { }, 'tree-node': { - props: ['layer', 'abb', 'size'], + props: ['layer', 'abb', 'size', 'hover'], template: ` - ` }, @@ -164,5 +168,11 @@ var systemComponents = { template: ` ` - } + }, + + 'tooltip' : { + props: ['text'], + template: `
+ ` + } } \ No newline at end of file diff --git a/js/utils.js b/js/utils.js index f7889a7..c594921 100644 --- a/js/utils.js +++ b/js/utils.js @@ -316,11 +316,14 @@ function addTime(diff, layer) { else data.timePlayed = time } +shiftDown = false +ctrlDown = false + document.onkeydown = function (e) { if (player === undefined) return; if (gameEnded && !player.keepGoing) return; - let shiftDown = e.shiftKey - let ctrlDown = e.ctrlKey + shiftDown = e.shiftKey + ctrlDown = e.ctrlKey let key = e.key if (ctrlDown) key = "ctrl+" + key if (onFocused) return diff --git a/js/utils/save.js b/js/utils/save.js index 388c7d2..3801bae 100644 --- a/js/utils/save.js +++ b/js/utils/save.js @@ -70,6 +70,8 @@ function getStartLayerData(layer) { layerdata.best = new Decimal(0); if (layerdata.resetTime === undefined) layerdata.resetTime = 0; + if (layerdata.forceTooltip === undefined) + layerdata.forceTooltip = false; layerdata.buyables = getStartBuyables(layer); if (layerdata.clickables == undefined) diff --git a/style.css b/style.css index 58f3f23..27752a3 100644 --- a/style.css +++ b/style.css @@ -544,69 +544,60 @@ ul { transition-duration: 0s } -[tooltip] { +.tooltipBox { position: relative; - z-index: 99999999 !important -} + display: inline-block; + } + + .tooltipBox:hover .tooltip{ + opacity: 1; + } -[tooltip]:before, -[tooltip]:after { - visibility: hidden; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); - opacity: 0; - pointer-events: none; - white-space: pre-wrap; - -webkit-transform:translate3d(0,0,0); -} - -[tooltip]:before { - position: absolute; + .forceTooltip .tooltip{ + opacity: 1; + } + + .tooltip { + text-align: center; + width: 150px; + font-size: 16px; + line-height: 1.2; bottom: 100%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; - width: 160px; + font-family: "Lucida Console", "Courier New", monospace; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + opacity: 0; + transition: opacity 0.5s; + + position: absolute; + z-index: 99999999 !important; + background-color: var(--background_tooltip); color: var(--points); content: attr(tooltip); - text-align: center; - font-size: 14px; - line-height: 1.2; - transition-duration: 0.5s; - white-space: pre-wrap; -} + font-size:14px; -[tooltip]:after { + } + + .tooltip::after { + content: " "; position: absolute; bottom: 100%; left: 50%; + + top: 100%; + left: 50%; margin-left: -5px; - width: 0; - border-top: 5px solid var(--background_tooltip); - border-right: 5px solid transparent; - border-left: 5px solid transparent; - content: " "; - font-size: 0; - line-height: 0; - transition-duration: 0.5s; - white-space: pre-wrap; -} - -[tooltip]:hover:before, -[tooltip]:hover:after { - filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); - visibility: visible; - opacity: 1; - white-space: pre-wrap; - -webkit-transform:translate3d(0,0,0); - -} - + border-width: 5px; + border-style: solid; + border-color: var(--background_tooltip) transparent transparent transparent; + } + #loadingSection { display: flex; flex-direction: column;