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; }