From 0809a8bb7787133ca8e66d5ba664ab52b66e2086 Mon Sep 17 00:00:00 2001
From: Kaister300 <109926616+Kaister300@users.noreply.github.com>
Date: Sun, 3 Mar 2024 22:56:46 +1100
Subject: [PATCH 1/3] Cash Slider Implemented

- Added cash slider into calculator form
- Need to look into rendering page and then validating form after paragon type/difficulty change
---
 .gitignore                             |   1 +
 project/webpage/scripts/paragoncalc.js | 108 ++++++++++++++++++++-----
 2 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/.gitignore b/.gitignore
index 218907f..13f0b4f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .env
+venv/
 node_modules/
 project/output
\ No newline at end of file
diff --git a/project/webpage/scripts/paragoncalc.js b/project/webpage/scripts/paragoncalc.js
index 9322ba4..5aab7ad 100644
--- a/project/webpage/scripts/paragoncalc.js
+++ b/project/webpage/scripts/paragoncalc.js
@@ -82,6 +82,22 @@ class paragonCalc extends LitElement {
             margin: 4px;
         }
 
+        #cashslidercontainer {
+            margin: 4px;
+            max-width: 15rem;
+            border: none;
+            display: flex;
+        }
+
+        #cashslidercontainer input {
+            flex: 1 0 auto;
+            align-self: center;
+        }
+
+        #cashslidercontainer span {
+            align-self: center;
+        }
+
         .warning {
             display: block;
             margin-top: 0.5rem;
@@ -154,9 +170,12 @@ class paragonCalc extends LitElement {
                     this.paragoncost = this._paragon.prices[this.difficulty];
                 }
                 else {
-                    this._paragon = void 1
-                    this.difficulty = ""
+                    this._paragon = void 1;
+                    this.difficulty = "";
+                    this.paragoncost = 0;
                 }
+                this.requestUpdate();
+                this._validateForm();
             });
 
         // Sets up drop down menu
