From 5356bda5a9c4649015934cd670a5d8453f7b910a Mon Sep 17 00:00:00 2001 From: Arian Kordi Date: Thu, 19 Sep 2024 20:43:04 -0400 Subject: [PATCH 1/4] Defer loading the Mii save previews --- public/assets/js/miieditor.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/public/assets/js/miieditor.js b/public/assets/js/miieditor.js index d44c7c85e..e7bce79f2 100644 --- a/public/assets/js/miieditor.js +++ b/public/assets/js/miieditor.js @@ -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; @@ -184,8 +184,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); } } @@ -372,6 +372,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(); From 0fa3fe543917e41cf7f1e0f23f43465d347d1dee Mon Sep 17 00:00:00 2001 From: Arian Kordi Date: Thu, 19 Sep 2024 20:43:22 -0400 Subject: [PATCH 2/4] Draw Mii face with split depth rather than with bald head Requesting a split depth render results in getting two renders in one image, the top half having the back half of the Mii head (usually the hair) and then the bottom half having the front half. This is needed for the Mii editor because it's drawing the body manually, and you want some elements of the head (hair) to be behind the body and the rest to be in front. Previously, it solved this problem by loading a copy of the Mii head that's bald, but this along with other stuff added up to four Mii Studio requests on every render - now it's just one. NOTE!!!!: This actually doesn't handle importing mii-js from the new TypeScript project, so as of this commit it WILL NOT work - installing the new repo, which this doesn't even reference, doesn't produce compiled JS from the TS source, so it will simply not import. --- public/assets/js/miieditor.js | 44 ++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/public/assets/js/miieditor.js b/public/assets/js/miieditor.js index e7bce79f2..8d2de5a60 100644 --- a/public/assets/js/miieditor.js +++ b/public/assets/js/miieditor.js @@ -5,7 +5,7 @@ * * browserify is needed for the use of require() in the browser */ -const Mii = require('mii-js'); +const Mii = require('@pretendonetwork/mii-js').default; const newMiiData = 'AwAAQOlVognnx0GC2qjhdwOzuI0n2QAAAGBzAHQAZQB2AGUAAAAAAAAAAAAAAEBAAAAhAQJoRBgmNEYUgRIXaA0AACkAUkhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAANeC'; // Prevent the user from reloading or leaving the page @@ -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 @@ -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', + splitMode: 'both', // this will be twice the height }); miiBodyImg.src = mii.studioAssetUrlBody(); } @@ -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 = ''; } From d7f02414b919778f6f3a6a20e02b76c290d65076 Mon Sep 17 00:00:00 2001 From: Arian Kordi Date: Fri, 27 Dec 2024 16:51:41 -0500 Subject: [PATCH 3/4] Revert change to mii-js include --- public/assets/js/miieditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/js/miieditor.js b/public/assets/js/miieditor.js index 8d2de5a60..f6df59b00 100644 --- a/public/assets/js/miieditor.js +++ b/public/assets/js/miieditor.js @@ -5,7 +5,7 @@ * * browserify is needed for the use of require() in the browser */ -const Mii = require('@pretendonetwork/mii-js').default; +const Mii = require('mii-js'); const newMiiData = 'AwAAQOlVognnx0GC2qjhdwOzuI0n2QAAAGBzAHQAZQB2AGUAAAAAAAAAAAAAAEBAAAAhAQJoRBgmNEYUgRIXaA0AACkAUkhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAANeC'; // Prevent the user from reloading or leaving the page From 0fceac9dbbdc4e8fbae2f2531a77265d326b64fe Mon Sep 17 00:00:00 2001 From: Arian Kordi Date: Tue, 28 Jan 2025 12:54:38 -0500 Subject: [PATCH 4/4] Address @stylistic/spaced-comment, @stylistic/arrow-parens, no-redeclare --- public/assets/js/miieditor.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/assets/js/miieditor.js b/public/assets/js/miieditor.js index c4c290e60..2d31eaa92 100644 --- a/public/assets/js/miieditor.js +++ b/public/assets/js/miieditor.js @@ -133,7 +133,7 @@ function renderMii(heightOverride, buildOverride) { onMiiFaceImgLoad(); }; } - function onMiiFaceImgLoad() { + function onMiiFaceImgLoad_() { if (miiBodyImg.complete) { onBodyImgLoad(); } else { @@ -144,10 +144,10 @@ function renderMii(heightOverride, buildOverride) { } function onBodyImgLoad() { if (miiFaceImg.complete) { - onMiiFaceImgLoad(); + onMiiFaceImgLoad_(); } else { miiFaceImg.onload = () => { - onMiiFaceImgLoad(); + onMiiFaceImgLoad_(); }; } } @@ -165,7 +165,7 @@ function renderMii(heightOverride, buildOverride) { 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); @@ -380,7 +380,7 @@ function openTab(e, tabType) { // effectively loading them right now (lazy load) document .querySelectorAll('#saveTab img[data-src]') - .forEach(e => { + .forEach((e) => { if (e.getAttribute('data-src') !== e.src) e.setAttribute('src', e.getAttribute('data-src')); });