Added text input

changelog.md

@@ -1,5 +1,6 @@
 # The Modding Tree changelog:
 
+- Added a text-input component.
 - The red layer highlight will not appear before a layer is unlocked.
 
 # v2.π.1 - 4/7/21

docs/custom-tab-layouts.md

@@ -56,7 +56,12 @@ These are the existing components, but you can create more in [components.js](/j
 - tree: Displays a tree. The argument is an array of arrays containing the names of the nodes in the tree (first by row, then by column)
     [See here for more information on tree layouts and nodes!](trees-and-tree-customization.md)
 
-- toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, e.g. `[layer, id]`
+- toggle: A toggle button that toggles a bool value. The argument is a pair that identifies what bool to toggle, e.g. `[layer, id]`
+
+- text-input: A text input box. The argument is the name of the variable in player[layer] that the input is for, player[layer][argument]
+    (Works with strings, numbers, and Decimals!)
+
+
 
 The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.
 

js/Demo/demoLayers.js

@@ -13,6 +13,7 @@ addLayer("c", {
             total: new Decimal(0),
             buyables: {}, // You don't actually have to initialize this one
             beep: false,
+            thingy: "pointy",
         }},
         color: "#4BDC13",
         requires: new Decimal(10), // Can be a function that takes requirement increases into account
@@ -296,8 +297,10 @@ addLayer("c", {
                     "prestige-button", "resource-display",
                     ["blank", "5px"], // Height
                     ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
+                    ["display-text", "Name your points!"],
+                    ["text-input", "thingy"],
                     ["display-text",
-                        function() {return 'I have ' + format(player.points) + ' pointy points!'},
+                        function() {return 'I have ' + format(player.points) + ' ' + player.c.thingy + ' points!'},
                         {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
                     "h-line", "milestones", "blank", "upgrades", "challenges"],
             },
@@ -374,7 +377,7 @@ addLayer("f", {
         unlocked: false,
         points: new Decimal(0),
         boop: false,
-        clickables: {[11]: "Start"} // Optional default Clickable state
+        clickables: {[11]: "Start"}, // Optional default Clickable state
     }},
     color: "#FE0102",
     requires() {return new Decimal(10)}, 

js/components.js

@@ -398,6 +398,16 @@ function loadVue() {
 	`
 	})
 
+	// Updates the value in player[layer][data]
+	Vue.component('text-input', {
+		props: ['layer', 'data'],
+		template: `
+			<input class="instant" :id="'input-' + layer + '-' + data" :value="player[layer][data].toString()" v-on:focus="focused(true)" v-on:blur="focused(false)"
+			v-on:change="player[layer][data] = toValue(document.getElementById('input-' + layer + '-' + data).value, player[layer][data])">
+		`
+	})
+
+
 	// These are for buyables, data is the id of the corresponding buyable
 	Vue.component('sell-one', {
 		props: ['layer', 'data'],

js/utils.js

@@ -360,7 +360,14 @@ function isPlainObject(obj) {
 
 document.title = modInfo.name
 
-
+// Converts a string value to whatever it's supposed to be
+function toValue(value, oldValue) {
+	if (oldValue instanceof Decimal)
+		return new Decimal (value)
+	else if (!isNaN(oldValue))
+		return value.toNumber()
+	else return value
+}
 
 // Variables that must be defined to display popups
 var activePopups = [];