mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-21 16:13:55 +00:00
Added Bars component
This commit is contained in:
Acamaeda
parent
e9d0f17d41
commit
40bbf03668
8 changed files with 211 additions and 47 deletions
|
|
@ -117,8 +117,8 @@
|
|||
</span>
|
||||
<canvas id="treeCanvas" class="canvas"></canvas>
|
||||
</div>
|
||||
<div v-for="layer in LAYERS">
|
||||
<div v-if="player.tab==layer" v-bind:class="'col right'" v-bind:style="tmp[layer].style ? tmp[layer].style : {}">
|
||||
<div v-for="layer in LAYERS" >
|
||||
<div v-if="player.tab==layer" v-bind:class="'col right fast tab'" v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]">
|
||||
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
|
||||
<div v-if="!layers[layer].tabFormat">
|
||||
<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
<div v-if="Array.isArray(layers[layer].tabFormat)">
|
||||
<column :layer="layer" :data="tmp[layer].tabFormat"></column>
|
||||
</div>
|
||||
<div v-else v-bind:style="[{'margin-top': '-50px'}, tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style]">
|
||||
<div v-else v-bind:style="[{'margin-top': '-50px'}]">
|
||||
<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">
|
||||
<tab-buttons v-bind:style="tmp[layer].componentStyles['tab-buttons']" :layer="layer" :data="tmp[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,19 +63,21 @@ function getNextAt(layer, canMax=false, useType = null) {
|
|||
let type = useType
|
||||
if (!useType) type = layers[layer].type
|
||||
|
||||
if (tmp[layer].gainExp.eq(0)) return new Decimal(1/0)
|
||||
if (tmp[layer].gainMult.lte(0)) return new Decimal(Infinity)
|
||||
if (tmp[layer].gainExp.lte(0)) return new Decimal(Infinity)
|
||||
|
||||
if (type=="static")
|
||||
{
|
||||
if (!layers[layer].canBuyMax()) canMax = false
|
||||
let amt = player[layer].points.plus((canMax&&tmp[layer].baseAmount.gte(tmp[layer].nextAt))?tmp[layer].resetGain:0)
|
||||
let extraCost = Decimal.pow(layers[layer].base, amt.pow(layers[layer].exponent).div(tmp[layer].gainExp)).times(tmp[layer].gainMult)
|
||||
let extraCost = Decimal.pow(layers[layer].base, amt.pow(tmp[layer].exponent).div(tmp[layer].gainExp)).times(tmp[layer].gainMult)
|
||||
let cost = extraCost.times(tmp[layer].requires).max(tmp[layer].requires)
|
||||
if (layers[layer].resCeil) cost = cost.ceil()
|
||||
return cost;
|
||||
} else if (type=="normal"){
|
||||
let next = tmp[layer].resetGain.add(1)
|
||||
if (next.gte("e1e7")) next = next.div("e5e6").pow(2)
|
||||
next = next.root(tmp[layer].gainExp.div(tmp[layer].gainMult).root(layers[layer].exponent).times(tmp[layer].requires).max(tmp[layer].requires))
|
||||
next=next.root(tmp[layer].gainExp.div(tmp[layer].gainMult)).root(tmp[layer].exponent).times(tmp[layer].requires).max(tmp[layer].requires)
|
||||
if (layers[layer].resCeil) next = next.ceil()
|
||||
return next;
|
||||
} else if (type=="custom"){
|
||||
|
|
|
|||
|
|
@ -88,6 +88,18 @@ function updateLayers(){
|
|||
}
|
||||
}
|
||||
|
||||
if (layers[layer].bars){
|
||||
layers[layer].bars.layer = layer
|
||||
for (thing in layers[layer].bars){
|
||||
if (!isNaN(thing)){
|
||||
layers[layer].bars[thing].id = thing
|
||||
layers[layer].bars[thing].layer = layer
|
||||
if (layers[layer].bars[thing].unl === undefined)
|
||||
layers[layer].bars[thing].unl = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(!layers[layer].componentStyles) layers[layer].componentStyles = {}
|
||||
if(layers[layer].symbol === undefined) layers[layer].symbol = layer.charAt(0).toUpperCase() + layer.slice(1)
|
||||
|
||||
|
|
@ -127,8 +139,9 @@ function someLayerUnlocked(row){
|
|||
return false
|
||||
}
|
||||
|
||||
|
||||
// This isn't worth making a .ts file over
|
||||
const UP = 1
|
||||
const DOWN = 2
|
||||
const LEFT = 3
|
||||
const RIGHT = 4
|
||||
const UP = 0
|
||||
const DOWN = 1
|
||||
const LEFT = 2
|
||||
const RIGHT = 3
|
||||
|
|
|
|||
88
js/layers.js
88
js/layers.js
|
|
@ -208,23 +208,54 @@ addLayer("c", {
|
|||
}
|
||||
},
|
||||
|
||||
gagues: {
|
||||
bars: {
|
||||
longBoi: {
|
||||
fillColor:() => "#4BEC13",
|
||||
// fillStyle:(),
|
||||
baseColor:() => "#333333",
|
||||
// baseStyle:(),
|
||||
// textStyle:(),
|
||||
fillStyle: {'background-color' : "#FFFFFF"},
|
||||
baseStyle: {'background-color' : "#696969"},
|
||||
textStyle: {'color': '#04e050'},
|
||||
|
||||
borderStyle() {return {'border-color': '#321188'}},
|
||||
direction:() => RIGHT,
|
||||
width:() => "250px",
|
||||
height:() => "250px",
|
||||
borderStyle() {return {}},
|
||||
direction: RIGHT,
|
||||
width: 300,
|
||||
height: 30,
|
||||
progress() {
|
||||
return (player.points.log().div(10))
|
||||
return (player.points.log(10).div(10)).toNumber()
|
||||
},
|
||||
display() {
|
||||
return format(player.points) + " / 1e10"
|
||||
return format(player.points) + " / 1e10 points"
|
||||
},
|
||||
unl:() => true,
|
||||
|
||||
},
|
||||
tallBoi: {
|
||||
fillStyle: {'background-color' : "#4BEC13"},
|
||||
baseStyle: {'background-color' : "#000000"},
|
||||
textStyle: {'text-shadow': '0px 0px 2px #000000'},
|
||||
|
||||
borderStyle() {return {}},
|
||||
direction: UP,
|
||||
width: 50,
|
||||
height: 200,
|
||||
progress() {
|
||||
return player.points.div(100)
|
||||
},
|
||||
display() {
|
||||
return formatWhole((player.points.div(1)).min(100)) + "%"
|
||||
},
|
||||
unl:() => true,
|
||||
|
||||
},
|
||||
flatBoi: {
|
||||
fillStyle: {'background-color' : "#FE0102"},
|
||||
baseStyle: {'background-color' : "#222222"},
|
||||
textStyle: {'text-shadow': '0px 0px 2px #000000'},
|
||||
|
||||
borderStyle() {return {}},
|
||||
direction: UP,
|
||||
width: 100,
|
||||
height: 30,
|
||||
progress() {
|
||||
return player.c.points.div(50)
|
||||
},
|
||||
unl:() => true,
|
||||
|
||||
|
|
@ -248,7 +279,7 @@ addLayer("c", {
|
|||
thingies: {
|
||||
style() {return {'background-color': '#222222'}},
|
||||
buttonStyle() {return {'border-color': 'orange'}},
|
||||
content:[
|
||||
content:[
|
||||
["buyables", ""], "blank",
|
||||
["row", [
|
||||
["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
|
||||
|
|
@ -261,17 +292,33 @@ addLayer("c", {
|
|||
"blank",
|
||||
["display-image", "discord.png"],],
|
||||
},
|
||||
jail: {
|
||||
content: [
|
||||
["bar", "longBoi"], "blank",
|
||||
["row", [
|
||||
["column", [
|
||||
["display-text", "Sugar level:", {'color': 'teal'}], "blank", ["bar", "tallBoi"]],
|
||||
{'background-color': '#555555', 'padding': '15px'}],
|
||||
"blank",
|
||||
["column", [
|
||||
["display-text", "idk"],
|
||||
["blank", ['0', '50px']], ["bar", "flatBoi"]
|
||||
]],
|
||||
]],
|
||||
"blank", ["display-text", "It's because bars! So funny! Ha ha!"],
|
||||
],
|
||||
},
|
||||
illuminati: {
|
||||
unl() {return (hasUpg("c", 13))},
|
||||
content:[
|
||||
["raw-html", function() {return "<h1> C O N F I R M E D </h1>"}],
|
||||
["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'}]
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
style() {return {
|
||||
'background-color': '#3325CC'
|
||||
//'background-color': '#3325CC'
|
||||
}},
|
||||
nodeStyle() {return { // Style on the layer node
|
||||
'color': '#3325CC',
|
||||
|
|
@ -344,7 +391,16 @@ addLayer("f", {
|
|||
canReset() {
|
||||
return tmp[this.layer].baseAmount.gte(tmp[this.layer].nextAt)
|
||||
},
|
||||
|
||||
upgrades: {
|
||||
rows: 1,
|
||||
cols: 1,
|
||||
11: {
|
||||
title:() => "Generator",
|
||||
cost:() => new Decimal(1),
|
||||
desc:() => "Gain 1 point per second",
|
||||
}
|
||||
|
||||
},
|
||||
// This is also non minimal, a Clickable!
|
||||
clickables: {
|
||||
rows: 1,
|
||||
|
|
|
|||
47
js/temp.js
47
js/temp.js
|
|
@ -17,6 +17,7 @@ function setupTemp() {
|
|||
tmp[layer].notify = {}
|
||||
tmp[layer].canReset = {}
|
||||
tmp[layer].prestigeButtonText = {}
|
||||
setupBarStyles(layer)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +60,7 @@ function updateTemp() {
|
|||
tmp[layer].notify = shouldNotify(layer)
|
||||
tmp[layer].canReset = canReset(layer)
|
||||
tmp[layer].prestigeButtonText = prestigeButtonText(layer)
|
||||
|
||||
constructBarStyles(layer)
|
||||
}
|
||||
|
||||
tmp.pointGen = getPointGen()
|
||||
|
|
@ -93,4 +94,48 @@ function updateBuyableTemp(layer)
|
|||
function updateClickableTemp(layer)
|
||||
{
|
||||
updateTempData(layers[layer].clickables, tmp[layer].clickables)
|
||||
}
|
||||
|
||||
|
||||
var DIR_MARGINS = ["margin-bottom", "margin-top", "margin-right", "margin-left"]
|
||||
|
||||
function constructBarStyles(layer){
|
||||
if (layers[layer].bars === undefined)
|
||||
return
|
||||
for (id in layers[layer].bars){
|
||||
if (id !== "layer") {
|
||||
let bar = tmp[layer].bars[id]
|
||||
if (bar.progress instanceof Decimal)
|
||||
bar.progress = bar.progress.toNumber()
|
||||
bar.dims = {'width': bar.width + "px", 'height': bar.height + "px"}
|
||||
let dir = bar.direction
|
||||
bar.fillDims = {'width': bar.width + "px", 'height': bar.height + "px"}
|
||||
if (dir !== undefined)
|
||||
{
|
||||
bar.fillDims[DIR_MARGINS[dir]] = "0px"
|
||||
if (dir == UP || dir == DOWN)
|
||||
{
|
||||
bar.fillDims.height = bar.height * Math.min(bar.progress, 1) + "px"
|
||||
if (dir == UP) bar.fillDims['margin-top'] = bar.height * (1 - Math.min(bar.progress, 1)) + "px"
|
||||
}
|
||||
else
|
||||
{
|
||||
bar.fillDims.width = bar.width * Math.min(bar.progress, 1) + "px"
|
||||
if (dir == LEFT) bar.fillDims['margin-left'] = bar.width * (1 - Math.min(bar.progress, 1)) + "px"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function setupBarStyles(layer){
|
||||
if (layers[layer].bars === undefined)
|
||||
return
|
||||
for (id in layers[layer].bars){
|
||||
let bar = tmp[layer].bars[id]
|
||||
bar.dims = {}
|
||||
let dir = bar.direction
|
||||
bar.fillDims = {}
|
||||
}
|
||||
}
|
||||
|
|
@ -423,7 +423,7 @@ function canAffordPurchase(layer, thing, cost) {
|
|||
|
||||
function buyUpg(layer, id) {
|
||||
if (!player[layer].unl) return
|
||||
if (!layers[layer].upgrades[id].unl()) return
|
||||
if (!layers[layer].upgrades[id].unl) return
|
||||
if (player[layer].upgrades.includes(id)) return
|
||||
let upg = layers[layer].upgrades[id]
|
||||
let cost = tmp[layer].upgrades[id].cost
|
||||
|
|
|
|||
46
js/v.js
46
js/v.js
|
|
@ -5,19 +5,26 @@ function loadVue() {
|
|||
Vue.component('display-text', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<span v-html="data"></span>
|
||||
<span class="instant" v-html="data"></span>
|
||||
`
|
||||
})
|
||||
|
||||
// data = a function returning the content (actually HTML)
|
||||
Vue.component('raw-html', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<span class="instant" v-html="data"></span>
|
||||
`
|
||||
})
|
||||
|
||||
// Blank space, data = optional height in px or pair with width and height in px
|
||||
Vue.component('blank', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<div>
|
||||
<div v-if="!data" v-bind:style="{'width': '8px', 'height': '17px'}"></div>
|
||||
<div v-else-if="Array.isArray(data)" v-bind:style="{'width': data[0], 'height': data[1]}"></div>
|
||||
<div v-else v-bind:style="{'width': '8px', 'height': 'data'}"><br></div>
|
||||
<div class = "instant">
|
||||
<div class = "instant" v-if="!data" v-bind:style="{'width': '8px', 'height': '17px'}"></div>
|
||||
<div class = "instant" v-else-if="Array.isArray(data)" v-bind:style="{'width': data[0], 'height': data[1]}"></div>
|
||||
<div class = "instant" v-else v-bind:style="{'width': '8px', 'height': 'data'}"><br></div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
|
@ -26,7 +33,7 @@ function loadVue() {
|
|||
Vue.component('display-image', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<img v-bind:src= "data" v-bind:alt= "data">
|
||||
<img class="instant" v-bind:src= "data" v-bind:alt= "data">
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -34,7 +41,7 @@ function loadVue() {
|
|||
Vue.component('row', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<div class="upgTable">
|
||||
<div class="upgTable instant" >
|
||||
<div class="upgRow">
|
||||
<div v-for="item in data">
|
||||
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp[layer].componentStyles[item]"></div>
|
||||
|
|
@ -50,7 +57,7 @@ function loadVue() {
|
|||
Vue.component('column', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<div class="upgTable">
|
||||
<div class="upgTable instant" >
|
||||
<div class="upgCol">
|
||||
<div v-for="item in data">
|
||||
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp[layer].componentStyles[item]"></div>
|
||||
|
|
@ -67,7 +74,7 @@ function loadVue() {
|
|||
Vue.component('h-line', {
|
||||
props: ['layer', 'data'],
|
||||
template:`
|
||||
<hr v-bind:style="data ? {'width': data} : {}" class="hl">
|
||||
<hr class="instant" v-bind:style="data ? {'width': data} : {}" class="hl">
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -75,7 +82,7 @@ function loadVue() {
|
|||
Vue.component('v-line', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<div v-bind:style="data ? {'height': data} : {}" class="vl2"></div>
|
||||
<div class="instant" v-bind:style="data ? {'height': data} : {}" class="vl2"></div>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -153,7 +160,7 @@ function loadVue() {
|
|||
Vue.component('milestone', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<td v-if="layers[layer].milestones && layers[layer].milestones[data]!== undefined && milestoneShown(layer, data)" v-bind:style="[(tmp[layer].milestones[data].unl && !tmp[layer].milestones[data].unl) ? {'visibility': 'hidden'} : {}, tmp[layer].milestones[data].style]" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}">
|
||||
<td v-if="layers[layer].milestones && layers[layer].milestones[data]!== undefined && milestoneShown(layer, data)" v-bind:style="[(!tmp[layer].milestones[data].unl) ? {'visibility': 'hidden'} : {}, tmp[layer].milestones[data].style]" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}">
|
||||
<h3 v-html="tmp[layer].milestones[data].requirementDesc"></h3><br>
|
||||
<span v-html="tmp[layer].milestones[data].effectDesc"></span><br>
|
||||
<span v-if="(tmp[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v-for="toggle in tmp[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle" v-bind:style="tmp[layer].componentStyles.toggle"></toggle> </span></td></tr>
|
||||
|
|
@ -267,18 +274,23 @@ function loadVue() {
|
|||
`
|
||||
})
|
||||
|
||||
// data = id of gague
|
||||
Vue.component('gague', {
|
||||
|
||||
// data = id of the bar
|
||||
Vue.component('bar', {
|
||||
props: ['layer', 'data'],
|
||||
template: `
|
||||
<div v-if="tmp[layer].gagues && tmp[layer].gagues[data].unl"
|
||||
v-bind:style="{'border-style': 'solid}"
|
||||
<div v-if="tmp[layer].bars && tmp[layer].bars[data].unl" v-bind:style="{'position': 'relative'}"><div class ="barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
|
||||
|
||||
</div>
|
||||
<div class = "overlayTextContainer" v-bind:style="[tmp[layer].bars[data].dims]">
|
||||
<span class = "overlayText" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v-html="tmp[layer].bars[data].display"></span>
|
||||
</div>
|
||||
<div class ="fill" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].fillDims]"></div>
|
||||
|
||||
</div></div>
|
||||
`
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
// NOT FOR USE IN STANDARD TAB FORMATTING
|
||||
Vue.component('tab-buttons', {
|
||||
|
|
|
|||
40
style.css
40
style.css
|
|
@ -122,9 +122,37 @@ h1, h2, h3, b, input {
|
|||
text-shadow: 0px 0px 7px var(--color);
|
||||
}
|
||||
|
||||
.barBorder {
|
||||
border: 2px solid;
|
||||
border-radius: 10%;
|
||||
border-color: var(--color);
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.overlayTextContainer {
|
||||
z-index: 3;
|
||||
border-radius: 10%;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fill {
|
||||
background-color: var(--color);
|
||||
border-radius: 5%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overlayText {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.tabButton {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--color);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
|
|
@ -359,6 +387,14 @@ a {
|
|||
transition-duration: 0s
|
||||
}
|
||||
|
||||
.instant {
|
||||
transition-duration: 0s !important
|
||||
}
|
||||
|
||||
.fast {
|
||||
transition:color none
|
||||
}
|
||||
|
||||
.col.right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -486,4 +522,4 @@ ul {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue