From 1b85b69ca04e05c04062398790938d311750177c Mon Sep 17 00:00:00 2001 From: Acamaeda Date: Sun, 6 Dec 2020 22:56:37 -0500 Subject: [PATCH] Added popup notifications --- demo.html | 14 +++++++++++++- index.html | 12 ++++++++++++ js/components.js | 3 ++- js/game.js | 1 + js/utils.js | 42 ++++++++++++++++++++++++++++++++++++++++++ popup.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 popup.css diff --git a/demo.html b/demo.html index 06e8696..c2404b7 100644 --- a/demo.html +++ b/demo.html @@ -2,6 +2,8 @@ + + @@ -59,7 +61,6 @@ -




+ + +
+ +
+

{{popup.title}}


+

+
+ +
+
diff --git a/index.html b/index.html index 52fa6d2..8759320 100644 --- a/index.html +++ b/index.html @@ -68,6 +68,18 @@
+ + +
+ +
+

{{popup.title}}


+

+
+ +
+ +
diff --git a/js/components.js b/js/components.js index f5933b6..450db60 100644 --- a/js/components.js +++ b/js/components.js @@ -441,7 +441,8 @@ function loadVue() { subtabResetNotify, VERSION, LAYERS, - hotkeys + hotkeys, + activePopups, }, }) } diff --git a/js/game.js b/js/game.js index 8548eac..e93491b 100644 --- a/js/game.js +++ b/js/game.js @@ -377,6 +377,7 @@ var interval = setInterval(function() { updateTemp(); gameLoop(diff) fixNaNs() + adjustPopupTime(diff) ticking = false }, 50) diff --git a/js/utils.js b/js/utils.js index 262c72e..85c308c 100644 --- a/js/utils.js +++ b/js/utils.js @@ -734,6 +734,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!"); } } } @@ -804,3 +805,44 @@ function isPlainObject(obj) { } document.title = modInfo.name + + + +// Variables that must be defined to display popups +var activePopups = []; +var popupID = 0; + +// Function to show popups +function addPopup(type="none",text="This is a test popup.",title="",timer=3) { + switch(type) { + case "achievement": + popupTitle = "Achievement Unlocked!"; + popupType = "achievement-popup" + break; + case "challenge": + popupTitle = "Challenge Complete"; + popupType = "challenge-popup" + break; + default: + popupTitle = "Something Happened?"; + popupType = "default-popup" + break; + } + if(title != "") popupTitle = title; + popupMessage = text; + popupTimer = timer; + + activePopups.push({"time":popupTimer,"type":popupType,"title":popupTitle,"message":(popupMessage+"\n"),"id":popupID}) + popupID++; +} + + +//Function to reduce time on active popups +function adjustPopupTime(diff) { + for(popup in activePopups) { + activePopups[popup].time -= diff; + if(activePopups[popup]["time"] < 0) { + activePopups.splice(popup,1); // Remove popup when time hits 0 + } + } +} \ No newline at end of file diff --git a/popup.css b/popup.css new file mode 100644 index 0000000..454ab0e --- /dev/null +++ b/popup.css @@ -0,0 +1,45 @@ +.popup { + border: 4px solid; + border-radius: 5px; + width: 300px; + min-height: 60px; + color: #000000; + display: block; + margin-top: 30px; + padding-top: 15px; + padding-bottom: 15px; +} + + +.popup-container { + position: absolute; + z-index: 9999999999999999999999999999999999; + right: 30px; + width: 300px; +} + +.achievement-popup { + border-color: #51629C; + background: #7182BC; +} + +.challenge-popup { + border-color: #B1A21C; + background: #D1C23C; +} + +.fade-enter-active, .fade-leave-active { + transition: opacity .3s +} + +.fade-transition { + transition: opacity .3s +} + +.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { + opacity: 0 +} + +.redtext { + color: red; +}