+
+
+
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: ` -
-
-
-
+ ![]()
+ ![]()
`
})
@@ -34,7 +41,7 @@ function loadVue() {
Vue.component('row', {
props: ['layer', 'data'],
template: `
-
+
+
+
`
})
@@ -26,7 +33,7 @@ function loadVue() {
Vue.component('display-image', {
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
+}
+
` }) @@ -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: ` -
+
+
+
+