incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-24 09:21:46 +00:00
Code Issues Releases Activity Actions

Added popup notifications

Browse source
This commit is contained in:
Acamaeda 2020-12-06 22:56:37 -05:00
parent 473f9d58d9
commit 1b85b69ca0
6 changed files with 115 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
demo.html
View file

@ -2,6 +2,8 @@
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="popup.css" />
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script type="text/javascript" src="js/technical/break_eternity.js"></script>
@ -59,7 +61,6 @@
</div>
</div>
<div v-if="!(gameEnded && !player.keepGoing)" id="treeTab" style="z-index: 0" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
<br><br><br><br>
<overlay-head id="fakeHead" style="visibility: hidden;">
@ -68,6 +69,17 @@
<layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" ></layer-tab>
</div>
<!-- Popups -->
<div class="popup-container">
<transition-group name="fade">
<div v-for="popup,index in activePopups" class="popup" v-bind:class="popup.type" v-bind:key="popup.id">
<h3>{{popup.title}}</h3><br>
<h2 v-html="popup.message"></h2>
</div>
</transition-group>
</div>
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS" >
<div v-if="player.tab==layer" >

12
index.html
View file

@ -68,6 +68,18 @@
<layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" ></layer-tab>
</div>
<!-- Popups -->
<div class="popup-container">
<transition-group name="fade">
<div v-for="popup,index in activePopups" class="popup" v-bind:class="popup.type" v-bind:key="popup.id">
<h3>{{popup.title}}</h3><br>
<h2 v-html="popup.message"></h2>
</div>
</transition-group>
</div>
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS" >
<div v-if="player.tab==layer" >

3
js/components.js
View file

@ -441,7 +441,8 @@ function loadVue() {
subtabResetNotify,
VERSION,
LAYERS,
hotkeys
hotkeys,
activePopups,
},
})
}

1
js/game.js
View file

@ -377,6 +377,7 @@ var interval = setInterval(function() {
updateTemp();
gameLoop(diff)
fixNaNs()
adjustPopupTime(diff)
ticking = false
}, 50)

42
js/utils.js
View file

@ -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
}
}
}

45
popup.css Normal file
View file

@ -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;
}