1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-24 09:21:46 +00:00

Alpha Build 1

This commit is contained in:
Jacorb90 2020-08-19 15:53:14 -04:00
parent f059788cc1
commit 83b790a2f7
5 changed files with 196 additions and 36 deletions

View file

@ -11,8 +11,9 @@
<body onload="load()">
<div id="app">
<img id="optionWheel" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
<div class="vl"></div>
<br>You have <h2>{{format(player.points)}}</h2> Points
<div v-if="player.tab=='options'">
<div v-if="player.tab=='options'" class="col right">
<button class="back" onclick="showTab('tree')"></button><br><br><br><br><br>
<table>
<tr>
@ -28,7 +29,7 @@
</tr>
</table>
</div>
<div v-if="player.tab=='tree'">
<div class="col left">
<br><br><br><br><br>
<table>
<tr>
@ -59,7 +60,7 @@
<canvas id="treeCanvas" class="canvas"></canvas>
</div>
<div v-for="layer in LAYERS">
<div v-if="player.tab==layer">
<div v-if="player.tab==layer" class="col right">
<button class="back" onclick="showTab('tree')"></button><br><br><br>
You have <h2 v-bind:class="{ [layer+'_txt']: true }">{{formatWhole(player[layer].points)}}</h2> {{LAYER_RES[layer]}}<span v-if="Object.keys(LAYER_EFFS).includes(layer)">, {{getLayerEffDesc(layer)}}</span>
<br><br>
@ -71,21 +72,25 @@
<table><tr><td v-bind:class="{ milestone: player.g.best.lt(8), milestoneDone: player.g.best.gte(8) }">8 Generators<br>Keep Prestige Upgrades on reset</td></tr><tr><td v-bind:class="{ milestone: player.g.best.lt(10), milestoneDone: player.g.best.gte(10) }">10 Generators<br>Gain 100% of Prestige Point gain every second</td></tr><tr><td v-bind:class="{ milestone: player.g.best.lt(15), milestoneDone: player.g.best.gte(15) }">15 Generators<br>You can buy max Generators</td></tr></table>
</div>
<div v-if="layer=='e'">
<table><tr><td v-bind:class="{ milestone: player.e.best.lt(2), milestoneDone: player.e.best.gte(2) }">2 enhance points<br>Keep Booster/Generator milestones on reset</td></tr></table><br><br>
<table><tr><td v-bind:class="{ milestone: player.e.best.lt(2), milestoneDone: player.e.best.gte(2) }">2 enhance points<br>Keep Booster/Generator milestones on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.e.best.lt(10), milestoneDone: player.e.best.gte(10) }">10 enhance points<br>Keep Prestige Upgrades on reset</td></tr></table><br><br>
<button v-bind:class="{ upgBig: true, can: player.e.points.gte(getEnhancerCost()), locked: player.e.points.lt(getEnhancerCost()), e: true }" onclick="buyEnhancer()">Buy an Enhancer<br>Cost: {{formatWhole(getEnhancerCost())}} Enhance Points<br>Amount: {{formatWhole(player.e.enhancers)}}<br>Multiplies Prestige Point gain by {{format(getEnhancerEff())}}<br>Adds to base of Booster/Generator effects by {{format(getEnhancerEff2())}}</button>
</div>
<div v-if="layer=='t'">
You have {{format(player.t.energy)}} Time Energy, which multiplies Point gain & Prestige Point gain by {{format(getTimeEnergyEff())}}<br><br>
<table><tr><td v-bind:class="{ milestone: player.t.best.lt(2), milestoneDone: player.t.best.gte(2) }">2 time capsules<br>Keep Booster/Generator milestones on reset</td></tr></table><br><br>
<table><tr><td v-bind:class="{ milestone: player.t.best.lt(2), milestoneDone: player.t.best.gte(2) }">2 time capsules<br>Keep Booster/Generator milestones on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.t.best.lt(3), milestoneDone: player.t.best.gte(3) }">3 time capsules<br>Keep Prestige Upgrades on reset</td></tr>
</table><br><br>
<button v-bind:class="{ upgBig: true, can: (player.b.points.gte(getExtCapsuleCost())&&player.t.unl), locked: (player.b.points.lt(getExtCapsuleCost())||!player.t.unl), t: true }" onclick="buyExtCapsule()">Buy an extra Time Capsule<br>Cost: {{formatWhole(getExtCapsuleCost())}} Boosters<br>Amount: {{formatWhole(player.t.extCapsules)}}</button>
</div>
<div v-if="layer=='s'">
You have {{formatWhole(getSpace())}} Space.<br><br>
<table><tr><td v-bind:class="{ milestone: player.s.best.lt(2), milestoneDone: player.s.best.gte(2) }">2 space energy<br>Keep Booster/Generator milestones on reset</td></tr></table><br><br>
<table><tr><td v-bind:class="{ milestone: player.s.best.lt(2), milestoneDone: player.s.best.gte(2) }">2 space energy<br>Keep Booster/Generator milestones on reset</td></tr>
<tr><td v-bind:class="{ milestone: player.s.best.lt(3), milestoneDone: player.s.best.gte(3) }">3 space energy<br>Keep Prestige Upgrades on reset</td></tr></table><br><br>
<button onclick="respecSpaceBuildings()" v-bind:class="{ longUpg: true, can: player.s.unl, locked: !player.s.unl }">Respec Space Buildings</button><br>
<table><tr>
<td v-for="id in 3">
<button v-bind:class="{ upg: true, can: (player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1)), locked: (!(player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1))), s: true }" v-on:click="buyBuilding(id)">Building {{id}}<br>Level: {{formatWhole(player.s.buildings[id])}}<br>Cost: {{format(getSpaceBuildingCost(id))}} Generator Power<br>Effect: {{getSpaceBuildingEffDesc(id)}}</button>
<td v-for="id in 4">
<button v-if="getSpaceBuildingsUnl()>=id" v-bind:class="{ upg: true, can: (player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1)), locked: (!(player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1))), s: true }" v-on:click="buyBuilding(id)">Building {{id}}<br>Level: {{formatWhole(player.s.buildings[id])}}<br>Cost: {{format(getSpaceBuildingCost(id))}} Generator Power<br>Effect: {{getSpaceBuildingEffDesc(id)}}</button>
</td>
</tr></table>
</div>
@ -98,6 +103,7 @@
<td v-for="col in LAYER_UPGS[layer].cols"><button v-if="LAYER_UPGS[layer][row*10+col].unl()" v-on:click="buyUpg(layer, row*10+col)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(row*10+col), locked: (player[layer].points.lt(LAYER_UPGS[layer][row*10+col].cost)&&!player[layer].upgrades.includes(row*10+col)), can: (player[layer].points.gte(LAYER_UPGS[layer][row*10+col].cost)&&!player[layer].upgrades.includes(row*10+col)) }">{{ LAYER_UPGS[layer][row*10+col].desc }}<br>Cost: {{ formatWhole(LAYER_UPGS[layer][row*10+col].cost) }} {{LAYER_RES[layer]}}<span v-if="LAYER_UPGS[layer][row*10+col].currently"><br>Currently: {{LAYER_UPGS[layer][row*10+col].effDisp(LAYER_UPGS[layer][row*10+col].currently())}}</span></button></td>
</tr>
</table>
<br><br><br><br>
</div>
</div>
</div>

