diff --git a/js/layers.js b/js/layers.js
index fe6a5f1..a85e698 100644
--- a/js/layers.js
+++ b/js/layers.js
@@ -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"],
],
diff --git a/js/v.js b/js/v.js
index bc52369..9001d33 100644
--- a/js/v.js
+++ b/js/v.js
@@ -29,47 +29,41 @@ function loadVue() {
`
})
- // data = a function returning the content
- Vue.component('display-text', {
- props: ['layer', 'data'],
- template: `
- {{readData(data)}}
- `
- })
-
- // data = a function returning html content, with some limited functionality
- Vue.component('raw-html', {
- 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: `
-
- `
- })
+ // data = a function returning the content
+ Vue.component('display-text', {
+ props: ['layer', 'data'],
+ template: `
+ {{readData(data)}}
+ `
+ })
- // Displays an image, data is the URL
- Vue.component('display-image', {
- props: ['layer', 'data'],
- template: `
-
- `
- })
+ // data = a function returning html content, with some limited functionality
+ Vue.component('raw-html', {
+ props: ['layer', 'data'],
+ template: `
+
+ `
+ })
- 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: `
+
+ `
+ })
+
+ // Displays an image, data is the URL
+ Vue.component('display-image', {
+ props: ['layer', 'data'],
+ template: `
+
+ `
+ })
// 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: `
-
-
-
+ // data = an array of Components to be displayed in a column
+ Vue.component('column', {
+ props: ['layer', 'data'],
+ template: `
+
+ `
+ })
+
+
+ // Data = width in px, by default fills the full area
+ Vue.component('h-line', {
+ props: ['layer', 'data'],
+ template:`
+
`
})
+ // Data = height in px, by default is bad
+ Vue.component('v-line', {
+ props: ['layer', 'data'],
+ template: `
+
+ `
+ })
+
+
+
Vue.component('challs', {
props: ['layer'],
template: `
diff --git a/style.css b/style.css
index b459c31..6fa4b38 100644
--- a/style.css
+++ b/style.css
@@ -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;
}