diff --git a/changelog.md b/changelog.md index b30d525..bee96e7 100644 --- a/changelog.md +++ b/changelog.md @@ -1,11 +1,12 @@ # The Modding Tree changelog: -## v2.3: Cooler and Newer - 12/ +## v2.3: Cooler and Newer - 12/09/20 - Added achievement/milestone popups (thank you to Jacorb for this contribution!) (They have to be enabled with layer features) - The changelog tab is back, and can be set in mod.js. -- Layer nodes and respec buttons no longer stay focused after clicking them so you don't accidentally press them again with "enter". +- Layer nodes and respec buttons will not be clicked by pressing "enter". - The victory screen text is configurable. +- Added image and textStyle features to achievements. - Added an argument to use specific rows in an "upgrades" component. - Fixed the comma appearing in the main display when there was no effectDescription - Added the ability to easily make a tab that is a collection of layers in subtabs. diff --git a/docs/achievements.md b/docs/achievements.md index f1bf115..52b2dda 100644 --- a/docs/achievements.md +++ b/docs/achievements.md @@ -39,8 +39,12 @@ Individual achievement can have these features: - onComplete() - **optional**. this function will be called when the achievement is completed. +- image: **optional**, puts the image from the given URL (relative or absolute) in the achievement + - style: **optional**. Applies CSS to this achievement, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings). +- textStyle: **optional**. Applies CSS to the text, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings). + - 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 achievement was stored under, for convenient access. The achievement in the example's id is 11. diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js index 3003d6f..e7253a5 100644 --- a/js/Demo/demoLayers.js +++ b/js/Demo/demoLayers.js @@ -493,6 +493,7 @@ addLayer("a", { rows: 2, cols: 3, 11: { + image: "discord.png", name: "Get me!", done() {return true}, // This one is a freebie goalTooltip: "How did this happen?", // Shows when achievement is not completed @@ -503,6 +504,7 @@ addLayer("a", { done() {return false}, goalTooltip: "Mwahahaha!", // Shows when achievement is not completed doneTooltip: "HOW????", // Showed when the achievement is completed + textStyle: {'color': '#04e050'}, }, 13: { name: "EIEIO", diff --git a/js/components.js b/js/components.js index 3059075..0762bd4 100644 --- a/js/components.js +++ b/js/components.js @@ -369,7 +369,7 @@ function loadVue() { " v-bind:style="tmp[layer].achievements[data].computedStyle"> -


+


` }) diff --git a/js/technical/temp.js b/js/technical/temp.js index 814dc60..631ec7c 100644 --- a/js/technical/temp.js +++ b/js/technical/temp.js @@ -155,7 +155,7 @@ function constructAchievementStyles(layer){ if (isPlainObject(ach)) { let style = [] if (ach.image){ - style.push({'background-image': ach.image}) + style.push({'background-image': 'url("' + ach.image + '")'}) } if (!ach.unlocked) style.push({'visibility': 'hidden'}) style.push(ach.style)