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

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"],
],

113
js/v.js
View file

@ -29,47 +29,41 @@ 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 space, 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 = a function returning the content
Vue.component('display-text', {
props: ['layer', 'data'],
template: `
<span>{{readData(data)}}</span>
`
})
// Displays an image, data is the URL
Vue.component('display-image', {
props: ['layer', 'data'],
template: `
<span><img v-bind:src= "readData(data)" v-bind:alt= "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>
`
})
Vue.component('image', {
props: ['layer', 'data'],
template: `
`
})
// Blank space, 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>
`
})
// Displays an image, data is the URL
Vue.component('display-image', {
props: ['layer', 'data'],
template: `
<span><img v-bind:src= "readData(data)" v-bind:alt= "readData(data)"></span>
`
})
// data = an array of Components to be displayed in a row
Vue.component('row', {
@ -87,22 +81,41 @@ function loadVue() {
`
})
// 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>
// 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>
`
})
// 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;
}