From f2a0a5ac28911497d44dbe50e9080f4f3380d57c Mon Sep 17 00:00:00 2001 From: Acamaeda Date: Sat, 3 Oct 2020 19:50:03 -0400 Subject: [PATCH] 1.2.3: Added row and column components and customizable blanks --- docs/custom-tab-layouts.md | 11 +++-- index.html | 27 +++++++----- js/game.js | 2 +- js/layers.js | 12 +++++- js/v.js | 84 +++++++++++++++++++++++++++----------- 5 files changed, 94 insertions(+), 42 deletions(-) diff --git a/docs/custom-tab-layouts.md b/docs/custom-tab-layouts.md index d8b6562..604c642 100644 --- a/docs/custom-tab-layouts.md +++ b/docs/custom-tab-layouts.md @@ -5,7 +5,7 @@ Custom tab layouts can be used to do basically anything in a tab window, especia ```js tabFormat: ["main-display", ["prestige-button", function(){return "Melt your points into "}], - ["raw-html", function() {return ""}], + "blank", ["display-text", function() {return 'I have ' + format(player.points) + ' pointy points!'}, {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}], @@ -24,7 +24,9 @@ These are the existing components, but you can create more in v.js: - raw-html: Displays some HTML. The argument is the HTML as a string, or a function that returns updating HTML. It doesn't work with many vue things. -- blank: An empty newline +- blank: Adds empty space. The default dimensions are 8px x 17px. The argument changes the dimensions. + If it's a single value (e.g. "20px"), that determines the height. + If you have a pair of arguments, the first is width and the second is height. - main-display: The text that displays the main currency for the layer and its effects. @@ -38,6 +40,7 @@ These are the existing components, but you can create more in v.js: - toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, [layer, id] +- row: Display a list of components horizontally. The argument is an array of components in the tab layout format. -Tip: use readData on things you're displaying! If the data is a function, it will return the result of calling it. - Otherwise, it will return the data itself. This lets you use dynamic values, while keeping constant values convenient. \ No newline at end of file +- column: Display a list of components vertically. The argument is an array of components in the tab layout format. + This is useful to display columns within a row. \ No newline at end of file diff --git a/index.html b/index.html index 69f5eb8..8868fe8 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,12 @@

- +

v1.2.3

+

v1.2: This Changes Everything!


+
Alpha / Beta

+
+
+

v1.1.1


- -
Alpha / Beta

-
-
-
-

v1.0 Something

+

v1.0: Technically Something


@@ -166,11 +170,12 @@
-
-
-
+
+
+
+
- \ No newline at end of file + diff --git a/js/game.js b/js/game.js index c195ac2..2ee13eb 100644 --- a/js/game.js +++ b/js/game.js @@ -5,7 +5,7 @@ var NaNalert = false; var gameEnded = false; let VERSION = { - num: "1.2.2", + num: "1.2.3", name: "This changes everything!" } diff --git a/js/layers.js b/js/layers.js index 5ca2bea..5a8d9f6 100644 --- a/js/layers.js +++ b/js/layers.js @@ -174,13 +174,21 @@ addLayer("c", { // Optional, lets you format the tab yourself by listing components. You can create your own components in v.js. tabFormat: ["main-display", ["prestige-button", function() {return "Melt your points into "}], + ["blank", "5px"], // Height ["raw-html", function() {return ""}], ["display-text", function() {return 'I have ' + format(player.points) + ' pointy points!'}, {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}], ["buyables", "150px"], - ["toggle", ["c", "beep"]], - "milestones", "upgrades", "challs"], + ["row", [ + ["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height + ["display-text", function() {return "Beep"}], "blank", + ["column", [ + ["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}], + ["prestige-button", function() {return "Be redundant for "}, {'width': '150px', 'height': '30px'}], + ]], + ]], + "milestones", "blank", "upgrades", "challs"], style() {return { 'background-color': '#3325CC' }}, diff --git a/js/v.js b/js/v.js index 071cbab..a889d70 100644 --- a/js/v.js +++ b/js/v.js @@ -28,6 +28,66 @@ 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 lines, data = optional height in px or pair with width and height in px + Vue.component('blank', { + props: ['layer', 'data'], + template: ` +
+
+
+

+
+ ` + }) + + // data = an array of Components to be displayed in a row + Vue.component('row', { + props: ['layer', 'data'], + template: ` +
+
+
+
+
+
+
+
+
+ ` + }) + + // data = an array of Components to be displayed in a column + Vue.component('column', { + props: ['layer', 'data'], + template: ` +
+
+
+
+
+
+
+
+
+ ` + }) + Vue.component('challs', { props: ['layer'], template: ` @@ -140,30 +200,6 @@ 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 lines - Vue.component('blank', { - props: ['layer', 'data'], - template: ` -
- ` - }) - app = new Vue({ el: "#app", data: {