From afd414df402ebf6e042696a8b998c6b4fad51175 Mon Sep 17 00:00:00 2001 From: Harley White Date: Thu, 10 Jun 2021 00:54:36 -0400 Subject: [PATCH] Added tooltips to other components --- changelog.md | 2 ++ docs/buyables.md | 2 ++ docs/clickables.md | 2 ++ docs/grids.md | 2 ++ docs/milestones.md | 2 ++ docs/upgrades.md | 2 ++ js/Demo/demoLayers.js | 4 ++-- js/Demo/demoMod.js | 2 +- js/components.js | 23 ++++++++++++++++------- js/game.js | 2 +- 10 files changed, 32 insertions(+), 11 deletions(-) diff --git a/changelog.md b/changelog.md index 2014990..3491f2d 100644 --- a/changelog.md +++ b/changelog.md @@ -1,7 +1,9 @@ # The Modding Tree changelog: +## v2.6.2 - 6/10/21 - Broke up style.css into many files to make it easier to find and customize what matters. If you already have custom CSS, keep that and ignore the new ones maybe? - Added buyable and clickable trees. +- Added optional tooltips to upgrades, buyables, clickables, milestones, and gridables. - Fixed the passiveGeneration display. - Fixed "marked" feature. - doReset now will function on non-numeric rows besides "side". diff --git a/docs/buyables.md b/docs/buyables.md index baf568e..6a28fd0 100644 --- a/docs/buyables.md +++ b/docs/buyables.md @@ -55,6 +55,8 @@ Features: - marked: **optional** Adds a mark to the corner of the buyable. If it's "true" it will be a star, but it can also be an image URL. +- tooltip: **optional**. Adds a tooltip to this buyable, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip. + - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar. - id: **assigned automagically**. It's the "key" which the buyable was stored under, for convenient access. The buyable in the example's id is 11. diff --git a/docs/clickables.md b/docs/clickables.md index 42d7e25..d0874c4 100644 --- a/docs/clickables.md +++ b/docs/clickables.md @@ -44,6 +44,8 @@ Features: - marked: **optional** Adds a mark to the corner of the clickable. If it's "true" it will be a star, but it can also be an image URL. +- tooltip: **optional**. Adds a tooltip to this clickable, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip. + - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar. - id: **assigned automagically**. It's the "key" which the clickable was stored under, for convenient access. The clickable in the example's id is 11. diff --git a/docs/grids.md b/docs/grids.md index 7a6469e..a71883e 100644 --- a/docs/grids.md +++ b/docs/grids.md @@ -65,4 +65,6 @@ Features: - getEffect(data, id): **optional**. A function that calculates and returns a gridable's effect, based on its position and data. (Whatever that means for a gridable) +- getTooltip(data, id): **optional**. Adds a tooltip to the gridables, appears when they hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip. + - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar. \ No newline at end of file diff --git a/docs/milestones.md b/docs/milestones.md index 924a978..8af1f8f 100644 --- a/docs/milestones.md +++ b/docs/milestones.md @@ -33,6 +33,8 @@ Milestone features: - unlocked(): **optional**. A function returning a boolean to determine if the milestone should be shown. If absent, it is always shown. +- tooltip: **optional**. Adds a tooltip to this milestone, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip. + - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar. - id: **assigned automagically**. It's the "key" which the milestone was stored under, for convenient access. The milestone in the example's id is 0. diff --git a/docs/upgrades.md b/docs/upgrades.md index bfb5d9f..e778fef 100644 --- a/docs/upgrades.md +++ b/docs/upgrades.md @@ -43,6 +43,8 @@ Individual upgrades can have these features: - style: **optional**. Applies CSS to this upgrade, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings). +- tooltip: **optional**. Adds a tooltip to this upgrade, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip. + - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar. - id: **assigned automagically**. It's the "key" which the upgrade was stored under, for convenient access. The upgrade in the example's id is 11. diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js index 1513ae1..1ecd92d 100644 --- a/js/Demo/demoLayers.js +++ b/js/Demo/demoLayers.js @@ -109,7 +109,8 @@ addLayer("c", { description: "Gain 1 Point every second.", cost: new Decimal(1), unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true - branches: [12] + branches: [12], + tooltip: "hi", }, 12: { description: "Point generation is faster based on your unspent Lollipops.", @@ -244,7 +245,6 @@ addLayer("c", { fillStyle: {'background-color' : "#FFFFFF"}, baseStyle: {'background-color' : "#696969"}, textStyle: {'color': '#04e050'}, - borderStyle() {return {}}, direction: RIGHT, width: 300, diff --git a/js/Demo/demoMod.js b/js/Demo/demoMod.js index d70c1db..0b05b37 100644 --- a/js/Demo/demoMod.js +++ b/js/Demo/demoMod.js @@ -11,7 +11,7 @@ let modInfo = { // Set your version in num and name let VERSION = { - num: "2.6.1", + num: "2.6.2", name: "Fixed Reality", } diff --git a/js/components.js b/js/components.js index 8ab36cb..53a15e7 100644 --- a/js/components.js +++ b/js/components.js @@ -172,7 +172,7 @@ function loadVue() { Vue.component('upgrade', { props: ['layer', 'data'], template: ` - ` }) @@ -203,9 +205,11 @@ function loadVue() { Vue.component('milestone', { props: ['layer', 'data'], template: ` - +



+ +   ` }) @@ -271,12 +275,13 @@ function loadVue() { props: ['layer', 'data', 'size'], template: `
-
@@ -333,12 +338,14 @@ function loadVue() { template: ` `, data() { return { interval: false, time: 0,}}, @@ -391,11 +398,13 @@ function loadVue() { template: ` `, data() { return { interval: false, time: 0,}}, diff --git a/js/game.js b/js/game.js index 774326e..c356f4f 100644 --- a/js/game.js +++ b/js/game.js @@ -4,7 +4,7 @@ var gameEnded = false; // Don't change this const TMT_VERSION = { - tmtNum: "2.6.1", + tmtNum: "2.6.2", tmtName: "Fixed Reality" }