Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-05-10 03:01:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prep for HTML/CSS overhaul

Browse source
This commit is contained in:
SwingTheVine 2026-02-14 22:29:55 -05:00
parent b66df8be14
commit 8cdf235b51
4 changed files with 56 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/Overlay.js
View file

@ -201,6 +201,56 @@ export default class Overlay {
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.<string, any>} [additionalProperties={}] - The DOM properties of the `details` that are NOT shared between all overlay `details` elements. These should be camelCase.
* @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `details`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.96
* @example
* // Assume all <details> elements have a shared class (e.g. {'className': 'bar'})
* overlay.addDetails({'id': 'foo'}).buildOverlay(document.body);
* // Output:
* // (Assume <body> already exists in the webpage)
* <body>
* <details id="foo" class="bar"></details>
* </body>
*/
addDetails(additionalProperties = {}, callback = () => {}) {
const properties = {}; // Shared <details> DOM properties
const details = this.#createElement('details', properties, additionalProperties); // Creates the <details> element
callback(this, details); // Runs any script passed in through the callback
return this;
}
/** Adds a `summary` to the overlay.
* This `summary` element will have properties shared between all `summary` elements in the overlay.
* You can override the shared properties by using a callback.
* @param {Object.<string, any>} [additionalProperties={}] - The DOM properties of the `summary` that are NOT shared between all overlay `summary` elements. These should be camelCase.
* @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `summary`.
* @returns {Overlay} Overlay class instance (this)
* @since 0.88.96
* @example
* // Assume all <summary> elements have a shared class (e.g. {'className': 'bar'})
* overlay.addSummary({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
* // Output:
* // (Assume <body> already exists in the webpage)
* <body>
* <summary id="foo" class="bar">Foobar.</summary>
* </body>
*/
addSummary(additionalProperties = {}, callback = () => {}) {
const properties = {}; // Shared <summary> DOM properties
const summary = this.#createElement('summary', properties, additionalProperties); // Creates the <summary> element
callback(this, summary); // Runs any script passed in through the callback
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.

2
src/Template.js
View file

@ -41,7 +41,7 @@ export default class Template {
this.chunked = chunked;
this.chunked32 = chunked32;
this.tileSize = tileSize;
this.pixelCount = { total: 0, colors: new Map }; // Total pixel count in template
this.pixelCount = { total: 0, colors: new Map() }; // Total pixel count in template
}
/** Creates chunks of the template for each tile.

1
src/apiManager.js
View file

@ -117,7 +117,6 @@ export default class ApiManager {
case 'tiles':
// Runs only if the tile has the template
let tileCoordsTile = data['endpoint'].split('/');
tileCoordsTile = [parseInt(tileCoordsTile[tileCoordsTile.length - 2]), parseInt(tileCoordsTile[tileCoordsTile.length - 1].replace('.png', ''))];

8
src/templateManager.js
View file

@ -280,13 +280,14 @@ export default class TemplateManager {
console.log(`Template:`);
console.log(template);
// Obtains the template (for only this tile) as a Uint32Array
let templateBeforeFilter32 = template.chunked32;
// Draws each template on the tile based on it's relative position
const coordXtoDrawAt = Number(template.pixelCoords[0]) * this.drawMult;
const coordYtoDrawAt = Number(template.pixelCoords[1]) * this.drawMult;
context.drawImage(template.bitmap, coordXtoDrawAt, coordYtoDrawAt);
// Obtains the template (for only this tile) as a Uint32Array
let templateBeforeFilter32 = template.chunked32;
// If we failed to get the template for this tile, we use a shoddy, buggy, failsafe
if (!templateBeforeFilter32) {
const templateBeforeFilter = context.getImageData(coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height);
@ -313,8 +314,9 @@ export default class TemplateManager {
pixelsCorrectTotal += total;
}
console.log(`Finished calculating correct pixels for the tile ${tileCoords} in ${(Date.now() - timer) / 1000} seconds!\nThere are ${pixelsCorrectTotal} correct pixels.`);
template.pixelCount['correct'] = pixelsCorrect; // Adds the correct pixel Map to the template instance
}
return await canvas.convertToBlob({ type: 'image/png' });