@@ -237,10 +256,12 @@ class paragonCalc extends LitElement {
     _validate(e) {
         // Gets input element that has been given a user input
         let curr = e.originalTarget;
+        console.log(curr)
 
         // Sets input empty if input is invalid
         if(curr.value.length === 0) {
-            curr.value = "";
+            // curr.value = "";
+            return;
         }
 
         // Checking Integer Values
@@ -250,6 +271,32 @@ class paragonCalc extends LitElement {
         else if(parseInt(curr.value) < parseInt(curr.min)) {
             curr.value = curr.min;
         }
+
+        // Cash Slider Check
+        if(curr.id === "cashslider") {
+            this._cash_slider_update(e);
+        }
+    }
+
+    /**
+     * Validates entire form to ensure that all values are valid.
+     */
+    _validateForm() {
+        let calc_form = document.getElementsByTagName("paragon-calc")[0].shadowRoot.getElementById("calc");
+        for(let i = 0; i < calc_form.length; i++) {
+            this._validate({"originalTarget": calc_form[i]});
+        }
+    }
+
+    /**
+     * Updates element next to slider with numerical value
+     * @param {event} e 
+     */
+    _cash_slider_update(e) {
+        let slider = e.originalTarget
+        let slider_p = e.originalTarget.nextElementSibling;
+        
+        slider_p.textContent = slider.value;
     }
 
     /**
@@ -264,39 +311,49 @@ class paragonCalc extends LitElement {
         this.power = 0;
 
         // Tier5s. Max is 50,000 power
-        this.power += form.tier5.value*6000;
-        if(this.power > 50000) {
-            this.power = 50000;
+        if(form.tier5.value) {
+            this.power += form.tier5.value*6000;
+            if(this.power > 50000) this.power = 50000;
         }
-
+        
         // Upgrades. Max is 10,000 power
-        this.power += form.towerupgrades.value*100;
+        if(form.towerupgrades.value) this.power += form.towerupgrades.value*100;
 
         // Money Spent. Max is 60,000 power
         if(!(this.paragoncost === 0)) {
-            let spentratio = this.paragoncost/20000
-            let costpower = Math.floor(form.moneyspent.value/spentratio);
-            if(costpower > 60000) {
-                costpower = 60000;
+            let costpower = 0;
+
+            // Money Spent
+            if(form.moneyspent.value) {
+                let spentratio = this.paragoncost/20000
+                costpower += Math.floor(form.moneyspent.value/spentratio);
             }
+
+            // Cash Slider
+            if(form.cashslider.value) {
+                let sliderratio = this.paragoncost*1.05/20000;
+                costpower += Math.floor(form.cashslider.value/sliderratio);
+            }
+
+            if(costpower > 60000) costpower = 60000;
             this.power += costpower;
         }
 
         // Pops or Income. Max is 90,000 power
-        let temp = Math.floor(form.popcount.value/180);
-        temp += Math.floor(form.incomegenerated.value/45);
-        if(temp > 90000) {
-            temp = 90000;
-        }
+        let temp = 0;
+        if(form.popcount.value) temp += Math.floor(form.popcount.value/180);
+        if(form.incomegenerated.value) temp += Math.floor(form.incomegenerated.value/45);
+        if(temp > 90000) temp = 90000;
         this.power += temp;
+        
 
         // Totems. No Max
-        this.power += form.paragontotems.value*2000;
+        if(form.paragontotems.value) this.power += form.paragontotems.value*2000;
 
         // Capping Total Max Power
-        if(this.power > 200000) {
-            this.power = 200000;
-        }
+        // if(this.power > 200000) {
+        //     this.power = 200000;
+        // }
     }
 
     hideWidget(e) {
@@ -360,6 +417,9 @@ class paragonCalc extends LitElement {
 
                 <label for="paragontotems"><span class="tooltip">Geraldo Paragon Power Totems:<span class="tooltiptext">Has no max cap to increase paragon power.</span></span></label>
                 <input type="number" id="paragontotems" min=0 value=0>
+
+                <label for="cashslider"><span class="tooltip">Cash Injection:<span class="tooltiptext">This is the cash injection that is allowed to be spent on the paragon. This is 3.15 times the base paragon cost. Max is $${Math.round(3.15*this.paragoncost+1)}.</span></span></label>
+                <span id="cashslidercontainer"><input type="range" id="cashslider" min=0 max=${Math.round(3.15*this.paragoncost+1)} value=0 step=1 @input=${this._cash_slider_update}><span>0</span></span>
             </form>
             <p>Current Degree: ${this.currDegree}</p>
             <p>Current Power: ${this.power}</p>
@@ -369,12 +429,16 @@ class paragonCalc extends LitElement {
             : html`<p>Paragon has reached max level and can not be leveled up further.</p>`
             }
             ${this.paragoncost ?
-            html`<span class="warning"><strong>NOTE:</strong> The cash injection is 3.15 times the base paragon cost. This would mean that the total cash injection allowed would be $${Math.round(3.15*this.paragoncost)}</span>`
+            html`<span class="warning"><strong>NOTE:</strong> The cash injection is 3.15 times the base paragon cost. This would mean that the total cash injection allowed would be $${Math.round(3.15*this.paragoncost+1)}</span>`
             : html`<span class="warning"><strong>NOTE:</strong> Please choose the Paragon and Difficulty first.</span>`
             }
         </div>
         `;
     }
+
+    // updated() {
+    //     this._validateForm();
+    // }
 }
 
 customElements.define("paragon-calc", paragonCalc);
\ No newline at end of file

From c6dea00a5d456f2938c42fcf229e48d5fde728fa Mon Sep 17 00:00:00 2001
From: Kaister300 <109926616+Kaister300@users.noreply.github.com>
Date: Mon, 28 Oct 2024 22:14:02 +1100
Subject: [PATCH 2/3] Fixed Cash Slider

- Cash slider should now properly update
- Fixed Sonarlint issues in paragon calc class
- Changed _degreeCalc function so that it only returns once the function is finished instead of returning midway
---
 project/webpage/scripts/paragoncalc.js | 60 +++++++++++++++++---------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/project/webpage/scripts/paragoncalc.js b/project/webpage/scripts/paragoncalc.js
index 5aab7ad..38dd5a1 100644
--- a/project/webpage/scripts/paragoncalc.js
+++ b/project/webpage/scripts/paragoncalc.js
@@ -1,6 +1,6 @@
 import {LitElement, html, css} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
 
-class paragonCalc extends LitElement {
+class ParagonCalc extends LitElement {
     static properties = {
         currDegree: {type: Number},
         nextDegree: {type: Number},
@@ -170,12 +170,15 @@ class paragonCalc extends LitElement {
                     this.paragoncost = this._paragon.prices[this.difficulty];
                 }
                 else {
-                    this._paragon = void 1;
+                    this._paragon = void 0;
                     this.difficulty = "";
                     this.paragoncost = 0;
                 }
-                this.requestUpdate();
                 this._validateForm();
+                let formEle = document.getElementsByTagName("paragon-calc")[0].shadowRoot.getElementById("calc");
+                if (formEle) {
+                    this._degreeFormUpdate({"currentTarget": formEle});
+                }
             });
 
         // Sets up drop down menu
@@ -224,16 +227,19 @@ class paragonCalc extends LitElement {
      * @returns 
      */
     _degreeCalc() {
+        let found = false;
         for(let i = 0; i < this.paragonLevels.length; i++) {
             if(this.power < this.paragonLevels[i]) {
                 this.currDegree = i;
                 this.nextDegree = i+1;
-                this._eventDegree();
-                return null;
+                found = true;
+                break;
             }
         }
-        this.currDegree = 100;
-        this.nextDegree = "MAX";
+        if (!found) {
+            this.currDegree = 100;
+            this.nextDegree = "MAX";
+        }
         this._eventDegree();
     }
 
@@ -241,7 +247,7 @@ class paragonCalc extends LitElement {
      * Sends updated degree level to paragon damage
     */ 
     _eventDegree() {
-        if(!(this.currDegree === this.sentDegree)) {
+        if(this.currDegree !== this.sentDegree) {
             this.sentDegree = this.currDegree;
             let e = new CustomEvent("degree", { detail: {currDegree: `${this.currDegree}`}});
             window.dispatchEvent(e);
@@ -256,7 +262,6 @@ class paragonCalc extends LitElement {
     _validate(e) {
         // Gets input element that has been given a user input
         let curr = e.originalTarget;
-        console.log(curr)
 
         // Sets input empty if input is invalid
         if(curr.value.length === 0) {
@@ -283,8 +288,9 @@ class paragonCalc extends LitElement {
      */
     _validateForm() {
         let calc_form = document.getElementsByTagName("paragon-calc")[0].shadowRoot.getElementById("calc");
-        for(let i = 0; i < calc_form.length; i++) {
-            this._validate({"originalTarget": calc_form[i]});
+        
+        for(let element of calc_form) {
+            this._validate({"originalTarget": element});
         }
     }
 
@@ -293,12 +299,23 @@ class paragonCalc extends LitElement {
      * @param {event} e 
      */
     _cash_slider_update(e) {
-        let slider = e.originalTarget
+        let slider = e.originalTarget;
         let slider_p = e.originalTarget.nextElementSibling;
-        
+        let maxSliderValue;
+        if (slider.value > (maxSliderValue = this._maxSliderValue())) {
+            slider.value = maxSliderValue;
+        }
         slider_p.textContent = slider.value;
     }
 
+    /**
+     * Calculates the max value for the cash slider
+     * @returns Maximum value for the cash slider as integer
+     */
+    _maxSliderValue() {
+        return Math.round(3.15 * this.paragoncost + 1);
+    }
+
     /**
      * Calculates current power from form values
      * @param {event} event Form event from updating values 
@@ -320,7 +337,7 @@ class paragonCalc extends LitElement {
         if(form.towerupgrades.value) this.power += form.towerupgrades.value*100;
 
         // Money Spent. Max is 60,000 power
-        if(!(this.paragoncost === 0)) {
+        if(this.paragoncost !== 0) {
             let costpower = 0;
 
             // Money Spent
@@ -351,9 +368,9 @@ class paragonCalc extends LitElement {
         if(form.paragontotems.value) this.power += form.paragontotems.value*2000;
 
         // Capping Total Max Power
-        // if(this.power > 200000) {
-        //     this.power = 200000;
-        // }
+        if(this.power > 200000) {
+            this.power = 200000;
+        }
     }
 
     hideWidget(e) {
@@ -380,6 +397,7 @@ class paragonCalc extends LitElement {
 
     render() {
         this._degreeCalc();
+        const paragonSliderMax = this._maxSliderValue();
         return html`
         <header>
             <h1>Paragon Degree Calculator (Post 39.0)</h1>
@@ -418,8 +436,8 @@ class paragonCalc extends LitElement {
                 <label for="paragontotems"><span class="tooltip">Geraldo Paragon Power Totems:<span class="tooltiptext">Has no max cap to increase paragon power.</span></span></label>
                 <input type="number" id="paragontotems" min=0 value=0>
 
-                <label for="cashslider"><span class="tooltip">Cash Injection:<span class="tooltiptext">This is the cash injection that is allowed to be spent on the paragon. This is 3.15 times the base paragon cost. Max is $${Math.round(3.15*this.paragoncost+1)}.</span></span></label>
-                <span id="cashslidercontainer"><input type="range" id="cashslider" min=0 max=${Math.round(3.15*this.paragoncost+1)} value=0 step=1 @input=${this._cash_slider_update}><span>0</span></span>
+                <label for="cashslider"><span class="tooltip">Cash Injection:<span class="tooltiptext">This is the cash injection that is allowed to be spent on the paragon. This is 3.15 times the base paragon cost. Max is $${paragonSliderMax}.</span></span></label>
+                <span id="cashslidercontainer"><input type="range" id="cashslider" min=0 max=${paragonSliderMax} value=0 step=1 @input=${this._cash_slider_update}><span>0</span></span>
             </form>
             <p>Current Degree: ${this.currDegree}</p>
             <p>Current Power: ${this.power}</p>
@@ -429,7 +447,7 @@ class paragonCalc extends LitElement {
             : html`<p>Paragon has reached max level and can not be leveled up further.</p>`
             }
             ${this.paragoncost ?
-            html`<span class="warning"><strong>NOTE:</strong> The cash injection is 3.15 times the base paragon cost. This would mean that the total cash injection allowed would be $${Math.round(3.15*this.paragoncost+1)}</span>`
+            html`<span class="warning"><strong>NOTE:</strong> The cash injection is 3.15 times the base paragon cost. This would mean that the total cash injection allowed would be $${paragonSliderMax}</span>`
             : html`<span class="warning"><strong>NOTE:</strong> Please choose the Paragon and Difficulty first.</span>`
             }
         </div>
@@ -441,4 +459,4 @@ class paragonCalc extends LitElement {
     // }
 }
 
-customElements.define("paragon-calc", paragonCalc);
\ No newline at end of file
+customElements.define("paragon-calc", ParagonCalc);
\ No newline at end of file

From 19cd742c734687b53de20543c0d86d8965114e5b Mon Sep 17 00:00:00 2001
From: Kaister300 <109926616+Kaister300@users.noreply.github.com>
Date: Mon, 28 Oct 2024 22:31:25 +1100
Subject: [PATCH 3/3] Now using Math min

- Using Math min function to get max power limits
- Allows for cleaner code and also removed cognitive complexity Sonarlint issue
---
 project/webpage/scripts/paragoncalc.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/project/webpage/scripts/paragoncalc.js b/project/webpage/scripts/paragoncalc.js
index 38dd5a1..4ca6e76 100644
--- a/project/webpage/scripts/paragoncalc.js
+++ b/project/webpage/scripts/paragoncalc.js
@@ -329,12 +329,13 @@ class ParagonCalc extends LitElement {
 
         // Tier5s. Max is 50,000 power
         if(form.tier5.value) {
-            this.power += form.tier5.value*6000;
-            if(this.power > 50000) this.power = 50000;
+            this.power += Math.min(form.tier5.value*6000, 50000);
         }
         
         // Upgrades. Max is 10,000 power
-        if(form.towerupgrades.value) this.power += form.towerupgrades.value*100;
+        if(form.towerupgrades.value) {
+            this.power += Math.min(form.towerupgrades.value*100, 10000);
+        }
 
         // Money Spent. Max is 60,000 power
         if(this.paragoncost !== 0) {
@@ -352,25 +353,20 @@ class ParagonCalc extends LitElement {
                 costpower += Math.floor(form.cashslider.value/sliderratio);
             }
 
-            if(costpower > 60000) costpower = 60000;
-            this.power += costpower;
+            this.power += Math.min(costpower, 60000);
         }
 
         // Pops or Income. Max is 90,000 power
         let temp = 0;
         if(form.popcount.value) temp += Math.floor(form.popcount.value/180);
         if(form.incomegenerated.value) temp += Math.floor(form.incomegenerated.value/45);
-        if(temp > 90000) temp = 90000;
-        this.power += temp;
-        
+        this.power += Math.min(temp, 90000);
 
         // Totems. No Max
         if(form.paragontotems.value) this.power += form.paragontotems.value*2000;
 
         // Capping Total Max Power
-        if(this.power > 200000) {
-            this.power = 200000;
-        }
+        this.power = Math.min(this.power, 200000);
     }
 
     hideWidget(e) {