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 17:31:50 +00:00
Code Issues Releases Activity Actions

Added arbitrary HTML and CSS components, and made the main resource display a component

Browse source
This commit is contained in:
Acamaeda 2020-09-29 18:31:38 -04:00
parent 00fadd0981
commit d2476ebde6
3 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -124,8 +124,7 @@
<div v-for="layer in LAYERS">
<div v-if="player.tab==layer && !layers[layer].tabFormat" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
<span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span>
<br><br>
<main-display :layer="layer"></main-display>
<prestige-button :layer="layer"></prestige-button>
<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
<br><br>
@ -139,8 +138,6 @@
</div>
<div v-if="player.tab==layer && layers[layer].tabFormat" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
<span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span>
<br><br>
<div v-for="data in layers[layer].tabFormat">
<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
<div v-else-if="data.length==3" v-bind:is="data[0]" :layer= "layer" :data= "data[1]" :data2="data[2]"></div>

2
js/layers.js
View file

@ -99,7 +99,7 @@ var layers = {
incr_order: [], // Array of layer names to have their order increased when this one is first unlocked
// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
tabFormat: [["colored-text", function() {return 'I have ' + format(player.points) + ' pointy points!'}, "red"], "blank", ["toggle", ["c", "beep"]], "milestones", "blank", "blank", "upgrades"]
tabFormat: ["main-display", ["prestige-button", function(){return "Melt your points into "}], ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}], ["display-text", function() {return 'I have ' + format(player.points) + ' pointy points!'}, {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}], "blank", ["toggle", ["c", "beep"]], "milestones", "blank", "blank", "upgrades"]
},
f: {

40
js/v.js
View file

@ -81,31 +81,41 @@ function loadVue() {
`
})
// data = function to return the text describing the reset before the amount gained (optional)
Vue.component('prestige-button', {
props: ['layer'],
template: `
<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">Reset for </span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">Reset for </span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">Req: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer]))}} {{ layers[layer].baseResource }}</button>
`
})
// data = content
Vue.component('display-text', {
props: ['layer', 'data'],
template: `
<span>{{data()}}</span>
<span>
<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }" v-bind:style="{'background-color': layers[layer].color}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">Req: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer]))}} {{ layers[layer].baseResource }}</button>
</span>
`
})
// text, colorful and with the shadowy effect. You can probably do other custom text effects if you want.
Vue.component('colored-text', {
props: ['layer', 'data', 'data2'],
// Displays the main resource for the layer
Vue.component('main-display', {
props: ['layer'],
template: `
<span v-bind:style="{'color': data2, 'text-shadow': '0px 0px 10px' + data2}">{{data()}}</span>
<div><span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': layers[layer].color, 'text-shadow': '0px 0px 10px' + layers[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{layers[layer].resource}}<span v-if="layers[layer].effectDescription">, {{layers[layer].effectDescription()}}</span><br><br></span>
`
})
// data = a function returning the content, data2 = a CSS object with the formatting (optional)
Vue.component('display-text', {
props: ['layer', 'data' , 'data2'],
template: `
<span v-bind:style="(data2 ? data2 : {})">{{data()}}</span>
`
})
// data = a function returning html content, with some limited functionality
Vue.component('raw-html', {
props: ['layer', 'data'],
template: `
<span v-html="data()"></span>
`
})
// Blank lines
Vue.component('blank', {
props: ['layer', 'data'],