Skip to content

Commit

Permalink
Merge pull request #45 from jimmyt857/rotation_tab
Browse files Browse the repository at this point in the history 
Add rotations tab
  • Loading branch information
@lologarithm
lologarithm authored Sep 2, 2021
2 parents bc8867e + 1ade91c commit afc06b6
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 121 deletions.
90 changes: 49 additions & 41 deletions ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ <h4>Standard Elemental Build</h4>
<div id="calcdiv" style="height: calc(50% - 100px)">
<ul id="calctabs" uk-tab="connect: #calcs">
<li class="uk-active"><a href="#">Sim</a></li>
<li><a href="#">Hasted Rotations</a></li>
<li><a href="#">Rotations</a></li>
<li><a href="#">Gear & Stat Weights</a></li>
<li><a href="#">Sim Logs</a></li>
</ul>
Expand All @@ -177,11 +177,11 @@ <h4>Standard Elemental Build</h4>
Iterations: <input id="iters" type="text" value="1000" style="width: 60px"></input>
Duration: <input id="dur" type="text" value="300" style="width: 60px"></input>
# Cl Targets:
<select id="numClTargets" class="buffdrop" style="width: 50px" value="1">
<option class="buffdrop" selected>1</option>
<option class="buffdrop">2</option>
<option class="buffdrop">3</option>
</select>
<select id="numClTargets" class="buffdrop" style="width: 50px" value="1">
<option class="buffdrop" selected>1</option>
<option class="buffdrop">2</option>
<option class="buffdrop">3</option>
</select>
<button id="simrunbut">Run Simulation</button>
</div>
<div id="simout" style="width: 99%;height: calc(100% - 40px);border:1px solid black;margin-top: 10px;">
Expand All @@ -192,48 +192,56 @@ <h4>Standard Elemental Build</h4>
</div>
<div id="rotout" style="float: left;width: calc(100% - 130px);height: 100%;">
<div id="rotstats" style="height: 30px;width: 100%;border-bottom: 1px solid black;"></div>
<div id="rotchart">
</div>
<div id="rotchart"></div>
</div>
</div>
</li>
<li>
<div style="text-align: right;">
<button id="hastebut">Optimize Haste Rotation</button>
Rotation:
<select id="rotationRotation" class="buffdrop">
<option class="buffdrop" value="ADAPTIVE" selected title="Dynamically adapts based on available mana.">Adaptive</option>
<option class="buffdrop" value="CL_ON_CLEARCAST" title="Casts CL only after Clearcast procs.">CL On Clearcast</option>
<option class="buffdrop" value="FIXED_CL_ON_CD" title="Casts CL if off CD, otherwise LB.">CL On CD</option>
<option class="buffdrop" value="FIXED_LB_ONLY" title="Only casts LB.">LB Only</option>
<option class="buffdrop" value="FIXED_3LB_1CL" title="Casts CL followed by 3 LBs.">CL + 3LB</option>
<option class="buffdrop" value="FIXED_4LB_1CL" title="Casts CL followed by 4 LBs.">CL + 4LB</option>
<option class="buffdrop" value="FIXED_5LB_1CL" title="Casts CL followed by 5 LBs.">CL + 5LB</option>
<option class="buffdrop" value="FIXED_6LB_1CL" title="Casts CL followed by 6 LBs.">CL + 6LB</option>
<option class="buffdrop" value="FIXED_7LB_1CL" title="Casts CL followed by 7 LBs.">CL + 7LB</option>
<option class="buffdrop" value="FIXED_8LB_1CL" title="Casts CL followed by 8 LBs.">CL + 8LB</option>
<option class="buffdrop" value="FIXED_9LB_1CL" title="Casts CL followed by 9 LBs.">CL + 9LB</option>
<option class="buffdrop" value="FIXED_10LB_1CL" title="Casts CL followed by 10 LBs.">CL + 10LB</option>
</select>
Iterations: <input id="rotationIters" type="text" value="1000" style="width: 60px"></input>
Duration: <input id="rotationDur" type="text" value="300" style="width: 60px"></input>
# Cl Targets:
<select id="rotationNumClTargets" class="buffdrop" style="width: 50px" value="1">
<option class="buffdrop" selected>1</option>
<option class="buffdrop">2</option>
<option class="buffdrop">3</option>
</select>
<button id="rotationRunButton">Run Simulation</button>
</div>
<ul style="float:right">
<li>Does not use bloodlust (ignores BL settings above)</li>
<li>Uses all other options, but replaces the haste stat.</li>
<li>Do not recommend using Quags Eye</li>
<li>Not mana optimized, this is showing max dps for a 60s fight</li>
<li>Even a very small amount of haste like 20 makes CL / 4LB > CL / 3LB</li>
</ul>
<div id="hasterots" style="float:left">
<table class="hastetable" style="margin-top: 0px">
<tr><th>Haste</th><th>Rotation</th><th>DPS</th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<div id="rotationOut" style="width: 99%;height: calc(100% - 40px);border:1px solid black;margin-top: 10px;">
<div id="rotationToplineResults" style="height: 100%;float: left;width: 125px;border-right: 1px solid black;">
</div>
<div id="rotationDetailedResults" style="float: left;width: calc(100% - 130px);height: 100%;">
<div id="rotationStats" style="height: 30px;width: 100%;border-bottom: 1px solid black;"></div>
<div id="rotationChart" style="height: 100%;width: 100%"></div>
</div>
</div>
</li>
<li>
<div style="text-align: right">
<label>Iterations:<input id="switer" type="text" value="1000" style="width: 60px"></input></label>
<label>Duration:<input id="swdur" type="text" value="300" style="width: 60px"></input></label>
# Cl Targets:
<select id="swnumClTargets" class="buffdrop" style="width: 50px" value="1">
<option class="buffdrop" selected>1</option>
<option class="buffdrop">2</option>
<option class="buffdrop">3</option>
</select>
<select id="swnumClTargets" class="buffdrop" style="width: 50px" value="1">
<option class="buffdrop" selected>1</option>
<option class="buffdrop">2</option>
<option class="buffdrop">3</option>
</select>
<button id="calcstatweight">Calculate</button>
</div>
<table id="statweights" style="width: 60%;margin: 0px auto;">
Expand Down Expand Up @@ -272,11 +280,11 @@ <h4>Standard Elemental Build</h4>
<div style="text-align: right">
Duration: <input id="logdur" type="text" value="300" style="width: 60px"></input>
# Cl Targets:
<select id="lognumClTargets" class="buffdrop" style="width: 50px" value="1">
<option class="buffdrop" selected>1</option>
<option class="buffdrop">2</option>
<option class="buffdrop">3</option>
</select>
<select id="lognumClTargets" class="buffdrop" style="width: 50px" value="1">
<option class="buffdrop" selected>1</option>
<option class="buffdrop">2</option>
<option class="buffdrop">3</option>
</select>
<button id="simlogrun">Run Simulation</button>
</div>
<pre id="simlogs" class="dtd" style="width: 99%;border:1px solid black;">
Expand All @@ -288,7 +296,7 @@ <h4>Standard Elemental Build</h4>
<div id="pullout">
<div class="dtl" style="height:100%;width:100%;padding:10px">
<div id="themetoggle" style="height:20px; bottom: 10px; cursor: pointer;" onclick="toggletheme()">
<text>v1.1.13</text>
<text>v1.1.14</text>
<img id="themebulb" style="height: 20px; width: 20px" src="icons/light-bulb.svg"></img>
</div>
<div style="margin-top:10px">
Expand Down
14 changes: 1 addition & 13 deletions ui/ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
right: -200;
top: 0;
}
#rotstats text {
#rotstats text, #rotationStats text {
border-right: 3px solid #1e87f0;
border-left: 3px solid #1e87f0;
padding-left: 2px;
Expand Down Expand Up @@ -170,18 +170,6 @@ h4 {
background-color: #E0E0E0;
}

.hastetable {
margin: 15px auto;
border-collapse: collapse;
/* background-color: #505050; */
border:1px solid #D0D0D0;
}

.hastetable td {
padding: 10px;
border:1px solid #D0D0D0;
}

#root {
height: 100%;
}
Expand Down
126 changes: 59 additions & 67 deletions ui/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,62 @@ function runSim(gearSpec) {
});
}

// Populates the 'Rotation' tab in the results pane.
function runRotationSim(gearSpec) {
const simRequest = {
Options: getOptions(),
Gear: gearSpec,
Iterations: parseInt(document.getElementById("rotationIters").value),
};
simRequest.Options.AgentType = AGENT_TYPES[document.getElementById("rotationRotation").value];
simRequest.Options.Encounter = {
Duration: parseInt(document.getElementById("rotationDur").value),
NumClTargets: parseInt(document.getElementById("rotationNumClTargets").value),
};

const pendingMetricHTML = `<div id="runningsim" uk-spinner="ratio: 1.5" style="margin:26%"></div>`;

const resultsElem = document.getElementById("rotationToplineResults");
resultsElem.innerHTML = pendingMetricHTML;

const rotStatsElem = document.getElementById("rotationStats");
rotStatsElem.innerHTML = "";

const start = new Date();
workerPool.runSimulation(simRequest).then(simResult => {
const end = new Date();
console.log(`The sim took ${end - start} ms`);
console.log("AI Stats: ", simResult);
resultsElem.innerHTML = `<div><h3>Average</h3><text class="simnums">${Math.round(simResult.DpsAvg)}</text> +/- ${Math.round(simResult.DpsStDev)} dps<br /></div>`

Object.entries(simResult.Casts).forEach(castEntry => {
const castID = castEntry[0];
const cast = castEntry[1];
if (cast.Count == 0) {
return;
}
rotStatsElem.innerHTML += `<text style="cursor:pointer" title="Avg Dmg: ${Math.round(cast.Dmg / cast.Count)} Crit: ${Math.round(cast.Crits / cast.Count * 100)}%">${castIDToName[castID]}: ${Math.round(cast.Count / simRequest.Iterations)}</text>`;
});
const percentOom = simResult.NumOom / simRequest.Iterations;
if (percentOom > 0.02) {
var dangerStyle = "";
if (percentOom > 0.05 && percentOom <= 0.25) {
dangerStyle = "border-color: #FDFD96;"
} else if (percentOom > 0.25) {
dangerStyle = "border-color: #FF6961;"
}
rotStatsElem.innerHTML += `<text title="Downranking is not currently implemented." style="${dangerStyle};cursor: pointer">${Math.round(percentOom * 100)}% of simulations went OOM.`
}

const chartDiv = document.getElementById("rotationChart");
const bounds = chartDiv.getBoundingClientRect();
const chartCanvas = createDpsChartFromSimResult(simResult, bounds);

chartDiv.innerHTML = "";
chartDiv.appendChild(chartCanvas);
});
}

