Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-03-21 17:24:28 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #367 from ariankordi/mii-maker-split-depth

Browse Source 
Reduce Mii editor HTTP requests from 4 to 1 on every change
This commit is contained in:
limes.pink 2026-03-05 22:43:12 +01:00 committed by GitHub
commit d8ba94a8d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
public/assets/js/miieditor.js
View File

@ -69,8 +69,8 @@ function initializeMiiData(encodedUserMiiData) {
bgColor: '13173300', bgColor: '13173300',
expression: 'sorrow' expression: 'sorrow'
}); });
document.querySelector('.mii-comparison img.old-mii').src = miiStudioNeutralUrl; document.querySelector('.mii-comparison img.old-mii').setAttribute('data-src', miiStudioNeutralUrl);
document.querySelector('.mii-comparison.confirmed img.old-mii').src = miiStudioSorrowUrl; document.querySelector('.mii-comparison.confirmed img.old-mii').setAttribute('data-src', miiStudioSorrowUrl);
console.log('initialization complete'); console.log('initialization complete');
console.groupEnd(); console.groupEnd();
return true; return true;
@ -94,7 +94,6 @@ if (!validMiiData) {
// we keeep the images here so we can cache them when we need to change the build/height // we keeep the images here so we can cache them when we need to change the build/height
const miiFaceImg = new Image(); const miiFaceImg = new Image();
const baldMiiFaceImg = new Image();
const miiBodyImg = new Image(); const miiBodyImg = new Image();
// Initial mii render // Initial mii render
@ -107,24 +106,15 @@ function renderMii(heightOverride, buildOverride) {
const build = buildOverride || mii.build; const build = buildOverride || mii.build;
// if there isn't an override or the images haven't been cached, we load the images // if there isn't an override or the images haven't been cached, we load the images
if ((!heightOverride && !buildOverride) || !miiFaceImg.src || !baldMiiFaceImg.src || !miiBodyImg.src) { if ((!heightOverride && !buildOverride) || !miiFaceImg.src || !miiBodyImg.src) {
canvas.style.filter = 'blur(4px) brightness(70%)'; canvas.style.filter = 'blur(4px) brightness(70%)';
// we create a copy of the mii and make it bald // request a face only render with split depth
const baldMii = Object.create(
Object.getPrototypeOf(mii),
Object.getOwnPropertyDescriptors(mii)
);
baldMii.hairType = 30;
baldMiiFaceImg.src = baldMii.studioUrl({
width: 512,
bgColor: '13173300',
type: 'face_only'
});
miiFaceImg.src = mii.studioUrl({ miiFaceImg.src = mii.studioUrl({
width: 512, width: 512,
bgColor: '13173300', bgColor: '13173300',
type: 'face_only' type: 'face_only',
splitMode: 'both' // this will be twice the height
}); });
miiBodyImg.src = mii.studioAssetUrlBody(); miiBodyImg.src = mii.studioAssetUrlBody();
} }
@ -144,7 +134,7 @@ function renderMii(heightOverride, buildOverride) {
onMiiFaceImgLoad(); onMiiFaceImgLoad();
}; };
} }
function onMiiFaceImgLoad() { function onMiiFaceImgLoad_() {
if (miiBodyImg.complete) { if (miiBodyImg.complete) {
onBodyImgLoad(); onBodyImgLoad();
} else { } else {
@ -154,21 +144,33 @@ function renderMii(heightOverride, buildOverride) {
} }
} }
function onBodyImgLoad() { function onBodyImgLoad() {
if (baldMiiFaceImg.complete) { if (miiFaceImg.complete) {
onBaldMiiFaceImgLoad(); onMiiFaceImgLoad_();
} else { } else {
baldMiiFaceImg.onload = () => { miiFaceImg.onload = () => {
onBaldMiiFaceImgLoad(); onMiiFaceImgLoad_();
}; };
} }
} }
function onBaldMiiFaceImgLoad() { function onMiiFaceImgLoad() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(miiFaceImg, 0, headYPos);
// in mii studio split depth mode, the back half is on the top
// and the front half is on the bottom
// the back half needs to be drawn, then the body, then the front
const halfHeight = miiFaceImg.height / 2;
// top half of the image / back half of the head
ctx.drawImage(miiFaceImg, 0, 0, miiFaceImg.width, halfHeight, 0, headYPos, miiFaceImg.width, halfHeight);
// draw body on top
ctx.drawImage(miiBodyImg, bodyXPos, bodyYPos, bodyWidth, bodyHeight); ctx.drawImage(miiBodyImg, bodyXPos, bodyYPos, bodyWidth, bodyHeight);
// we draw a portion of the bald mii on top of the normal mii to hide the mii's neck (see https://i.imgur.com/U0fpkwi.png) // we draw a portion of the bald mii on top of the normal mii to hide the mii's neck (see https://i.imgur.com/U0fpkwi.png)
ctx.drawImage(baldMiiFaceImg, 186, 384, 140, 120, 186, headYPos + 384, 140, 120); // ctx.drawImage(baldMiiFaceImg, 186, 384, 140, 120, 186, headYPos + 384, 140, 120);
// draw bottom half of the image / front half of the head
ctx.drawImage(miiFaceImg, 0, halfHeight, miiFaceImg.width, halfHeight, 0, headYPos, miiFaceImg.width, halfHeight);
canvas.style.filter = ''; canvas.style.filter = '';
} }
@ -185,8 +187,8 @@ function renderMii(heightOverride, buildOverride) {
}); });
// sets the new mii in the save tab to the new mii // sets the new mii in the save tab to the new mii
document.querySelector('.mii-comparison img.new-mii').src = faceMiiStudioUrl; document.querySelector('.mii-comparison img.new-mii').setAttribute('data-src', faceMiiStudioUrl);
document.querySelector('.mii-comparison.confirmed img.new-mii').src = faceMiiStudioSmileUrl; document.querySelector('.mii-comparison.confirmed img.new-mii').setAttribute('data-src', faceMiiStudioSmileUrl);
} }
} }
@ -375,6 +377,18 @@ function openTab(e, tabType) {
.replace('Button', buttonReplacement); .replace('Button', buttonReplacement);
document.querySelector(`#${selectedID}`).classList.add('active'); document.querySelector(`#${selectedID}`).classList.add('active');
// if you selected the save tab...
if (selectedID === 'saveTab') {
// set data-src on images that have it to src
// effectively loading them right now (lazy load)
document
.querySelectorAll('#saveTab img[data-src]')
.forEach((e) => {
if (e.getAttribute('data-src') !== e.src)
e.setAttribute('src', e.getAttribute('data-src'));
});
}
if (tabType === 'tab') { if (tabType === 'tab') {
// Click the first subtab button, if there is one // Click the first subtab button, if there is one
document.querySelector(`#${selectedID} .subtabbtn`)?.click(); document.querySelector(`#${selectedID} .subtabbtn`)?.click();