Skip to content

Reduce Mii editor HTTP requests from 4 to 1 on every change #367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ariankordi wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

Reduce Mii editor HTTP requests from 4 to 1 on every change #367

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5356bda
Defer loading the Mii save previews
ariankordi Sep 20, 2024
0fa3fe5
Draw Mii face with split depth rather than with bald head
ariankordi Sep 20, 2024
d7f0241
Revert change to mii-js include
ariankordi Dec 27, 2024
8d15d9e
Merge remote-tracking branch 'origin-real/dev' into mii-maker-split-d…
ariankordi Jan 26, 2025
0fceac9
Address @stylistic/spaced-comment, @stylistic/arrow-parens, no-redeclare
ariankordi Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 40 additions & 26 deletions public/assets/js/miieditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ function initializeMiiData(encodedUserMiiData) {
bgColor: '13173300',
expression: 'sorrow'
});
document.querySelector('.mii-comparison img.old-mii').src = miiStudioNeutralUrl;
document.querySelector('.mii-comparison.confirmed img.old-mii').src = miiStudioSorrowUrl;
document.querySelector('.mii-comparison img.old-mii').setAttribute('data-src', miiStudioNeutralUrl);
document.querySelector('.mii-comparison.confirmed img.old-mii').setAttribute('data-src', miiStudioSorrowUrl);
console.log('initialization complete');
console.groupEnd();
return true;
Expand All @@ -93,7 +93,6 @@ if (!validMiiData) {

// we keeep the images here so we can cache them when we need to change the build/height
const miiFaceImg = new Image();
const baldMiiFaceImg = new Image();
const miiBodyImg = new Image();

// Initial mii render
Expand All @@ -106,24 +105,15 @@ function renderMii(heightOverride, buildOverride) {
const build = buildOverride || mii.build;

// 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%)';

// we create a copy of the mii and make it bald
const baldMii = Object.create(
Object.getPrototypeOf(mii),
Object.getOwnPropertyDescriptors(mii)
);
baldMii.hairType = 30;
baldMiiFaceImg.src = baldMii.studioUrl({
width: 512,
bgColor: '13173300',
type: 'face_only'
});
// request a face only render with split depth
miiFaceImg.src = mii.studioUrl({
width: 512,
bgColor: '13173300',
type: 'face_only'
type: 'face_only',
splitMode: 'both' // this will be twice the height
});
miiBodyImg.src = mii.studioAssetUrlBody();
}
Expand All @@ -143,7 +133,7 @@ function renderMii(heightOverride, buildOverride) {
onMiiFaceImgLoad();
};
}
function onMiiFaceImgLoad() {
function onMiiFaceImgLoad_() {
if (miiBodyImg.complete) {
onBodyImgLoad();
} else {
Expand All @@ -153,21 +143,33 @@ function renderMii(heightOverride, buildOverride) {
}
}
function onBodyImgLoad() {
if (baldMiiFaceImg.complete) {
onBaldMiiFaceImgLoad();
if (miiFaceImg.complete) {
onMiiFaceImgLoad_();
} else {
baldMiiFaceImg.onload = () => {
onBaldMiiFaceImgLoad();
miiFaceImg.onload = () => {
onMiiFaceImgLoad_();
};
}
}
function onBaldMiiFaceImgLoad() {
function onMiiFaceImgLoad() {
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);

// 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 = '';
}

Expand All @@ -184,8 +186,8 @@ function renderMii(heightOverride, buildOverride) {
});

// 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.confirmed img.new-mii').src = faceMiiStudioSmileUrl;
document.querySelector('.mii-comparison img.new-mii').setAttribute('data-src', faceMiiStudioUrl);
document.querySelector('.mii-comparison.confirmed img.new-mii').setAttribute('data-src', faceMiiStudioSmileUrl);
}
}

Expand Down Expand Up @@ -372,6 +374,18 @@ function openTab(e, tabType) {
.replace('Button', buttonReplacement);
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') {
// Click the first subtab button, if there is one
document.querySelector(`#${selectedID} .subtabbtn`)?.click();
Expand Down