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 h-line, v-line, and display-image components

Browse source
This commit is contained in:
Acamaeda 2020-10-04 21:09:34 -04:00
parent 8791a8a6af
commit fe573aa500
3 changed files with 75 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
js/layers.js
View file

@ -181,17 +181,17 @@ addLayer("c", {
["display-text",
function() {return 'I have ' + format(player.points) + ' pointy points!'},
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
"milestones", "blank", "upgrades", "challs"],
"h-line", "milestones", "blank", "upgrades", "challs"],
thingies: [
["buyables", "150px"], "blank",
["row", [
["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
["display-text", function() {return "Beep"}], "blank",
["display-text", function() {return "Beep"}], "blank", ["v-line", "200px"],
["column", [
["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
]],
]],
], {'width': '600px', 'height': '350px', 'background-color': 'green', 'border-style': 'solid'}],
"blank",
["display-image", "discord.png"],
],

25
js/v.js
View file

@ -65,12 +65,6 @@ function loadVue() {
`
})
Vue.component('image', {
props: ['layer', 'data'],
template: `
`
})
// data = an array of Components to be displayed in a row
Vue.component('row', {
props: ['layer', 'data'],
@ -103,6 +97,25 @@ function loadVue() {
`
})
// Data = width in px, by default fills the full area
Vue.component('h-line', {
props: ['layer', 'data'],
template:`
<hr v-bind:style="data ? {'width': data} : {}" class="hl">
`
})
// Data = height in px, by default is bad
Vue.component('v-line', {
props: ['layer', 'data'],
template: `
<div v-bind:style="data ? {'height': data} : {}" class="vl2"></div>
`
})
Vue.component('challs', {
props: ['layer'],
template: `

9
style.css
View file

@ -367,6 +367,15 @@ a {
top: 0
}
.vl2 {
border-left: 3px solid var(--color);
height: 100%;
}
.hl {
border-top: 3px solid var(--color);
}
ul {
list-style-type: none;
}