From 40bbf036685b04c3068f5752e2a74e5e17654a7d Mon Sep 17 00:00:00 2001 From: Acamaeda Date: Mon, 12 Oct 2020 18:28:12 -0400 Subject: [PATCH] Added Bars component --- index.html | 6 ++-- js/game.js | 8 +++-- js/layerSupport.js | 21 ++++++++--- js/layers.js | 88 +++++++++++++++++++++++++++++++++++++--------- js/temp.js | 47 ++++++++++++++++++++++++- js/utils.js | 2 +- js/v.js | 46 +++++++++++++++--------- style.css | 40 +++++++++++++++++++-- 8 files changed, 211 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index da90b19..0566a11 100644 --- a/index.html +++ b/index.html @@ -117,8 +117,8 @@ -
-
+
+



@@ -141,7 +141,7 @@
-
+
diff --git a/js/game.js b/js/game.js index ac45790..7be1dfa 100644 --- a/js/game.js +++ b/js/game.js @@ -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"){ diff --git a/js/layerSupport.js b/js/layerSupport.js index 4f250d0..1b2c936 100644 --- a/js/layerSupport.js +++ b/js/layerSupport.js @@ -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 \ No newline at end of file +const UP = 0 +const DOWN = 1 +const LEFT = 2 +const RIGHT = 3 diff --git a/js/layers.js b/js/layers.js index f41816b..e500f2a 100644 --- a/js/layers.js +++ b/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 "

C O N F I R M E D

"}], + ["raw-html", function() {return "

C O N F I R M E D

"}], "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, diff --git a/js/temp.js b/js/temp.js index a2d0c13..7592ab2 100644 --- a/js/temp.js +++ b/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 = {} + } } \ No newline at end of file diff --git a/js/utils.js b/js/utils.js index 3834f38..d467b04 100644 --- a/js/utils.js +++ b/js/utils.js @@ -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 diff --git a/js/v.js b/js/v.js index 22390d6..69c21a4 100644 --- a/js/v.js +++ b/js/v.js @@ -5,19 +5,26 @@ function loadVue() { Vue.component('display-text', { props: ['layer', 'data'], template: ` - + ` }) +// data = a function returning the content (actually HTML) + Vue.component('raw-html', { + props: ['layer', 'data'], + template: ` + + ` + }) // Blank space, data = optional height in px or pair with width and height in px Vue.component('blank', { props: ['layer', 'data'], template: ` -
-
-
-

+
+
+
+

` }) @@ -26,7 +33,7 @@ function loadVue() { Vue.component('display-image', { props: ['layer', 'data'], template: ` - + ` }) @@ -34,7 +41,7 @@ function loadVue() { Vue.component('row', { props: ['layer', 'data'], template: ` -
+
@@ -50,7 +57,7 @@ function loadVue() { Vue.component('column', { props: ['layer', 'data'], template: ` -
+
@@ -67,7 +74,7 @@ function loadVue() { Vue.component('h-line', { props: ['layer', 'data'], template:` -
+
` }) @@ -75,7 +82,7 @@ function loadVue() { Vue.component('v-line', { props: ['layer', 'data'], template: ` -
+
` }) @@ -153,7 +160,7 @@ function loadVue() { Vue.component('milestone', { props: ['layer', 'data'], template: ` - +



  @@ -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: ` -
-
+
+ +
+
+ +
` }) - + // NOT FOR USE IN STANDARD TAB FORMATTING Vue.component('tab-buttons', { diff --git a/style.css b/style.css index 00c32d4..6dc272b 100644 --- a/style.css +++ b/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; -} \ No newline at end of file +}