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-22 00:21:32 +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", ["display-text",
function() {return 'I have ' + format(player.points) + ' pointy points!'}, function() {return 'I have ' + format(player.points) + ' pointy points!'},
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}], {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
"milestones", "blank", "upgrades", "challs"], "h-line", "milestones", "blank", "upgrades", "challs"],
thingies: [ thingies: [
["buyables", "150px"], "blank", ["buyables", "150px"], "blank",
["row", [ ["row", [
["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height ["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
["display-text", function() {return "Beep"}], "blank", ["display-text", function() {return "Beep"}], "blank", ["v-line", "200px"],
["column", [ ["column", [
["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}], ["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}],
["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", "blank",
["display-image", "discord.png"], ["display-image", "discord.png"],
], ],

113
js/v.js
View file

@ -29,47 +29,41 @@ function loadVue() {
` `
}) })
// data = a function returning the content // data = a function returning the content
Vue.component('display-text', { Vue.component('display-text', {
props: ['layer', 'data'], props: ['layer', 'data'],
template: ` template: `
<span>{{readData(data)}}</span> <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>
`
})
// Displays an image, data is the URL // data = a function returning html content, with some limited functionality
Vue.component('display-image', { Vue.component('raw-html', {
props: ['layer', 'data'], props: ['layer', 'data'],
template: ` template: `
<span><img v-bind:src= "readData(data)" v-bind:alt= "readData(data)"></span> <span v-html="readData(data)"></span>
` `
}) })
Vue.component('image', { // Blank space, data = optional height in px or pair with width and height in px
props: ['layer', 'data'], Vue.component('blank', {
template: ` 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 // data = an array of Components to be displayed in a row
Vue.component('row', { Vue.component('row', {
@ -87,22 +81,41 @@ function loadVue() {
` `
}) })
// data = an array of Components to be displayed in a column // data = an array of Components to be displayed in a column
Vue.component('column', { Vue.component('column', {
props: ['layer', 'data'], props: ['layer', 'data'],
template: ` template: `
<div class="upgTable"> <div class="upgTable">
<div class="upgCol"> <div class="upgCol">
<div v-for="item in data"> <div v-for="item in data">
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div> <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==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 v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
</div>
</div> </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', { Vue.component('challs', {
props: ['layer'], props: ['layer'],
template: ` template: `

9
style.css
View file

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