function createDpsChartFromSimResult(simResult, chartBounds) {
const chartCanvas = document.createElement("canvas");
const ctx = chartCanvas.getContext('2d');
Expand Down Expand Up @@ -521,70 +577,6 @@ function createDpsChartFromSimResult(simResult, chartBounds) {
return chartCanvas;
}

// Populates the 'Hasted Rotations' tab in results pane.
function hastedRotations(gearSpec) {
const sharedOptions = getOptions();
sharedOptions.NumBloodlust = 0;
sharedOptions.NumDrums = 0;
sharedOptions.Encounter.Duration = 40;
sharedOptions.Buffs.Custom[STAT_IDX.HASTE] = 0;

const sharedSimRequest = {
Options: sharedOptions,
Gear: gearSpec,
Iterations: 1000,
};

const hastes = [0, 50, 100, 200, 300, 400, 500, 600, 700, 788];
const agentTypes = [
AGENT_TYPES.FIXED_4LB_1CL,
AGENT_TYPES.FIXED_5LB_1CL,
AGENT_TYPES.FIXED_6LB_1CL,
];

// TODO: Fix this to match the new return values now that process is done in go WASM code.

workerPool.computeStats({
Options: sharedOptions,
Gear: gearSpec,
}).then(computeStatsResult => {
const finalHasteValue = computeStatsResult.FinalStats[STAT_IDX.HASTE];
const rows = document.getElementById("hasterots").firstElementChild.firstElementChild.children;
hastes.forEach((haste, i) => {
// Subtract haste from gear/etc
const hasteValue = haste - finalHasteValue;

const row = rows[i];
row.children[1].innerHTML = "<div uk-spinner=\"ratio: 0.5\"></div>";
row.children[2].innerText = "";

const batchSimRequest = {
Requests: agentTypes.map(agentType => {
const simRequest = deepCopy(sharedSimRequest);
simRequest.Options.AgentType = agentType;
simRequest.Options.Buffs.Custom[STAT_IDX.HASTE] = hasteValue;
return simRequest;
}),
};
workerPool.runBatchSimulation(batchSimRequest).then(batchSimResult => {
let maxIdx = 0;
let bestResult = null;
batchSimResult.Results.forEach((simResult, idx) => {
if (!bestResult || simResult.DpsAvg > bestResult.DpsAvg) {
maxIdx = idx;
bestResult = simResult;
}
});

const rotTitle = "CL / " + (maxIdx + 4).toString() + "xLB";
row.children[0].innerText = haste;
row.children[1].innerText = rotTitle;
row.children[2].innerText = Math.round(bestResult.DpsAvg) + " +/- " + Math.round(bestResult.DpsStDev);
});
});
});
}

function stDevToConf90(stDev, N) {
return 1.645 * stDev / Math.sqrt(N);
}
Expand Down Expand Up @@ -806,9 +798,9 @@ function popgear(gearList) {
runSim(toGearSpec(gearUI.currentGear));
});

var hastebut = document.getElementById("hastebut");
hastebut.addEventListener("click", (event) => {
hastedRotations(toGearSpec(gearUI.currentGear));
var rotationRunButton = document.getElementById("rotationRunButton");
rotationRunButton.addEventListener("click", (event) => {
runRotationSim(toGearSpec(gearUI.currentGear));
});

var caclweights = document.getElementById("calcstatweight");
Expand Down

0 comments on commit afc06b6

Please sign in to comment.