elements have a shared class (e.g. {'className': 'bar'})
* overlay.addDiv({'id': 'foo'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
*
*
*/
addDiv(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const div = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "div", properties, additionalProperties);
callback(this, div);
return this;
}
/** Adds a `p` to the overlay.
* This `p` element will have properties shared between all `p` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.
} [additionalProperties={}] - The DOM properties of the `p` that are NOT shared between all overlay `p` elements. These should be camelCase.
* @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `p`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.2
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addP({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume
already exists in the webpage)
*
* Foobar.
*
*/
addP(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const p = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "p", properties, additionalProperties);
callback(this, p);
return this;
}
/** Adds a `small` to the overlay.
* This `small` element will have properties shared between all `small` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `small` that are NOT shared between all overlay `small` elements. These should be camelCase.
* @param {function(Overlay, HTMLElement):void} [callback=()=>{}] - Additional JS modification to the `small`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.55.8
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addSmall({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addSmall(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const small = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "small", properties, additionalProperties);
callback(this, small);
return this;
}
/** Adds a `span` to the overlay.
* This `span` element will have properties shared between all `span` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `span` that are NOT shared between all overlay `span` elements. These should be camelCase.
* @param {function(Overlay, HTMLSpanElement):void} [callback=()=>{}] - Additional JS modification to the `span`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.55.8
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addSpan({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addSpan(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const span = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "span", properties, additionalProperties);
callback(this, span);
return this;
}
/** Adds a `details` to the overlay.
* This `details` element will have properties shared between all `details` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `details` that are NOT shared between all overlay `details` elements. These should be camelCase.
* @param {function(Overlay, HTMLDetailsElement):void} [callback=()=>{}] - Additional JS modification to the `details`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.96
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addDetails({'id': 'foo'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* } [additionalProperties={}] - The DOM properties of the `summary` that are NOT shared between all overlay `summary` elements. These should be camelCase.
* @param {function(Overlay, HTMLElement):void} [callback=()=>{}] - Additional JS modification to the `summary`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.96
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addSummary({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addSummary(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const summary = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "summary", properties, additionalProperties);
callback(this, summary);
return this;
}
/** Adds a `img` to the overlay.
* This `img` element will have properties shared between all `img` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `img` that are NOT shared between all overlay `img` elements. These should be camelCase.
* @param {function(Overlay, HTMLImageElement):void} [callback=()=>{}] - Additional JS modification to the `img`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.2
* @example
* // Assume all } [additionalProperties={}] - The DOM properties of the header that are NOT shared between all overlay header elements. These should be camelCase.
* @param {function(Overlay, HTMLHeadingElement):void} [callback=()=>{}] - Additional JS modification to the header.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.7
* @example
* // Assume all header elements have a shared class (e.g. {'className': 'bar'})
* overlay.addHeader(6, {'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addHeader(level, additionalProperties = {}, callback = () => {
}) {
const properties = {};
const header = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "h" + level, properties, additionalProperties);
callback(this, header);
return this;
}
/** Adds a `hr` to the overlay.
* This `hr` element will have properties shared between all `hr` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `hr` that are NOT shared between all overlay `hr` elements. These should be camelCase.
* @param {function(Overlay, HTMLHRElement):void} [callback=()=>{}] - Additional JS modification to the `hr`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.7
* @example
* // Assume all } [additionalProperties={}] - The DOM properties of the `br` that are NOT shared between all overlay `br` elements. These should be camelCase.
* @param {function(Overlay, HTMLBRElement):void} [callback=()=>{}] - Additional JS modification to the `br`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.11
* @example
* // Assume all } [additionalProperties={}] - The DOM properties of the `form` that are NOT shared between all overlay `form` elements. These should be camelCase.
* @param {function(Overlay, HTMLFormElement):void} [callback=()=>{}] - Additional JS modification to the `form`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.246
* @example
* // Assume all
*
*/
addForm(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const form = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "form", properties, additionalProperties);
callback(this, form);
return this;
}
/** Adds a `fieldset` to the overlay.
* This `fieldset` element will have properties shared between all `fieldset` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `fieldset` that are NOT shared between all overlay `fieldset` elements. These should be camelCase.
* @param {function(Overlay, HTMLFieldSetElement):void} [callback=()=>{}] - Additional JS modification to the `fieldset`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.246
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addFieldset({'id': 'foo'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* } [additionalProperties={}] - The DOM properties of the `legend` that are NOT shared between all overlay `legend` elements. These should be camelCase.
* @param {function(Overlay, HTMLLegendElement):void} [callback=()=>{}] - Additional JS modification to the `legend`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.246
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addLegend({'id': 'foo', textContent: 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
*
* "Foobar."
*
*
*/
addLegend(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const legend = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "legend", properties, additionalProperties);
callback(this, legend);
return this;
}
/** Adds a checkbox to the overlay.
* This checkbox element will have properties shared between all checkbox elements in the overlay.
* You can override the shared properties by using a callback. Note: the checkbox element is inside a label element.
* @param {Object.} [additionalProperties={}] - The DOM properties of the checkbox that are NOT shared between all overlay checkbox elements. These should be camelCase.
* @param {function(Overlay, HTMLLabelElement, HTMLInputElement):void} [callback=()=>{}] - Additional JS modification to the checkbox.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.10
* @example
* // Assume all checkbox elements have a shared class (e.g. {'className': 'bar'})
* overlay.addCheckbox({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
*
*
*
*/
addCheckbox(additionalProperties = {}, callback = () => {
}) {
const properties = { "type": "checkbox" };
const labelContent = {};
if (!!additionalProperties["textContent"]) {
labelContent["textContent"] = additionalProperties["textContent"];
delete additionalProperties["textContent"];
} else if (!!additionalProperties["innerHTML"]) {
labelContent["innerHTML"] = additionalProperties["innerHTML"];
delete additionalProperties["textContent"];
}
const label = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "label", labelContent);
const checkbox = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "input", properties, additionalProperties);
label.insertBefore(checkbox, label.firstChild);
this.buildElement();
callback(this, label, checkbox);
return this;
}
/** Adds a label & select element to the overlay.
* This select element will have properties shared between all select elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the checkbox that are NOT shared between all overlay select elements. These should be camelCase.
* @param {function(Overlay, HTMLLabelElement, HTMLSelectElement):void} [callback=()=>{}] - Additional JS modification to the label/select elements.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.243
* @example
* // Assume all select elements have a shared class (e.g. {'className': 'bar'})
* overlay.addSelect({'id': 'foo', 'textContent': 'Foobar: '}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
*
* "Foobar: "
*
* } [additionalProperties={}] - The DOM properties of the `option` that are NOT shared between all overlay `option` elements. These should be camelCase.
* @param {function(Overlay, HTMLOptionElement):void} [callback=()=>{}] - Additional JS modification to the `option`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.244
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addOption({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addOption(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const option = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "option", properties, additionalProperties);
callback(this, option);
return this;
}
/** Adds an ordered list to the overlay.
* This `ol` element will have properties shared between all `ol` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `ol` that are NOT shared between all overlay `ol` elements. These should be camelCase.
* @param {function(Overlay, HTMLOListElement):void} [callback=()=>{}] - Additional JS modification to the `ol`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addOl({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addOl(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const ol = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "ol", properties, additionalProperties);
callback(this, ol);
return this;
}
/** Adds an unordered list to the overlay.
* This `ul` element will have properties shared between all `ul` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `ul` that are NOT shared between all overlay `ul` elements. These should be camelCase.
* @param {function(Overlay, HTMLUListElement):void} [callback=()=>{}] - Additional JS modification to the `ul`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addUl({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
*
*
*/
addUl(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const ul = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "ul", properties, additionalProperties);
callback(this, ul);
return this;
}
/** Adds a `menu` to the overlay.
* This `menu` element will have properties shared between all `menu` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `menu` that are NOT shared between all overlay `menu` elements. These should be camelCase.
* @param {function(Overlay, HTMLMenuElement):void} [callback=()=>{}] - Additional JS modification to the `menu`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addMenu({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addMenu(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const menu = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "menu", properties, additionalProperties);
callback(this, menu);
return this;
}
/** Adds a list item to the overlay.
* This `li` element will have properties shared between all `li` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `li` that are NOT shared between all overlay `li` elements. These should be camelCase.
* @param {function(Overlay, HTMLLIElement):void} [callback=()=>{}] - Additional JS modification to the `li`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addLi({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addLi(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const li = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "li", properties, additionalProperties);
callback(this, li);
return this;
}
/** Adds a table to the overlay.
* This `table` element will have properties shared between all `table` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `table` that are NOT shared between all overlay `table` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableElement):void} [callback=()=>{}] - Additional JS modification to the `table`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addTable({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
*
*
*/
addTable(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const table = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "table", properties, additionalProperties);
callback(this, table);
return this;
}
/** Adds a table caption to the overlay.
* This `caption` element will have properties shared between all `caption` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `caption` that are NOT shared between all overlay `caption` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableCaptionElement):void} [callback=()=>{}] - Additional JS modification to the `caption`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addCaption({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addCaption(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const caption = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "caption", properties, additionalProperties);
callback(this, caption);
return this;
}
/** Adds a table header to the overlay.
* This `thead` element will have properties shared between all `thead` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `thead` that are NOT shared between all overlay `thead` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableSectionElement):void} [callback=()=>{}] - Additional JS modification to the `thead`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addThead({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addThead(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const thead = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "thead", properties, additionalProperties);
callback(this, thead);
return this;
}
/** Adds a table body to the overlay.
* This `tbody` element will have properties shared between all `tbody` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `tbody` that are NOT shared between all overlay `tbody` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableSectionElement):void} [callback=()=>{}] - Additional JS modification to the `tbody`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addTbody({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addTbody(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const tbody = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "tbody", properties, additionalProperties);
callback(this, tbody);
return this;
}
/** Adds a table footer to the overlay.
* This `tfoot` element will have properties shared between all `tfoot` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `tfoot` that are NOT shared between all overlay `tfoot` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableSectionElement):void} [callback=()=>{}] - Additional JS modification to the `tfoot`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addTfoot({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addTfoot(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const tfoot = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "tfoot", properties, additionalProperties);
callback(this, tfoot);
return this;
}
/** Adds a table row to the overlay.
* This `tr` element will have properties shared between all `tr` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `tr` that are NOT shared between all overlay `tr` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableRowElement):void} [callback=()=>{}] - Additional JS modification to the `tr`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addTr({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addTr(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const tr = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "tr", properties, additionalProperties);
callback(this, tr);
return this;
}
/** Adds a table header (label) cell to the overlay.
* This `th` element will have properties shared between all `th` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `th` that are NOT shared between all overlay `th` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableCellElement):void} [callback=()=>{}] - Additional JS modification to the `th`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addTh({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addTh(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const th = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "th", properties, additionalProperties);
callback(this, th);
return this;
}
/** Adds a table data cell to the overlay.
* This `td` element will have properties shared between all `td` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `td` that are NOT shared between all overlay `td` elements. These should be camelCase.
* @param {function(Overlay, HTMLTableCellElement):void} [callback=()=>{}] - Additional JS modification to the `td`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.180
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addTd({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addTd(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const td = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "td", properties, additionalProperties);
callback(this, td);
return this;
}
/** Adds a `button` to the overlay.
* This `button` element will have properties shared between all `button` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `button` that are NOT shared between all overlay `button` elements. These should be camelCase.
* @param {function(Overlay, HTMLButtonElement):void} [callback=()=>{}] - Additional JS modification to the `button`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.12
* @example
* // Assume all elements have a shared class (e.g. {'className': 'bar'})
* overlay.addButton({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addButton(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const button = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "button", properties, additionalProperties);
callback(this, button);
return this;
}
/** Adds a help button to the overlay. It will have a "?" icon unless overridden in callback.
* On click, the button will attempt to output the title to the output element (ID defined in Overlay constructor).
* This `button` element will have properties shared between all `button` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `button` that are NOT shared between all overlay `button` elements. These should be camelCase.
* @param {function(Overlay, HTMLButtonElement):void} [callback=()=>{}] - Additional JS modification to the `button`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.12
* @example
* // Assume all help button elements have a shared class (e.g. {'className': 'bar'})
* overlay.addButtonHelp({'id': 'foo', 'title': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* ?
*
* @example
* // Assume all help button elements have a shared class (e.g. {'className': 'bar'})
* overlay.addButtonHelp({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* ?
*
*/
addButtonHelp(additionalProperties = {}, callback = () => {
}) {
const tooltip = additionalProperties["title"] ?? additionalProperties["textContent"] ?? "Help: No info";
delete additionalProperties["textContent"];
additionalProperties["title"] = `Help: ${tooltip}`;
const properties = {
"textContent": "?",
"className": "bm-help",
"onclick": () => {
this.updateInnerHTML(this.outputStatusId, tooltip);
}
};
const help = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "button", properties, additionalProperties);
callback(this, help);
return this;
}
/** Adds a `input` to the overlay.
* This `input` element will have properties shared between all `input` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `input` that are NOT shared between all overlay `input` elements. These should be camelCase.
* @param {function(Overlay, HTMLInputElement):void} [callback=()=>{}] - Additional JS modification to the `input`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.13
* @example
* // Assume all } [additionalProperties={}] - The DOM properties of the file input that are NOT shared between all overlay file input elements. These should be camelCase.
* @param {function(Overlay, HTMLDivElement, HTMLInputElement, HTMLButtonElement):void} [callback=()=>{}] - Additional JS modification to the file input.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.17
* @example
* // Assume all file input elements have a shared class (e.g. {'className': 'bar'})
* overlay.addInputFile({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
*
* Foobar.
*
*
*/
addInputFile(additionalProperties = {}, callback = () => {
}) {
const properties = {
"type": "file",
"tabindex": "-1",
"aria-hidden": "true"
};
const text = additionalProperties["textContent"] ?? "";
delete additionalProperties["textContent"];
const container = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "div");
const input = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "input", properties, additionalProperties);
this.buildElement();
const button = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "button", { "textContent": text });
this.buildElement();
this.buildElement();
button.addEventListener("click", () => {
input.click();
});
input.addEventListener("change", () => {
button.style.maxWidth = `${button.offsetWidth}px`;
if (input.files.length > 0) {
button.textContent = input.files[0].name;
} else {
button.textContent = text;
}
});
callback(this, container, input, button);
return this;
}
/** Adds a `textarea` to the overlay.
* This `textarea` element will have properties shared between all `textarea` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the `textarea` that are NOT shared between all overlay `textarea` elements. These should be camelCase.
* @param {function(Overlay, HTMLTextAreaElement):void} [callback=()=>{}] - Additional JS modification to the `textarea`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.43.13
* @example
* // Assume all
*
*/
addTextarea(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const textarea = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "textarea", properties, additionalProperties);
callback(this, textarea);
return this;
}
/** Adds a dragbar `div` element to the overlay.
* This dragbar element will have properties shared between all dragbar elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.} [additionalProperties={}] - The DOM properties of the dragbar that are NOT shared between all overlay dragbars. These should be camelCase.
* @param {function(Overlay, HTMLDivElement):void} [callback=()=>{}] - Additional JS modification to the dragbar.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.145
* @example
* // Assume all dragbar elements have a shared class (e.g. {'className': 'bar'})
* overlay.addDragbar({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* Foobar.
*
*/
addDragbar(additionalProperties = {}, callback = () => {
}) {
const properties = {
"class": "bm-dragbar"
};
const dragbar = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "div", properties, additionalProperties);
callback(this, dragbar);
return this;
}
/** Adds a timer `time` element to the overlay.
* This timer will countdown until it reaches the end date that was passed in.
* Additionally, you can update the end date by changing the endDate dataset attribute on the element.
* Timer elements are not localized. Output is HH:MM:SS with no units.
* This timer will have properties shared between all timers in the overlay.
* You can override the shared properties by using a callback.
* @param {Date} [endDate=Date.now()] - The time to count down to.
* @param {number} [updateInterval=500] - The time in milliseconds to update the display of the timer. Default is 500 milliseconds.
* @param {Object.} [additionalProperties={}] - The DOM properties of the timer that are NOT shared between all overlay timers. These should be camelCase.
* @param {function(Overlay, HTMLTimeElement):void} [callback=()=>{}] - Additional JS modification to the timer.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.313
* @example
* // Assume all timers have a shared class (e.g. {'className': 'bar'})
* overlay.addTimer(Date.now() + 2211632704000, 500, {'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume already exists in the webpage)
*
* 27:34:56
*
*/
addTimer(endDate = Date.now(), updateInterval = 500, additionalProperties = {}, callback = () => {
}) {
const timerClass = "bm-timer";
const timerID = additionalProperties?.["id"] || timerClass + "-" + crypto.randomUUID().slice(0, 8);
const properties = {
"class": timerClass
};
const timer = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "time", properties, additionalProperties);
timer.id = timerID;
timer.dataset["endDate"] = endDate;
setInterval(() => {
if (!timer.isConnected) {
return;
}
const timeRemainingTotalMs = Math.max(timer.dataset["endDate"] - Date.now(), 0);
const timeRemainingTotalSec = Math.floor(timeRemainingTotalMs / 1e3);
const timeRemainingTotalHr = Math.floor(timeRemainingTotalSec / 3600);
const timeRemainingOnlySec = Math.floor(timeRemainingTotalSec % 60);
const timeRemainingOnlyMin = Math.floor(timeRemainingTotalSec % 3600 / 60);
timer.setAttribute("datetime", `PT${timeRemainingTotalHr}H${timeRemainingOnlyMin}M${timeRemainingOnlySec}S`);
timer.textContent = String(timeRemainingTotalHr).padStart(2, "0") + ":" + String(timeRemainingOnlyMin).padStart(2, "0") + ":" + String(timeRemainingOnlySec).padStart(2, "0");
}, updateInterval);
callback(this, timer);
return this;
}
/** Updates the inner HTML of the element.
* The element is discovered by it's id.
* If the element is an `input`, it will modify the value attribute instead.
* @param {string} id - The ID of the element to change
* @param {string} html - The HTML/text to update with
* @param {boolean} [doSafe] - (Optional) Should `textContent` be used instead of `innerHTML` to avoid XSS? False by default
* @since 0.24.2
*/
updateInnerHTML(id, html, doSafe = false) {
const element = document.getElementById(id.replace(/^#/, ""));
if (!element) {
return;
}
if (element instanceof HTMLInputElement) {
element.value = html;
return;
}
if (doSafe) {
element.textContent = html;
} else {
element.innerHTML = html;
}
}
/** Handles the minimization logic for windows spawned by Blue Marble
* @param {HTMLButtonElement} button - The UI button that triggered this minimization event
* @since 0.88.142
*/
handleMinimization(button) {
if (button.disabled) {
return;
}
button.disabled = true;
button.style.textDecoration = "none";
const window2 = button.closest(".bm-window");
const dragbar = button.closest(".bm-dragbar");
const header = window2?.querySelector("h1");
const windowContent = window2?.querySelector(".bm-window-content");
if (!window2 || !dragbar || !windowContent) {
button.disabled = false;
button.style.textDecoration = "";
return;
}
const finishMinimizeTransition = (callback) => {
let isFinished = false;
let fallbackTimer;
const finish = () => {
if (isFinished) {
return;
}
isFinished = true;
clearTimeout(fallbackTimer);
windowContent.removeEventListener("transitionend", handler);
callback();
button.disabled = false;
button.style.textDecoration = "";
};
const handler = (event) => {
if (event.target != windowContent || event.propertyName != "height") {
return;
}
finish();
};
windowContent.addEventListener("transitionend", handler);
fallbackTimer = setTimeout(finish, 360);
};
const getCollapsedHeight = () => {
const windowStyle = getComputedStyle(window2);
const toPixels = (value) => parseFloat(value) || 0;
const extraHeight = windowStyle.boxSizing == "border-box" ? toPixels(windowStyle.paddingTop) + toPixels(windowStyle.paddingBottom) + toPixels(windowStyle.borderTopWidth) + toPixels(windowStyle.borderBottomWidth) : 0;
return Math.ceil(dragbar.getBoundingClientRect().height + extraHeight + 2);
};
window2.parentElement.append(window2);
if (button.dataset["buttonStatus"] == "expanded") {
window2.dataset["widthBeforeMinimize"] = window2.style.width;
window2.dataset["heightBeforeMinimize"] = window2.style.height;
window2.dataset["minHeightBeforeMinimize"] = window2.style.minHeight;
windowContent.style.height = windowContent.scrollHeight + "px";
void windowContent.offsetHeight;
if (!window2.style.width) {
window2.style.width = window2.scrollWidth + "px";
}
finishMinimizeTransition(() => {
windowContent.style.display = "none";
});
windowContent.style.height = "0";
if (window2.style.height || window2.classList.contains("bm-windowed")) {
window2.style.minHeight = "0px";
window2.style.height = getCollapsedHeight() + "px";
}
const dragbarHeader1 = header?.cloneNode(true) ?? document.createElement("h1");
const dragbarHeader1Text = dragbarHeader1.textContent;
button.nextElementSibling.appendChild(dragbarHeader1);
button.innerHTML = minimizeIconCollapsed;
button.dataset["buttonStatus"] = "collapsed";
button.ariaLabel = `Unminimize window "${dragbarHeader1Text}"`;
} else {
const dragbarHeader1 = dragbar.querySelector("h1");
const dragbarHeader1Text = dragbarHeader1.textContent;
dragbarHeader1.remove();
windowContent.style.display = "";
windowContent.style.height = "0";
window2.style.width = window2.dataset["widthBeforeMinimize"] ?? "";
window2.style.minHeight = window2.dataset["minHeightBeforeMinimize"] ?? "";
window2.style.height = window2.dataset["heightBeforeMinimize"] ?? "";
void windowContent.offsetHeight;
finishMinimizeTransition(() => {
windowContent.style.height = "";
delete window2.dataset["widthBeforeMinimize"];
delete window2.dataset["heightBeforeMinimize"];
delete window2.dataset["minHeightBeforeMinimize"];
});
windowContent.style.height = windowContent.scrollHeight + "px";
button.innerHTML = minimizeIconExpanded;
button.dataset["buttonStatus"] = "expanded";
button.ariaLabel = `Minimize window "${dragbarHeader1Text}"`;
}
}
/** Handles dragging of the overlay.
* Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.
* Make sure to use the appropriate CSS selectors.
* @param {string} moveMeSelector - The element to be moved
* @param {string} iMoveThingsSelector - The drag handle element
* @since 0.8.2
*/
handleDrag(moveMeSelector, iMoveThingsSelector, options = {}) {
const moveMe = document.querySelector(moveMeSelector);
const iMoveThings = document.querySelector(iMoveThingsSelector);
const onEnd = options?.onEnd ?? (() => {
});
if (!moveMe || !iMoveThings) {
this.handleDisplayError(`Can not drag! ${!moveMe ? "moveMe" : ""} ${!moveMe && !iMoveThings ? "and " : ""}${!iMoveThings ? "iMoveThings " : ""}was not found!`);
return;
}
let isDragging = false;
let offsetX, offsetY = 0;
let animationFrame = null;
let currentX = 0;
let currentY = 0;
let targetX = 0;
let targetY = 0;
let initialRect = null;
const updatePosition = () => {
if (isDragging) {
const deltaX = Math.abs(currentX - targetX);
const deltaY = Math.abs(currentY - targetY);
if (deltaX > 0.5 || deltaY > 0.5) {
currentX = targetX;
currentY = targetY;
moveMe.style.transform = `translate(${currentX}px, ${currentY}px)`;
moveMe.style.left = "0px";
moveMe.style.top = "0px";
moveMe.style.right = "";
}
animationFrame = requestAnimationFrame(updatePosition);
}
};
const startDrag = (clientX, clientY) => {
isDragging = true;
initialRect = moveMe.getBoundingClientRect();
offsetX = clientX - initialRect.left;
offsetY = clientY - initialRect.top;
const computedStyle = window.getComputedStyle(moveMe);
const transform = computedStyle.transform;
if (transform && transform !== "none") {
const matrix = new DOMMatrix(transform);
currentX = matrix.m41;
currentY = matrix.m42;
} else {
currentX = initialRect.left;
currentY = initialRect.top;
}
targetX = currentX;
targetY = currentY;
document.body.style.userSelect = "none";
iMoveThings.classList.add("bm-dragging");
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("touchmove", onTouchMove, { passive: false });
document.addEventListener("mouseup", endDrag);
document.addEventListener("touchend", endDrag);
document.addEventListener("touchcancel", endDrag);
if (animationFrame) {
cancelAnimationFrame(animationFrame);
}
updatePosition();
};
const endDrag = () => {
isDragging = false;
if (animationFrame) {
cancelAnimationFrame(animationFrame);
animationFrame = null;
}
document.body.style.userSelect = "";
iMoveThings.classList.remove("bm-dragging");
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("touchmove", onTouchMove);
document.removeEventListener("mouseup", endDrag);
document.removeEventListener("touchend", endDrag);
document.removeEventListener("touchcancel", endDrag);
onEnd({
element: moveMe,
x: currentX,
y: currentY
});
initialRect = null;
};
const onMouseMove = (event) => {
if (isDragging && initialRect) {
targetX = event.clientX - offsetX;
targetY = event.clientY - offsetY;
}
};
const onTouchMove = (event) => {
if (isDragging && initialRect) {
const touch = event.touches[0];
if (!touch) return;
targetX = touch.clientX - offsetX;
targetY = touch.clientY - offsetY;
event.preventDefault();
}
};
iMoveThings.addEventListener("mousedown", function(event) {
event.preventDefault();
startDrag(event.clientX, event.clientY);
});
iMoveThings.addEventListener("touchstart", function(event) {
const touch = event?.touches?.[0];
if (!touch) {
return;
}
startDrag(touch.clientX, touch.clientY);
event.preventDefault();
}, { passive: false });
}
/** Handles resizing of an overlay window from a resize handle.
* @param {string} resizeMeSelector - The element to resize
* @param {string} iResizeThingsSelector - The resize handle element
* @param {{onEnd?: function({element: HTMLElement, width: number, height: number}): void, minWidth?: number, minHeight?: number, maxWidth?: number, maxHeight?: number}} [options={}]
* @since 0.92.0
*/
handleResize(resizeMeSelector, iResizeThingsSelector, options = {}) {
const resizeMe = document.querySelector(resizeMeSelector);
const iResizeThings = document.querySelector(iResizeThingsSelector);
const onEnd = options?.onEnd ?? (() => {
});
if (!resizeMe || !iResizeThings) {
this.handleDisplayError(`Can not resize! ${!resizeMe ? "resizeMe" : ""} ${!resizeMe && !iResizeThings ? "and " : ""}${!iResizeThings ? "iResizeThings " : ""}was not found!`);
return;
}
let isResizing = false;
let startX = 0;
let startY = 0;
let startWidth = 0;
let startHeight = 0;
let currentWidth = 0;
let currentHeight = 0;
let targetWidth = 0;
let targetHeight = 0;
let animationFrame = null;
const getMaximumWidth = () => Number.isFinite(options?.maxWidth) ? options.maxWidth : window.innerWidth - 16;
const getMaximumHeight = () => Number.isFinite(options?.maxHeight) ? options.maxHeight : window.innerHeight - 16;
const minimumWidth = Number.isFinite(options?.minWidth) ? options.minWidth : 200;
const minimumHeight = Number.isFinite(options?.minHeight) ? options.minHeight : 160;
const clamp = (value, minimum, maximum) => Math.min(Math.max(value, minimum), Math.max(minimum, maximum));
const updateSize = () => {
if (isResizing) {
const deltaWidth = Math.abs(currentWidth - targetWidth);
const deltaHeight = Math.abs(currentHeight - targetHeight);
if (deltaWidth > 0.5 || deltaHeight > 0.5) {
currentWidth = targetWidth;
currentHeight = targetHeight;
resizeMe.style.width = `${currentWidth}px`;
resizeMe.style.height = `${currentHeight}px`;
}
animationFrame = requestAnimationFrame(updateSize);
}
};
const startResize = (clientX, clientY) => {
isResizing = true;
startX = clientX;
startY = clientY;
startWidth = resizeMe.offsetWidth;
startHeight = resizeMe.offsetHeight;
currentWidth = startWidth;
currentHeight = startHeight;
targetWidth = startWidth;
targetHeight = startHeight;
document.body.style.userSelect = "none";
iResizeThings.classList.add("bm-resizing");
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("touchmove", onTouchMove, { passive: false });
document.addEventListener("mouseup", endResize);
document.addEventListener("touchend", endResize);
document.addEventListener("touchcancel", endResize);
if (animationFrame) {
cancelAnimationFrame(animationFrame);
}
updateSize();
};
const endResize = () => {
isResizing = false;
if (animationFrame) {
cancelAnimationFrame(animationFrame);
animationFrame = null;
}
document.body.style.userSelect = "";
iResizeThings.classList.remove("bm-resizing");
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("touchmove", onTouchMove);
document.removeEventListener("mouseup", endResize);
document.removeEventListener("touchend", endResize);
document.removeEventListener("touchcancel", endResize);
onEnd({
element: resizeMe,
width: currentWidth,
height: currentHeight
});
};
const onMouseMove = (event) => {
if (!isResizing) {
return;
}
targetWidth = clamp(startWidth + (event.clientX - startX), minimumWidth, getMaximumWidth());
targetHeight = clamp(startHeight + (event.clientY - startY), minimumHeight, getMaximumHeight());
};
const onTouchMove = (event) => {
if (!isResizing) {
return;
}
const touch = event?.touches?.[0];
if (!touch) {
return;
}
targetWidth = clamp(startWidth + (touch.clientX - startX), minimumWidth, getMaximumWidth());
targetHeight = clamp(startHeight + (touch.clientY - startY), minimumHeight, getMaximumHeight());
event.preventDefault();
};
iResizeThings.addEventListener("mousedown", (event) => {
event.preventDefault();
event.stopPropagation();
startResize(event.clientX, event.clientY);
});
iResizeThings.addEventListener("touchstart", (event) => {
const touch = event?.touches?.[0];
if (!touch) {
return;
}
event.preventDefault();
event.stopPropagation();
startResize(touch.clientX, touch.clientY);
}, { passive: false });
}
/** Handles status display.
* This will output plain text into the output Status box.
* Additionally, this will output an info message to the console.
* @param {string} text - The status text to display.
* @since 0.58.4
*/
handleDisplayStatus(text) {
const consoleInfo = console.info;
consoleInfo(`${this.name}: ${text}`);
this.updateInnerHTML(this.outputStatusId, "Status: " + text, true);
}
/** Handles error display.
* This will output plain text into the output Status box.
* Additionally, this will output an error to the console.
* @param {string} text - The error text to display.
* @since 0.41.6
*/
handleDisplayError(text) {
const consoleError2 = console.error;
consoleError2(`${this.name}: ${text}`);
this.updateInnerHTML(this.outputStatusId, "Error: " + text, true);
}
};
_Overlay_instances = new WeakSet();
/** Creates an element.
* For **internal use** of the {@link Overlay} class.
* @param {string} tag - The tag name as a string.
* @param {Object.} [properties={}] - The DOM properties of the element.
* @returns {HTMLElement} HTML Element
* @since 0.43.2
*/
createElement_fn = function(tag, properties = {}, additionalProperties = {}) {
const element = document.createElement(tag);
if (!this.overlay) {
this.overlay = element;
this.currentParent = element;
} else {
this.currentParent?.appendChild(element);
this.parentStack.push(this.currentParent);
this.currentParent = element;
}
for (const [property, value] of Object.entries(properties)) {
__privateMethod(this, _Overlay_instances, applyAttribute_fn).call(this, element, property, value);
}
for (const [property, value] of Object.entries(additionalProperties)) {
__privateMethod(this, _Overlay_instances, applyAttribute_fn).call(this, element, property, value);
}
return element;
};
/** Applies an attribute to an element
* @param {HTMLElement} element - The element to apply the attribute to
* @param {String} property - The name of the attribute to apply
* @param {String} value - The value of the attribute
* @since 0.88.136
*/
applyAttribute_fn = function(element, property, value) {
if (property == "class") {
element.classList.add(...value.split(/\s+/));
} else if (property == "for") {
element.htmlFor = value;
} else if (property == "tabindex") {
element.tabIndex = Number(value);
} else if (property == "readonly") {
element.readOnly = value == "true" || value == "1";
} else if (property == "maxlength") {
element.maxLength = Number(value);
} else if (property.startsWith("data")) {
element.dataset[property.slice(5).split("-").map(
(part, i) => i == 0 ? part : part[0].toUpperCase() + part.slice(1)
).join("")] = value;
} else if (property.startsWith("aria")) {
element.setAttribute(property, value);
} else {
element[property] = value;
}
};
// src/WindowSettings.js
var closeIcon = 'SettingsManager failed to override the ${name2} function inside WindowSettings.` }).buildElement().buildElement();
};
// src/settingsManager.js
var _SettingsManager_instances, updateHighlightSettings_fn, updateHighlightToPreset_fn;
var SettingsManager = class extends WindowSettings {
/** Constructor for the SettingsManager class
* @param {string} name - The name of the userscript
* @param {string} version - The version of the userscript
* @param {Object} userSettings - The user settings as an object
* @since 0.91.11
*/
constructor(name2, version2, userSettings2) {
var _a;
super(name2, version2);
__privateAdd(this, _SettingsManager_instances);
this.userSettings = userSettings2;
(_a = this.userSettings).flags ?? (_a.flags = []);
this.userSettingsOld = structuredClone(this.userSettings);
this.userSettingsSaveLocation = "bmUserSettings";
this.updateFrequency = 5e3;
this.lastUpdateTime = 0;
setInterval(this.updateUserStorage.bind(this), this.updateFrequency);
}
/** Updates the user settings in userscript storage
* @since 0.91.39
*/
async updateUserStorage() {
await this.saveUserStorage();
}
/** Saves the user settings in userscript storage.
* @param {boolean} [force=false] - Should the throttle be ignored?
* @since 0.92.0
*/
async saveUserStorage(force = false) {
const userSettingsCurrent = JSON.stringify(this.userSettings);
const userSettingsOld = JSON.stringify(this.userSettingsOld);
if (userSettingsCurrent != userSettingsOld && (force || Date.now() - this.lastUpdateTime > this.updateFrequency)) {
await GM.setValue(this.userSettingsSaveLocation, userSettingsCurrent);
this.userSettingsOld = structuredClone(this.userSettings);
this.lastUpdateTime = Date.now();
console.log(userSettingsCurrent);
}
}
/** Immediately saves the user settings in userscript storage.
* @since 0.92.0
*/
async saveUserStorageNow() {
await this.saveUserStorage(true);
}
/** Toggles a boolean flag to the state that was passed in.
* If no state was passed in, the flag will flip to the opposite state.
* The existence of the flag determines its state. If it exists, it is `true`.
* @param {string} flagName - The name of the flag to toggle
* @param {boolean} [state=undefined] - (Optional) The state to change the flag to
* @since 0.91.60
*/
toggleFlag(flagName, state = void 0) {
const flagIndex = this.userSettings?.flags?.indexOf(flagName) ?? -1;
if (flagIndex != -1 && state !== true) {
this.userSettings?.flags?.splice(flagIndex, 1);
} else if (flagIndex == -1 && state !== false) {
this.userSettings?.flags?.push(flagName);
}
}
// This is one of the most insane OOP setups I have ever laid my eyes on
/** Builds the "highlight" category of the settings window
* @since 0.91.18
* @see WindowSettings#buildHighlight
*/
buildHighlight() {
const highlightPresetOff = 'aggressively skip transparent tiles" }, (instance, label, checkbox) => {
checkbox.checked = this.userSettings?.flags?.includes("hl-agSkip");
checkbox.onchange = (event) => this.toggleFlag("hl-agSkip", event.target.checked);
}).buildElement().buildElement().buildElement();
}
};
_SettingsManager_instances = new WeakSet();
/** Updates the display of the highlight buttons in the settings window.
* Additionally, it will update user settings with the new selection.
* @param {HTMLButtonElement} button - The button that was pressed
* @param {Array} coords - The relative coordinates of the button
* @since 0.91.46
*/
updateHighlightSettings_fn = function(button, coords2) {
button.disabled = true;
const status = button.dataset["status"];
const userStorageOld = this.userSettings?.highlight ?? [[1, 0, 1], [2, 0, 0], [1, -1, 0], [1, 1, 0], [1, 0, -1]];
let userStorageChange = [2, 0, 0];
const userStorageNew = userStorageOld;
switch (status) {
// If the button was in the "Disabled" state
case "Disabled":
button.dataset["status"] = "Incorrect";
button.ariaLabel = "Sub-pixel incorrect";
userStorageChange = [1, ...coords2];
break;
// If the button was in the "Incorrect" state
case "Incorrect":
button.dataset["status"] = "Template";
button.ariaLabel = "Sub-pixel template";
userStorageChange = [2, ...coords2];
break;
// If the button was in the "Template" state
case "Template":
button.dataset["status"] = "Disabled";
button.ariaLabel = "Sub-pixel disabled";
userStorageChange = [0, ...coords2];
break;
}
const indexOfChange = userStorageOld.findIndex(([, x, y]) => x == userStorageChange[1] && y == userStorageChange[2]);
if (userStorageChange[0] != 0) {
if (indexOfChange != -1) {
userStorageNew[indexOfChange] = userStorageChange;
} else {
userStorageNew.push(userStorageChange);
}
} else if (indexOfChange != -1) {
userStorageNew.splice(indexOfChange, 1);
}
this.userSettings["highlight"] = userStorageNew;
button.disabled = false;
};
updateHighlightToPreset_fn = async function(preset) {
const presetButtons = document.querySelectorAll(".bm-highlight-preset-container button");
for (const button of presetButtons) {
button.disabled = true;
}
let presetArray = [0, 0, 0, 0, 2, 0, 0, 0, 0];
switch (preset) {
case "Cross":
presetArray = [0, 1, 0, 1, 2, 1, 0, 1, 0];
break;
case "X":
presetArray = [1, 0, 1, 0, 2, 0, 1, 0, 1];
break;
case "Full":
presetArray = [2, 2, 2, 2, 2, 2, 2, 2, 2];
break;
}
const buttons = document.querySelector(".bm-highlight-grid")?.childNodes ?? [];
for (let buttonIndex = 0; buttonIndex < buttons.length; buttonIndex++) {
const button = buttons[buttonIndex];
let buttonState = button.dataset["status"];
buttonState = buttonState != "Disabled" ? buttonState != "Incorrect" ? 2 : 1 : 0;
let buttonStateDelta = presetArray[buttonIndex] - buttonState;
if (buttonStateDelta == 0) {
continue;
}
buttonStateDelta += buttonStateDelta < 0 ? 3 : 0;
button.click();
if (buttonStateDelta == 2) {
for (let timeWaited = 0; timeWaited < 200; timeWaited += 10) {
if (!button.disabled) {
break;
}
await sleep(10);
}
button.click();
}
}
for (const button of presetButtons) {
button.disabled = false;
}
};
// src/Template.js
var _Template_instances, calculateTotalPixelsFromImageData_fn;
var Template = class {
/** The constructor for the {@link Template} class with enhanced pixel tracking.
* @param {Object} [params={}] - Object containing all optional parameters
* @param {string} [params.displayName='My template'] - The display name of the template
* @param {number} [params.sortID=0] - The sort number of the template for rendering priority
* @param {string} [params.authorID=''] - The user ID of the person who exported the template (prevents sort ID collisions)
* @param {string} [params.url=''] - The URL to the source image
* @param {File} [params.file=null] - The template file (pre-processed File or processed bitmap)
* @param {Array} [params.coords=null] - The coordinates of the top left corner as (tileX, tileY, pixelX, pixelY)
* @param {Object} [params.chunked=null] - The affected chunks of the template, and their template for each chunk as a bitmap
* @param {Object} [params.chunked32={}] - The affected chunks of the template, and their template for each chunk as a Uint32Array
* @param {number} [params.tileSize=1000] - The size of a tile in pixels (assumes square tiles)
* @param {Object} [params.pixelCount={total:0, colors:Map}] - Total number of pixels in the template (calculated automatically during processing)
* @since 0.65.2
*/
constructor({
displayName = "My template",
sortID = 0,
authorID = "",
url = "",
file = null,
coords: coords2 = null,
chunked = null,
chunked32 = {},
tileSize = 1e3
} = {}) {
__privateAdd(this, _Template_instances);
this.displayName = displayName;
this.sortID = sortID;
this.authorID = authorID;
this.url = url;
this.file = file;
this.coords = coords2;
this.chunked = chunked;
this.chunked32 = chunked32;
this.tileSize = tileSize;
this.pixelCount = { total: 0, colors: /* @__PURE__ */ new Map() };
this.shouldSkipTransTiles = true;
this.shouldAggSkipTransTiles = false;
}
/** Creates chunks of the template for each tile.
* @param {Number} tileSize - Size of the tile as determined by templateManager
* @param {Object} paletteBM - An collection of Uint32Arrays containing the palette BM uses
* @param {boolean} shouldSkipTransTiles - Should transparent tiles be skipped over when creating the template?
* @param {boolean} shouldAggSkipTransTiles - Should transparent tiles be aggressively skipped over when creating the template?
* @returns {Object} Collection of template bitmaps & buffers organized by tile coordinates
* @since 0.65.4
*/
async createTemplateTiles(tileSize, paletteBM, shouldSkipTransTiles, shouldAggSkipTransTiles) {
console.log("Template coordinates:", this.coords);
this.shouldSkipTransTiles = shouldSkipTransTiles;
this.shouldAggSkipTransTiles = shouldAggSkipTransTiles;
const shreadSize = 3;
const bitmap = await createImageBitmap(this.file);
const imageWidth = bitmap.width;
const imageHeight = bitmap.height;
this.tileSize = tileSize;
const templateTiles = {};
const templateTilesBuffers = {};
const canvas = new OffscreenCanvas(this.tileSize, this.tileSize);
const context = canvas.getContext("2d", { willReadFrequently: true });
const transCanvas = new OffscreenCanvas(this.tileSize, this.tileSize);
const transContext = transCanvas.getContext("2d", { willReadFrequently: true });
transContext.globalCompositeOperation = "destination-over";
canvas.width = imageWidth;
canvas.height = imageHeight;
context.imageSmoothingEnabled = false;
context.drawImage(bitmap, 0, 0);
let timer = Date.now();
const totalPixelMap = __privateMethod(this, _Template_instances, calculateTotalPixelsFromImageData_fn).call(this, context.getImageData(0, 0, imageWidth, imageHeight), paletteBM);
console.log(`Calculating total pixels took ${(Date.now() - timer) / 1e3} seconds`);
let totalPixels = 0;
const transparentColorID = 0;
for (const [color, total] of totalPixelMap) {
if (color == transparentColorID) {
continue;
}
totalPixels += total;
}
this.pixelCount = { total: totalPixels, colors: totalPixelMap };
timer = Date.now();
const canvasMask = new OffscreenCanvas(3, 3);
const contextMask = canvasMask.getContext("2d");
contextMask.clearRect(0, 0, 3, 3);
contextMask.fillStyle = "white";
contextMask.fillRect(1, 1, 1, 1);
for (let pixelY = this.coords[3]; pixelY < imageHeight + this.coords[3]; ) {
const drawSizeY = Math.min(this.tileSize - pixelY % this.tileSize, imageHeight - (pixelY - this.coords[3]));
console.log(`Math.min(${this.tileSize} - (${pixelY} % ${this.tileSize}), ${imageHeight} - (${pixelY - this.coords[3]}))`);
for (let pixelX = this.coords[2]; pixelX < imageWidth + this.coords[2]; ) {
console.log(`Pixel X: ${pixelX}
Pixel Y: ${pixelY}`);
const drawSizeX = Math.min(this.tileSize - pixelX % this.tileSize, imageWidth - (pixelX - this.coords[2]));
if (shouldSkipTransTiles) {
const isTemplateTileTransparent = !this.calculateCanvasTransparency({
bitmap,
bitmapParams: [pixelX - this.coords[2], pixelY - this.coords[3], drawSizeX, drawSizeY],
// Top left X, Top left Y, Width, Height
transCanvas,
transContext
});
console.log(`Tile contains template: ${!isTemplateTileTransparent}`);
if (isTemplateTileTransparent) {
pixelX += drawSizeX;
continue;
}
}
console.log(`Math.min(${this.tileSize} - (${pixelX} % ${this.tileSize}), ${imageWidth} - (${pixelX - this.coords[2]}))`);
console.log(`Draw Size X: ${drawSizeX}
Draw Size Y: ${drawSizeY}`);
const canvasWidth = drawSizeX * shreadSize;
const canvasHeight = drawSizeY * shreadSize;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
console.log(`Draw X: ${drawSizeX}
Draw Y: ${drawSizeY}
Canvas Width: ${canvasWidth}
Canvas Height: ${canvasHeight}`);
context.imageSmoothingEnabled = false;
console.log(`Getting X ${pixelX}-${pixelX + drawSizeX}
Getting Y ${pixelY}-${pixelY + drawSizeY}`);
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.drawImage(
bitmap,
// Bitmap image to draw
pixelX - this.coords[2],
// Coordinate X to draw *from*
pixelY - this.coords[3],
// Coordinate Y to draw *from*
drawSizeX,
// X width to draw *from*
drawSizeY,
// Y height to draw *from*
0,
// Coordinate X to draw *at*
0,
// Coordinate Y to draw *at*
drawSizeX * shreadSize,
// X width to draw *at*
drawSizeY * shreadSize
// Y height to draw *at*
);
context.save();
context.globalCompositeOperation = "destination-in";
console.log(`Should Skip: ${shouldSkipTransTiles}; Should Agg Skip: ${shouldAggSkipTransTiles}`);
context.fillStyle = context.createPattern(canvasMask, "repeat");
context.fillRect(0, 0, canvasWidth, canvasHeight);
context.restore();
const imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
console.log(`Shreaded pixels for ${pixelX}, ${pixelY}`, imageData);
const templateTileName = `${(this.coords[0] + Math.floor(pixelX / 1e3)).toString().padStart(4, "0")},${(this.coords[1] + Math.floor(pixelY / 1e3)).toString().padStart(4, "0")},${(pixelX % 1e3).toString().padStart(3, "0")},${(pixelY % 1e3).toString().padStart(3, "0")}`;
this.chunked32[templateTileName] = new Uint32Array(imageData.data.buffer);
templateTiles[templateTileName] = await createImageBitmap(canvas);
const canvasBlob = await canvas.convertToBlob();
const canvasBuffer = await canvasBlob.arrayBuffer();
const canvasBufferBytes = Array.from(new Uint8Array(canvasBuffer));
templateTilesBuffers[templateTileName] = uint8ToBase64(canvasBufferBytes);
console.log(templateTiles);
pixelX += drawSizeX;
}
pixelY += drawSizeY;
}
console.log(`Parsing template took ${(Date.now() - timer) / 1e3} seconds`);
console.log("Template Tiles: ", templateTiles);
console.log("Template Tiles Buffers: ", templateTilesBuffers);
console.log("Template Tiles Uint32Array: ", this.chunked32);
return { templateTiles, templateTilesBuffers };
}
/** Detects if the canvas is transparent.
* @param {Object} param - Object that contains the parameters for the function
* @param {ImageBitmap} param.bitmap - The bitmap template image
* @param {Array} param.bitmapParams - The parameters to obtain the template tile image from the bitmap
* @param {OffscreenCanvas | HTMLCanvasElement} param.transCanvas - The canvas to draw to in order to calculate this
* @param {OffscreenCanvasRenderingContext2D} param.transContext - The context for the transparent canvas to draw to
* @return {boolean} Is the canvas transparent? If transparent, then `true` is returned. Otherwise, `false`.
* @since 0.91.75
*/
calculateCanvasTransparency({
bitmap,
bitmapParams,
transCanvas,
transContext
}) {
console.log(`Calculating template tile transparency...`);
console.log(`Should Skip: ${this.shouldSkipTransTiles}; Should Agg: ${this.shouldAggSkipTransTiles}`);
const timer = Date.now();
const duplicationCoordinateArray = [
[0, 1],
// E.g. move 0 on the x axis, and 1 down on the y axis
[1, 0],
[0, -2],
// E.g. move 0 on the x axis, and 2 up on the y axis
[-2, 0],
[0, 4],
[4, 0],
[0, -8],
[-8, 0],
[0, 16],
[16, 0],
[0, -32],
[-32, 0]
];
const transCanvasWidth = bitmapParams[2];
const transCanvasHeight = bitmapParams[3];
transCanvas.width = transCanvasWidth;
transCanvas.height = transCanvasHeight;
transContext.clearRect(0, 0, transCanvasWidth, transCanvasHeight);
if (this.shouldAggSkipTransTiles) {
transContext.drawImage(
bitmap,
...bitmapParams,
// Bitmap image parameters (x, y, width, height)
0,
0,
// The coordinate draw the output *at*
10,
10
// The width and height of the output
);
} else {
transContext.drawImage(
bitmap,
...bitmapParams,
// Bitmap image parameters (x, y, width, height)
0,
0,
// The coordinate draw the output *at*
transCanvasWidth,
transCanvasHeight
// Stretch to canvas (the canvas should already be the same size as the template image)
);
for (const [relativeX, relativeY] of duplicationCoordinateArray) {
transContext.drawImage(
transCanvas,
// The canvas we are drawing to *is* the source image
0,
0,
transCanvasWidth,
transCanvasHeight,
// The entire canvas (as a source image)
relativeX,
relativeY,
transCanvasWidth,
transCanvasHeight
// The output coordinates and size on the same canvas
);
}
transContext.drawImage(
transCanvas,
// The canvas we are drawing to *is* the source image
0,
0,
transCanvasWidth,
transCanvasHeight,
// The entire canvas (as a source image)
0,
0,
10,
10
// The output coordinates and size on the same canvas
);
}
const shunkCanvas = transContext.getImageData(0, 0, 10, 10);
const shunkCanvas32 = new Uint32Array(shunkCanvas.data.buffer);
console.log(`Calculated canvas transparency in ${(Date.now() - timer) / 1e3} seconds.`);
for (const pixel of shunkCanvas32) {
if (!!pixel) {
return true;
}
}
return false;
}
/** Calculates top left coordinate of template.
* It uses `Template.chunked` to update `Template.coords`
* @since 0.88.504
*/
calculateCoordsFromChunked() {
let topLeftCoord = [Infinity, Infinity, Infinity, Infinity];
const tileKeys = Object.keys(this.chunked).sort();
tileKeys.forEach((key, index) => {
const [tileX, tileY, pixelX, pixelY] = key.split(",").map(Number);
if (tileY < topLeftCoord[1] || tileY == topLeftCoord[1] && tileX < topLeftCoord[0]) {
topLeftCoord = [tileX, tileY, pixelX, pixelY];
}
});
this.coords = topLeftCoord;
}
};
_Template_instances = new WeakSet();
/** Calculates the total pixels for each color for the image.
*
* @param {ImageData} imageData - The pre-shreaded image "casted" onto a canvas
* @param {Object} paletteBM - The palette Blue Marble uses for colors
* @param {Number} paletteTolerance - How close an RGB color has to be in order to be considered a palette color. A tolerance of "3" means the sum of the RGB can be up to 3 away from the actual value.
* @returns {Map} A map where the key is the color ID, and the value is the total pixels for that color ID
* @since 0.88.6
*/
calculateTotalPixelsFromImageData_fn = function(imageData, paletteBM) {
const buffer32Arr = new Uint32Array(imageData.data.buffer);
const { palette: _, LUT: lookupTable } = paletteBM;
const _colorpalette = /* @__PURE__ */ new Map();
for (let pixelIndex = 0; pixelIndex < buffer32Arr.length; pixelIndex++) {
const pixel = buffer32Arr[pixelIndex];
let bestColorID = -2;
if (pixel >>> 24 == 0) {
bestColorID = 0;
} else {
bestColorID = lookupTable.get(pixel) ?? -2;
}
const colorIDcount = _colorpalette.get(bestColorID);
_colorpalette.set(bestColorID, colorIDcount ? colorIDcount + 1 : 1);
}
console.log(_colorpalette);
return _colorpalette;
};
// src/confetttiManager.js
var ConfettiManager = class {
/** The constructor for the confetti manager.
* @since 0.88.356
*/
constructor() {
this.confettiCount = Math.ceil(80 / 1300 * window.innerWidth);
this.colorPalette = colorpalette.slice(1);
}
/** Immedently creates confetti inside the parent element.
* @param {HTMLElement} parentElement - The parent element to create confetti inside of
* @since 0.88.356
*/
createConfetti(parentElement) {
const confettiContainer = document.createElement("div");
for (let currentCount = 0; currentCount < this.confettiCount; currentCount++) {
const confettiShard = document.createElement("confetti-piece");
confettiShard.style.setProperty("--x", `${Math.random() * 100}vw`);
confettiShard.style.setProperty("--delay", `${Math.random() * 2}s`);
confettiShard.style.setProperty("--duration", `${3 + Math.random() * 3}s`);
confettiShard.style.setProperty("--rot", `${Math.random() * 360}deg`);
confettiShard.style.setProperty("--size", `${6 + Math.random() * 6}px`);
confettiShard.style.backgroundColor = `rgb(${this.colorPalette[Math.floor(Math.random() * this.colorPalette.length)].rgb.join(",")})`;
confettiShard.onanimationend = () => {
if (confettiShard.parentNode.childElementCount <= 1) {
confettiShard.parentNode.remove();
} else {
confettiShard.remove();
}
};
confettiContainer.appendChild(confettiShard);
}
parentElement.appendChild(confettiContainer);
}
};
var BlueMarbleConfettiPiece = class extends HTMLElement {
};
customElements.define("confetti-piece", BlueMarbleConfettiPiece);
// src/WindowFilter.js
var closeIcon2 = '${this.timeRemainingLocalized} `);
__privateMethod(this, _WindowFilter_instances, startAutoRefresh_fn).call(this);
}
/** Spawns a windowed Color Filter window.
* If another color filter window already exists, we DON'T spawn another!
* Parent/child relationships in the DOM structure below are indicated by indentation.
* @since 0.90.35
*/
buildWindowed() {
if (document.querySelector(`#${this.windowID}`)) {
__privateMethod(this, _WindowFilter_instances, closeWindow_fn2).call(this);
return;
}
this.window = this.addDiv({
"id": this.windowID,
"class": "bm-window bm-windowed",
"style": `width: 360px; height: min(70vh, 32rem); min-width: ${this.windowMinWidth}px; min-height: ${this.windowMinHeight}px; max-width: min(${this.windowMaxWidth}px, calc(100vw - 16px)); max-height: min(${this.windowMaxHeight}px, calc(100vh - 16px));`
}).addDragbar().addButton({ "class": "bm-button-circle", "innerHTML": minimizeIconExpanded, "aria-label": 'Minimize window "Color Filter"', "data-button-status": "expanded" }, (instance, button) => {
button.onclick = () => {
const windowedColorTotals = document.querySelector("#bm-filter-windowed-color-totals");
if (windowedColorTotals) {
windowedColorTotals.style.display = button.dataset["buttonStatus"] == "expanded" ? "none" : "";
}
instance.handleMinimization(button);
};
button.ontouchend = () => {
button.click();
};
}).buildElement().addDiv().addSpan({ "id": "bm-filter-windowed-color-totals", "class": "bm-dragbar-text", "style": "font-weight: 700;" }).buildElement().buildElement().addDiv({ "class": "bm-flex-center" }).addButton({ "class": "bm-button-circle", "innerHTML": fullscreenIcon, "aria-label": 'Switch to fullscreen mode for "Color Filter"' }, (instance, button) => {
button.onclick = () => {
__privateMethod(this, _WindowFilter_instances, setWindowModePreference_fn).call(this, false);
__privateMethod(this, _WindowFilter_instances, closeWindow_fn2).call(this);
this.buildWindow();
};
button.ontouchend = () => {
button.click();
};
}).buildElement().addButton({ "class": "bm-button-circle", "innerHTML": closeIcon2, "aria-label": 'Close window "Color Filter"' }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, closeWindow_fn2).call(this);
button.ontouchend = () => {
button.click();
};
}).buildElement().buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container bm-center-vertically bm-filter-header" }).addHeader(1, { "textContent": "Color Filter" }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-flex-between bm-center-vertically bm-filter-toolbar", "style": "gap: 1.5ch;" }).addButton({ "class": "bm-button-secondary", "textContent": "None" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, false);
}).buildElement().addButton({ "class": "bm-button-secondary", "textContent": "All" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, true);
}).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-scrollable bm-filter-scrollable" }).buildElement().buildElement().addDiv({
"class": "bm-resize-corner",
"title": "Resize Color Filter window",
"aria-label": "Resize Color Filter window",
"role": "presentation",
"textContent": "\u25E2",
"style": "position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 4px; padding-bottom: 4px; box-sizing: border-box; z-index: 5; cursor: nwse-resize; pointer-events: auto; touch-action: none; user-select: none; font-size: 8px; line-height: 1; color: rgba(255,255,255,0.95); background: transparent; border: none; box-shadow: none;"
}).buildElement().buildElement().buildOverlay(this.windowParent);
__privateMethod(this, _WindowFilter_instances, initializeWindowedPersistence_fn).call(this);
const scrollableContainer = document.querySelector(`#${this.windowID} .bm-container.bm-scrollable`);
__privateMethod(this, _WindowFilter_instances, buildColorList_fn).call(this, scrollableContainer);
__privateMethod(this, _WindowFilter_instances, syncSortFormControls_fn).call(this);
__privateMethod(this, _WindowFilter_instances, sortColorList_fn).call(this, this.sortPrimary, this.sortSecondary, this.showUnused);
__privateMethod(this, _WindowFilter_instances, startAutoRefresh_fn).call(this);
}
/** The information about a specific color on the palette.
* @typedef {Object} ColorData
* @property {number | string} colorTotal
* @property {string} colorTotalLocalized
* @property {number | string} colorCorrect
* @property {string} colorCorrectLocalized
* @property {string} colorPercent
* @property {number} colorIncorrect
*/
/** Updates the information inside the colors in the color list.
* If the color list does not exist yet, it returns the color information instead.
* This assumes the information inside each element is the same between fullscreen and windowed mode.
* @since 0.90.60
* @returns {Object.}
*/
updateColorList() {
__privateMethod(this, _WindowFilter_instances, calculatePixelStatistics_fn).call(this);
const colorList = document.querySelector(`#${this.colorListID}`);
const colorStatistics = {};
for (const color of this.palette) {
const colorTotal = this.allPixelsColor.get(color.id) ?? 0;
const colorTotalLocalized = localizeNumber(colorTotal);
let colorCorrect = 0;
let colorCorrectLocalized = "0";
let colorPercent = localizePercent(1);
if (colorTotal != 0) {
colorCorrect = this.allPixelsCorrect.get(color.id) ?? "???";
if (typeof colorCorrect != "number" && this.tilesLoadedTotal == this.tilesTotal && !!color.id) {
colorCorrect = 0;
}
colorCorrectLocalized = typeof colorCorrect == "string" ? colorCorrect : localizeNumber(colorCorrect);
colorPercent = isNaN(colorCorrect / colorTotal) ? "???" : localizePercent(colorCorrect / colorTotal);
}
const colorIncorrect = parseInt(colorTotal) - parseInt(colorCorrect);
colorStatistics[color.id] = {
colorTotal,
colorTotalLocalized,
colorCorrect,
colorCorrectLocalized,
colorPercent,
colorIncorrect
};
}
const windowedColorTotals = document.querySelector("#bm-filter-windowed-color-totals");
if (windowedColorTotals) {
const allCorrect = this.allPixelsCorrectTotal.toString().length > 7 ? this.allPixelsCorrectTotal.toString().slice(0, 2) + "\u2026" + this.allPixelsCorrectTotal.toString().slice(-3) : this.allPixelsCorrectTotal.toString();
const allTotal = this.allPixelsTotal.toString().length > 7 ? this.allPixelsTotal.toString().slice(0, 2) + "\u2026" + this.allPixelsTotal.toString().slice(-3) : this.allPixelsTotal.toString();
this.updateInnerHTML("#bm-filter-windowed-color-totals", `${allCorrect}/${allTotal}`, true);
}
this.updateInnerHTML("#bm-filter-tile-load", `${localizeNumber(this.tilesLoadedTotal)} / ${localizeNumber(this.tilesTotal)}`);
this.updateInnerHTML("#bm-filter-tot-correct", localizeNumber(this.allPixelsCorrectTotal));
this.updateInnerHTML("#bm-filter-tot-total", localizeNumber(this.allPixelsTotal));
this.updateInnerHTML("#bm-filter-tot-remaining", `${localizeNumber((this.allPixelsTotal || 0) - (this.allPixelsCorrectTotal || 0))} (${localizePercent(((this.allPixelsTotal || 0) - (this.allPixelsCorrectTotal || 0)) / (this.allPixelsTotal || 1))})`);
this.updateInnerHTML("#bm-filter-tot-completed", `${this.timeRemainingLocalized} `);
if (!colorList) {
return colorStatistics;
}
const colors = Array.from(colorList.children);
for (const color of colors) {
const colorID = parseInt(color.dataset["id"]);
const {
colorCorrect,
colorCorrectLocalized,
colorPercent,
colorTotal,
colorTotalLocalized,
colorIncorrect
} = colorStatistics[colorID];
color.dataset["correct"] = !Number.isNaN(parseInt(colorCorrect)) ? colorCorrect : "0";
color.dataset["total"] = colorTotal;
color.dataset["percent"] = colorPercent.slice(-1) == "%" ? colorPercent.slice(0, -1) : "0";
color.dataset["incorrect"] = colorIncorrect || 0;
const pixelCount = document.querySelector(`#${this.windowID} .bm-filter-color[data-id="${colorID}"] .bm-filter-color-pxl-cnt`);
if (pixelCount) {
const isWindowedPixelCount = !!pixelCount.closest(`#${this.windowID}.bm-windowed`);
if (isWindowedPixelCount) {
pixelCount.textContent = `${colorCorrectLocalized} / ${colorTotalLocalized}`;
} else {
pixelCount.innerHTML = `${colorCorrectLocalized} /Healthy! Poor! Bad! might still be able to use the template. It is HIGHLY recommended that you download all templates and update Blue Marble's template storage before continuing. (Reason: MAJOR version mismatch)`;
this.schemaHealth = "Bad";
} else {
schemaHealthBanner = 'Template storage health: Dead! ${escapeHTML(this.scriptVersion)} to continue using your templates.${escapeHTML(this.scriptVersion)} with schema version ${escapeHTML(this.schemaVersion)} .${escapeHTML(this.version)} and requires schema version ${escapeHTML(this.schemaVersionBleedingEdge)} .${wplaceUpdateTimeLocalized} .${this.schemaHealth != "Good" ? recoveryInstructions : ""}`);
const buttonOptions = new Overlay(this.name, this.version);
if (this.schemaHealth != "Dead") {
buttonOptions.addDiv({ "class": "bm-container bm-flex-center bm-center-vertically", "style": "gap: 1.5ch;" });
buttonOptions.addButton({ "textContent": "Download all templates" }, (instance, button) => {
button.onclick = () => {
button.disabled = true;
this.templateManager.downloadAllTemplatesFromStorage().then(() => {
button.disabled = false;
});
};
}).buildElement();
}
if (this.schemaHealth == "Poor" || this.schemaHealth == "Bad") {
buttonOptions.addButton({ "textContent": `Update template storage to ${this.schemaVersionBleedingEdge}` }, (instance, button) => {
button.onclick = () => {
button.disabled = true;
__privateMethod(this, _WindowWizard_instances, convertSchema_1_x_x_To_2_x_x_fn).call(this, true);
};
}).buildElement();
}
buttonOptions.buildElement().buildOverlay(document.querySelector("#bm-wizard-status").parentNode);
};
/** Displays loaded templates to the user.
* @since 0.88.441
*/
displayTemplateList_fn = function() {
const templates = this.currentJSON?.templates;
if (Object.keys(templates).length > 0) {
const templateListParentElement = document.querySelector(`#${this.windowID} .bm-scrollable`);
const templateList = new Overlay(this.name, this.version);
templateList.addDiv({ "id": "bm-wizard-tlist", "class": "bm-container" });
for (const template in templates) {
const templateKey = template;
const templateValue = templates[template];
if (templates.hasOwnProperty(template)) {
const templateKeyArray = templateKey.split(" ");
const sortID = Number(templateKeyArray?.[0]);
const authorID = encodedToNumber(templateKeyArray?.[1] || "0", this.templateManager.encodingBase);
const displayName = templateValue.name || `Template ${sortID || ""}`;
const coords2 = templateValue?.coords?.split(",").map(Number);
const totalPixelCount = templateValue.pixels?.total ?? void 0;
const templateImage = void 0;
const sortIDLocalized = typeof sortID == "number" ? localizeNumber(sortID) : "???";
const authorIDLocalized = typeof authorID == "number" ? localizeNumber(authorID) : "???";
const totalPixelCountLocalized = typeof totalPixelCount == "number" ? localizeNumber(totalPixelCount) : "???";
templateList.addDiv({ "class": "bm-container bm-flex-center" }).addDiv({ "class": "bm-flex-center", "style": "flex-direction: column; gap: 0;" }).addDiv({ "class": "bm-wizard-template-container-image", "textContent": templateImage || "\u{1F5BC}\uFE0F" }).buildElement().addSmall({ "textContent": `#${sortIDLocalized}` }).buildElement().buildElement().addDiv({ "class": "bm-flex-center bm-wizard-template-container-flavor" }).addHeader(3, { "textContent": displayName }).buildElement().addSpan({ "textContent": `Uploaded by user #${authorIDLocalized}` }).buildElement().addSpan({ "textContent": `Coordinates: ${coords2.join(", ")}` }).buildElement().addSpan({ "textContent": `Total Pixels: ${totalPixelCountLocalized}` }).buildElement().buildElement().buildElement();
}
}
templateList.buildElement().buildOverlay(templateListParentElement);
}
};
convertSchema_1_x_x_To_2_x_x_fn = async function(shouldWindowWizardOpen) {
if (shouldWindowWizardOpen) {
const windowContent = document.querySelector(`#${this.windowID} .bm-window-content`);
windowContent.innerHTML = "";
const loadingScreen = new Overlay(this.name, this.version);
loadingScreen.addDiv({ "class": "bm-container" }).addDiv({ "class": "bm-container bm-center-vertically" }).addHeader(1, { "textContent": "Template Wizard" }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addHeader(2, { "textContent": "Status" }).buildElement().addP({ "textContent": "Updating template storage. Please wait..." }).buildElement().buildElement().buildElement().buildOverlay(windowContent);
}
GM_deleteValue("bmCoords");
const templates = this.currentJSON?.templates;
if (Object.keys(templates).length > 0) {
for (const [key, template] of Object.entries(templates)) {
if (templates.hasOwnProperty(key)) {
const _template = new Template({
displayName: template.name,
chunked: template.tiles
});
_template.calculateCoordsFromChunked();
const blob = await this.templateManager.convertTemplateToBlob(_template);
await this.templateManager.createTemplate(blob, _template.displayName, _template.coords);
}
}
}
if (shouldWindowWizardOpen) {
console.log(`Restarting Template Wizard...`);
document.querySelector(`#${this.windowID}`).remove();
new _WindowWizard(this.name, this.version, this.schemaVersionBleedingEdge, this.templateManager).buildWindow();
}
};
var WindowWizard = _WindowWizard;
// src/templateManager.js
var _TemplateManager_instances, restoreFilteredColorsFromSettings_fn, persistFilteredColors_fn, loadTemplate_fn, storeTemplates_fn, parseBlueMarble_fn, parseOSU_fn, calculateCorrectPixelsOnTile_And_FilterTile_fn;
var TemplateManager = class {
/** The constructor for the {@link TemplateManager} class.
* @param {string} name - The name of the userscript
* @param {string} version - The version of the userscript (SemVer as string)
* @since 0.55.8
*/
constructor(name2, version2) {
__privateAdd(this, _TemplateManager_instances);
this.name = name2;
this.version = version2;
this.windowMain = null;
this.settingsManager = null;
this.schemaVersion = "2.0.0";
this.userID = null;
this.encodingBase = "!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~";
this.tileSize = 1e3;
this.drawMult = 3;
this.paletteTolerance = 3;
this.paletteBM = colorpaletteForBlueMarble(this.paletteTolerance);
this.template = null;
this.templateState = "";
this.templatesArray = [];
this.templatesJSON = null;
this.templatesShouldBeDrawn = true;
this.templatePixelsCorrect = null;
this.shouldFilterColor = /* @__PURE__ */ new Map();
}
/** Updates the stored instance of the main window.
* @param {WindowMain} windowMain - The main window instance
* @since 0.91.54
*/
setWindowMain(windowMain2) {
this.windowMain = windowMain2;
}
/** Updates the stored instance of the SettingsManager.
* @param {SettingsManager} settingsManager - The settings manager instance
* @since 0.91.54
*/
setSettingsManager(settingsManager2) {
this.settingsManager = settingsManager2;
__privateMethod(this, _TemplateManager_instances, restoreFilteredColorsFromSettings_fn).call(this);
}
/** Updates whether a palette color should be hidden on the canvas.
* @param {number} colorID
* @param {boolean} shouldHide
* @since 0.92.1
*/
setColorFiltered(colorID, shouldHide) {
const parsedColorID = Number(colorID);
if (!Number.isFinite(parsedColorID)) {
return;
}
if (shouldHide) {
this.shouldFilterColor.set(parsedColorID, true);
} else {
this.shouldFilterColor.delete(parsedColorID);
}
__privateMethod(this, _TemplateManager_instances, persistFilteredColors_fn).call(this);
}
/** Creates the JSON object to store templates in
* @returns {{ whoami: string, scriptVersion: string, schemaVersion: string, templates: Object }} The JSON object
* @since 0.65.4
*/
async createJSON() {
return {
"whoami": this.name.replace(" ", ""),
// Name of userscript without spaces
"scriptVersion": this.version,
// Version of userscript
"schemaVersion": this.schemaVersion,
// Version of JSON schema
"templates": {}
// The templates
};
}
/** Creates the template from the inputed file blob
* @param {File} blob - The file blob to create a template from
* @param {string} name - The display name of the template
* @param {Array} coords - The coordinates of the top left corner of the template
* @since 0.65.77
*/
async createTemplate(blob, name2, coords2) {
if (!this.templatesJSON) {
this.templatesJSON = await this.createJSON();
console.log(`Creating JSON...`);
}
this.windowMain.handleDisplayStatus(`Creating template at ${coords2.join(", ")}...`);
const template = new Template({
displayName: name2,
sortID: 0,
// Object.keys(this.templatesJSON.templates).length || 0, // Uncomment this to enable multiple templates (1/2)
authorID: numberToEncoded(this.userID || 0, this.encodingBase),
file: blob,
coords: coords2
});
const shouldSkipTransTiles = !this.settingsManager?.userSettings?.flags?.includes("hl-noSkip");
const shouldAggSkipTransTiles = this.settingsManager?.userSettings?.flags?.includes("hl-agSkip");
console.log(`Should Skip: ${shouldSkipTransTiles}; Should Agg Skip: ${shouldAggSkipTransTiles}`);
const { templateTiles, templateTilesBuffers } = await template.createTemplateTiles(this.tileSize, this.paletteBM, shouldSkipTransTiles, shouldAggSkipTransTiles);
template.chunked = templateTiles;
const _pixels = { "total": template.pixelCount.total, "colors": Object.fromEntries(template.pixelCount.colors) };
this.templatesJSON.templates[`${template.sortID} ${template.authorID}`] = {
"name": template.displayName,
// Display name of template
"coords": coords2.join(", "),
// The coords of the template
"enabled": true,
"pixels": _pixels,
// The total pixels in the template
"tiles": templateTilesBuffers
// Stores the chunked tile buffers
};
this.templatesArray = [];
this.templatesArray.push(template);
this.windowMain.handleDisplayStatus(`Template created at ${coords2.join(", ")}!`);
console.log(Object.keys(this.templatesJSON.templates).length);
console.log(this.templatesJSON);
console.log(this.templatesArray);
console.log(JSON.stringify(this.templatesJSON));
await __privateMethod(this, _TemplateManager_instances, storeTemplates_fn).call(this);
}
/** Deletes a template from the JSON object.
* Also delete's the corrosponding {@link Template} class instance
*/
deleteTemplate() {
}
/** Disables the template from view
*/
async disableTemplate() {
if (!this.templatesJSON) {
this.templatesJSON = await this.createJSON();
console.log(`Creating JSON...`);
}
}
/** Downloads all templates loaded.
* @since 0.88.499
*/
async downloadAllTemplates() {
consoleLog(`Downloading all templates...`);
console.log(this.templatesArray);
for (const template of this.templatesArray) {
await this.downloadTemplate(template);
await sleep(500);
}
}
/** Downloads all templates from Blue Marble's template storage.
* @since 0.88.474
*/
async downloadAllTemplatesFromStorage() {
const templates = JSON.parse(GM_getValue("bmTemplates", "{}"))?.templates;
console.log(templates);
if (Object.keys(templates).length > 0) {
for (const [key, template] of Object.entries(templates)) {
if (templates.hasOwnProperty(key)) {
await this.downloadTemplate(new Template({
displayName: template.name,
sortID: key.split(" ")?.[0],
authorID: key.split(" ")?.[1],
chunked: template.tiles
}));
await sleep(500);
}
}
}
}
/** Downloads the template passed-in.
* @param {Template} template - The template class instance to download
* @since 0.88.499
*/
async downloadTemplate(template) {
template.calculateCoordsFromChunked();
const templateFileName = `${template.coords.join("-")}_${template.displayName.replaceAll(" ", "-")}`;
const blob = await this.convertTemplateToBlob(template);
await GM.download({
url: URL.createObjectURL(blob),
name: templateFileName + ".png",
conflictAction: "uniquify",
onload: () => {
consoleLog(`Download of template '${templateFileName}' complete!`);
},
onerror: (error, details) => {
consoleError(`Download of template '${templateFileName}' failed because ${error}! Details: ${details}`);
},
ontimeout: () => {
consoleWarn(`Download of template '${templateFileName}' has timed out!`);
}
});
}
/** Converts a Template class instance into a Blob.
* Specifically, this takes `Template.chunked` and converts it to a Blob.
* @since 0.88.504
* @returns {Promise} A Promise of a Blob PNG image of the template
*/
async convertTemplateToBlob(template) {
console.log(template);
const templateTiles64 = template.chunked;
const templateTileKeysSorted = Object.keys(templateTiles64).sort();
const templateTilesImageSorted = await Promise.all(templateTileKeysSorted.map((tileKey) => convertBase64ToImage(templateTiles64[tileKey])));
let absoluteSmallestX = Infinity;
let absoluteSmallestY = Infinity;
let absoluteLargestX = 0;
let absoluteLargestY = 0;
templateTileKeysSorted.forEach((key, index) => {
const [tileX, tileY, pixelX, pixelY] = key.split(",").map(Number);
const tileImage = templateTilesImageSorted[index];
const absoluteX = tileX * this.tileSize + pixelX;
const absoluteY = tileY * this.tileSize + pixelY;
absoluteSmallestX = Math.min(absoluteSmallestX, absoluteX);
absoluteSmallestY = Math.min(absoluteSmallestY, absoluteY);
absoluteLargestX = Math.max(absoluteLargestX, absoluteX + tileImage.width / this.drawMult);
absoluteLargestY = Math.max(absoluteLargestY, absoluteY + tileImage.height / this.drawMult);
});
console.log(`Absolute coordinates: (${absoluteSmallestX}, ${absoluteSmallestY}) and (${absoluteLargestX}, ${absoluteLargestY})`);
const templateWidth = absoluteLargestX - absoluteSmallestX;
const templateHeight = absoluteLargestY - absoluteSmallestY;
const canvasWidth = templateWidth * this.drawMult;
const canvasHeight = templateHeight * this.drawMult;
console.log(`Template Width: ${templateWidth}
Template Height: ${templateHeight}
Canvas Width: ${canvasWidth}
Canvas Height: ${canvasHeight}`);
const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
const context = canvas.getContext("2d");
templateTileKeysSorted.forEach((key, index) => {
const [tileX, tileY, pixelX, pixelY] = key.split(",").map(Number);
const tileImage = templateTilesImageSorted[index];
const absoluteX = tileX * this.tileSize + pixelX;
const absoluteY = tileY * this.tileSize + pixelY;
console.log(`Drawing tile (${tileX}, ${tileY}, ${pixelX}, ${pixelY}) (${absoluteX}, ${absoluteY}) at (${absoluteX - absoluteSmallestX}, ${absoluteY - absoluteSmallestY}) on the canvas...`);
context.drawImage(tileImage, (absoluteX - absoluteSmallestX) * this.drawMult, (absoluteY - absoluteSmallestY) * this.drawMult, tileImage.width, tileImage.height);
});
context.globalCompositeOperation = "destination-over";
context.drawImage(canvas, 0, -1);
context.drawImage(canvas, 0, 1);
context.drawImage(canvas, -1, 0);
context.drawImage(canvas, 1, 0);
const smallCanvas = new OffscreenCanvas(templateWidth, templateHeight);
const smallContext = smallCanvas.getContext("2d");
smallContext.imageSmoothingEnabled = false;
smallContext.drawImage(
canvas,
0,
0,
templateWidth * this.drawMult,
templateHeight * this.drawMult,
// Source image size
0,
0,
templateWidth,
templateHeight
// Small canvas size
);
return smallCanvas.convertToBlob({ type: "image/png" });
function convertBase64ToImage(base64) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.src = "data:image/png;base64," + base64;
});
}
}
/** Draws all templates on the specified tile.
* This method handles the rendering of template overlays on individual tiles.
* @param {File} tileBlob - The pixels that are placed on a tile
* @param {Array} tileCoords - The tile coordinates [x, y]
* @since 0.65.77
*/
async drawTemplateOnTile(tileBlob, tileCoords) {
if (!this.templatesShouldBeDrawn) {
return tileBlob;
}
const drawSize = this.tileSize * this.drawMult;
tileCoords = tileCoords[0].toString().padStart(4, "0") + "," + tileCoords[1].toString().padStart(4, "0");
console.log(`Searching for templates in tile: "${tileCoords}"`);
const templateArray = this.templatesArray;
console.log(templateArray);
templateArray.sort((a, b) => {
return a.sortID - b.sortID;
});
console.log(templateArray);
const templatesToDraw = templateArray.map((template) => {
const matchingTiles = Object.keys(template.chunked).filter(
(tile) => tile.startsWith(tileCoords)
);
if (matchingTiles.length === 0) {
return null;
}
const matchingTileBlobs = matchingTiles.map((tile) => {
const coords2 = tile.split(",");
return {
instance: template,
bitmap: template.chunked[tile],
chunked32: template.chunked32?.[tile],
tileCoords: [coords2[0], coords2[1]],
pixelCoords: [coords2[2], coords2[3]]
};
});
return matchingTileBlobs?.[0];
}).filter(Boolean);
console.log(templatesToDraw);
const templateCount = templatesToDraw?.length || 0;
console.log(`templateCount = ${templateCount}`);
if (templateCount > 0) {
const totalPixels = templateArray.filter((template) => {
const matchingTiles = Object.keys(template.chunked).filter(
(tile) => tile.startsWith(tileCoords)
);
return matchingTiles.length > 0;
}).reduce((sum, template) => sum + (template.pixelCount.total || 0), 0);
const pixelCountFormatted = localizeNumber(totalPixels);
this.windowMain.handleDisplayStatus(
`Displaying ${templateCount} template${templateCount == 1 ? "" : "s"}.
Total pixels: ${pixelCountFormatted}`
);
} else {
this.windowMain.handleDisplayStatus(`Sleeping
Version: ${this.version}`);
return tileBlob;
}
const tileBitmap = await createImageBitmap(tileBlob);
const canvas = new OffscreenCanvas(drawSize, drawSize);
const context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;
context.beginPath();
context.rect(0, 0, drawSize, drawSize);
context.clip();
context.clearRect(0, 0, drawSize, drawSize);
context.drawImage(tileBitmap, 0, 0, drawSize, drawSize);
const tileBeforeTemplates = context.getImageData(0, 0, drawSize, drawSize);
const tileBeforeTemplates32 = new Uint32Array(tileBeforeTemplates.data.buffer);
const highlightPattern = this.settingsManager?.userSettings?.highlight || [[2, 0, 0]];
const highlightPatternIndexZero = highlightPattern?.[0];
const highlightDisabled = highlightPattern?.length == 1 && highlightPatternIndexZero?.[0] == 2 && highlightPatternIndexZero?.[1] == 0 && highlightPatternIndexZero?.[2] == 0;
for (const template of templatesToDraw) {
console.log(`Template:`);
console.log(template);
const templateHasErased = !!template.instance.pixelCount?.colors?.get(-1);
let templateBeforeFilter32 = template.chunked32.slice();
const coordXtoDrawAt = Number(template.pixelCoords[0]) * this.drawMult;
const coordYtoDrawAt = Number(template.pixelCoords[1]) * this.drawMult;
if (this.shouldFilterColor.size == 0 && !templateHasErased) {
context.drawImage(template.bitmap, coordXtoDrawAt, coordYtoDrawAt);
}
if (!templateBeforeFilter32) {
const templateBeforeFilter = context.getImageData(coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height);
templateBeforeFilter32 = new Uint32Array(templateBeforeFilter.data.buffer);
}
const timer = Date.now();
const {
correctPixels: pixelsCorrect,
filteredTemplate: templateAfterFilter
} = __privateMethod(this, _TemplateManager_instances, calculateCorrectPixelsOnTile_And_FilterTile_fn).call(this, {
tile: tileBeforeTemplates32,
template: templateBeforeFilter32,
templateInfo: [coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height],
highlightPattern,
highlightDisabled
});
let pixelsCorrectTotal = 0;
const transparentColorID = 0;
for (const [color, total] of pixelsCorrect) {
if (color == transparentColorID) {
continue;
}
pixelsCorrectTotal += total;
}
if (this.shouldFilterColor.size != 0 || templateHasErased || !highlightDisabled) {
console.log("Colors to filter: ", this.shouldFilterColor);
context.drawImage(await createImageBitmap(new ImageData(new Uint8ClampedArray(templateAfterFilter.buffer), template.bitmap.width, template.bitmap.height)), coordXtoDrawAt, coordYtoDrawAt);
}
console.log(`Finished calculating correct pixels & filtering colors for the tile ${tileCoords} in ${(Date.now() - timer) / 1e3} seconds!
There are ${pixelsCorrectTotal} correct pixels.`);
if (typeof template.instance.pixelCount["correct"] == "undefined") {
template.instance.pixelCount["correct"] = {};
}
template.instance.pixelCount["correct"][tileCoords] = pixelsCorrect;
}
return await canvas.convertToBlob({ type: "image/png" });
}
/** Imports the JSON object, and appends it to any JSON object already loaded
* @param {string} json - The JSON string to parse
*/
async importJSON(json) {
console.log(`Importing JSON...`);
console.log(json);
if (json?.whoami == "BlueMarble") {
await __privateMethod(this, _TemplateManager_instances, parseBlueMarble_fn).call(this, json);
}
}
/** Sets the `templatesShouldBeDrawn` boolean to a value.
* @param {boolean} value - The value to set the boolean to
* @since 0.73.7
*/
setTemplatesShouldBeDrawn(value) {
this.templatesShouldBeDrawn = value;
}
};
_TemplateManager_instances = new WeakSet();
/** Restores hidden colors from persisted user settings.
* @since 0.92.1
*/
restoreFilteredColorsFromSettings_fn = function() {
const storedFilter = this.settingsManager?.userSettings?.filter;
const filteredColors = Array.isArray(storedFilter) ? storedFilter : [];
this.shouldFilterColor.clear();
for (const colorID of filteredColors) {
const parsedColorID = Number(colorID);
if (!Number.isFinite(parsedColorID)) {
continue;
}
this.shouldFilterColor.set(parsedColorID, true);
}
};
/** Persists hidden colors to user settings storage.
* @since 0.92.1
*/
persistFilteredColors_fn = function() {
if (!this.settingsManager) {
return;
}
this.settingsManager.userSettings.filter = Array.from(this.shouldFilterColor.keys()).map((colorID) => Number(colorID)).filter((colorID) => Number.isFinite(colorID)).sort((a, b) => a - b);
void this.settingsManager.saveUserStorageNow();
};
/** Generates a {@link Template} class instance from the JSON object template.
* {@link createTemplate()} will create a class instance and save to template storage.
* `#loadTemplate()` will create a class instance without saving to the template storage.
* @param {Object} template - The template to load
* @since 0.88.504
*/
loadTemplate_fn = function(templateObject) {
const pixelCount = {
total: templateObject.pixels?.total,
colors: new Map(Object.entries(templateObject.pixels?.colors || {}).map(([key, value]) => [Number(key), value]))
};
const template = new Template({
displayName: templateObject.displayName,
sortID: Object.keys(this.templatesJSON.templates).length || 0,
authorID: numberToEncoded(this.userID || 0, this.encodingBase),
pixelCount,
chunked: templateObject.tiles
});
template.calculateCoordsFromChunked();
this.templatesArray.push(template);
};
storeTemplates_fn = async function() {
GM.setValue("bmTemplates", JSON.stringify(this.templatesJSON));
};
parseBlueMarble_fn = async function(json) {
console.log(`Parsing BlueMarble...`);
const templates = json.templates;
console.log(`BlueMarble length: ${Object.keys(templates).length}`);
const schemaVersion = json?.schemaVersion;
const schemaVersionArray = schemaVersion.split(/[-\.\+]/);
const schemaVersionBleedingEdge = this.schemaVersion.split(/[-\.\+]/);
const scriptVersion = json?.scriptVersion;
console.log(`BlueMarble Template Schema: ${schemaVersion}; Script Version: ${scriptVersion}`);
if (schemaVersionArray[0] == schemaVersionBleedingEdge[0]) {
if (schemaVersionArray[1] != schemaVersionBleedingEdge[1]) {
const windowWizard = new WindowWizard(this.name, this.version, this.schemaVersion, this);
windowWizard.buildWindow();
}
this.templatesArray = await loadSchema({
tileSize: this.tileSize,
drawMult: this.drawMult,
templatesArray: this.templatesArray
});
} else if (schemaVersionArray[0] < schemaVersionBleedingEdge[0]) {
const windowWizard = new WindowWizard(this.name, this.version, this.schemaVersion, this);
windowWizard.buildWindow();
} else {
this.windowMain.handleDisplayError(`Template version ${schemaVersion} is unsupported.
Use Blue Marble version ${scriptVersion} or load a new template.`);
}
async function loadSchema({
tileSize,
drawMult,
templatesArray
}) {
if (Object.keys(templates).length > 0) {
for (const template in templates) {
const templateKey = template;
const templateValue = templates[template];
console.log(`Template Key: ${templateKey}`);
if (templates.hasOwnProperty(template)) {
const templateKeyArray = templateKey.split(" ");
const sortID = Number(templateKeyArray?.[0]);
const authorID = templateKeyArray?.[1] || "0";
const displayName = templateValue.name || `Template ${sortID || ""}`;
const pixelCount = {
total: templateValue.pixels?.total,
colors: new Map(Object.entries(templateValue.pixels?.colors || {}).map(([key, value]) => [Number(key), value]))
};
const tilesbase64 = templateValue.tiles;
const templateTiles = {};
const templateTiles32 = {};
const actualTileSize = tileSize * drawMult;
for (const tile in tilesbase64) {
console.log(tile);
if (tilesbase64.hasOwnProperty(tile)) {
const encodedTemplateBase64 = tilesbase64[tile];
const templateUint8Array = base64ToUint8(encodedTemplateBase64);
const templateBlob = new Blob([templateUint8Array], { type: "image/png" });
const templateBitmap = await createImageBitmap(templateBlob);
templateTiles[tile] = templateBitmap;
const canvas = new OffscreenCanvas(actualTileSize, actualTileSize);
const context = canvas.getContext("2d");
context.drawImage(templateBitmap, 0, 0);
const imageData = context.getImageData(0, 0, templateBitmap.width, templateBitmap.height);
templateTiles32[tile] = new Uint32Array(imageData.data.buffer);
}
}
const template2 = new Template({
displayName,
sortID: sortID || this.templatesArray?.length || 0,
authorID: authorID || ""
//coords: coords,
});
template2.pixelCount = pixelCount;
template2.chunked = templateTiles;
template2.chunked32 = templateTiles32;
templatesArray.push(template2);
console.log(this.templatesArray);
console.log(`^^^ This ^^^`);
}
}
}
return templatesArray;
}
};
/** Parses the OSU! Place JSON object
*/
parseOSU_fn = function() {
};
/** Calculates the correct pixels on this tile.
* In addition, this function filters colors based on user input.
* In addition, this function modifies colors to properly display (#deface).
* In addition, this function modifies incorrect pixels to display highlighting.
* This function has multiple purposes only to reduce iterations of scans over every pixel on the template.
* @param {Object} params - Object containing all parameters
* @param {Uint32Array} params.tile - The tile without templates as a Uint32Array
* @param {Uint32Array} params.template - The template without filtering as a Uint32Array
* @param {Array} params.templateInfo - Information about template location and size
* @param {Array} params.highlightPattern - The highlight pattern selected by the user
* @param {boolean} params.highlightDisabled - Should highlighting be disabled?
* @returns {{correctPixels: Map, filteredTemplate: Uint32Array}} A Map containing the color IDs (keys) and how many correct pixels there are for that color (values)
*/
calculateCorrectPixelsOnTile_And_FilterTile_fn = function({
tile: tile32,
template: template32,
templateInfo: templateInformation,
highlightPattern,
highlightDisabled
}) {
const pixelSize = this.drawMult;
const tileWidth = this.tileSize * pixelSize;
const tileHeight = tileWidth;
const tilePixelOffsetY = -1;
const tilePixelOffsetX = 0;
const templateCoordX = templateInformation[0];
const templateCoordY = templateInformation[1];
const templateWidth = templateInformation[2];
const templateHeight = templateInformation[3];
const tolerance = this.paletteTolerance;
const shouldTransparentTilePixelsBeHighlighted = !this.settingsManager?.userSettings?.flags?.includes("hl-noTrans");
const { palette: _, LUT: lookupTable } = this.paletteBM;
const _colorpalette = /* @__PURE__ */ new Map();
for (let templateRow = 1; templateRow < templateHeight; templateRow += pixelSize) {
for (let templateColumn = 1; templateColumn < templateWidth; templateColumn += pixelSize) {
const tileRow = templateCoordY + templateRow + tilePixelOffsetY;
const tileColumn = templateCoordX + templateColumn + tilePixelOffsetX;
const tilePixelAbove = tile32[tileRow * tileWidth + tileColumn];
const templatePixel = template32[templateRow * templateWidth + templateColumn];
const templatePixelAlpha = templatePixel >>> 24 & 255;
const tilePixelAlpha = tilePixelAbove >>> 24 & 255;
const bestTemplateColorID = lookupTable.get(templatePixel) ?? -2;
const bestTileColorID = lookupTable.get(tilePixelAbove) ?? -2;
if (this.shouldFilterColor.get(bestTemplateColorID)) {
template32[templateRow * templateWidth + templateColumn] = tilePixelAbove;
}
if (bestTemplateColorID == -1) {
const blackTrans = 536870912;
if (this.shouldFilterColor.get(bestTemplateColorID)) {
template32[templateRow * templateWidth + templateColumn] = 0;
} else {
if ((tileRow / pixelSize & 1) == (tileColumn / pixelSize & 1)) {
template32[templateRow * templateWidth + templateColumn] = blackTrans;
template32[(templateRow - 1) * templateWidth + (templateColumn - 1)] = blackTrans;
template32[(templateRow - 1) * templateWidth + (templateColumn + 1)] = blackTrans;
template32[(templateRow + 1) * templateWidth + (templateColumn - 1)] = blackTrans;
template32[(templateRow + 1) * templateWidth + (templateColumn + 1)] = blackTrans;
} else {
template32[templateRow * templateWidth + templateColumn] = 0;
template32[(templateRow - 1) * templateWidth + templateColumn] = blackTrans;
template32[(templateRow + 1) * templateWidth + templateColumn] = blackTrans;
template32[templateRow * templateWidth + (templateColumn - 1)] = blackTrans;
template32[templateRow * templateWidth + (templateColumn + 1)] = blackTrans;
}
}
}
if (!highlightDisabled && templatePixelAlpha > tolerance && bestTileColorID != bestTemplateColorID) {
if (shouldTransparentTilePixelsBeHighlighted || tilePixelAlpha > tolerance) {
const templatePixelColor = template32[templateRow * templateWidth + templateColumn];
for (const subpixelPattern of highlightPattern) {
const [subpixelState, subpixelColumnDelta, subpixelRowDelta] = subpixelPattern;
const subpixelColor = subpixelState != 0 ? subpixelState != 1 ? templatePixelColor : 4278190335 : 0;
template32[(templateRow + subpixelRowDelta) * templateWidth + (templateColumn + subpixelColumnDelta)] = subpixelColor;
}
}
}
if (bestTemplateColorID == -1 && tilePixelAbove <= tolerance) {
const colorIDcount2 = _colorpalette.get(bestTemplateColorID);
_colorpalette.set(bestTemplateColorID, colorIDcount2 ? colorIDcount2 + 1 : 1);
continue;
}
if (templatePixelAlpha <= tolerance || tilePixelAlpha <= tolerance) {
continue;
}
if (bestTileColorID != bestTemplateColorID) {
continue;
}
const colorIDcount = _colorpalette.get(bestTemplateColorID);
_colorpalette.set(bestTemplateColorID, colorIDcount ? colorIDcount + 1 : 1);
}
}
console.log(`List of template pixels that match the tile:`);
console.log(_colorpalette);
return { correctPixels: _colorpalette, filteredTemplate: template32 };
};
// src/apiManager.js
var ApiManager = class {
/** Constructor for ApiManager class
* @param {TemplateManager} templateManager
* @since 0.11.34
*/
constructor(templateManager2) {
this.templateManager = templateManager2;
this.disableAll = false;
this.chargeRefillTimerID = "";
this.coordsTilePixel = [];
this.templateCoordsTilePixel = [];
}
/** Determines if the spontaneously received response is something we want.
* Otherwise, we can ignore it.
* Note: Due to aggressive compression, make your calls like `data['jsonData']['name']` instead of `data.jsonData.name`
*
* @param {Overlay} overlay - The Overlay class instance
* @since 0.11.1
*/
spontaneousResponseListener(overlay) {
window.addEventListener("message", async (event) => {
const data = event.data;
const dataJSON = data["jsonData"];
if (!(data && data["source"] === "blue-marble")) {
return;
}
if (!data["endpoint"]) {
return;
}
const endpointText = data["endpoint"]?.split("?")[0].split("/").filter((s) => s && isNaN(Number(s))).filter((s) => s && !s.includes(".")).pop();
console.log(`%cBlue Marble%c: Recieved message about "%s"`, "color: cornflowerblue;", "", endpointText);
switch (endpointText) {
case "me":
this.applyUserDataToOverlay(overlay, dataJSON);
break;
case "pixel":
const coordsTile = data["endpoint"].split("?")[0].split("/").filter((s) => s && !isNaN(Number(s)));
const payloadExtractor = new URLSearchParams(data["endpoint"].split("?")[1]);
const coordsPixel = [payloadExtractor.get("x"), payloadExtractor.get("y")];
if (this.coordsTilePixel.length && (!coordsTile.length || !coordsPixel.length)) {
overlay.handleDisplayError(`Coordinates are malformed!
Did you try clicking the canvas first?`);
return;
}
this.coordsTilePixel = [...coordsTile, ...coordsPixel];
const displayTP = serverTPtoDisplayTP(coordsTile, coordsPixel);
const spanElements = document.querySelectorAll("span");
for (const element of spanElements) {
const elementTextTrimmed = element.textContent.trim();
if (elementTextTrimmed.includes(displayTP[0]) && elementTextTrimmed.includes(displayTP[1])) {
let displayCoords = document.querySelector("#bm-display-coords");
const text = `(Tl X: ${coordsTile[0]}, Tl Y: ${coordsTile[1]}, Px X: ${coordsPixel[0]}, Px Y: ${coordsPixel[1]})`;
const coordsLabel = ["Tl X:", "Tl Y:", "Px X:", "Px Y:"];
const coordsID = ["bm-tile-x", "bm-tile-y", "bm-pixel-x", "bm-pixel-y"];
const coordsCombined = [...coordsTile, ...coordsPixel];
if (!displayCoords) {
displayCoords = document.createElement("span");
displayCoords.id = "bm-display-coords";
displayCoords.style = "display: flex; flex-wrap: wrap; gap: 0 1ch; font-size: small;";
for (const [coordIndex, coordValue] of coordsCombined.entries()) {
const coordElement = document.createElement("span");
coordElement.id = coordsID[coordsCombined.indexOf(coordValue) ?? ""];
coordElement.textContent = `${coordsLabel[coordIndex] ?? "??:"} ${coordValue}`;
displayCoords.appendChild(coordElement);
}
element.parentNode.parentNode.parentNode.insertAdjacentElement("afterend", displayCoords);
} else {
for (const [coordIndex, coordID] of coordsID.entries()) {
const coordElement = document.getElementById(coordID);
coordElement.textContent = `${coordsLabel[coordIndex] ?? "??:"} ${coordsCombined[coordIndex]}`;
}
}
}
}
break;
case "tile":
case "tiles":
let tileCoordsTile = data["endpoint"].split("/");
tileCoordsTile = [parseInt(tileCoordsTile[tileCoordsTile.length - 2]), parseInt(tileCoordsTile[tileCoordsTile.length - 1].replace(".png", ""))];
const blobUUID = data["blobID"];
const blobData = data["blobData"];
const timer = Date.now();
const templateBlob = await this.templateManager.drawTemplateOnTile(blobData, tileCoordsTile);
console.log(`Finished loading the tile in ${(Date.now() - timer) / 1e3} seconds!`);
window.postMessage({
source: "blue-marble",
blobID: blobUUID,
blobData: templateBlob,
blink: data["blink"]
});
break;
case "robots":
this.disableAll = dataJSON["userscript"]?.toString().toLowerCase() == "false";
break;
}
});
}
/** Applies user data from the /me endpoint to the current overlay.
* @param {Overlay} overlay
* @param {Object.} dataJSON
* @since 0.92.1
*/
applyUserDataToOverlay(overlay, dataJSON) {
if (dataJSON["status"] && dataJSON["status"]?.toString()[0] != "2") {
overlay.handleDisplayError(`You are not logged in or Wplace is offline!
Could not fetch userdata.`);
return;
}
const nextLevelPixels = Math.ceil(Math.pow(Math.floor(dataJSON["level"]) * Math.pow(30, 0.65), 1 / 0.65) - dataJSON["pixelsPainted"]);
console.log(dataJSON["id"]);
if (!!dataJSON["id"] || dataJSON["id"] === 0) {
console.log(numberToEncoded(
dataJSON["id"],
"!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~"
));
}
this.templateManager.userID = dataJSON["id"];
if (this.chargeRefillTimerID.length != 0) {
const chargeRefillTimer = document.querySelector("#" + this.chargeRefillTimerID);
if (chargeRefillTimer) {
const chargeData = dataJSON["charges"];
chargeRefillTimer.dataset["endDate"] = Date.now() + (chargeData["max"] - chargeData["count"]) * chargeData["cooldownMs"];
}
}
overlay.updateInnerHTML("bm-user-droplets", `${localizeNumber(dataJSON["droplets"])} `);
overlay.updateInnerHTML("bm-user-nextlevel", `${localizeNumber(nextLevelPixels)} px`);
}
/** Requests the current /me payload directly so the overlay has initial user data
* even if the first network response was missed during startup.
* @param {Overlay} overlay
* @since 0.92.1
*/
async requestCurrentUserData(overlay) {
try {
const response = await fetch(`${window.location.origin}/api/me`, {
credentials: "include"
});
if (!response.ok) {
overlay.handleDisplayError(`Could not fetch userdata.
HTTP ${response.status}`);
return;
}
const dataJSON = await response.json();
this.applyUserDataToOverlay(overlay, dataJSON);
} catch (error) {
consoleError("Failed to fetch current user data:", error);
}
}
/** Applies cached /me data from sessionStorage if it was captured during early startup.
* @param {Overlay} overlay
* @returns {boolean}
* @since 0.92.1
*/
applyCachedUserData(overlay) {
try {
const cached = sessionStorage.getItem("bm-last-me");
if (!cached) {
return false;
}
const dataJSON = JSON.parse(cached);
this.applyUserDataToOverlay(overlay, dataJSON);
return true;
} catch (error) {
consoleError("Failed to apply cached user data:", error);
return false;
}
}
// Sends a heartbeat to the telemetry server
async sendHeartbeat(version2) {
console.log("Sending heartbeat to telemetry server...");
let userSettings2 = GM_getValue("bmUserSettings", "{}");
userSettings2 = JSON.parse(userSettings2);
if (!userSettings2 || !userSettings2.telemetry || !userSettings2.uuid) {
console.log("Telemetry is disabled, not sending heartbeat.");
return;
}
const ua = navigator.userAgent;
let browser = await this.getBrowserFromUA(ua);
let os = this.getOS(ua);
GM_xmlhttpRequest({
method: "POST",
url: "https://telemetry.thebluecorner.net/heartbeat",
headers: {
"Content-Type": "application/json"
},
data: JSON.stringify({
uuid: userSettings2.uuid,
version: version2,
browser,
os
}),
onload: (response) => {
if (response.status !== 200) {
consoleError("Failed to send heartbeat:", response.statusText);
}
},
onerror: (error) => {
consoleError("Error sending heartbeat:", error);
}
});
}
async getBrowserFromUA(ua = navigator.userAgent) {
ua = ua || "";
if (ua.includes("OPR/") || ua.includes("Opera")) return "Opera";
if (ua.includes("Edg/")) return "Edge";
if (ua.includes("Vivaldi")) return "Vivaldi";
if (ua.includes("YaBrowser")) return "Yandex";
if (ua.includes("Kiwi")) return "Kiwi";
if (ua.includes("Brave")) return "Brave";
if (ua.includes("Firefox/")) return "Firefox";
if (ua.includes("Chrome/")) return "Chrome";
if (ua.includes("Safari/")) return "Safari";
if (navigator.brave && typeof navigator.brave.isBrave === "function") {
if (await navigator.brave.isBrave()) return "Brave";
}
return "Unknown";
}
getOS(ua = navigator.userAgent) {
ua = ua || "";
if (/Windows NT 11/i.test(ua)) return "Windows 11";
if (/Windows NT 10/i.test(ua)) return "Windows 10";
if (/Windows NT 6\.3/i.test(ua)) return "Windows 8.1";
if (/Windows NT 6\.2/i.test(ua)) return "Windows 8";
if (/Windows NT 6\.1/i.test(ua)) return "Windows 7";
if (/Windows NT 6\.0/i.test(ua)) return "Windows Vista";
if (/Windows NT 5\.1|Windows XP/i.test(ua)) return "Windows XP";
if (/Mac OS X 10[_\.]15/i.test(ua)) return "macOS Catalina";
if (/Mac OS X 10[_\.]14/i.test(ua)) return "macOS Mojave";
if (/Mac OS X 10[_\.]13/i.test(ua)) return "macOS High Sierra";
if (/Mac OS X 10[_\.]12/i.test(ua)) return "macOS Sierra";
if (/Mac OS X 10[_\.]11/i.test(ua)) return "OS X El Capitan";
if (/Mac OS X 10[_\.]10/i.test(ua)) return "OS X Yosemite";
if (/Mac OS X 10[_\.]/i.test(ua)) return "macOS";
if (/Android/i.test(ua)) return "Android";
if (/iPhone|iPad|iPod/i.test(ua)) return "iOS";
if (/Linux/i.test(ua)) return "Linux";
return "Unknown";
}
};
// src/WindowTelemetry.js
var _WindowTelemetry_instances, setTelemetryValue_fn;
var WindowTelemetry = class extends Overlay {
/** Constructor for the telemetry window
* @param {string} name - The name of the userscript
* @param {string} version - The version of the userscript
* @param {number} currentTelemetryVersion - The current "version" of the data collection agreement
* @param {string} uuid - The UUID of the user
* @since 0.88.339
* @see {@link Overlay#constructor}
*/
constructor(name2, version2, currentTelemetryVersion2, uuid) {
super(name2, version2);
__privateAdd(this, _WindowTelemetry_instances);
this.window = null;
this.windowID = "bm-window-telemetry";
this.windowParent = document.body;
this.currentTelemetryVersion = currentTelemetryVersion2;
this.uuid = uuid;
}
/** Spawns a telemetry window.
* If another telemetry window already exists, we DON'T spawn another!
* Parent/child relationships in the DOM structure below are indicated by indentation.
* @since 0.88.339
*/
async buildWindow() {
if (document.querySelector(`#${this.windowID}`)) {
this.handleDisplayError("Telemetry window already exists!");
return;
}
const browser = await this.apiManager.getBrowserFromUA(navigator.userAgent);
const os = this.apiManager.getOS(navigator.userAgent);
this.window = this.addDiv({ "id": this.windowID, "class": "bm-window", "style": "height: 80vh; z-index: 9998;" }).addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container bm-center-vertically" }).addHeader(1, { "textContent": `${this.name} Telemetry` }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-flex-center", "style": "gap: 1.5ch; flex-wrap: wrap;" }).addButton({ "textContent": "Enable Telemetry" }, (instance, button) => {
button.onclick = () => {
__privateMethod(this, _WindowTelemetry_instances, setTelemetryValue_fn).call(this, this.currentTelemetryVersion);
const element = document.getElementById(this.windowID);
element?.remove();
};
}).buildElement().addButton({ "textContent": "Disable Telemetry" }, (instance, button) => {
button.onclick = () => {
__privateMethod(this, _WindowTelemetry_instances, setTelemetryValue_fn).call(this, 0);
const element = document.getElementById(this.windowID);
element?.remove();
};
}).buildElement().addButton({ "textContent": "More Information" }, (instance, button) => {
button.onclick = () => {
window.open("https://github.com/SwingTheVine/Wplace-TelemetryServer#telemetry-data", "_blank", "noopener noreferrer");
};
}).buildElement().buildElement().addDiv({ "class": "bm-container bm-scrollable" }).addDiv({ "class": "bm-container" }).addHeader(2, { "textContent": "Legal" }).buildElement().addP({ "textContent": `We collect anonymous telemetry data such as your browser, OS, and script version to make the experience better for everyone. The data is never shared personally. The data is never sold. You can turn this off by pressing the "Disable" button, but keeping it on helps us improve features and reliability faster. Thank you for supporting ${this.name}!` }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addHeader(2, { "textContent": "Non-Legal Summary" }).buildElement().addP({ "innerHTML": `You can disable telemetry by pressing the "Disable" button. If you would like to read more about what information we collect, press the "More Information" button.stored on our servers:` }).buildElement().addUl().addLi({ "innerHTML": `A unique identifier (UUIDv4) generated by Blue Marble. This enables our telemetry to function without tracking your actual user ID.${escapeHTML(this.uuid)} ` }).buildElement().addLi({ "innerHTML": `The version of Blue Marble you are using.${escapeHTML(this.version)} ` }).buildElement().addLi({ "innerHTML": `Your browser type, which is used to determine Blue Marble outages and browser popularity.${escapeHTML(browser)} ` }).buildElement().addLi({ "innerHTML": `Your OS type, which is used to determine Blue Marble outages and OS popularity.${escapeHTML(os)} ` }).buildElement().addLi({ "innerHTML": `The date and time that Blue Marble sent the telemetry information.` }).buildElement().buildElement().addP({ "innerHTML": `All of the data mentioned above is aggregated every hour . This means every hour, anything that could even remotly be considered "personal data" is deleted from our server. Here, "aggregated" data means things like "42 people used Blue Marble on Google Chrome this hour", which can't be used to identify anyone in particular.` }).buildElement().buildElement().buildElement().buildElement().buildElement().buildOverlay(this.windowParent);
}
};
_WindowTelemetry_instances = new WeakSet();
/** Enables or disables telemetry based on the value passed in.
* A value of zero will always disable telemetry.
* A numeric, non-zero value will enable telemetry until the telemetry agreement is changed.
* @param {number} value - The value to set the telemetry to
* @since 0.88.339
*/
setTelemetryValue_fn = function(value) {
const userSettings2 = JSON.parse(GM_getValue("bmUserSettings", "{}"));
userSettings2.telemetry = value;
GM.setValue("bmUserSettings", JSON.stringify(userSettings2));
};
// src/main.js
var name = GM_info.script.name.toString();
var version = GM_info.script.version.toString();
var consoleStyle = "color: cornflowerblue;";
function inject(callback) {
const script = document.createElement("script");
script.setAttribute("bm-name", name);
script.setAttribute("bm-cStyle", consoleStyle);
script.textContent = `(${callback})();`;
document.documentElement?.appendChild(script);
script.remove();
}
inject(() => {
const script = document.currentScript;
const name2 = script?.getAttribute("bm-name") || "Blue Marble";
const consoleStyle2 = script?.getAttribute("bm-cStyle") || "";
const fetchedBlobQueue = /* @__PURE__ */ new Map();
window.addEventListener("message", (event) => {
const { source, endpoint, blobID, blobData, blink } = event.data;
const elapsed = Date.now() - blink;
console.groupCollapsed(`%c${name2}%c: ${fetchedBlobQueue.size} Recieved IMAGE message about blob "${blobID}"`, consoleStyle2, "");
console.log(`Blob fetch took %c${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String(Math.floor(elapsed / 1e3) % 60).padStart(2, "0")}.${String(elapsed % 1e3).padStart(3, "0")}%c MM:SS.mmm`, consoleStyle2, "");
console.log(fetchedBlobQueue);
console.groupEnd();
if (source == "blue-marble" && !!blobID && !!blobData && !endpoint) {
const callback = fetchedBlobQueue.get(blobID);
if (typeof callback === "function") {
callback(blobData);
} else {
consoleWarn(`%c${name2}%c: Attempted to retrieve a blob (%s) from queue, but the blobID was not a function! Skipping...`, consoleStyle2, "", blobID);
}
fetchedBlobQueue.delete(blobID);
}
});
const originalFetch = window.fetch;
window.fetch = async function(...args) {
const response = await originalFetch.apply(this, args);
const cloned = response.clone();
const endpointName = (args[0] instanceof Request ? args[0]?.url : args[0]) || "ignore";
const contentType = cloned.headers.get("content-type") || "";
if (contentType.includes("application/json")) {
console.log(`%c${name2}%c: Sending JSON message about endpoint "${endpointName}"`, consoleStyle2, "");
cloned.json().then((jsonData) => {
const endpointText = endpointName?.split("?")[0].split("/").filter((s) => s && isNaN(Number(s))).filter((s) => s && !s.includes(".")).pop();
if (endpointText == "me") {
try {
sessionStorage.setItem("bm-last-me", JSON.stringify(jsonData));
} catch (error) {
console.warn(`%c${name2}%c: Failed to cache "/me" payload`, consoleStyle2, "", error);
}
}
window.postMessage({
source: "blue-marble",
endpoint: endpointName,
jsonData
}, "*");
}).catch((err) => {
console.error(`%c${name2}%c: Failed to parse JSON: `, consoleStyle2, "", err);
});
} else if (contentType.includes("image/") && (!endpointName.includes("openfreemap") && !endpointName.includes("maps"))) {
const blink = Date.now();
const blob = await cloned.blob();
console.log(`%c${name2}%c: ${fetchedBlobQueue.size} Sending IMAGE message about endpoint "${endpointName}"`, consoleStyle2, "");
return new Promise((resolve) => {
const blobUUID = crypto.randomUUID();
fetchedBlobQueue.set(blobUUID, (blobProcessed) => {
resolve(new Response(blobProcessed, {
headers: cloned.headers,
status: cloned.status,
statusText: cloned.statusText
}));
console.log(`%c${name2}%c: ${fetchedBlobQueue.size} Processed blob "${blobUUID}"`, consoleStyle2, "");
});
window.postMessage({
source: "blue-marble",
endpoint: endpointName,
blobID: blobUUID,
blobData: blob,
blink
});
}).catch((exception) => {
const elapsed = Date.now();
console.error(`%c${name2}%c: Failed to Promise blob!`, consoleStyle2, "");
console.groupCollapsed(`%c${name2}%c: Details of failed blob Promise:`, consoleStyle2, "");
console.log(`Endpoint: ${endpointName}
There are ${fetchedBlobQueue.size} blobs processing...
Blink: ${blink.toLocaleString()}
Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String(Math.floor(elapsed / 1e3) % 60).padStart(2, "0")}.${String(elapsed % 1e3).padStart(3, "0")} MM:SS.mmm`);
console.error(`Exception stack:`, exception);
console.groupEnd();
});
}
return response;
};
});
var cssOverlay = GM_getResourceText("CSS-BM-File");
GM_addStyle(cssOverlay);
function appendFontStylesheet(href) {
const stylesheetLink = document.createElement("link");
stylesheetLink.href = href;
stylesheetLink.rel = "preload";
stylesheetLink.as = "style";
stylesheetLink.onload = function() {
this.onload = null;
this.rel = "stylesheet";
};
document.head?.appendChild(stylesheetLink);
}
var robotoMonoInjectionPoint = "robotoMonoInjectionPoint";
appendFontStylesheet("https://fonts.googleapis.com/css2?family=Michroma&family=Rajdhani:wght@400;500;600;700&display=swap");
if (!!(robotoMonoInjectionPoint.indexOf("@font-face") + 1)) {
console.log(`Loading Roboto Mono as a file...`);
GM_addStyle(robotoMonoInjectionPoint);
} else {
appendFontStylesheet("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
}
var userSettings = JSON.parse(GM_getValue("bmUserSettings", "{}"));
var observers = new Observers();
var windowMain = new WindowMain(name, version);
var templateManager = new TemplateManager(name, version);
var apiManager = new ApiManager(templateManager);
var settingsManager = new SettingsManager(name, version, userSettings);
windowMain.setSettingsManager(settingsManager);
windowMain.setApiManager(apiManager);
templateManager.setWindowMain(windowMain);
templateManager.setSettingsManager(settingsManager);
var storageTemplates = JSON.parse(GM_getValue("bmTemplates", "{}"));
console.log(storageTemplates);
console.log(userSettings);
console.log(Object.keys(userSettings).length);
if (Object.keys(userSettings).length == 0) {
const uuid = crypto.randomUUID();
console.log(uuid);
GM.setValue("bmUserSettings", JSON.stringify({
"uuid": uuid
}));
}
setInterval(() => apiManager.sendHeartbeat(version), 1e3 * 60 * 30);
var currentTelemetryVersion = 1;
var previousTelemetryVersion = userSettings?.telemetry;
console.log(`Telemetry is ${!(previousTelemetryVersion == void 0)}`);
if (previousTelemetryVersion == void 0 || previousTelemetryVersion > currentTelemetryVersion) {
const windowTelemetry = new WindowTelemetry(name, version, currentTelemetryVersion, userSettings?.uuid);
windowTelemetry.setApiManager(apiManager);
windowTelemetry.buildWindow();
}
void initializeBlueMarble();
async function initializeBlueMarble() {
await templateManager.importJSON(storageTemplates);
apiManager.spontaneousResponseListener(windowMain);
windowMain.buildWindow();
windowMain.buildWindowFilter();
apiManager.applyCachedUserData(windowMain);
void apiManager.requestCurrentUserData(windowMain);
observeBlack();
consoleLog(`%c${name}%c (${version}) userscript has loaded!`, "color: cornflowerblue;", "");
}
function observeBlack() {
const observer = new MutationObserver((mutations, observer2) => {
const black = document.querySelector("#color-1");
if (!black) {
return;
}
let move = document.querySelector("#bm-button-move");
if (!move) {
move = document.createElement("button");
move.id = "bm-button-move";
move.textContent = "Move \u2191";
move.className = "btn btn-soft";
move.onclick = function() {
const roundedBox = this.parentNode.parentNode.parentNode.parentNode;
const shouldMoveUp = this.textContent == "Move \u2191";
roundedBox.parentNode.className = roundedBox.parentNode.className.replace(shouldMoveUp ? "bottom" : "top", shouldMoveUp ? "top" : "bottom");
roundedBox.style.borderTopLeftRadius = shouldMoveUp ? "0px" : "var(--radius-box)";
roundedBox.style.borderTopRightRadius = shouldMoveUp ? "0px" : "var(--radius-box)";
roundedBox.style.borderBottomLeftRadius = shouldMoveUp ? "var(--radius-box)" : "0px";
roundedBox.style.borderBottomRightRadius = shouldMoveUp ? "var(--radius-box)" : "0px";
this.textContent = shouldMoveUp ? "Move \u2193" : "Move \u2191";
};
const paintPixel = black.parentNode.parentNode.parentNode.parentNode.querySelector("h2");
paintPixel.parentNode?.appendChild(move);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
})();
// Build Hash: a40147b07f84
*
*/
addImg(additionalProperties = {}, callback = () => {
}) {
const properties = {};
const img = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "img", properties, additionalProperties);
callback(this, img);
return this;
}
/** Adds a header to the overlay.
* This header element will have properties shared between all header elements in the overlay.
* You can override the shared properties by using a callback.
* @param {number} level - The header level. Must be between 1 and 6 (inclusive)
* @param {Object.