From fe573aa5002dcb53807fc890665d186826176bec Mon Sep 17 00:00:00 2001
From: Acamaeda <acamaeda@gmail.com>
Date: Sun, 4 Oct 2020 21:09:34 -0400
Subject: [PATCH] Added h-line, v-line, and display-image components

---
 js/layers.js |   6 +--
 js/v.js      | 113 ++++++++++++++++++++++++++++-----------------------
 style.css    |   9 ++++
 3 files changed, 75 insertions(+), 53 deletions(-)

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