Added midsection feature

docs/layer-features.md

@@ -42,7 +42,7 @@ Key:
 
 - layerShown(): A function returning a bool which determines if this layer's node should be visible on the tree.
 
-- hotkeys: An array containing information on any hotkeys associated with this layer:
+- hotkeys: **optional**, An array containing information on any hotkeys associated with this layer:
     ```js
     hotkeys: [
         {key: "p", // What the hotkey button is. Use uppercase if it's combined with shift, or "ctrl+x" if ctrl is.
@@ -51,12 +51,15 @@ Key:
     ],
     ```
 
-- style(): A function returning a CSS object containing any CSS that should affect this layer's whole tab.
+- style(): **optional**, a function returning a CSS object containing any CSS that should affect this layer's whole tab.
 
-- tabFormat: Use this if you want to add extra things to your tab or change the layout.
+- tabFormat: **optional**, use this if you want to add extra things to your tab or change the layout. [See here for more info.](custom-tab-layouts.md)
+
+- midsection: **optional**, an alternative to tabFormat, which is inserted in between Milestones and Buyables in the
+              standard tab layout. (cannot do subtabs)
 
 
-# Big features
+# Big features (all optional)
 
 - upgrades: A grid of one-time purchases which can have unique upgrade conditions, currency costs, and bonuses.
     [Explanations are in a separate file.](upgrades.md)

index.html

@@ -170,6 +170,9 @@
 					<span v-if="player[layer].best != undefined">Your best {{layers[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
 					<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{layers[layer].resource}}<br></span>
 					<milestones v-bind:style="tmp.componentStyles[layer].milestones" :layer="layer"></milestones>
+					<div v-if="Array.isArray(layers[layer].midsection)">
+						<column :layer="layer" :data="layers[layer].midsection"></column>
+					</div>
 					<buyables v-bind:style="tmp.componentStyles[layer].buyables" :layer="layer"></buyables>
 					<upgrades v-bind:style="tmp.componentStyles[layer]['upgrades']" :layer="layer"></upgrades>
 					<challs v-bind:style="tmp.componentStyles[layer]['challs']" :layer="layer"></challs>

js/layers.js

@@ -298,6 +298,10 @@ addLayer("f", {
             return ("This weird farmer dinosaur will only see you if you have at least " + this.requires() + " candies. You only have " + formatWhole(player.points))
         },
 
+        midsection: [
+            "blank", ['display-image', 'https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390']
+        ],
+
         // The following are only currently used for "custom" Prestige type:
         prestigeButtonText() { //Is secretly HTML
             if (!this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your candies and lollipops! (At least " + formatWhole(tmp.nextAt[layer]) + " candies)"