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-21 16:13:55 +00:00
Code Issues Releases Activity Actions

1.2.3: Added row and column components and customizable blanks

Browse source
This commit is contained in:
Acamaeda 2020-10-03 19:50:03 -04:00
parent d712c6f8e1
commit f2a0a5ac28
5 changed files with 94 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
docs/custom-tab-layouts.md
View file

@ -5,7 +5,7 @@ Custom tab layouts can be used to do basically anything in a tab window, especia
```js
tabFormat: ["main-display",
["prestige-button", function(){return "Melt your points into "}],
["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
"blank",
["display-text",
function() {return 'I have ' + format(player.points) + ' pointy points!'},
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
@ -24,7 +24,9 @@ These are the existing components, but you can create more in v.js:
- raw-html: Displays some HTML. The argument is the HTML as a string, or a function that returns updating HTML.
It doesn't work with many vue things.
- blank: An empty newline
- blank: Adds empty space. The default dimensions are 8px x 17px. The argument changes the dimensions.
If it's a single value (e.g. "20px"), that determines the height.
If you have a pair of arguments, the first is width and the second is height.
- main-display: The text that displays the main currency for the layer and its effects.
@ -38,6 +40,7 @@ These are the existing components, but you can create more in v.js:
- toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, [layer, id]
- row: Display a list of components horizontally. The argument is an array of components in the tab layout format.
Tip: use readData on things you're displaying! If the data is a function, it will return the result of calling it.
Otherwise, it will return the data itself. This lets you use dynamic values, while keeping constant values convenient.
- column: Display a list of components vertically. The argument is an array of components in the tab layout format.
This is useful to display columns within a row.

25
index.html
View file

@ -45,7 +45,12 @@
</div>
<div v-if="player.tab=='changelog'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br>
<h3>v1.2.3</h3>
<ul>
<li>Added a row component, which displays a list of objects in a row.</li>
<li>Added a column component, which displays a list of objects in a column (useful within a row).</li>
<li>Changed blanks to have a customizable width and height.</li>
</ul><br>
<h3>v1.2: This Changes Everything!</h3>
<ul>
<li>Many layer features can now be static values or functions. (This made some notations change, which will break things)</li>
@ -54,6 +59,10 @@
<li>Added a configurable offline time limit in modinfo at the top of index.html. (default 1 hour)</li>
<li>Added a few minor features, and updated the docs with new information.</li>
</ul><br>
<div class="link" onclick="showTab('old-stuff')">Alpha / Beta</div><br>
</div>
<div v-if="player.tab=='old-stuff'" class="col right">
<button class="back" onclick="showTab('changelog')">←</button><br>
<h3>v1.1.1</h3>
<ul>
<li>You can define hotkeys in layer config.</li>
@ -64,12 +73,7 @@
<li>Custom CSS can now be used on any component! Make the third argument an object with the CSS parameters.</li>
<li>Lots of minor good things.</li>
</ul><br>
<div class="link" onclick="showTab('Old Stuff')">Alpha / Beta</div><br>
</div>
<div v-if="player.tab=='changelog_beta'" class="col right">
<button class="back" onclick="showTab('changelog')">←</button><br>
<h3>v1.0 Something</h3>
<h3>v1.0: Technically Something</h3>
<ul>
<li>The first numbered version.</li>
</ul><br>
@ -166,9 +170,10 @@
</div>
<div v-if="layers[layer].tabFormat">
<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:style="(data[2] ? data[2] : {})" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
<div v-else-if="data.length==3" v-bind:style="(data[2] ? data[2] : {})" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]">
</div>
</divs>
</div>
</div>

2
js/game.js
View file

@ -5,7 +5,7 @@ var NaNalert = false;
var gameEnded = false;
let VERSION = {
num: "1.2.2",
num: "1.2.3",
name: "This changes everything!"
}

12
js/layers.js
View file

@ -174,13 +174,21 @@ addLayer("c", {
// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
tabFormat: ["main-display",
["prestige-button", function() {return "Melt your points into "}],
["blank", "5px"], // Height
["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"}],
["buyables", "150px"],
["toggle", ["c", "beep"]],
"milestones", "upgrades", "challs"],
["row", [
["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
["display-text", function() {return "Beep"}], "blank",
["column", [
["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
]],
]],
"milestones", "blank", "upgrades", "challs"],
style() {return {
'background-color': '#3325CC'
}},

84
js/v.js
View file

@ -28,6 +28,66 @@ function loadVue() {
`
})
// data = a function returning the content
Vue.component('display-text', {
props: ['layer', 'data'],
template: `
<span>{{readData(data)}}</span>
`
})
// data = a function returning html content, with some limited functionality
Vue.component('raw-html', {
props: ['layer', 'data'],
template: `
<span v-html="readData(data)"></span>
`
})
// Blank lines, data = optional height in px or pair with width and height in px
Vue.component('blank', {
props: ['layer', 'data'],
template: `
<div>
<div v-if="!data" v-bind:style="{'width': '8px', 'height': '17px'}"></div>
<div v-else-if="Array.isArray(data)" v-bind:style="{'width': data[0], 'height': data[1]}"></div>
<div v-else v-bind:style="{'width': '8px', 'height': 'data'}"><br></div>
</div>
`
})
// data = an array of Components to be displayed in a row
Vue.component('row', {
props: ['layer', 'data'],
template: `
<div class="upgTable">
<div class="upgRow">
<div v-for="item in data">
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
</div>
</div>
</div>
`
})
// data = an array of Components to be displayed in a column
Vue.component('column', {
props: ['layer', 'data'],
template: `
<div class="upgTable">
<div class="upgCol">
<div v-for="item in data">
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
</div>
</div>
</div>
`
})
Vue.component('challs', {
props: ['layer'],
template: `
@ -140,30 +200,6 @@ function loadVue() {
`
})
// data = a function returning the content
Vue.component('display-text', {
props: ['layer', 'data'],
template: `
<span>{{readData(data)}}</span>
`
})
// data = a function returning html content, with some limited functionality
Vue.component('raw-html', {
props: ['layer', 'data'],
template: `
<span v-html="readData(data)"></span>
`
})
// Blank lines
Vue.component('blank', {
props: ['layer', 'data'],
template: `
<br>
`
})
app = new Vue({
el: "#app",
data: {