Added the Grid

js/Demo/demoLayers.js

@@ -524,5 +524,32 @@ addLayer("a", {
                 onComplete() {console.log("Bork bork bork!")}
             },
         },
+        grid: {
+            maxRows: 3,
+            rows: 2,
+            cols: 2,
+            getStartData(id) {
+                return id
             },
+            getUnlocked(id) { // Default
+                return true
+            },
+            getCanClick(data, id) {
+                return true
+            },
+            getStyle(data, id) {
+                return {'background-color': '#'+ (data*1234%999999)}
+            },
+            onClick(data, id) {
+                player[this.layer].grid[id]++
+            },
+            getTitle(data, id) {
+                return "#" + id
+            },
+            getDisplay(data, id) {
+                return data 
+            },
+        } ,
+        midsection: ["grid", "blank"]
+    }
 )

js/components.js

@@ -354,6 +354,57 @@ function loadVue() {
 	`
 	})
 
+
+	// data = button size, in px
+	Vue.component('grid', {
+		props: ['layer', 'data'],
+		template: `
+		<div v-if="tmp[layer].grid" class="upgTable">
+			<div v-for="row in tmp[layer].grid.rows" class="upgRow">
+				<div v-for="col in tmp[layer].grid.cols"><div v-if="run(layers[layer].grid.getUnlocked, layers[layer].grid, row*100+col)"
+					class="upgAlign" v-bind:style="{'margin': '1px',  'height': 'inherit',}">
+					<gridable :layer = "layer" :data = "row*100+col" v-bind:style="tmp[layer].componentStyles.gridable"></gridable>
+				</div></div>
+				<br>
+			</div>
+		</div>
+	`
+	})
+
+	Vue.component('gridable', {
+		props: ['layer', 'data'],
+		template: `
+		<button 
+		v-if="tmp[layer].grid && player[layer].grid[data]!== undefined && run(layers[layer].grid.getUnlocked, layers[layer].grid, data)" 
+		v-bind:class="{ tile: true, can: canClick, locked: !canClick}"
+		v-bind:style="[canClick ? {'background-color': tmp[layer].color} : {}, gridRun(layer, 'getStyle', player[this.layer].grid[this.data], this.data)]"
+		v-on:click="clickGrid(layer, data)"  @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
+			<span v-if= "layers[layer].grid.getTitle"><h3 v-html="gridRun(this.layer, 'getTitle', player[this.layer].grid[this.data], this.data)"></h3><br></span>
+			<span v-bind:style="{'white-space': 'pre-line'}" v-html="gridRun(this.layer, 'getDisplay', player[this.layer].grid[this.data], this.data)"></span>	
+		</button>
+		`,
+		data() { return { interval: false, time: 0,}},
+		computed: {
+			canClick() {
+				return gridRun(this.layer, 'getCanClick', player[this.layer].grid[this.data], this.data)}
+		},
+		methods: {
+			start() {
+				if (!this.interval && layers[this.layer].grid.onHold) {
+					this.interval = setInterval((function() {
+						if(this.time >= 5 && gridRun(this.layer, 'getCanClick', player[this.layer].grid[this.data], this.data)) {
+							gridRun(this.layer, 'onHold', player[this.layer].grid[this.data], this.data)						}	
+						this.time = this.time+1
+					}).bind(this), 50)}
+			},
+			stop() {
+				clearInterval(this.interval)
+				this.interval = false
+			  	this.time = 0
+			}
+		},
+	})
+
 	// data = button size, in px
 	Vue.component('microtabs', {
 		props: ['layer', 'data'],

js/technical/layerSupport.js

@@ -156,6 +156,15 @@ function setupLayer(layer){
         }  
     }
     
+    if (layers[layer].grid) {
+        layers[layer].grid.layer = layer
+        if (layers[layer].grid.getUnlocked === undefined)
+            layers[layer].grid.getUnlocked = true
+        if (layers[layer].grid.getCanClick === undefined)
+            layers[layer].grid.getCanClick = true
+
+    }
+
     if (layers[layer].startData) {
         data = layers[layer].startData()
         if (data.best !== undefined && data.showBest === undefined) layers[layer].showBest = true

js/technical/temp.js

@@ -11,6 +11,7 @@ var activeFunctions = [
 	"effectDescription", "display", "fullDisplay", "effectDisplay", "rewardDisplay",
 	"tabFormat", "content",
 	"onComplete", "onPurchase", "onEnter", "onExit",
+	"getUnlocked", "getStyle", "getCanClick",
 ]
 
 var noCall = doNotCallTheseFunctionsEveryTick

js/utils.js

@@ -166,12 +166,20 @@ function buyBuyable(layer, id) {
 function clickClickable(layer, id) {
 	if (!player[layer].unlocked) return
 	if (!tmp[layer].clickables[id].unlocked) return
-	if (!tmp[layer].clickables[id].canClick) return
+	if (!tmp[layer].clickables[id].getCanClick) return
 
 	run(layers[layer].clickables[id].onClick, layers[layer].clickables[id])
 	updateClickableTemp(layer)
 }
 
+function clickGrid(layer, id) {
+	if (!player[layer].unlocked) return
+	if (!run(layers[layer].grid.getUnlocked, layers[layer].grid, id)) return
+	if (!gridRun(layer, 'getCanClick', player[layer].grid[id], id)) return
+
+	gridRun(layer, 'onClick', player[layer].grid[id], id)
+}
+
 // Function to determine if the player is in a challenge
 function inChallenge(layer, id) {
 	let challenge = player[layer].activeChallenge
@@ -435,3 +443,12 @@ function run(func, target, args = null) {
 	else
 		return func;
 }
+
+function gridRun(layer, func, data, id) {
+	if (isFunction(layers[layer].grid[func])) {
+		let bound = layers[layer].grid[func].bind(layers[layer].grid)
+		return bound(data, id)
+	}
+	else
+		return layers[layer].grid[func];
+}

js/utils/save.js

@@ -84,6 +84,8 @@ function getStartLayerData(layer) {
 	layerdata.lastMilestone = null;
 	layerdata.achievements = [];
 	layerdata.challenges = getStartChallenges(layer);
+	layerdata.grid = getStartGrid(layer);
+
 	return layerdata;
 }
 function getStartBuyables(layer) {
@@ -113,6 +115,20 @@ function getStartChallenges(layer) {
 	}
 	return data;
 }
+function getStartGrid(layer) {
+	let data = {};
+	if (! layers[layer].grid) return data
+	if (layers[layer].grid.maxRows === undefined) layers[layer].grid.maxRows=layers[layer].grid.rows
+	if (layers[layer].grid.maxCols === undefined) layers[layer].grid.maxCols=layers[layer].grid.cols
+
+	for (let y = 1; y <= layers[layer].grid.maxRows; y++) {
+		for (let x = 1; x <= layers[layer].grid.maxCols; x++) {
+			data[100*y + x] = layers[layer].grid.getStartData(100*y + x)
+		}
+	}
+	return data;
+}
+
 function fixSave() {
 	defaultData = getStartPlayer();
 	fixData(defaultData, player);

style.css

@@ -267,6 +267,22 @@ h1, h2, h3, b, input {
 	font-size: 10px;
 }
 
+.tile {
+	height: 80px;
+	width: 80px;
+	border-radius: 12%;
+	border: 2px solid;
+	border-color: rgba(0, 0, 0, 0.125);
+	font-size: 10px;
+	overflow: visible;
+}
+
+.tile:hover {
+	box-shadow: 0 0 10px var(--points);
+	transform: scale(1.1, 1.1);
+	z-index: 7;
+}
+
 .upgBig {
 	height: 200px;
 	width: 200px;