Added slider component

changelog.md

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

docs/custom-tab-layouts.md

@@ -61,6 +61,9 @@ These are the existing components, but you can create more in [components.js](/j
 - 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!)
 
+- slider: Lets the user input a value with a slider. The argument a 3-element array: [name, min, max].
+    The name is the name of the variable in player[layer] that the input that the input is for, and min and max are the limits of the slider.
+    (Does not work for Decimal values)
     
 
 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

@@ -14,6 +14,7 @@ addLayer("c", {
             buyables: {}, // You don't actually have to initialize this one
             beep: false,
             thingy: "pointy",
+            otherThingy: 10,
         }},
         color: "#4BDC13",
         requires: new Decimal(10), // Can be a function that takes requirement increases into account
@@ -341,7 +342,9 @@ addLayer("c", {
                 unlocked() {return (hasUpgrade("c", 13))},
                 content:[
                     ["raw-html", function() {return "<h1> C O N F I R M E D </h1>"}], "blank",
-                    ["microtabs", "stuff", {'width': '600px', 'height': '350px', 'background-color': 'brown', 'border-style': 'solid'}]
+                    ["microtabs", "stuff", {'width': '600px', 'height': '350px', 'background-color': 'brown', 'border-style': 'solid'}],
+                    ["display-text", "Adjust how many points H gives you!"],
+                    ["slider", ["otherThingy", 1, 30]],
                 ]
             }
 

js/Demo/demoTree.js

@@ -36,11 +36,11 @@ addNode("g", {
 addNode("h", {
     branches: ["g"],
     layerShown: true,
-    tooltip: "Restore your points to 10",
+    tooltip() {return "Restore your points to " + player.c.otherThingy},
-    tooltipLocked: "Restore your points to 10",
+    tooltipLocked() {return "Restore your points to " + player.c.otherThingy},
     row: "side",
-    canClick() {return player.points.lt(10)},
+    canClick() {return player.points.lt(player.c.otherThingy)},
-    onClick() {player.points = new Decimal(10)}
+    onClick() {player.points = new Decimal(player.c.otherThingy)}
 }, 
 )
 

js/components.js

@@ -407,6 +407,13 @@ function loadVue() {
 		`
 	})
 
+// Updates the value in player[layer][data]
+	Vue.component('slider', {
+		props: ['layer', 'data'],
+		template: `
+			<div><input type="range" v-model="player[layer][data[0]]" :min="data[1]" :max="data[2]"></div>
+		`
+	})
 
 	// These are for buyables, data is the id of the corresponding buyable
 	Vue.component('sell-one', {