diff --git a/css/gui/buttons.css b/css/gui/buttons.css index ce1e7762b3724fd5894f600f1760abfaa106ea1c..650fc6b274a73afd5454211073f47b6a29c4b1bd 100644 --- a/css/gui/buttons.css +++ b/css/gui/buttons.css @@ -10,3 +10,7 @@ background-color: var(--button-hover-color); border: solid 2px var(--button-border-color); } + +.purchase-button.disabled, .purchase-button.disabled:hover { + background-color: black; +} diff --git a/src/js/Purchase.js b/src/js/Purchase.js index 7a703288b40cda1786ad9ba022197ee62ac2c718..1213dc0e8beb279c5f34b4635567bd128882270f 100644 --- a/src/js/Purchase.js +++ b/src/js/Purchase.js @@ -24,29 +24,45 @@ globalThis.Purchase = class Purchase { const button = App.UI.DOM.makeElement("button", capFirstChar(price), ['purchase-button']); if (V.purchaseStyle === 'button') { - const note = this.note.substring(0, 5) === ' and ' ? this.note.replace(' and ', '') : this.note; + if (V.cash > this.cost) { + const note = this.note.substring(0, 5) === ' and ' ? this.note.replace(' and ', '') : this.note; - button.onclick = () => { - cashX(forceNeg(this.cost), this.what); + button.onclick = () => { + cashX(forceNeg(this.cost), this.what); - if (this.handler) { - this.handler(); + if (this.handler) { + this.handler(); + } + }; + + if (this.note) { + tippy(button, { + content: capFirstChar(note), + }); } - }; + } else { + button.classList.add("disabled"); - if (this.note) { tippy(button, { - content: capFirstChar(note), + content: `You cannot afford this purchase`, }); } div.append(text, button); } else { - div.append( - link, - ` `, - App.UI.DOM.makeElement("span", `${this.cost !== 0 ? `Costs ${price}` : capFirstChar(price)}${this.note}`, ['note']) - ); + if (V.cash > this.cost) { + div.append( + link, + ` `, + App.UI.DOM.makeElement("span", `${this.cost !== 0 ? `Costs ${price}` : capFirstChar(price)}${this.note}`, ['note']) + ); + } else { + div.append( + App.UI.DOM.disabledLink(this.link, ['You cannot afford this purchase']), + ` `, + App.UI.DOM.makeElement("span", `${this.cost !== 0 ? `Costs ${price}` : capFirstChar(price)}${this.note}`, ['note']) + ); + } } return div;