endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

refactor: removed jquery dependencies

Browse source
This commit is contained in:
reschan 2021-10-22 16:03:50 +07:00
parent b85f91e50e
commit 4c7a7e0939
2 changed files with 44 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
sq2bs.html
View file

@ -12,7 +12,6 @@
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="sq2bs.css">
</head>
@ -308,10 +307,10 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
<input class="border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
</div>
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" placeholder="Load from local" tabindex="2"/>
<input class="border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" placeholder="Load from local" tabindex="2"/>
</div>
</div>
</div>
@ -340,7 +339,7 @@
<div class="col text-center gx-2">
<div class="rounded dark-6 dark-shadow-sm px-2">
<label for="dex-skp" class="tDam skp-tooltip">Dexterity</label>
<input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center" tabindex="2"/>
<input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="dex-skp-assign" class="skp-tooltip" style="display: none;">
Manually Assigned: 0
</div>
@ -354,7 +353,7 @@
<div class="col text-center gx-2">
<div class="rounded dark-6 dark-shadow-sm px-2">
<label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label>
<input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center" tabindex="2"/>
<input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="int-skp-assign" class="skp-tooltip" style="display: none;">
Manually Assigned: 0
</div>
@ -368,7 +367,7 @@
<div class="col text-center gx-2">
<div class="rounded dark-6 dark-shadow-sm px-2">
<label for="def-skp" class="fDam skp-tooltip">Defense</label>
<input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center" tabindex="2"/>
<input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="def-skp-assign" class="skp-tooltip" style="display: none;">
Manually Assigned: 0
</div>
@ -382,7 +381,7 @@
<div class="col text-center gx-2">
<div class="rounded dark-6 dark-shadow-sm px-2">
<label for="agi-skp" class="aDam skp-tooltip">Agility</label>
<input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center" tabindex="2"/>
<input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="agi-skp-assign" class="skp-tooltip" style="display: none;">
Manually Assigned: 0
</div>
@ -411,13 +410,13 @@
<div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
<div class="col rounded-top">
<div class="row">
<div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4">
<div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-stats')">
Basic
</div>
<div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4">
<div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-offensive-stats')">
Offense
</div>
<div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4">
<div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-defensive-stats')">
Defense
</div>
</div>
@ -1160,8 +1159,6 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/build_utils.js"></script>
<script type="text/javascript" src="sq2icons.js"></script>

140
sq2bs.js
View file

@ -1,105 +1,20 @@
$().ready(function(){
// test
let equipment_keys = ['weapon', 'helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace'];
let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
// sp fields
jQuery(document).on("input", '.skp-update', function(){
updateStatSchedule();
});
// equipment fields
$("#weapon-choice").on('input', function(e){
update_fields('weapon');
calcBuildSchedule();
});
$("#weapon-powder").on('input', function(e){
calcBuildSchedule();
});
$("#helmet-choice").on('input', function(e){
update_fields('helmet', '|example: t6t6');
calcBuildSchedule();
});
$("#helmet-powder").on('input', function(e){
calcBuildSchedule();
});
$("#chestplate-choice").on('input', function(e){
update_fields('chestplate');
calcBuildSchedule();
});
$("#chestplate-powder").on('input', function(e){
calcBuildSchedule();
});
$("#leggings-choice").on('input', function(e){
update_fields('leggings');
calcBuildSchedule();
});
$("#leggings-powder").on('input', function(e){
calcBuildSchedule();
});
$("#boots-choice").on('input', function(e){
update_fields('boots');
calcBuildSchedule();
});
$("#boots-powder").on('input', function(e){
calcBuildSchedule();
});
$("#ring1-choice").on('input', function(e){
update_fields('ring1');
calcBuildSchedule();
});
$("#ring2-choice").on('input', function(e){
update_fields('ring2');
calcBuildSchedule();
});
$("#bracelet-choice").on('input', function(e){
update_fields('bracelet');
calcBuildSchedule();
});
$("#necklace-choice").on('input', function(e){
update_fields('necklace');
calcBuildSchedule();
});
$("#level-choice").on('input', function(e){
calcBuildSchedule();
});
// tabular stats view
let tabs = ['minimal-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
let btns = ['tab-basic-btn', 'tab-offense-btn', 'tab-defense-btn'];
$(".fake-button").on('click' ,function(e){
let target_tab;
if (e.target.id == 'tab-basic-btn') {
target_tab = 'minimal-stats';
document.addEventListener('DOMContentLoaded', function() {
for (const i in equipment_keys) {
document.querySelector("#"+equipment_keys[i]+"-choice").setAttribute("oninput", "update_fields('"+equipment_keys[i]+"'); calcBuildSchedule()");
document.querySelector("#"+equipment_keys[i]+"-powder").setAttribute("oninput", "calcBuildSchedule()");
}
else if (e.target.id == 'tab-offense-btn') {
target_tab = 'minimal-offensive-stats';
let skp_fields = document.getElementsByClassName("skp-update");
for (i = 0; i < skp_fields.length; i++) {
skp_fields[i].setAttribute("oninput", "updateStatSchedule()");
}
else if (e.target.id == 'tab-defense-btn') {
target_tab = 'minimal-defensive-stats';
}
for (const i in tabs) {
$("#"+tabs[i]).hide();
$("#"+btns[i]).removeClass("dark-6").addClass("dark-4");
}
$("#"+e.target.id).addClass("dark-6");
$("#"+target_tab).show();
});
});
// phanta scheduler
let calcBuildTask = null;
let updateStatTask = null;
let doSearchTask = null;
@ -134,25 +49,38 @@ function doSearchSchedule(){
}, 500);
}
// equipment field dynamic styling
function update_fields(type, alt="") {
let item = itemMap.get($("#"+type+"-choice").val());
let item = itemMap.get(document.querySelector("#"+type+"-choice").value);
if (item) {
$("#"+type+"-powder").attr("placeholder", item["slots"]+" slots"+alt);
$("#"+type+"-choice").removeClass("text-light is-invalid").addClass(item.tier);
document.querySelector("#"+type+"-powder").setAttribute("placeholder", item["slots"]+" slots"+alt);
document.querySelector("#"+type+"-choice").classList.remove("text-light", "is-invalid");
document.querySelector("#"+type+"-choice").classList.add(item.tier);
if (type == 'weapon') {
$("#"+type+"-img").attr('src', 'media/items/new/generic-'+item.type+'.png');
document.querySelector("#"+type+"-img").setAttribute('src', 'media/items/new/generic-'+item.type+'.png');
}
} else if ($("#"+type+"-choice").val() == '') {
$("#"+type+"-choice").removeClass("is-invalid");
} else if (document.querySelector("#"+type+"-choice").value == '') {
document.querySelector("#"+type+"-choice").classList.remove("is-invalid");
}
else {
$("#"+type+"-choice").removeClass('Normal Unique Rare Legendary Fabled Mythic Set').addClass("text-light is-invalid");
document.querySelector("#"+type+"-choice").classList.remove('Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
document.querySelector("#"+type+"-choice").classList.add("text-light", "is-invalid");
}
}
function init_field_styles() {
let equipment_keys = ['weapon', 'helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace'];
for (const i in equipment_keys) {
update_fields(equipment_keys[i]);
}
}
// tabular stats
let tabs = ['minimal-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
function show_tab(tab) {
for (const i in tabs) {
document.querySelector("#"+tabs[i]).style.display = "none";
}
document.querySelector("#"+tab).style.display = "";
}