View file

@ -12,7 +12,6 @@ function retrieveCanvasData() {
}
function resizeCanvas() {
if (player.tab!='tree') return
if (!retrieveCanvasData()) return
canvas.width = 0;
canvas.height = 0;
@ -22,7 +21,6 @@ function resizeCanvas() {
}
function drawTree() {
if (player.tab!='tree') return
if (!retrieveCanvasData()) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (layerUnl('b')) drawTreeBranch("p", "b")

View file

@ -52,7 +52,8 @@ function getStartPlayer() {
buildings: {
1: new Decimal(0),
2: new Decimal(0),
3: new Decimal(0)
3: new Decimal(0),
4: new Decimal(0)
},
upgrades: [],
},
@ -93,8 +94,8 @@ const LAYER_EXP = {
b: new Decimal(1.25),
g: new Decimal(1.25),
e: new Decimal(0.02),
t: new Decimal(2),
s: new Decimal(2),
t: new Decimal(1.85),
s: new Decimal(1.85),
}
const LAYER_BASE = {
@ -125,8 +126,8 @@ const LAYER_EFFS = {
b: function() { return Decimal.pow(Decimal.add(2, addToBoosterBase()), player.b.points) },
g: function() { return Decimal.pow(Decimal.add(2, addToGenBase()), player.g.points).sub(1).times(getGenPowerGainMult()) },
t: function() { return {
gain: Decimal.pow(3, player.t.points.plus(player.t.extCapsules)).sub(1),
limit: Decimal.pow(2, player.t.points.plus(player.t.extCapsules)).sub(1).times(100),
gain: Decimal.pow(3, player.t.points.plus(player.t.extCapsules.plus(getFreeExtCapsules()))).sub(1),
limit: Decimal.pow(2, player.t.points.plus(player.t.extCapsules.plus(getFreeExtCapsules()))).sub(1).times(100).times(getTimeEnergyLimitMult()),
}},
}
@ -188,14 +189,14 @@ const LAYER_UPGS = {
desc: "Boosters boost Prestige Point gain.",
cost: new Decimal(3),
unl: function() { return player.b.unl },
currently: function() { return player.b.points.sqrt().plus(1) },
currently: function() { return player.b.points.sqrt().plus(1).max(1.5) },
effDisp: function(x) { return format(x)+"x" },
},
12: {
desc: "Generators add to the Booster effect.",
cost: new Decimal(7),
unl: function() { return player.g.unl },
currently: function() { return player.g.points.plus(1).log10().sqrt().div(3) },
currently: function() { return player.g.points.plus(1).log10().sqrt().div(3).times(player.t.upgrades.includes(14)?5:1) },
effDisp: function(x) { return "+"+format(x)+" to base" },
},
13: {
@ -219,7 +220,7 @@ const LAYER_UPGS = {
desc: "Boosters are cheaper based on your points.",
cost: new Decimal(18),
unl: function() { return player.b.upgrades.includes(21) || player.b.upgrades.includes(22) },
currently: function() { return player.points.plus(1).log10().plus(1).pow(3.2) },
currently: function() { return player.points.plus(1).log10().plus(1).pow(3.2).pow(getSpaceBuildingEff(4)) },
effDisp: function(x) { return "/"+format(x) },
},
},
@ -230,14 +231,14 @@ const LAYER_UPGS = {
desc: "Generators boost Prestige Point gain.",
cost: new Decimal(3),
unl: function() { return player.g.unl },
currently: function() { return player.g.points.sqrt().plus(1) },
currently: function() { return player.g.points.sqrt().plus(1).max(1.5) },
effDisp: function(x) { return format(x)+"x" },
},
12: {
desc: "Boosters boost Generator Power gain.",
cost: new Decimal(7),
unl: function() { return player.b.unl },
currently: function() { return player.b.points.plus(1).log10().sqrt().div(3) },
currently: function() { return player.b.points.plus(1).log10().sqrt().div(3).times(player.t.upgrades.includes(14)?2.75:1) },
effDisp: function(x) { return "+"+format(x)+" to base" },
},
13: {
@ -289,21 +290,90 @@ const LAYER_UPGS = {
desc: "Prestige Points boost Generator Power gain.",
cost: new Decimal(28),
unl: function() { return player.g.upgrades.includes(23) && player.g.upgrades.includes(24) },
currently: function() { return player.p.points.plus(1).log10().sqrt().plus(1) },
currently: function() { return player.p.points.plus(1).log10().sqrt().plus(1).pow(player.t.upgrades.includes(14)?2.75:1) },
effDisp: function(x) { return format(x)+"x" },
},
},
e: {
rows: 0,
cols: 0,
rows: 1,
cols: 3,
11: {
desc: "Boosters & Generators boost each other.",
cost: new Decimal(40),
unl: function() { return player.e.unl },
currently: function() { return {g: player.b.points.plus(1).log10(), b: player.g.points.plus(1).log10()} },
effDisp: function(x) { return "+"+format(x.g)+" to Generator base, +"+format(x.b)+" to Booster base" },
},
12: {
desc: "Unspent Enhance Points boost Prestige Point gain.",
cost: new Decimal(150),
unl: function() { return player.e.unl&&player.e.best.gte(40) },
currently: function() { return player.e.points.plus(1).pow(1.5) },
effDisp: function(x) { return format(x)+"x" },
},
13: {
desc: "You gain 1e10x as many Prestige Points.",
cost: new Decimal(1000),
unl: function() { return player.e.upgrades.includes(11)||player.e.upgrades.includes(12) },
},
},
t: {
rows: 0,
cols: 0,
rows: 1,
cols: 4,
11: {
desc: "Non-extra Time Capsules boost the Booster effect.",
cost: new Decimal(2),
unl: function() { return player.t.unl },
currently: function() { return player.t.points.pow(0.9).plus(0.5).plus(player.t.upgrades.includes(13)?LAYER_UPGS.t[13].currently():0) },
effDisp: function(x) { return "+"+format(x)+" to base" },
},
12: {
desc: "The Time Energy cap starts later based on your Boosters, and you get a free Extra Time Capsule.",
cost: new Decimal(3),
unl: function() { return player.t.best.gte(2)&&player.t.unl },
currently: function() { return player.b.points.pow(0.95).plus(1) },
effDisp: function(x) { return format(x)+"x" },
},
13: {
desc: "Extra Time Capsules are added to the first Time Upgrade's effect formula, but at a reduced amount.",
cost: new Decimal(3),
unl: function() { return player.t.upgrades.includes(11) },
currently: function() { return player.t.extCapsules.plus(getFreeExtCapsules()).pow(0.95) },
effDisp: function(x) { return "+"+format(x) },
},
14: {
desc: "Generator Upgrades 2 & 10 is 175% stronger, and Booster Upgrade 2 is 400% stronger.",
cost: new Decimal(4),
unl: function() { return player.t.upgrades.includes(12)||player.t.upgrades.includes(13) },
},
},
s: {
rows: 0,
cols: 0,
rows: 1,
cols: 4,
11: {
desc: "Add a free level to all Space Buildings.",
cost: new Decimal(2),
unl: function() { return player.s.unl },
},
12: {
desc: "Generator Power boosts its own generation.",
cost: new Decimal(3),
unl: function() { return player.s.best.gte(2)&&player.s.unl },
currently: function() { return player.g.power.plus(1).log10().plus(1) },
effDisp: function(x) { return format(x)+"x" },
},
13: {
desc: "Space Building Levels boost Generator Power gain, and get 2 extra Space.",
cost: new Decimal(3),
unl: function() { return player.s.upgrades.includes(11) },
currently: function() { return Decimal.pow(20, Object.values(player.s.buildings).reduce((a,b) => Decimal.add(a,b))) },
effDisp: function(x) { return format(x)+"x" },
},
14: {
desc: "Unlock a 4th Space Building, and add a free level to all Space Buildings.",
cost: new Decimal(4),
unl: function() { return player.s.upgrades.includes(12)&&player.s.upgrades.includes(13) },
},
},
}
@ -340,7 +410,7 @@ function save() {
function load() {
let get = localStorage.getItem("prestige-tree");
if (get==null) player = getStartPlayer()
if (get===null||get===undefined) player = getStartPlayer()
else player = JSON.parse(atob(get))
player.tab = "tree"
checkForVars();
@ -382,6 +452,7 @@ function checkForVars() {
if (player.e.order === undefined) player.e.order = 0
if (player.t === undefined) player.t = getStartPlayer().t
if (player.s === undefined) player.s = getStartPlayer().s
if (player.s.buildings[4] === undefined) player.s.buildings[4] = new Decimal(0);
}
function convertToDecimal() {
@ -403,7 +474,7 @@ function convertToDecimal() {
player.s.points = new Decimal(player.s.points)
player.s.best = new Decimal(player.s.best)
player.s.spent = new Decimal(player.s.spent)
for (let i=1;i<=3;i++) player.s.buildings[i] = new Decimal(player.s.buildings[i])
for (let i=1;i<=4;i++) player.s.buildings[i] = new Decimal(player.s.buildings[i])
}
function toggleOpt(name) {
@ -424,6 +495,7 @@ function commaFormat(num, precision) {
function format(decimal, precision=3) {
decimal = new Decimal(decimal)
if (decimal.gte(1e9)) return exponentialFormat(decimal, precision)
else if (decimal.gte(1e3)) return commaFormat(decimal, 0)
else return commaFormat(decimal, precision)
}
@ -480,6 +552,8 @@ function getLayerGainMult(layer) {
if (player.b.upgrades.includes(11)) mult = mult.times(LAYER_UPGS.b[11].currently())
if (player.g.upgrades.includes(11)) mult = mult.times(LAYER_UPGS.g[11].currently())
if (player.e.unl) mult = mult.times(getEnhancerEff())
if (player.e.upgrades.includes(12)) mult = mult.times(LAYER_UPGS.e[12].currently())
if (player.e.upgrades.includes(13)) mult = mult.times(1e10)
if (player.t.unl) mult = mult.times(getTimeEnergyEff())
if (player.s.unl) mult = mult.times(getSpaceBuildingEff(1))
break;
@ -550,6 +624,10 @@ function rowReset(row, layer) {
player.p.points = new Decimal(0);
if (layer=="b"||layer=="g") {
if (player[layer].best.lt(8)) player.p.upgrades = [];
} else if (layer=="t"||layer=="s") {
if (player[layer].best.lt(3)) player.p.upgrades = [];
} else if (layer=="e") {
if (player[layer].best.lt(10)) player.p.upgrades = [];
} else player.p.upgrades = [];
player.g.power = new Decimal(0);
break;
@ -589,7 +667,8 @@ function rowReset(row, layer) {
buildings: {
1: new Decimal(0),
2: new Decimal(0),
3: new Decimal(0)
3: new Decimal(0),
4: new Decimal(0)
},
upgrades: [],
}
@ -645,7 +724,9 @@ function addToBoosterBase() {
let toAdd = new Decimal(0)
if (player.b.upgrades.includes(12)) toAdd = toAdd.plus(LAYER_UPGS.b[12].currently())
if (player.b.upgrades.includes(13)) toAdd = toAdd.plus(LAYER_UPGS.b[13].currently())
if (player.t.upgrades.includes(11)) toAdd = toAdd.plus(LAYER_UPGS.t[11].currently())
if (player.e.unl) toAdd = toAdd.plus(getEnhancerEff2())
if (player.e.upgrades.includes(11)) toAdd = toAdd.plus(LAYER_UPGS.e[11].currently().b)
if (player.s.unl) toAdd = toAdd.plus(getSpaceBuildingEff(2))
return toAdd
}
@ -655,6 +736,7 @@ function addToGenBase() {
if (player.g.upgrades.includes(12)) toAdd = toAdd.plus(LAYER_UPGS.g[12].currently())
if (player.g.upgrades.includes(13)) toAdd = toAdd.plus(LAYER_UPGS.g[13].currently())
if (player.e.unl) toAdd = toAdd.plus(getEnhancerEff2())
if (player.e.upgrades.includes(11)) toAdd = toAdd.plus(LAYER_UPGS.e[11].currently().g)
if (player.s.unl) toAdd = toAdd.plus(getSpaceBuildingEff(2))
return toAdd
}
@ -663,6 +745,8 @@ function getGenPowerGainMult() {
let mult = new Decimal(1)
if (player.g.upgrades.includes(21)) mult = mult.times(LAYER_UPGS.g[21].currently())
if (player.g.upgrades.includes(25)) mult = mult.times(LAYER_UPGS.g[25].currently())
if (player.s.upgrades.includes(12)) mult = mult.times(LAYER_UPGS.s[12].currently())
if (player.s.upgrades.includes(13)) mult = mult.times(LAYER_UPGS.s[13].currently())
return mult
}
@ -710,12 +794,25 @@ function buyEnhancer() {
player.e.enhancers = player.e.enhancers.plus(1)
}
function getFreeExtCapsules() {
let amt = new Decimal(0)
if (player.t.upgrades.includes(12)) amt = amt.plus(1)
return amt
}
function getTimeEnergyEff() {
if (!player.t.unl) return new Decimal(1)
let eff = player.t.energy.plus(1).pow(1.2)
return eff;
}
function getTimeEnergyLimitMult() {
if (!player.t.unl) return new Decimal(1)
let mult = new Decimal(1);
if (player.t.upgrades.includes(12)) mult = mult.times(LAYER_UPGS.t[12].currently())
return mult;
}
function getExtCapsuleCost() {
let cost = player.t.extCapsules.times(0.4).pow(1.2).plus(1).times(10)
return cost.floor()
@ -731,19 +828,28 @@ function buyExtCapsule() {
function getSpace() {
let baseSpace = player.s.best.pow(1.1).times(3).floor()
if (player.s.upgrades.includes(13)) baseSpace = baseSpace.plus(2);
return baseSpace.sub(player.s.spent)
}
function getSpaceBuildingCost(x) {
let inputVal = new Decimal([1e3,1e10,1e25][x-1])
let inputVal = new Decimal([1e3,1e10,1e25,1e48][x-1])
let bought = player.s.buildings[x]
let cost = Decimal.pow(inputVal, bought.pow(1.35)).times(inputVal).times((bought.gt(0)||x>1)?1:0)
return cost
}
function getExtraBuildingLevels(x) {
let lvl = new Decimal(0)
if (player.s.upgrades.includes(11)) lvl = lvl.plus(1);
if (player.s.upgrades.includes(14)) lvl = lvl.plus(1);
return lvl
}
function getSpaceBuildingEff(x) {
let bought = player.s.buildings[x];
let bought = player.s.buildings[x].plus(getExtraBuildingLevels(x));
if (!player.s.unl) bought = new Decimal(0);
if (getSpaceBuildingsUnl()<x) bought = new Decimal(0);
switch(x) {
case 1:
return Decimal.pow(Decimal.add(1, bought), player.s.points.sqrt()).times(Decimal.mul(4, bought)).max(1)
@ -752,7 +858,10 @@ function getSpaceBuildingEff(x) {
return bought.sqrt()
break;
case 3:
return Decimal.pow(10, bought.pow(2.5))
return Decimal.pow(1e18, bought.pow(0.9))
break;
case 4:
return bought.plus(1).pow(1.25)
break;
}
}
@ -769,11 +878,14 @@ function getSpaceBuildingEffDesc(x) {
case 3:
return "Makes Boosters/Generators cheaper by "+format(eff)+"x"
break;
case 4:
return "Booster Upgrade 6's effect is raised to the power of "+format(eff)
}
}
function buyBuilding(x) {
if (!player.s.unl) return
if (getSpaceBuildingsUnl()<x) return
if (getSpace().lt(1)) return
let cost = getSpaceBuildingCost(x)
if (player.g.power.lt(cost)) return
@ -787,7 +899,13 @@ function respecSpaceBuildings() {
if (!confirm("Are you sure you want to reset your Space Buildings? This will force you to do a Space reset as well!")) return
for (let i=1;i<=3;i++) player.s.buildings[i] = new Decimal(0)
player.s.spent = new Decimal(0)
doReset("space", true)
doReset("s", true)
}
function getSpaceBuildingsUnl() {
let x = 3
if (player.s.upgrades.includes(14)) x++;
return x;
}
function gameLoop(diff) {

View file

@ -21,6 +21,7 @@ function loadVue() {
getTimeEnergyEff,
getExtCapsuleCost,
getSpace,
getSpaceBuildingsUnl,
getSpaceBuildingCost,
getSpaceBuildingEffDesc,
buyBuilding,

View file

@ -14,7 +14,12 @@ body {
background-color: black;
color: white;
text-shadow: 0px 0px 7px white;
overflow-x: hidden;
overflow: hidden;
}
html, body {
min-height: 100%;
height: 100%;
}
h1, h2 {
@ -157,7 +162,7 @@ h1, h2 {
#optionWheel {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
height: 40px;
width: 40px;
cursor: pointer;
@ -221,6 +226,38 @@ h1, h2 {
transform: scale(1.1, 1.1);
}
.col {
min-width: 49.5%;
max-width: 49.5%;
width: 49.5%;
height: 100%;
min-height: 100%;
column-span: 1;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
.col.right {
top: 0;
right: 0;
}
#app {
column-count: 2;
column-width: 50%;
min-height: 100%;
}
.vl {
border-left: 6px solid #969696;
height: 100%;
position: absolute;
left: 50%;
margin-left: -3px;
top: 0;
}
[tooltip] {
position: relative;
z-index: 2;