Added mouse-holding functionality to buy/clickables

changelog.md

@@ -1,10 +1,12 @@
 # The Modding Tree changelog:
 
-# v2.5: Dreams Really Do Come True - 
+# v2.5: Dreams Really Do Come True - 5/7/21
 - Optimizations, hopefully a significant amount.
 - Added OOM/s point gen display at high values (thanks to Ducdat!)
 - Only one tab will display if the window is not wide enough (also thanks to Ducdat!)
+- Holding down a buyable's button now buys it continuously.
 - New milestone setting will also show the most recently unlocked milestone. (Also renamed all settings to be clearer)
+- Added an onHold feature for clickables.
 - Layer nodes will be highlighted even if the player is on the same tab.
 - Added customizable node glowColor.
 - Added buyable purchaseLimit.

docs/clickables.md

@@ -38,6 +38,8 @@ Features:
 
 - onClick(): A function that implements clicking one of the clickable. 
 
+- onHold(): **optional** A function that is called 20x/sec when the button is held for at least 0.25 seconds.
+
 - style: **optional**. Applies CSS to this clickable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
 
 - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.

js/Demo/demoLayers.js

@@ -452,9 +452,11 @@ addLayer("f", {
                     default:
                         player[this.layer].clickables[this.id] = "Start"
                         break;
-
                 }
             },
+            onHold(){
+                console.log("Clickkkkk...")
+            },
             style() {
                 switch(getClickableState(this.layer, this.id)){
                     case "Start":

js/components.js

@@ -260,7 +260,7 @@ function loadVue() {
 		<div v-if="tmp[layer].buyables && tmp[layer].buyables[data]!== undefined && tmp[layer].buyables[data].unlocked" style="display: grid">
 			<button v-bind:class="{ buyable: true, can: tmp[layer].buyables[data].canBuy, locked: !tmp[layer].buyables[data].canAfford, bought: player[layer].buyables[data].gte(tmp[layer].buyables[data].purchaseLimit)}"
 			v-bind:style="[tmp[layer].buyables[data].canBuy ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].componentStyles.buyable, tmp[layer].buyables[data].style]"
-			v-on:click="buyBuyable(layer, data)">
+			v-on:click="buyBuyable(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
 				<span v-if= "tmp[layer].buyables[data].title"><h2 v-html="tmp[layer].buyables[data].title"></h2><br></span>
 				<span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].buyables[data].display, layers[layer].buyables[data])"></span>
 			</button>
@@ -268,7 +268,23 @@ function loadVue() {
 			<sell-one :layer="layer" :data="data" v-bind:style="tmp[layer].componentStyles['sell-one']" v-if="(tmp[layer].buyables[data].sellOne)&& !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)"></sell-one>
 			<sell-all :layer="layer" :data="data" v-bind:style="tmp[layer].componentStyles['sell-all']" v-if="(tmp[layer].buyables[data].sellAll)&& !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false)"></sell-all>
 		</div>
-		`
+		`,
+		data() { return { interval: false, time: 0,}},
+		methods: {
+			start() {
+				if (!this.interval) {
+					this.interval = setInterval((function() {
+						if(this.time >= 5)
+							buyBuyable(this.layer, this.data)
+						this.time = this.time+1
+					}).bind(this), 50)}
+			},
+			stop() {
+				clearInterval(this.interval)
+				this.interval = false
+			  	this.time = 0
+			}
+		},
 	})
 
 	Vue.component('respec-button', {
@@ -305,11 +321,29 @@ function loadVue() {
 			v-if="tmp[layer].clickables && tmp[layer].clickables[data]!== undefined && tmp[layer].clickables[data].unlocked" 
 			v-bind:class="{ upg: true, can: tmp[layer].clickables[data].canClick, locked: !tmp[layer].clickables[data].canClick}"
 			v-bind:style="[tmp[layer].clickables[data].canClick ? {'background-color': tmp[layer].color} : {}, size ? {'height': size, 'width': size} : {}, tmp[layer].clickables[data].style]"
-			v-on:click="clickClickable(layer, data)">
+			v-on:click="clickClickable(layer, data)"  @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
 			<span v-if= "tmp[layer].clickables[data].title"><h2 v-html="tmp[layer].clickables[data].title"></h2><br></span>
 			<span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].clickables[data].display, layers[layer].clickables[data])"></span>
 		</button>
-		`
+		`,
+		data() { return { interval: false, time: 0,}},
+		methods: {
+			start() {
+				if (!this.interval && layers[this.layer].clickables[this.data].onHold) {
+					this.interval = setInterval((function() {
+						let c = layers[this.layer].clickables[this.data]
+						if(this.time >= 5 && run(c.canClick, c)) {
+							run(c.onHold, c)
+						}	
+						this.time = this.time+1
+					}).bind(this), 50)}
+			},
+			stop() {
+				clearInterval(this.interval)
+				this.interval = false
+			  	this.time = 0
+			}
+		},
 	})
 
 	Vue.component('master-button', {

js/technical/displays.js

@@ -56,13 +56,10 @@ function updateWidth() {
 	if (player.splitMode === "disabled") splitScreen = false
 	if (player.splitMode === "enabled") splitScreen = true
 
-	tmp.other = {
-		screenWidth: screenWidth,
-		splitScreen: splitScreen,
-		lastPoints: player.points,
-		oomps: tmp.other.oomps,
-		oompsMag: tmp.other.oompsMag,
-	}
+
+	tmp.other.screenWidth = screenWidth
+	tmp.other.splitScreen = splitScreen
+	tmp.other.lastPoints = player.points
 }
 
 function updateOomps(diff)

js/technical/temp.js

@@ -6,7 +6,7 @@ var NaNalert = false;
 // Tmp will not call these
 var activeFunctions = [
 	"startData", "onPrestige", "doReset", "update", "automate",
-	"buy", "buyMax", "respec", "onComplete", "onPurchase", "onPress", "onClick", "masterButtonPress",
+	"buy", "buyMax", "respec", "onComplete", "onPurchase", "onPress", "onClick", "onHold", "masterButtonPress",
 	"sellOne", "sellAll", "pay", "actualCostFunction", "actualEffectFunction",
 	"effectDescription", "display", "fullDisplay", "effectDisplay", "rewardDisplay",
 ]
@@ -44,7 +44,15 @@ function setupTemp() {
 		splitScreen: window.innerWidth >=1024,
 		lastPoints: player.points || new Decimal(0),
 		oomps: new Decimal(0),
+
+		held: {
+			time: null,
+			id: null,
+			layer: null,
+			type: null,
 		}
+    }
+
 
 	temp = tmp
 }