diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 043da64..f409e9c 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -19,6 +19,9 @@ button:hover, .button:hover { background: var(--bg-shade-4); } +button.inactive { + pointer-events: none; +} button.primary, .button.primary { background: var(--accent-shade-0); @@ -144,3 +147,44 @@ input:focus { outline: none; transition: 150ms; } +input[type="range"] { + background: transparent; + cursor: pointer; + width: 100%; + box-sizing: border-box; +} +input[type="range"]::-webkit-slider-runnable-track { + background: var(--bg-shade-3); + height: 1rem; + border-radius: 1rem; +} +input[type="range"]::-moz-range-track { + background: var(--bg-shade-3); + border-radius: 1rem; + height: 1rem; +} +input[type="range"]::-webkit-slider-thumb { + appearance: none; + -webkit-appearance: none; + width: 1.5rem; + height: 3rem; + margin-top: -1rem; + background-color: var(--accent-shade-1); + border-radius: 0.5rem; +} +input[type="range"]::-moz-range-thumb { + width: 1.5rem; + height: 3rem; + border: none; + border-radius: 0.5rem; + background-color: var(--accent-shade-1); +} +input[type="range"]:focus { + outline: none; +} +input[type="range"]:focus::-webkit-slider-thumb { + background-color: var(--accent-shade-3); +} +input[type="range"]:focus::-moz-range-thumb { + background-color: var(--accent-shade-3); +} diff --git a/public/assets/css/miieditor.css b/public/assets/css/miieditor.css index ccc0862..f7986e8 100644 --- a/public/assets/css/miieditor.css +++ b/public/assets/css/miieditor.css @@ -1,32 +1,57 @@ +html, +body, +div.main-body { + height: 100%; +} + body, div.main-body, .miieditor-wrapper { z-index: -1; user-select: none; + background: var(--bg-shade-0); } svg.logotype { position: absolute; width: 120px; - top:42px; - left:162px; + top: 42px; + left: 60px; } .miieditor-wrapper { position: relative; display: grid; - grid-template-columns: 2fr 3fr; - background: var(--bg-shade-0); - width: 100vw; - height: 100vh; + grid-template-columns: auto auto; + + width: 95vw; + max-width: 1920px; + height: 100%; + margin: auto; gap: 0 48px; } - +.params-wrapper::before { + content: ""; + display: block; + position: absolute; + background: var(--bg-shade-1); + border-radius: 100%; + width: 1300px; + height: 1700px; + top: 50%; + transform: translateY(-50%); + left: -200px; + z-index: -1; +} .miieditor-wrapper::after { content: ""; display: block; position: absolute; - background: radial-gradient(closest-side, var(--bg-shade-1) 0%, transparent 100%); + background: radial-gradient( + closest-side, + var(--bg-shade-1) 0%, + rgba(27, 31, 59, 0) 100% + ); width: 200vh; height: 200vh; top: -100vh; @@ -37,120 +62,163 @@ svg.logotype { div.mii-img-wrapper { position: relative; margin: auto; - max-width: 512px; - width: 26vw; - height: auto; + display: flex; + justify-content: center; + width: 512px; + left: -48px; + height: 100%; + max-height: 384px; } img#mii-img { - position: relative; - width: 512px; - height: auto; + position: absolute; + bottom: 0; + width: auto; + height: 512px; z-index: 2; } -div.mii-img-wrapper .shadow { +div.mii-img-wrapper::before { + content: ""; position: absolute; - bottom: -18px; - left: 6px; + bottom: -22px; height: 72px; - width: 512px; - background: radial-gradient(farthest-side, var(--bg-shade-2) 0%, transparent 100%); + width: 100%; + background: radial-gradient( + farthest-side, + var(--bg-shade-2) 0%, + rgba(35, 39, 74, 0) 100% + ); } div.params-wrapper { position: relative; - overflow-x: visible; margin: auto; - margin-top: 150px; - margin-right: 100px; display: grid; z-index: 3; } div.tabs { display: grid; - grid-auto-flow: column; - width: fit-content; - gap: 2px; - background: #0A0C19; + grid-template-columns: repeat(11, 1fr); + width: 100%; + box-sizing: border-box; + background: #0a0c19; padding: 6px; + gap: 6px; border-radius: 6px; - margin-bottom: 32px; + margin-bottom: 2rem; } div.tabs .tabbtn { - min-width: 42px; - min-height: 42px; - border: none; + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 1; border-radius: 6px; - cursor: pointer; background: none; - color: var(--text-shade-3); + padding: 0; +} +div.tabs .tabbtn::after { + content: ""; + display: block; + width: 12px; + height: 12px; + background: url("/assets/images/miieditor.svg"); + background-position: calc(var(--assetcol) * -12px) -312px; + transform: scale(2.9); } div.tabs .tabbtn:hover, div.tabs .tabbtn.active { - background: var(--bg-shade-1); + background: var(--bg-shade-2); } div.subtabs { position: relative; - grid-column: 1 / span 2; + display: flex; + width: fit-content; } div.subtabs .subtabbtn { position: relative; - border: none; - padding: 12px; + display: flex; + align-items: center; + justify-content: center; + width: 60px; border-radius: 6px; - cursor: pointer; background: none; + padding: 0; color: var(--text-shade-3); + aspect-ratio: 1; +} +div.subtabs .subtabbtn::after { + content: ""; + display: block; + width: 12px; + height: 12px; + background: url("/assets/images/miieditor.svg"); + background-position: calc(var(--assetcol) * -12px) -324px; + transform: scale(2.9); } div.subtabs .subtabbtn.active::before, div.subtabs .subtabbtn.active:hover::before { content: ""; position: absolute; - bottom: 0; - left: 0; - width: 100%; + bottom: -2px; + left: 5%; + width: 90%; height: 5px; background: var(--accent-shade-1); border-radius: 6px; } -.subtab.has-sliders { - grid-template-columns: 1fr 1fr; +.has-sliders { + grid-template-columns: 60px auto; + gap: 12px; +} +.has-sliders label { + position: relative; + display: flex; + width: 60px; + height: 60px; + align-items: center; + justify-content: center; +} +.has-sliders label::after { + content: ""; + display: block; + width: 16px; + height: 16px; + background: url("/assets/images/miieditor.svg"); + background-position: calc(var(--assetcol) * -16px) -336px; + transform: scale(3); } form.params { grid-template-columns: repeat(2, auto); + height: 618px; + width: 582px; } form.params .tab { display: none; - grid-template-columns: 534px 258px; - gap: 48px; + gap: 4rem 0; } form.params .tab.active { display: grid; } -fieldset { +fieldset, +fieldset.has-subpages .subpage { appearance: none; border: none; padding: 0; margin: 0; display: none; grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(4, 1fr); gap: 18px; - width: fit-content; + width: 100%; height: fit-content; - grid-row: 2; } fieldset.active { display: grid; } -fieldset.color { - grid-template-columns: repeat(2, 1fr); - display: grid; - grid-column: 2; -} fieldset input[type="radio"] { display: none; } @@ -161,44 +229,48 @@ fieldset input[type="radio"] + label { cursor: pointer; border-radius: 18px; background: var(--bg-shade-3); - width: 120px; - height: 120px; + width: 100%; + aspect-ratio: 1; } -fieldset input[type="radio"]:checked + label { - background: var(--bg-shade-4); - font-weight: bold; - box-shadow: inset 0 0 0 4px var(--accent-shade-1); -} -fieldset.color input[type="radio"]:checked + label { - box-shadow: inset 0 0 0 4px var(--accent-shade-1), inset 0 0 0 6px var(--bg-shade-1); -} -div.colorSidebar { - margin: auto; -} - fieldset.has-subpages.active { display: block; } -fieldset.has-subpages .subpage { - display: none; - grid-template-columns: repeat(4, 1fr); - gap: 18px; - width: fit-content; - height: fit-content; -} fieldset.has-subpages .subpage.active { display: grid; } +fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after { + content: ""; + display: block; + width: 24px; + height: 24px; + background: url("/assets/images/miieditor.svg"); + background-position: calc( + ((var(--assetcol) + (var(--subpage, 0) * 12)) * -24px) + ) + calc(var(--assetrow) * -24px); + transform: scale(4.5); +} + +fieldset input[type="radio"]:checked + label { + background: var(--bg-shade-4); + box-shadow: inset 0 0 0 4px var(--accent-shade-1); +} +fieldset.color input[type="radio"]:checked + label, +fieldset#favoriteColor input[type="radio"]:checked + label { + box-shadow: inset 0 0 0 4px var(--accent-shade-1), + inset 0 0 0 6px var(--bg-shade-1); +} + input[type="range"].invert { direction: rtl; } .pagination { display: flex; - flex-flow: row; width: max-content; - grid-column: 3 / span 2; + height: fit-content; + grid-column: 1 / span 4; grid-row: 4; margin-left: auto; align-items: center; @@ -210,19 +282,26 @@ input[type="range"].invert { font-weight: bold; color: var(--text-shade-3); width: 18px; - margin-right: 0.7ch; + margin-right: 0.5ch; text-align: right; } - .page-btn { appearance: none; border: none; background: none; cursor: pointer; + padding: 0; + margin-left: 8px; } -.page-btn svg{ +.page-btn:hover { + background: none; +} +.page-btn:hover svg path { + fill: var(--accent-shade-3); +} +.page-btn svg { height: 36px; - margin: 6px + margin: 6px; } .page-btn.disabled { pointer-events: none; @@ -231,20 +310,370 @@ input[type="range"].invert { fill: var(--bg-shade-3); } +.tab#saveTab { + gap: 2rem 0; +} +.tab#saveTab p.save-prompt { + margin-bottom: 0; + text-align: center; +} + +.mii-comparison-animation-wrapper { + position: relative; + height: fit-content; +} +.mii-comparison { + position: relative; + display: grid; + grid-template-columns: repeat(3, auto); + align-items: center; + width: 100%; +} +.mii-comparison.confirmed { + position: absolute; + height: 100%; + top: 0; + left: 0; + opacity: 0; + overflow: hidden; +} +.mii-comparison img { + display: block; + width: 100%; + aspect-ratio: 1; + background: var(--bg-shade-3); + border-radius: 24px; +} + +.mii-comparison .new-mii-wrapper { + position: relative; + transition: right 500ms, transform 500ms; + right: 0; +} +.mii-comparison .new-mii-wrapper::after { + position: absolute; + content: ""; + display: block; + box-shadow: inset 0 0 0 8px var(--accent-shade-1); + border-radius: 24px; + margin: 0; + right: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 2; +} + +.mii-comparison svg { + width: 72px; + height: 72px; +} +.mii-comparison svg path { + fill: var(--accent-shade-1); +} + +.fade-in { + animation: fadeIn 0.25s forwards; +} +.fade-out { + animation: fadeOut 0.5s forwards; +} +.mii-comparison div.new-mii-wrapper.centered-mii-img { + position: absolute; + right: 50%; + transform: translateX(50%); + height: 100%; + aspect-ratio: 1; + width: auto; +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + button * { pointer-events: none; } -.miieditor-wrapper::before { - content: ""; - display: block; - position: absolute; - background: var(--bg-shade-1); - border-radius: 100%; - width: 1308px; - height: 1707px; - top: 50%; - transform: translateY(-50%); - right: -200px; - z-index: 0; +@media screen and (max-width: 1400px) { + form.params { + height: 562px; + width: 512px; + } + + fieldset, + fieldset.has-subpages .subpage { + gap: 12px; + } + + div.mii-img-wrapper { + left: -36px; + } + + div.params-wrapper { + margin-right: 24px; + } + + .params-wrapper::before { + left: -150px; + } + + div.tabs { + padding: 4px; + gap: 2px; + } +} + +@media screen and (max-width: 1280px) { + form.params { + height: 492px; + width: 480px; + } + + fieldset, + fieldset.has-subpages .subpage { + gap: 8px; + } + + div.mii-img-wrapper { + left: -36px; + } + + div.params-wrapper { + margin-right: 24px; + } + + .params-wrapper::before { + left: -150px; + } + + fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after { + transform: scale(4); + } + + div.subtabs .subtabbtn::after, + div.tabs .tabbtn::after { + transform: scale(2.4); + } + div.subtabs .subtabbtn { + width: 48px; + } + + .params-wrapper::before { + left: -100px; + } + + div.tabs { + margin-bottom: 1rem; + } + + form.params .tab { + gap: 2rem 0; + } +} + +@media screen and (max-width: 1120px) { + form.params { + height: 444px; + width: 420px; + } + + fieldset, + fieldset.has-subpages .subpage { + gap: 6px; + } +} + +@media screen and (max-width: 1080px) { + div.mii-img-wrapper { + left: 0; + top: 0; + } + img#mii-img { + max-height: 150%; + } + + svg.logotype { + left: 0; + } + + .miieditor-wrapper { + grid-template-columns: auto; + grid-template-rows: auto fit-content(100%); + margin: auto; + max-width: 360px; + width: 90vw; + } + + div.params-wrapper { + width: 100%; + margin: 0 auto; + display: flex; + flex-flow: column; + } + div.tabs, + div.subtabs { + order: 2; + margin-top: 1rem; + } + + div.mii-img-wrapper { + width: 100%; + max-width: 512px; + } + + fieldset { + order: 1; + } + + form.params { + width: 100%; + height: 100%; + order: 1; + } + fieldset input[type="radio"] + label { + width: 100%; + height: auto; + border-radius: 8px; + aspect-ratio: 1; + } + fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after { + transform: scale(3.5); + } + + .has-sliders { + overflow-y: auto; + overflow-x: hidden; + height: 100%; + gap: 2px 6px; + scrollbar-width: thin; + scrollbar-color: var(--text-shade-1) var(--bg-shade-3); + } + .has-sliders::-webkit-scrollbar { + width: 12px; + background: var(--bg-shade-3); + border-radius: 9px; + } + .has-sliders::-webkit-scrollbar-thumb { + background: var(--text-shade-1); + border-radius: 9px; + } + + .params-wrapper::before { + top: -12px; + left: -100vw; + width: 300vw; + border-radius: 0; + background: var(--bg-shade-2); + transform: none; + } + + fieldset, + fieldset.has-subpages .subpage { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(3, 1fr) 48px; + width: 100%; + gap: 8px; + } + + .pagination { + grid-column: 1 / span 4; + grid-row: 4; + } + + fieldset:not(.has-sliders) { + position: relative; + margin-bottom: -60px; + } + + div.tabs { + margin-bottom: 1rem; + } + + form.params .tab { + gap: 0; + height: 100%; + } + + div.subtabs { + z-index: 4; + } + + form.params { + grid-template-columns: repeat(2, auto); + } + + div.tabs .tabbtn::after, + div.subtabs .subtabbtn::after, + .has-sliders label::after { + transform: scale(2); + } + + div.subtabs .subtabbtn { + width: 48px; + height: 48px; + } +} + +@media screen and (max-width: 424px) { + fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after { + transform: scale(2.8); + } +} + +@media screen and (max-width: 396px) { + div.tabs .tabbtn::after, + div.subtabs .subtabbtn::after, + .has-sliders label::after { + transform: scale(1.5); + } + + div.tabs .tabbtn { + width: 24px; + height: 24px; + } + div.subtabs .subtabbtn { + width: 36px; + height: 36px; + } +} + +@media screen and (max-width: 360px) { + fieldset, + fieldset.has-subpages .subpage { + gap: 4px; + } + + fieldset input[type="radio"]:checked + label { + box-shadow: inset 0 0 0 3px var(--accent-shade-1); + } +} + +@media screen and (max-width: 344px) { + fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after { + transform: scale(2); + } +} + +@media screen and (max-width: 320px) { + div.tabs .tabbtn { + width: 18px; + height: 18px; + } + + div.tabs .tabbtn::after { + transform: scale(1.25); + } } diff --git a/public/assets/images/miieditor.svg b/public/assets/images/miieditor.svg new file mode 100644 index 0000000..27724a6 --- /dev/null +++ b/public/assets/images/miieditor.svg @@ -0,0 +1,10162 @@ + + + + + + Pretendo Network - Mii Maker Elements + + + + + + + NinStar (design), ashmonty (layout) + + + 2022 + Pretendo Network - Mii Maker Elements + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/js/miieditor.js b/public/assets/js/miieditor.js index 0ef0c25..928510d 100644 --- a/public/assets/js/miieditor.js +++ b/public/assets/js/miieditor.js @@ -2,11 +2,10 @@ // Prevent the user from reloading or leaving the page window.addEventListener('beforeunload', function (e) { - e.preventDefault(); + e?.preventDefault(); e.returnValue = ''; }); - const Mii = require('./MiiClass.js'); // MII RENDERER @@ -16,24 +15,44 @@ const encodedUserMiiData = document.querySelector( 'script#encodedUserMiiData' ).textContent; document.querySelector('script#encodedUserMiiData').remove(); - // We initialize the Mii object with the encoded data and render the Mii const mii = new Mii(Buffer.from(encodedUserMiiData, 'base64')); renderMii(); +const oldMiiStudioData = mii.toStudioMii().toString('hex'); + +// initial setup for saving animation +document.querySelector('.mii-comparison img.old-mii').src = `https://studio.mii.nintendo.com/miis/image.png?data=${oldMiiStudioData}&type=face&expression=normal&width=512&bgColor=13173300`; +document.querySelector('.mii-comparison.confirmed img.old-mii').src = `https://studio.mii.nintendo.com/miis/image.png?data=${oldMiiStudioData}&type=face&expression=sorrow&width=512&bgColor=13173300`; + // This function renders the Mii on the page function renderMii(type) { type = type || 'all_body'; // Can be 'all_body' or 'face' - const newMii = mii.toStudioMii().toString('hex'); + const miiStudioData = mii.toStudioMii().toString('hex'); document.querySelector( 'img#mii-img' - ).src = `https://studio.mii.nintendo.com/miis/image.png?data=${newMii}&type=${type}&expression=normal&width=512&bgColor=CAB1FB00`; + ).src = `https://studio.mii.nintendo.com/miis/image.png?data=${miiStudioData}&type=${type}&expression=normal&width=512&bgColor=13173300`; - // This updates the offset of the shadow of the Mii - document.querySelector('div.mii-img-wrapper .shadow').style.bottom = `${ - mii.height * mii.height * 0.0035 - mii.height * 0.162 - 18 + // sets the new mii in the save tab to the new mii + document.querySelector( + '.mii-comparison img.new-mii' + ).src = `https://studio.mii.nintendo.com/miis/image.png?data=${miiStudioData}&type=face&expression=normal&width=512&bgColor=13173300`; + document.querySelector( + '.mii-comparison.confirmed img.new-mii' + ).src = `https://studio.mii.nintendo.com/miis/image.png?data=${miiStudioData}&type=face&expression=smile&width=512&bgColor=13173300`; + + // this sets the mii height so that the face width stays the same + document.querySelector('img#mii-img').style.height = `${ + mii.height * mii.height * 0.0023 + mii.height * 1.058 + 384 }px`; + + // this sets the bottom position so that the mii's feet stay in the same position + document.querySelector('img#mii-img').style.bottom = `${ + mii.height * mii.height * -0.00468135 + mii.height * 0.28 - 0.052435 + }px`; + + console.log(mii); } // This function updates a prop of the Mii and rerenders it @@ -41,7 +60,6 @@ function updateMii(e, type) { const prop = e.target.name; const value = e.target.value; mii[prop] = parseInt(value); - console.log(mii); renderMii(type); } @@ -95,6 +113,9 @@ document.querySelectorAll('input[type=\'range\']').forEach((fieldset) => { 'eyeStretch', 'noseVertical', 'noseSize', + 'mouthVertical', + 'mouthSize', + 'mouthStretch', 'glassesVertical', 'glassesSize', 'facialHairVertical', @@ -200,3 +221,28 @@ document.querySelectorAll('span.current-page-index').forEach((el) => { document.querySelectorAll('button.page-btn').forEach((el) => { el.addEventListener('click', paginationHandler); }); + +// mii saving business (animation jank & actual saving) +document.querySelector('#saveTab #saveButton').addEventListener('click', (e) => { + e.preventDefault(); + + document.querySelector('#saveTab #saveButton').classList.add('inactive', 'fade-out'); + document.querySelector('.tabs').style.pointerEvents = 'none'; + document.querySelector('.mii-comparison.confirmed').style.opacity = 1; + document.querySelector('#saveTab p.save-prompt').classList.add('fade-out'); + + setTimeout(() => { + document.querySelector('.mii-comparison.unconfirmed').style.opacity = 0; + }, 500); + + setTimeout(() => { + document.querySelector('.mii-comparison.confirmed .old-mii').classList.add('fade-out'); + document.querySelector('.mii-comparison.confirmed svg').classList.add('fade-out'); + }, 1500); + + setTimeout(() => { + document.querySelector('.mii-comparison.confirmed .new-mii-wrapper').classList.add('centered-mii-img'); + }, 2000); + + +}); diff --git a/src/json/miieditor.json b/src/json/miieditor.json new file mode 100644 index 0000000..5d8cf5a --- /dev/null +++ b/src/json/miieditor.json @@ -0,0 +1,39 @@ +{ + "face": [0, 1, 8, 2, 3, 9, 4, 5, 10, 6, 7, 11], + "hairs": [ + [33, 47, 40, 37, 32, 107, 48, 51, 55, 70, 44, 66], + [52, 50, 38, 49, 43, 31, 56, 68, 62, 115, 76, 119], + [64, 81, 116, 121, 22, 58, 60, 87, 125, 117, 73, 75], + [42, 89, 57, 54, 80, 34, 23, 86, 88, 118, 39, 36], + [45, 67, 59, 65, 41, 30, 12, 16, 10, 82, 128, 129], + [14, 95, 105, 100, 6, 20, 93, 102, 27, 4, 17, 110], + [123, 8, 106, 72, 3, 21, 0, 98, 63, 90, 11, 120], + [5, 74, 108, 94, 124, 25, 99, 69, 35, 13, 122, 113], + [53, 24, 85, 83, 71, 131, 96, 101, 29, 7, 15, 112], + [79, 1, 109, 127, 91, 26, 61, 103, 2, 77, 18, 92], + [84, 9, 19, 130, 97, 104, 46, 78, 28, 114, 126, 111] + ], + "eyebrows": [ + [6, 0, 12, 1, 9, 19, 7, 21, 8, 17, 5, 4], + [11, 10, 2, 3, 14, 20, 15, 13, 22, 18, 16, 23] + ], + "eyes": [ + [2, 4, 0, 8, 39, 17, 1, 26, 16, 15, 27, 20], + [33, 11, 19, 32, 9, 12, 23, 34, 21, 25, 40, 35], + [5, 41, 13, 36, 37, 6, 24, 30, 31, 18, 28, 46], + [7, 44, 38, 42, 45, 29, 3, 43, 22, 10, 14, 47], + [48, 49, 50, 53, 59, 56, 54, 58, 57, 55, 51, 52] + ], + "nose": [ + [1, 10, 2, 3, 6, 0, 5, 4, 8, 9, 7, 11], + [13, 14, 12, 17, 16, 15] + ], + "mouth": [ + [23, 1, 19, 21, 22, 5, 0, 8, 10, 16, 6, 13], + [7, 9, 2, 17, 3, 4, 15, 11, 20, 18, 14, 12], + [27, 30, 24, 25, 29, 28, 26, 35, 31, 34, 33, 32] + ], + "arrayOf6": [0, 1, 2, 3, 4, 5], + "arrayOf9": [0, 1, 2, 3, 4, 5, 6, 7, 8], + "arrayOf12": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] +} diff --git a/src/routes/account.js b/src/routes/account.js index 570f41d..1162331 100644 --- a/src/routes/account.js +++ b/src/routes/account.js @@ -12,6 +12,7 @@ const cache = require('../cache'); const util = require('../util'); const logger = require('../logger'); const config = require('../../config.json'); +const editorJSON = require('../json/miieditor.json'); const { Router } = express; @@ -217,50 +218,9 @@ router.post('/online-files', requireLoginMiddleware, async (request, response) = router.get('/miieditor', requireLoginMiddleware, async (request, response) => { const { account } = request; - // Adapted from https://www.3dbrew.org/wiki/Mii#Mapped_Editor_.3C-.3E_Hex_values - - const editorToHex = { - 'face': [ - 0x00,0x01,0x08,0x02,0x03,0x09,0x04,0x05,0x0a,0x06,0x07,0x0b - ], - 'hairs': [ - [0x21,0x2f,0x28,0x25,0x20,0x6b,0x30,0x33,0x37,0x46,0x2c,0x42], - [0x34,0x32,0x26,0x31,0x2b,0x1f,0x38,0x44,0x3e,0x73,0x4c,0x77], - [0x40,0x51,0x74,0x79,0x16,0x3a,0x3c,0x57,0x7d,0x75,0x49,0x4b], - [0x2a,0x59,0x39,0x36,0x50,0x22,0x17,0x56,0x58,0x76,0x27,0x24], - [0x2d,0x43,0x3b,0x41,0x29,0x1e,0x0c,0x10,0x0a,0x52,0x80,0x81], - [0x0e,0x5f,0x69,0x64,0x06,0x14,0x5d,0x66,0x1b,0x04,0x11,0x6e], - [0x7b,0x08,0x6a,0x48,0x03,0x15,0x00,0x62,0x3f,0x5a,0x0b,0x78], - [0x05,0x4a,0x6c,0x5e,0x7c,0x19,0x63,0x45,0x23,0x0d,0x7a,0x71], - [0x35,0x18,0x55,0x53,0x47,0x83,0x60,0x65,0x1d,0x07,0x0f,0x70], - [0x4f,0x01,0x6d,0x7f,0x5b,0x1a,0x3d,0x67,0x02,0x4d,0x12,0x5c], - [0x54,0x09,0x13,0x82,0x61,0x68,0x2e,0x4e,0x1c,0x72,0x7e,0x6f] - ], - 'eyebrows': [ - [0x06,0x00,0x0c,0x01,0x09,0x13,0x07,0x15,0x08,0x11,0x05,0x04], - [0x0b,0x0a,0x02,0x03,0x0e,0x14,0x0f,0x0d,0x16,0x12,0x10,0x17] - ], - 'eyes': [ - [0x02,0x04,0x00,0x08,0x27,0x11,0x01,0x1a,0x10,0x0f,0x1b,0x14], - [0x21,0x0b,0x13,0x20,0x09,0x0c,0x17,0x22,0x15,0x19,0x28,0x23], - [0x05,0x29,0x0d,0x24,0x25,0x06,0x18,0x1e,0x1f,0x12,0x1c,0x2e], - [0x07,0x2c,0x26,0x2a,0x2d,0x1d,0x03,0x2b,0x16,0x0a,0x0e,0x2f], - [0x30,0x31,0x32,0x35,0x3b,0x38,0x36,0x3a,0x39,0x37,0x33,0x34] - ], - 'nose': [ - [0x01,0x0a,0x02,0x03,0x06,0x00, 0x05,0x04,0x08,0x09,0x07,0x0B], - [0x0d,0x0e,0x0c,0x11,0x10,0x0f] - ], - 'mouth': [ - [0x17,0x01,0x13,0x15,0x16,0x05,0x00,0x08,0x0a,0x10,0x06,0x0d], - [0x07,0x09,0x02,0x11,0x03,0x04,0x0f,0x0b,0x14,0x12,0x0e,0x0c], - [0x1b,0x1e,0x18,0x19,0x1d,0x1c,0x1a,0x23,0x1f,0x22,0x21,0x20] - ] - }; - response.render('account/miieditor', { encodedUserMiiData: account.mii.data, - editorToHex + editorJSON }); }); diff --git a/views/account/miieditor.handlebars b/views/account/miieditor.handlebars index b458122..421d0f2 100644 --- a/views/account/miieditor.handlebars +++ b/views/account/miieditor.handlebars @@ -26,67 +26,39 @@
-
- - - - - - - - - - - + + + + + + + + + + +
- - - + + + +
-
- {{#each editorToHex.face}} +
+ {{#each editorJSON.face}} - + {{/each}}
-
+
@@ -101,69 +73,33 @@
-
- - - - - - - - - - - - - - - - - - - - - - - - +
+ {{#each editorJSON.arrayOf12}} + + + {{/each}}
-
- - - - - - - - - - - - - - - - - - - - - - - - +
+ {{#each editorJSON.arrayOf12}} + + + {{/each}}
-
-
- {{#each editorToHex.hairs}} -
+
+
+ + +
+
+ {{#each editorJSON.hairs}} +
{{#each this}} - + {{/each}}
-
+
@@ -208,19 +144,16 @@
- - + + +
-
- {{#each editorToHex.eyebrows}} -
+
+ {{#each editorJSON.eyebrows}} +
{{#each this}} - + {{/each}}
- - - - - - - - - - + + + + + + + + + +
-
+
@@ -274,19 +207,16 @@
- - + + +
-
- {{#each editorToHex.eyes}} -
+
+ {{#each editorJSON.eyes}} +
{{#each this}} - + {{/each}}
-
+
@@ -321,34 +251,30 @@
- - - - - - - - - - + + + + + + + + + +
- - + +
-
- {{#each editorToHex.nose}} -
+
+ {{#each editorJSON.nose}} +
{{#each this}} - + {{/each}}
- - - - + + + + +
- - + + +
-
- {{#each editorToHex.mouth}} -
+
+ {{#each editorJSON.mouth}} +
{{#each this}} - + {{/each}}
-
+
@@ -422,44 +346,29 @@
- - - - + + + + + +
- - + + +
-
- - - - - - - - - - - - - - - - - - +
+ {{#each editorJSON.arrayOf9}} + + + {{/each}}
-
+
@@ -475,41 +384,29 @@
- - - - + + + + +
- - - + + + +
-
- - - - - - - - - - - - +
+ {{#each editorJSON.arrayOf6}} + + + {{/each}}
-
+
@@ -528,78 +425,62 @@
-
- - - - - - - - - - - - +
+ {{#each editorJSON.arrayOf6}} + + + {{/each}}
- - - - + + + +
- - + +
-
+
- + - +
- - - - - - -
-
- -
-
- - - - + + + + + +
- - + + +
-
+ +
+ + + + +
+ +
- + - +
@@ -629,6 +510,27 @@
+ +
+

Save Mii? This will permanently overwrite your current Mii.

+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ +