functional ID value probabilities

customizer.html

@@ -1818,7 +1818,7 @@
                         </div>
                         <div class = "button copy-button" style = "grid-item-3">
                             <button class = "copy-button" id = "copy-button" onclick = "copyCustom()">
-                                Copy
+                                Copy Link
                             </button>
                         </div>
                         <div class = "button set-button center" style = "grid-item-4">

display.js

@@ -2257,6 +2257,7 @@ function displayAdditionalInfo(elemID, item) {
  * @param {String} item expandedItem object
  */
 function displayIDProbabilities(parent_id,item) {
+    if (item.has("fixID") && item.get("fixID")) {return}
     let parent_elem = document.getElementById(parent_id);
     parent_elem.style.display = "";
     let title_elem = document.createElement("p");
@@ -2264,7 +2265,224 @@ function displayIDProbabilities(parent_id,item) {
     title_elem.classList.add("Legendary");
     title_elem.classList.add("title");
     parent_elem.appendChild(title_elem);
+    
+    let disclaimer_elem = document.createElement("p");
+    disclaimer_elem.textContent = "IDs are rolled on a uniform distribution. A chance of 0% means that either the minimum or maximum possible multiplier must be rolled to get this value."
+    parent_elem.appendChild(disclaimer_elem);
 
     let item_name = item.get("displayName");
     console.log(itemMap.get(item_name))
+    
+    let table_elem = document.createElement("table");
+    parent_elem.appendChild(table_elem);
+    for (const [id,val] of Object.entries(itemMap.get(item_name))) {
+        if (rolledIDs.includes(id)) {
+            let min = item.get("minRolls").get(id);
+            let max = item.get("maxRolls").get(id);
+
+            let row_title = document.createElement("tr");
+            //row_title.style.textAlign = "left";
+            let title_left = document.createElement("td");
+            let left_elem = document.createElement("p");
+            let left_val_title = document.createElement("b");
+            let left_val_elem = document.createElement("b");
+            title_left.style.textAlign = "left";
+            left_val_title.textContent = idPrefixes[id] + "Base ";
+            left_val_elem.textContent = val + idSuffixes[id];
+            if (val > 0 == !reversedIDs.includes(id)) {
+                left_val_elem.classList.add("positive");
+            } else if (val > 0 == reversedIDs.includes(id)) {
+                left_val_elem.classList.add("negative");
+            }
+            left_elem.appendChild(left_val_title);
+            left_elem.appendChild(left_val_elem);
+            title_left.appendChild(left_elem);
+            row_title.appendChild(title_left);
+
+            let title_right = document.createElement("td");
+            let title_right_text = document.createElement("b");
+            title_right.style.textAlign = "left";
+            title_right_text.textContent = "[ " + min + idSuffixes[id] + ", " + max + idSuffixes[id] + " ]";
+            if ( (min > 0 && max > 0 && !reversedIDs.includes(id)) || (min < 0 && max < 0 && reversedIDs.includes(id)) ) {
+                title_right_text.classList.add("positive");
+            } else if ( (min < 0 && max < 0 && !reversedIDs.includes(id)) || (min > 0 && max > 0 && reversedIDs.includes(id)) ) {
+                title_right_text.classList.add("negative");
+            }
+            title_right.appendChild(title_right_text);
+
+            let title_input = document.createElement("td");
+            let title_input_slider = document.createElement("input");
+            title_input_slider.type = "range";
+            title_input_slider.id = id+"-slider";
+            if (!reversedIDs.includes(id)) {
+                title_input_slider.step = 1;
+                title_input_slider.min = `${min}`;
+                title_input_slider.max = `${max}`;
+                title_input_slider.value = `${max}`;
+            } else {
+                title_input_slider.step = 1;
+                title_input_slider.min = `${-1*min}`;
+                title_input_slider.max = `${-1*max}`;
+                title_input_slider.value = `${-1*max}`;
+            }
+            let title_input_textbox = document.createElement("input");
+            title_input_textbox.type = "text";
+            title_input_textbox.value = `${max}`;
+            title_input_textbox.id = id+"-textbox";
+            title_input_textbox.classList.add("small-input");
+            title_input.appendChild(title_input_slider);
+            title_input.appendChild(title_input_textbox);
+            
+            row_title.appendChild(title_left);
+            row_title.appendChild(title_right);
+            row_title.appendChild(title_input);
+
+            let row_chances = document.createElement("tr");
+            let chance_cdf = document.createElement("td");
+            let chance_pdf = document.createElement("td");
+            let cdf_p = document.createElement("p");
+            cdf_p.id = id+"-cdf";
+            let pdf_p = document.createElement("p");
+            pdf_p.id = id+"-pdf";
+
+            chance_cdf.appendChild(cdf_p);
+            chance_pdf.appendChild(pdf_p);
+            row_chances.appendChild(chance_cdf);
+            row_chances.appendChild(chance_pdf);
+
+            table_elem.appendChild(row_title);
+            table_elem.appendChild(row_chances);
+
+            
+
+            stringPDF(id, max, val); //val is base roll
+            stringCDF(id, max, val); //val is base roll
+            title_input_slider.addEventListener("change", (event) => {
+                let id_name = event.target.id.split("-")[0];
+                let textbox_elem = document.getElementById(id_name+"-textbox");
+
+                if (reversedIDs.includes(id_name)) {
+                    if (event.target.value < -1*min) { event.target.value = -1*min}
+                    if (event.target.value > -1*max) { event.target.value = -1*max}
+                    stringPDF(id_name, -1*event.target.value, val); //val is base roll
+                    stringCDF(id_name, -1*event.target.value, val); //val is base roll
+                } else {    
+                    if (event.target.value < min) { event.target.value = min}
+                    if (event.target.value > max) { event.target.value = max}
+                    stringPDF(id_name, 1*event.target.value, val); //val is base roll
+                    stringCDF(id_name, 1*event.target.value, val); //val is base roll
+                }
+
+                if (textbox_elem && textbox_elem.value !== event.target.value) {
+                    if (reversedIDs.includes(id_name)) {
+                        textbox_elem.value = -event.target.value;
+                    } else {
+                        textbox_elem.value = event.target.value;
+                    }
+                }
+                
+                
+            });
+            title_input_textbox.addEventListener("change", (event) => {
+                let id_name = event.target.id.split("-")[0];
+                if (reversedIDs.includes(id_name)) {
+                    if (event.target.value > min) { event.target.value = min}
+                    if (event.target.value < max) { event.target.value = max}
+                } else {    
+                    if (event.target.value < min) { event.target.value = min}
+                    if (event.target.value > max) { event.target.value = max}
+                }
+                let slider_elem = document.getElementById(id_name+"-slider");
+                if (slider_elem.value !== event.target.value) {
+                    slider_elem.value = -event.target.value;    
+                }
+
+                stringPDF(id_name, 1*event.target.value, val); 
+                stringCDF(id_name, 1*event.target.value, val); 
+            });
+        }
+    }
+    
+
+
+    
+}
+
+//helper functions. id - the string of the id's name, val - the value of the id, base - the base value of the item for this id
+function stringPDF(id,val,base) {
+    /** [0.3b,1.3b] positive normal
+     *  [1.3b,0.3b] positive reversed
+     *  [1.3b,0.7b] negative normal
+     *  [0.7b,1.3b] negative reversed
+     * 
+     *  [0.3, 1.3] minr, maxr [0.3b, 1.3b] min, max
+     *  the minr/maxr decimal roll that corresponds to val -> minround, maxround
+     */
+    let p; let min; let max; let minr; let maxr; let minround; let maxround;
+    if (base > 0) {
+        minr = 0.3; maxr = 1.3;
+        min = Math.max(1, Math.round(minr*base)); max = Math.max(1, Math.round(maxr*base));
+        minround = (min == max) ? (minr) : ( Math.max(minr, (val-0.5) / base) );
+        maxround = (min == max) ? (maxr) : ( Math.min(maxr, (val+0.5) / base) );
+    } else {
+        minr = 1.3; maxr = 0.7;
+        min = Math.min(-1, Math.round(minr*base)); max = Math.min(-1, Math.round(maxr*base));
+        minround = (min == max) ? (minr) : ( Math.min(minr, (val-0.5) / base) );
+        maxround = (min == max) ? (maxr) : ( Math.max(maxr, (val+0.5) / base) );
+    }
+
+    console.log(( Math.min(maxr, (val+0.5) / base)));
+    
+    p = Math.abs(maxround-minround)/Math.abs(maxr-minr)*100;
+    p = p.toFixed(3);
+
+    let b1 = document.createElement("b");
+    b1.textContent = "Roll exactly ";
+    let b2 = document.createElement("b");
+    b2.textContent = val + idSuffixes[id];
+    if (val > 0 == !reversedIDs.includes(id)) {b2.classList.add("positive")}
+    if (val > 0 == reversedIDs.includes(id)) {b2.classList.add("negative")}
+    let b3 = document.createElement("b");
+    b3.textContent = ": " + p + "%";
+    document.getElementById(id + "-pdf").innerHTML = "";
+    document.getElementById(id + "-pdf").appendChild(b1);
+    document.getElementById(id + "-pdf").appendChild(b2);
+    document.getElementById(id + "-pdf").appendChild(b3);
+    document.getElementById(id + "-pdf").style.textAlign = "left";
+}
+function stringCDF(id,val,base) {
+    let p; let min; let max; let minr; let maxr; let minround; let maxround;
+    if (base > 0) {
+        minr = 0.3; maxr = 1.3;
+        min = Math.max(1, Math.round(minr*base)); max = Math.max(1, Math.round(maxr*base));
+        minround = (min == max) ? (minr) : ( Math.max(minr, (val-0.5) / base) );
+        maxround = (min == max) ? (maxr) : ( Math.min(maxr, (val+0.5) / base) );
+    } else {
+        minr = 1.3; maxr = 0.7;
+        min = Math.min(-1, Math.round(minr*base)); max = Math.min(-1, Math.round(maxr*base));
+        minround = (min == max) ? (minr) : ( Math.min(minr, (val-0.5) / base) );
+        maxround = (min == max) ? (maxr) : ( Math.max(maxr, (val+0.5) / base) );
+    }
+
+    console.log(( Math.min(maxr, (val+0.5) / base)));
+    if (reversedIDs.includes(id)) {
+        p = Math.abs(minr-maxround)/Math.abs(maxr-minr)*100;
+    } else {
+        p = Math.abs(maxr-minround)/Math.abs(maxr-minr)*100;
+    }
+    p = p.toFixed(3);
+    
+    let b1 = document.createElement("b");
+    b1.textContent = "Roll ";
+    let b2 = document.createElement("b");
+    b2.textContent = val + idSuffixes[id];
+    if (val > 0 == !reversedIDs.includes(id)) {b2.classList.add("positive")}
+    if (val > 0 == reversedIDs.includes(id)) {b2.classList.add("negative")}
+    let b3 = document.createElement("b");
+    b3.textContent= " or better: " + p + "%";
+    document.getElementById(id + "-cdf").innerHTML = "";
+    document.getElementById(id + "-cdf").appendChild(b1);
+    document.getElementById(id + "-cdf").appendChild(b2);
+    document.getElementById(id + "-cdf").appendChild(b3);
+    document.getElementById(id + "-cdf").style.textAlign = "left";
 }