<div class="col-8 df aic jcsa fdc sb bgw">
<div class="col-12 df aic jcsa sb bgw">
Trash or Cash
</div>
<div class="col-12 df aic fdc jcsa sb bgw">
<div class="col-12 df aic jcsa bgw">
<div class="col-4 df aic jcsa sb bgw">
Desirability:
</div>
<div class="col-4 sb bgw">
<meter type="progress" max="1" value="0" disabled style="width:100%; height: 20px;" id="desirability" color="red"></meter>
</div>
<button class="col-4 df aic jcsa sb cp reset" onclick="reset()">RESET</button>
</div>
<div class="col-12 df aic fdc jcsa sb bgw">
<div class="col-12 df aic jcsa bgw">
<div class="col-4 df aic jcsa sb bgw">
Total Points:
</div>
<div class="col-8 df aic jcsa sb bgw">
<span id="totalpoints">0</span>
</div>
</div>
<div class="col-12 df aic jcsa bgw">
<div class="col-4 df aic jcsa sb bgw">
Verdict:
</div>
<div class="col-8 df aic jcsa sb bgw">
<span id="verdict">Unknown</span>
</div>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
FCR:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pFCR"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Strength:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pSTR"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Life:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pLIFE"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Dexterity:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pDEX"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Replenish Life:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pREPLIFE"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Minimum Damage:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pMINDMG"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Mana:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pMANA"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
All Resist:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pALLRES"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Single Resist:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pONERES"></select>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
<div class="col-6 df aic jcsa bgw">
Attack Rating:
</div>
<div class="col-6 df aic jcsa bgw">
<select type="search" id="pAR"></select>
</div>
</div>
</div>
<div class="col-12 df aic jcsa sb bgw">
**Remember: <br />Bad combinations such as FCR & Min Damage are not always a great combo. Your item needs to be desireable as well.
</div>
</div>
/*blue: #4793FF;*/
/*green: #29C672;*/
/*orange: #FFAE47;*/
/*red: #FF4747;*/
* {
transition: 0.3s ease all;
box-sizing: border-box;
/*cubic-bezier(0.5,-1.5,0.5,2.5)*/
color: orange;
letter-spacing: 0.5px;
text-shadow: 0.5px 0.5px 1px #500000;
font-weight: bold;
font-family: arial;
font-size: 1.75vw;
}
html,
body {
margin: 0;
height: 100%;
}
body {
background: linear-gradient(#333745, rgba(55, 55, 69, 0.7));
/*overflow: hidden;*/
justify-content: center;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 0.5px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.df {
display: flex;
}
.aic {
align-items: center;
}
.aifs {
align-items: flex-start;
}
.aife {
align-items: flex-end;
}
.asc {
align-self: center;
}
.asfs {
align-self: flex-start;
}
.asfe {
align-self: flex-end;
}
.jcc {
justify-content: center;
}
.jcsa {
justify-content: space-around;
}
.jcsb {
justify-content: space-between;
}
.jcfs {
justify-content: flex-start;
}
.jcsfe {
justify-content: flex-end;
}
.fdr {
flex-direction: row;
}
.fdrr {
flex-direction: row-reverse;
}
.fdc {
flex-direction: column;
}
.fdcr {
flex-direction: column-reverse;
}
.ctr {
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.cta {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.sb {
border: 2px solid #d3d3d3;
}
.smbr {
border-radius: 6.25px;
}
.mbr {
border-radius: 12.5px;
}
.lgbr {
border-radius: 25px;
}
.xlbr {
border-radius: 100%;
}
.cp {
cursor: pointer;
}
.atc {
align-text: center;
}
.bgw {
background: #333745;
}
.reset{
background: #111523;
letter-spacing: 4px;
}
.reset:hover{
background: #a01;
color: white;
}
.reset:active{
background: #802020;
color: #333745;
}
var b = $("<body")[0];
var bs = $s(b);
b.className = "df aic fdc";
/*Start Calc Guide*/
/*
Mod Value >= 66% of Max Value = 1 Full Pt;
Mod Value >= 33% && < 66% = 1/2 Pt;
Bad/Undesireable Mods don't count (e.g. Stamina);
*/
/*End Calc Guide*/
/*start points system*/
var iq0 = "99% = Charsi (Unless Start of Ladder)";
var iq1 = "Usable (PVP) & Sellable";
var iq2 = "Good Ring";
var iq3 = "Great Ring, PVP Gold";
var iq4 = "Amazing Ring";
var iq5 = "Top Ring on Ladder";
var iqs = [iq0, iq1, iq2, iq3, iq4, iq5];
/*end points system*/
/*start perfect ring mods*/
//suffixes
var pFCR = { max: 10, suffix: true, best: true };
var pSTR = { max: 20, suffix: true, best: true };
var pLIFE = { max: 40, suffix: true, best: true };
var pDEX = { max: 15, suffix: true, best: false };
var pREPLIFE = { max: 9, suffix: true, best: false };
var pMINDMG = { max: 9, suffix: true, best: false };
//prefixes
var pMANA = { max: 90, suffix: false, best: true };
var pALLRES = { max: 11, suffix: false, best: true };
var pONERES = { max: 30, suffix: false, best: false };
var pAR = { max: 120, suffix: false, best: false };
/*end perfect ring mods*/
/*start contingencies*/
/*
FCR & MIN DMG = < Great Combo
*/
/*end contingencies*/
var desirability = $("#desirability");
var totalpoints = $("#totalpoints");
var verdict = $("#verdict");
var pFCRval = $("#pFCR");
var pSTRval = $("#pSTR");
var pLIFEval = $("#pLIFE");
var pDEXval = $("#pDEX");
var pREPLIFEval = $("#pREPLIFE");
var pMINDMGval = $("#pMINDMG");
var pMANAval = $("#pMANA");
var pALLRESval = $("#pALLRES");
var pONERESval = $("#pONERES");
var pARval = $("#pAR");
var eleArray = [
pFCRval,
pSTRval,
pLIFEval,
pDEXval,
pREPLIFEval,
pMINDMGval,
pMANAval,
pALLRESval,
pONERESval,
pARval
];
function createOptions(selectEle,min,max){
for(var i = max; i >= min; i--){
var option = $("^option");
option.innerText = i;
option.value = i;
if(i == min){
option.selected = true;
}
selectEle.className = "col-12 df aic jcsa";
selectEle.appendChild(option);
}
}
createOptions(pFCRval, 0, pFCR.max);
createOptions(pSTRval, 0, pSTR.max);
createOptions(pLIFEval, 0, pLIFE.max);
createOptions(pDEXval, 0, pDEX.max);
createOptions(pREPLIFEval, 0, pREPLIFE.max);
createOptions(pMINDMGval, 0, pMINDMG.max);
createOptions(pMANAval, 0, pMANA.max);
createOptions(pALLRESval, 0, pALLRES.max);
createOptions(pONERESval, 0, pONERES.max);
createOptions(pARval, 0, pAR.max);
for (var e = 0; e < eleArray.length; e++) {
eleArray[e].onchange = function() {
calculate();
};
}
function cv(val1, val2) {
return val1 / val2.max >= 0.66 ? 1 : val1 / val2.max >= 0.33 ? 0.5 : 0;
}
function calculate() {
var ps0 = pFCRval.value;
var ps1 = pSTRval.value;
var ps2 = pLIFEval.value;
var ps3 = pDEXval.value;
var ps4 = pREPLIFEval.value;
var ps5 = pMINDMGval.value;
var ps6 = pMANAval.value;
var ps7 = pALLRESval.value;
var ps8 = pONERESval.value;
var ps9 = pARval.value;
var pps0 = cv(ps0, pFCR);
var pps1 = cv(ps1, pSTR);
var pps2 = cv(ps2, pLIFE);
var pps3 = cv(ps3, pDEX);
var pps4 = cv(ps4, pREPLIFE);
var pps5 = cv(ps5, pMINDMG);
var pps6 = cv(ps6, pMANA);
var pps7 = cv(ps7, pALLRES);
var pps8 = cv(ps8, pONERES);
var pps9 = cv(ps9, pAR);
var tp = Number(
pps0 + pps1 + pps2 + pps3 + pps4 + pps5 + pps6 + pps7 + pps8 + pps9
);
var theVerdict;
if (tp >= 6.0) {
theVerdict = iqs[5];
}
if (tp <= 5.5) {
theVerdict = iqs[4];
}
if (tp <= 5.0) {
theVerdict = iqs[3];
}
if (tp <= 4.5) {
theVerdict = iqs[2];
}
if (tp <= 4.0) {
theVerdict = iqs[1];
}
if (tp <= 3.5) {
theVerdict = iqs[0];
}
totalpoints.innerText = tp;
verdict.innerText = theVerdict;
/*Start Desireables*/
/*
pps0, pps1, pps2, ps6, ps7
*/
/*End Desireables*/
var Desirability = 0;
Desirability = pps0 > 0 ? (Desirability += 0.2) : Desirability;
Desirability = pps1 > 0 ? (Desirability += 0.2) : Desirability;
Desirability = pps2 > 0 ? (Desirability += 0.2) : Desirability;
Desirability = pps6 > 0 ? (Desirability += 0.2) : Desirability;
Desirability = pps7 > 0 ? (Desirability += 0.2) : Desirability;
desirability.value = Desirability;
}
function reset(){
pFCRval.value = "";
pSTRval.value = "";
pLIFEval.value = "";
pDEXval.value = "";
pREPLIFEval.value = "";
pMINDMGval.value = "";
pMANAval.value = "";
pALLRESval.value = "";
pONERESval.value = "";
pARval.value = "";
calculate();
}
calculate();
This Pen doesn't use any external CSS resources.