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

Worked on particles

Browse source
This commit is contained in:
Harley White 2021-05-13 21:40:51 -04:00
parent 94f677b641
commit fccc82e2c0
8 changed files with 86 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
demo.html
View file

@ -22,6 +22,8 @@
<script src="js/technical/systemComponents.js"></script>
<script src="js/components.js"></script>
<script src="js/technical/canvas.js"></script>
<script src="js/technical/particleSystem.js"></script>
<script src="js/utils/NumberFormating.js"></script>
<script src="js/utils/options.js"></script>
<script src="js/utils/save.js"></script>
@ -29,7 +31,7 @@
</head>
<body onload="load()">
<body onload="load()" onmousemove="updateMouse(event)">
<div id="app">
<canvas id="treeCanvas" class="canvas" v-if="!(gameEnded && !player.keepGoing)"></canvas>
@ -111,6 +113,11 @@
</div>
</transition-group>
</div>
<div class="particle-container">
<div v-for="particle,index in particles">
<particle :data="particle" :index="index" v-bind:key="'b' + particle.id"></particle>
</div>
</div>
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" style="background-color:var(--background)" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS">

2
index.html
View file

@ -15,12 +15,14 @@
<script src="js/mod.js"></script>
<script src="js/technical/temp.js"></script>
<script src="js/technical/displays.js"></script>
<script src="js/game.js"></script>
<script src="js/utils.js"></script>
<script src="js/utils/easyAccess.js"></script>
<script src="js/technical/systemComponents.js"></script>
<script src="js/components.js"></script>
<script src="js/technical/canvas.js"></script>
<script src="js/technical/particleSystem.js"></script>
<script src="js/utils/NumberFormating.js"></script>
<script src="js/utils/options.js"></script>
<script src="js/utils/save.js"></script>

4
js/Demo/demoLayers.js
View file

@ -300,7 +300,7 @@ addLayer("c", {
["main-display",
"prestige-button", "resource-display",
["blank", "5px"], // Height
["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
["raw-html", function() {return "<button onclick='console.log(`yeet`); makeParticles(coolParticle, 2)'>'HI'</button>"}],
["display-text", "Name your points!"],
["text-input", "thingy"],
["display-text",
@ -555,3 +555,5 @@ addLayer("a", {
},
},
)
const coolParticle = {}

4
js/components.js
View file

@ -544,6 +544,7 @@ function loadVue() {
Vue.component('info-tab', systemComponents['info-tab'])
Vue.component('options-tab', systemComponents['options-tab'])
Vue.component('tooltip', systemComponents['tooltip'])
Vue.component('particle', systemComponents['particle'])
app = new Vue({
@ -582,6 +583,9 @@ function loadVue() {
LAYERS,
hotkeys,
activePopups,
particles,
mouseX,
mouseY,
},
})
}

4
js/game.js
View file

@ -406,6 +406,7 @@ var interval = setInterval(function() {
ticking = true
let now = Date.now()
let diff = (now - player.time) / 1e3
let trueDiff = diff
if (player.offTime !== undefined) {
if (player.offTime.remain > modInfo.offlineLimit * 3600) player.offTime.remain = modInfo.offlineLimit * 3600
if (player.offTime.remain > 0) {
@ -427,7 +428,8 @@ var interval = setInterval(function() {
updateTabFormats()
gameLoop(diff)
fixNaNs()
adjustPopupTime(0.05)
adjustPopupTime(trueDiff)
updateParticles(trueDiff)
ticking = false
}, 50)

46
js/technical/particleSystem.js Normal file
View file

@ -0,0 +1,46 @@
// Variables that must be defined to display popups
var particles = [];
var particleID = 0;
var mouseX = 0;
var mouseY = 0;
// Function to show popups
function makeParticles(data, amount=1) {
for (let x = 0; x < amount; x++) {
let particle = getNewParticle()
for (thing in data) {
switch(thing) {
case DEFAULT:
particle[thing]=data[thing]
}
}
particles.push(particle)
}
}
//Function to reduce time on active popups
function updateParticles(diff) {
for (p in particles) {
particles[p].time -= diff;
if (particles[p]["time"] < 0) {
particles.splice(p, 1); // Remove popup when time hits 0
}
}
}
function getNewParticle() {
particleID++
return {
time: 5,
id: particleID,
x: mouseX,
y: mouseY,
}
}
function updateMouse(event) {
mouseX = event.clientX
mouseY = event.clientY
}

9
js/technical/systemComponents.js
View file

@ -187,7 +187,14 @@ var systemComponents = {
<img v-else class='mark' style='position: absolute; left: -25px; top: -10px;' v-bind:src="data"></div>
</div>
`
}
},
'particle': {
props: ['data', 'index'],
template: `<div class='particle' v-bind:style="{left: data.x + 'px', top: data.y + 'px'}">ahragagag
</div>
`
},
}

12
popup.css
View file

@ -42,3 +42,15 @@
.redtext {
color: red;
}
.particle {
border: 4px solid;
border-radius: 7px;
width: 50px;
min-height: 60px;
background-color: #696969;
display: block;
border-color: rgba(0, 0, 0, 0.25);
position:absolute;
z-index: 99999
}