415 lines
No EOL
12 KiB
JavaScript
415 lines
No EOL
12 KiB
JavaScript
let getUrl = window.location;
|
|
const url_base = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
|
|
|
|
const zip = (a, b) => a.map((k, i) => [k, b[i]]);
|
|
|
|
//updates all the OGP tags for a webpage. Should be called when build changes
|
|
function updateOGP() {
|
|
//update the embed URL
|
|
let url_elem = document.getElementById("ogp-url");
|
|
if (url_elem) {
|
|
url_elem.content = url_base+location.hash;
|
|
}
|
|
|
|
//update the embed text content
|
|
let build_elem = document.getElementById("ogp-build-list");
|
|
if (build_elem && player_build) {
|
|
let text = "WynnBuilder build:\n"+
|
|
"> "+player_build.helmet.get("displayName")+"\n"+
|
|
"> "+player_build.chestplate.get("displayName")+"\n"+
|
|
"> "+player_build.leggings.get("displayName")+"\n"+
|
|
"> "+player_build.boots.get("displayName")+"\n"+
|
|
"> "+player_build.ring1.get("displayName")+"\n"+
|
|
"> "+player_build.ring2.get("displayName")+"\n"+
|
|
"> "+player_build.bracelet.get("displayName")+"\n"+
|
|
"> "+player_build.necklace.get("displayName")+"\n"+
|
|
"> "+player_build.weapon.get("displayName")+" ["+player_build.weapon.get("powders").map(x => powderNames.get(x)).join("")+"]";
|
|
build_elem.content = text;
|
|
}
|
|
}
|
|
|
|
function clamp(num, low, high){
|
|
return Math.min(Math.max(num, low), high);
|
|
}
|
|
|
|
function sleep(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
// Permutations in js reference (also cool algorithm):
|
|
// https://stackoverflow.com/a/41068709
|
|
function perm(a){
|
|
if (a.length == 0) return [[]];
|
|
var r = [[a[0]]],
|
|
t = [],
|
|
s = [];
|
|
if (a.length == 1) return r;
|
|
for (var i = 1, la = a.length; i < la; i++){
|
|
for (var j = 0, lr = r.length; j < lr; j++){
|
|
r[j].push(a[i]);
|
|
t.push(r[j]);
|
|
for(var k = 1, lrj = r[j].length; k < lrj; k++){
|
|
for (var l = 0; l < lrj; l++) s[l] = r[j][(k+l)%lrj];
|
|
t[t.length] = s;
|
|
s = [];
|
|
}
|
|
}
|
|
r = t;
|
|
t = [];
|
|
}
|
|
return r;
|
|
}
|
|
|
|
function round_near(value) {
|
|
let eps = 0.00000001;
|
|
if (Math.abs(value - Math.round(value)) < eps) {
|
|
return Math.round(value);
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function setText(id, text) {
|
|
document.getElementById(id).textContent = text;
|
|
}
|
|
|
|
function setHTML(id, html) {
|
|
document.getElementById(id).innerHTML = html;
|
|
}
|
|
|
|
function setValue(id, value) {
|
|
let el = document.getElementById(id);
|
|
if (el == null) {
|
|
console.log("WARN tried to set text value of id {"+id+"} to ["+value+"] but did not exist!");
|
|
return;
|
|
}
|
|
el.value = value;
|
|
el.dispatchEvent(new Event("change"));
|
|
}
|
|
|
|
function getValue(id) {
|
|
return document.getElementById(id).value;
|
|
}
|
|
|
|
function log(b, n) {
|
|
return Math.log(n) / Math.log(b);
|
|
}
|
|
|
|
// Base 64 encoding tools
|
|
// https://stackoverflow.com/a/27696695
|
|
// Modified for fixed precision
|
|
|
|
Base64 = (function () {
|
|
var digitsStr =
|
|
// 0 8 16 24 32 40 48 56 63
|
|
// v v v v v v v v v
|
|
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz+-";
|
|
var digits = digitsStr.split('');
|
|
var digitsMap = {};
|
|
for (var i = 0; i < digits.length; i++) {
|
|
digitsMap[digits[i]] = i;
|
|
}
|
|
return {
|
|
fromIntV: function(int32) {
|
|
var result = '';
|
|
while (true) {
|
|
result = digits[int32 & 0x3f] + result;
|
|
int32 >>>= 6;
|
|
if (int32 === 0)
|
|
break;
|
|
}
|
|
return result;
|
|
},
|
|
fromIntN: function(int32, n) {
|
|
var result = '';
|
|
for (let i = 0; i < n; ++i) {
|
|
result = digits[int32 & 0x3f] + result;
|
|
int32 >>= 6;
|
|
}
|
|
return result;
|
|
},
|
|
toInt: function(digitsStr) {
|
|
var result = 0;
|
|
var digits = digitsStr.split('');
|
|
for (var i = 0; i < digits.length; i++) {
|
|
result = (result << 6) + digitsMap[digits[i]];
|
|
}
|
|
return result;
|
|
},
|
|
toIntSigned: function(digitsStr) {
|
|
var result = 0;
|
|
var digits = digitsStr.split('');
|
|
if (digits[0] && (digitsMap[digits[0]] & 0x20)) {
|
|
result = -1;
|
|
}
|
|
for (var i = 0; i < digits.length; i++) {
|
|
result = (result << 6) + digitsMap[digits[i]];
|
|
}
|
|
return result;
|
|
}
|
|
};
|
|
})();
|
|
|
|
// Base64.fromInt(-2147483648); // gives "200000"
|
|
// Base64.toInt("200000"); // gives -2147483648
|
|
|
|
/*
|
|
Turns a raw stat and a % stat into a final stat on the basis that - raw and >= 100% becomes 0 and + raw and <=-100% becomes negative.
|
|
Pct would be 0.80 for 80%, -1.20 for 120%, etc
|
|
Example Outputs:
|
|
raw: -100
|
|
pct: +0.20, output = -80
|
|
pct: +1.20, output = 0
|
|
pct: -0.20, output = -120
|
|
pct: -1.20, output = -220
|
|
|
|
raw: +100
|
|
pct: +0.20, output = 120
|
|
pct: +1.20, output = 220
|
|
pct: -0.20, output = 80
|
|
pct: -1.20, output = -20
|
|
*/
|
|
function rawToPct(raw, pct){
|
|
final = 0;
|
|
if (raw < 0){
|
|
final = (Math.min(0, raw - (raw * pct) ));
|
|
}else if(raw > 0){
|
|
final = raw + (raw * pct);
|
|
}else{ //do nothing - final's already 0
|
|
}
|
|
return final;
|
|
}
|
|
|
|
/*
|
|
* Clipboard utilities
|
|
* From: https://stackoverflow.com/a/30810322
|
|
*/
|
|
function fallbackCopyTextToClipboard(text) {
|
|
var textArea = document.createElement("textarea");
|
|
|
|
//
|
|
// *** This styling is an extra step which is likely not required. ***
|
|
//
|
|
// Why is it here? To ensure:
|
|
// 1. the element is able to have focus and selection.
|
|
// 2. if the element was to flash render it has minimal visual impact.
|
|
// 3. less flakyness with selection and copying which **might** occur if
|
|
// the textarea element is not visible.
|
|
//
|
|
// The likelihood is the element won't even render, not even a
|
|
// flash, so some of these are just precautions. However in
|
|
// Internet Explorer the element is visible whilst the popup
|
|
// box asking the user for permission for the web page to
|
|
// copy to the clipboard.
|
|
//
|
|
|
|
// Place in the top-left corner of screen regardless of scroll position.
|
|
textArea.style.position = 'fixed';
|
|
textArea.style.top = 0;
|
|
textArea.style.left = 0;
|
|
|
|
// Ensure it has a small width and height. Setting to 1px / 1em
|
|
// doesn't work as this gives a negative w/h on some browsers.
|
|
textArea.style.width = '2em';
|
|
textArea.style.height = '2em';
|
|
|
|
// We don't need padding, reducing the size if it does flash render.
|
|
textArea.style.padding = 0;
|
|
|
|
// Clean up any borders.
|
|
textArea.style.border = 'none';
|
|
textArea.style.outline = 'none';
|
|
textArea.style.boxShadow = 'none';
|
|
|
|
// Avoid flash of the white box if rendered for any reason.
|
|
textArea.style.background = 'transparent';
|
|
|
|
|
|
textArea.value = text;
|
|
|
|
document.body.appendChild(textArea);
|
|
textArea.focus();
|
|
textArea.select();
|
|
|
|
try {
|
|
var successful = document.execCommand('copy');
|
|
var msg = successful ? 'successful' : 'unsuccessful';
|
|
console.log('Copying text command was ' + msg);
|
|
} catch (err) {
|
|
console.log('Oops, unable to copy');
|
|
}
|
|
|
|
document.body.removeChild(textArea);
|
|
}
|
|
|
|
function copyTextToClipboard(text) {
|
|
if (!navigator.clipboard) {
|
|
fallbackCopyTextToClipboard(text);
|
|
return;
|
|
}
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
console.log('Async: Copying to clipboard was successful!');
|
|
}, function(err) {
|
|
console.error('Async: Could not copy text: ', err);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Generates a random color using the #(R)(G)(B) format.
|
|
*/
|
|
function randomColor() {
|
|
return '#' + Math.round(Math.random() * 0xFFFFFF).toString(16);
|
|
}
|
|
|
|
/**
|
|
* Generates a random color, but lightning must be relatively high (>0.5).
|
|
*
|
|
* @returns a random color in RGB 6-bit form.
|
|
*/
|
|
function randomColorLight() {
|
|
return randomColorHSL([0,1],[0,1],[0.5,1]);
|
|
}
|
|
|
|
/** Generates a random color given HSL restrictions.
|
|
*
|
|
* @returns a random color in RGB 6-bit form.
|
|
*/
|
|
function randomColorHSL(h,s,l) {
|
|
var letters = '0123456789abcdef';
|
|
let h_var = h[0] + (h[1]-h[0])*Math.random(); //hue
|
|
let s_var = s[0] + (s[1]-s[0])*Math.random(); //saturation
|
|
let l_var = l[0] + (l[1]-l[0])*Math.random(); //lightness
|
|
let rgb = hslToRgb(h_var,s_var,l_var);
|
|
let color = "#";
|
|
for (const c of rgb) {
|
|
color += letters[Math.floor(c/16)] + letters[c%16];
|
|
}
|
|
return color;
|
|
}
|
|
|
|
/**
|
|
* Converts an HSL color value to RGB. Conversion formula
|
|
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
|
|
* Assumes h, s, and l are contained in the set [0, 1] and
|
|
* returns r, g, and b in the set [0, 255]. Not written by wynnbuilder devs.
|
|
*
|
|
* @param {number} h The hue
|
|
* @param {number} s The saturation
|
|
* @param {number} l The lightness
|
|
* @return {Array} The RGB representation
|
|
*/
|
|
function hslToRgb(h, s, l){
|
|
var r, g, b;
|
|
|
|
if(s == 0){
|
|
r = g = b = l; // achromatic
|
|
}else{
|
|
var hue2rgb = function hue2rgb(p, q, t){
|
|
if(t < 0) t += 1;
|
|
if(t > 1) t -= 1;
|
|
if(t < 1/6) return p + (q - p) * 6 * t;
|
|
if(t < 1/2) return q;
|
|
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
|
return p;
|
|
}
|
|
|
|
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
var p = 2 * l - q;
|
|
r = hue2rgb(p, q, h + 1/3);
|
|
g = hue2rgb(p, q, h);
|
|
b = hue2rgb(p, q, h - 1/3);
|
|
}
|
|
|
|
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
|
}
|
|
|
|
/** Creates a tooltip.
|
|
*
|
|
* @param {DOM Element} elem - the element to make a tooltip
|
|
* @param {String} element_type - the HTML element type that the tooltiptext should be.
|
|
* @param {String} tooltiptext - the text to display in the tooltip.
|
|
* @param {DOM Element} parent - the parent elem. optional.
|
|
* @param {String[]} classList - a list of classes to add to the element.
|
|
*/
|
|
function createTooltip(elem, element_type, tooltiptext, parent, classList) {
|
|
elem = document.createElement(element_type);
|
|
elem.classList.add("tooltiptext");
|
|
if (tooltiptext.includes("\n")) {
|
|
let texts = tooltiptext.split("\n");
|
|
for (const t of texts) {
|
|
let child = document.createElement(element_type);
|
|
child.textContent = t;
|
|
elem.appendChild(child);
|
|
}
|
|
} else {
|
|
elem.textContent = tooltiptext;
|
|
}
|
|
for (const c of classList) {
|
|
elem.classList.add(c);
|
|
}
|
|
if (parent) {
|
|
parent.classList.add("tooltip");
|
|
parent.appendChild(elem);
|
|
}
|
|
return elem;
|
|
}
|
|
|
|
/** A generic function that toggles the on and off state of a button.
|
|
*
|
|
* @param {String} button_id - the id name of the button.
|
|
*/
|
|
function toggleButton(button_id) {
|
|
let elem = document.getElementById(button_id);
|
|
if (elem.tagName === "BUTTON") {
|
|
if (elem.classList.contains("toggleOn")) { //toggle the pressed button off
|
|
elem.classList.remove("toggleOn");
|
|
} else {
|
|
elem.classList.add("toggleOn");
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* If the input object is undefined, make it "match" the target type
|
|
* with default value (0 or empty str).
|
|
*/
|
|
function matchType(object, target) {
|
|
if (typeof object === 'undefined') {
|
|
switch (target) {
|
|
case 'string':
|
|
return "";
|
|
case 'number':
|
|
return 0;
|
|
case 'undefined':
|
|
return undefined;
|
|
default:
|
|
throw new Error(`Incomparable type ${target}`);
|
|
}
|
|
}
|
|
return object;
|
|
}
|
|
|
|
/**
|
|
* Add multiple classes to a html element
|
|
*/
|
|
function addClasses(elem, classes) {
|
|
for (let _class of classes) {
|
|
elem.classList.add(_class);
|
|
}
|
|
return elem;
|
|
}
|
|
|
|
/** A utility function that reloads the page forcefully.
|
|
*
|
|
*/
|
|
async function hardReload() {
|
|
//https://gist.github.com/rmehner/b9a41d9f659c9b1c3340
|
|
const dbs = await window.indexedDB.databases();
|
|
await dbs.forEach(db => { window.indexedDB.deleteDatabase(db.name) });
|
|
|
|
location.reload(true);
|
|
}
|
|
|
|
|
|
function capitalizeFirst(str) {
|
|
return str[0].toUpperCase() + str.substring(1);
|
|
} |