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)