From 3c190dab9fd1ab335f0eff6c059e69369f23ea22 Mon Sep 17 00:00:00 2001 From: Acamaeda Date: Mon, 7 Dec 2020 00:40:30 -0500 Subject: [PATCH] Improved popups --- changelog.md | 3 ++- demo.html | 2 +- docs/achievements.md | 2 ++ docs/layer-features.md | 2 ++ docs/milestones.md | 2 ++ js/Demo/demoLayers.js | 2 ++ js/utils.js | 10 ++++++---- popup.css | 7 +++---- 8 files changed, 20 insertions(+), 10 deletions(-) diff --git a/changelog.md b/changelog.md index 01c4ebb..967edae 100644 --- a/changelog.md +++ b/changelog.md @@ -1,8 +1,9 @@ # The Modding Tree changelog: - 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 are unselected after clicking them so you don't accidentally press them again with "enter". +- Layer nodes and respec buttons no longer stay focused after clicking them so you don't accidentally press them again with "enter". - The victory screen text is configurable. - Added an argument to use specific rows in an "upgrades" component. - Added the ability to easily make a tab that is a collection of layers in subtabs. diff --git a/demo.html b/demo.html index c2404b7..67986e9 100644 --- a/demo.html +++ b/demo.html @@ -73,7 +73,7 @@
-
+

{{popup.title}}


diff --git a/docs/achievements.md b/docs/achievements.md index 7f03a5e..f1bf115 100644 --- a/docs/achievements.md +++ b/docs/achievements.md @@ -48,3 +48,5 @@ Individual achievement can have these features: - goalTooltip: **optional, deprecated**. Appears when the achievement is hovered over and locked, overrides the basic tooltip. This is to display the goal (or a hint). It can also be a function that returns updating text. Can use basic HTML. - doneTooltip: **optional, deprecated**. Appears when the achievement is hovered over and completed, overrides the basic tooltip. This can display what the player achieved (the goal), and the rewards, if any. It can also be a function that returns updating text. Can use basic HTML. + +Enable achievement popups by adding `achievementsPopups: true` to the layer. diff --git a/docs/layer-features.md b/docs/layer-features.md index da7312e..d0c0870 100644 --- a/docs/layer-features.md +++ b/docs/layer-features.md @@ -75,6 +75,8 @@ You can make almost any value dynamic by using a function in its place, includin - infoboxes: Displays some text in a box that can be shown or hidden. [See here for more info.](infoboxes.md) +- achievementPopups, milestonePopups: **optional**, If true, you get a popup message when you get the achievement/milestone. + ## Prestige formula features - type: **optional**. Determines which prestige formula you use. Defaults to "none". diff --git a/docs/milestones.md b/docs/milestones.md index 3e8aeca..34f1774 100644 --- a/docs/milestones.md +++ b/docs/milestones.md @@ -34,3 +34,5 @@ Milestone features: - 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. + +Enable milestone popups by adding `milestonePopups: true` to the layer. diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js index d396350..fb4b60d 100644 --- a/js/Demo/demoLayers.js +++ b/js/Demo/demoLayers.js @@ -365,6 +365,7 @@ addLayer("c", { return (player.c.buyables[11] == 1) }, resetDescription: "Melt your points into ", + milestonePopups: true }) @@ -488,6 +489,7 @@ addLayer("a", { tooltip() { // Optional, tooltip displays when the layer is locked return ("Achievements") }, + achievementPopups: true, achievements: { rows: 2, cols: 3, diff --git a/js/utils.js b/js/utils.js index 693ebf8..f556e23 100644 --- a/js/utils.js +++ b/js/utils.js @@ -725,8 +725,10 @@ function toNumber(x) { function updateMilestones(layer){ for (id in layers[layer].milestones){ - if (!(player[layer].milestones.includes(id)) && layers[layer].milestones[id].done()) + if (!(player[layer].milestones.includes(id)) && layers[layer].milestones[id].done()){ player[layer].milestones.push(id) + if (tmp[layer].milestonePopups) popup("milestone", tmp[layer].milestones[id].requirementDescription, "Milestone Gotten!", 3, tmp[layer].color); + } } } @@ -735,7 +737,7 @@ function updateAchievements(layer){ if (isPlainObject(layers[layer].achievements[id]) && !(player[layer].achievements.includes(id)) && layers[layer].achievements[id].done()) { player[layer].achievements.push(id) if (layers[layer].achievements[id].onComplete) layers[layer].achievements[id].onComplete() - popup("achievement", layers[layer].achievements[id].name, "Achievement Gotten!"); + if (tmp[layer].achievementPopups) popup("achievement", tmp[layer].achievements[id].name, "Achievement Gotten!", 3, tmp[layer].color); } } } @@ -814,7 +816,7 @@ var activePopups = []; var popupID = 0; // Function to show popups -function addPopup(type="none",text="This is a test popup.",title="",timer=3, color="") { +function popup(type="none",text="This is a test popup.",title="",timer=3, color="") { switch(type) { case "achievement": popupTitle = "Achievement Unlocked!"; @@ -833,7 +835,7 @@ function addPopup(type="none",text="This is a test popup.",title="",timer=3, col popupMessage = text; popupTimer = timer; - activePopups.push({"time":popupTimer,"type":popupType,"title":popupTitle,"message":(popupMessage+"\n"),"id":popupID}) + activePopups.push({"time":popupTimer,"type":popupType,"title":popupTitle,"message":(popupMessage+"\n"),"id":popupID, "color":color}) popupID++; } diff --git a/popup.css b/popup.css index 454ab0e..765401f 100644 --- a/popup.css +++ b/popup.css @@ -1,6 +1,6 @@ .popup { border: 4px solid; - border-radius: 5px; + border-radius: 7px; width: 300px; min-height: 60px; color: #000000; @@ -8,6 +8,7 @@ margin-top: 30px; padding-top: 15px; padding-bottom: 15px; + border-color: rgba(0, 0, 0, 0.25); } @@ -19,12 +20,10 @@ } .achievement-popup { - border-color: #51629C; background: #7182BC; } -.challenge-popup { - border-color: #B1A21C; +.milestone-popup { background: #D1C23C; }