diff --git a/resources/assets/src/js/common/skinview3d.js b/resources/assets/src/js/common/skinview3d.js index 1a8c0fa8..82dd3ca5 100644 --- a/resources/assets/src/js/common/skinview3d.js +++ b/resources/assets/src/js/common/skinview3d.js @@ -4,10 +4,10 @@ $.msp = {}; $.msp.handles = {}; $.msp.control = null; $.msp.config = { - domElement: document.getElementById('skin_container'), + domElement: document.getElementById('preview-3d-container'), slim: false, - width: $('#skin_container').width(), - height: $('#skin_container').height(), + width: $('#preview-3d-container').width(), + height: $('#preview-3d-container').height(), skinUrl: '', capeUrl: '' }; @@ -29,6 +29,14 @@ function initSkinViewer(cameraPositionZ = 70) { $.msp.control = skinview3d.createOrbitControls($.msp.viewer); } +function applySkinViewerConfig(config) { + config = config || $.msp.config; + + for (const key in config) { + $.msp.viewer[key] = config[key]; + } +} + function disposeSkinViewer() { if ($.msp.viewer instanceof skinview3d.SkinViewer) { $.msp.viewer.dispose(); @@ -37,7 +45,7 @@ function disposeSkinViewer() { } } -function initAnimationControllers() { +function registerAnimationController() { $('.fa-pause').click(function () { $.msp.viewer.animationPaused = !$.msp.viewer.animationPaused; $(this).toggleClass('fa-pause').toggleClass('fa-play'); @@ -52,6 +60,13 @@ function initAnimationControllers() { $('.fa-stop').click(() => initSkinViewer()); } -if (process.env.NODE_ENV === 'test') { - module.exports = { initSkinViewer, initAnimationControllers }; +function registerWindowResizeHandler() { + $(window).resize(function () { + $.msp.viewer.width = $('#preview-3d-container').width(); + $.msp.viewer.height = $('#preview-3d-container').height(); + }); +} + +if (process.env.NODE_ENV === 'test') { + module.exports = { initSkinViewer, applySkinViewerConfig, registerAnimationController, registerWindowResizeHandler }; } diff --git a/resources/assets/src/js/skinlib/upload.js b/resources/assets/src/js/skinlib/upload.js index 5cab37bc..2a307afb 100644 --- a/resources/assets/src/js/skinlib/upload.js +++ b/resources/assets/src/js/skinlib/upload.js @@ -25,11 +25,6 @@ function initUploadListeners() { $('[for="private"]').tooltip(); $.msp.handles.walk.paused = $.msp.handles.rotate.paused = false; }); - - $(window).resize(() => { - $.msp.viewer.width = $('#skin_container').width(); - $.msp.viewer.height = $('#skin_container').height(); - }); } // Real-time preview diff --git a/resources/assets/src/js/user/closet.js b/resources/assets/src/js/user/closet.js index 25edaca5..f894b2ba 100644 --- a/resources/assets/src/js/user/closet.js +++ b/resources/assets/src/js/user/closet.js @@ -1,4 +1,4 @@ -/* global MSP */ +/* global initSkinViewer */ 'use strict'; @@ -21,13 +21,20 @@ $('body').on('click', '.item-body', async function () { }); if (type === 'cape') { - MSP.changeCape(url(`textures/${hash}`)); + $.msp.viewer.capeUrl = $.msp.config.capeUrl = url(`textures/${hash}`); $indicator.data('cape', tid); } else { - MSP.changeSkin(url(`textures/${hash}`)); + $.msp.viewer.skinUrl = $.msp.config.skinUrl = url(`textures/${hash}`); $indicator.data('skin', tid); } + if (type === 'alex' && !$.msp.config.slim || type === 'steve' && $.msp.config.slim) { + // Reset skinview3d to change model + $.msp.config.slim = (type === 'alex'); + initSkinViewer(); + $.msp.handles.walk.paused = $.msp.handles.rotate.paused = false; + } + const skin = $indicator.data('skin'); const cape = $indicator.data('cape'); @@ -82,8 +89,8 @@ async function initCloset() { } /** - * - * @param {{ name: string, tid: number, type: 'steve' | 'alex' | 'cape' }} item + * + * @param {{ name: string, tid: number, type: 'steve' | 'alex' | 'cape' }} item */ function renderClosetItemComponent(item) { return ` @@ -158,9 +165,9 @@ async function reloadCloset(textureCategory, page, search) { }); renderCloset(items, category); - + const paginator = $('#closet-paginator'); - + paginator.attr(`last-${category}-page`, page); paginator.jqPaginator('option', { currentPage: page, diff --git a/resources/assets/src/js/user/player.js b/resources/assets/src/js/user/player.js index f23bd25c..4f5459ca 100644 --- a/resources/assets/src/js/user/player.js +++ b/resources/assets/src/js/user/player.js @@ -1,4 +1,4 @@ -/* global MSP, defaultSkin */ +/* global defaultSkin, initSkinViewer */ 'use strict'; @@ -7,8 +7,6 @@ $('body').on('click', '.player', function () { $(this).addClass('player-selected'); showPlayerTexturePreview(this.id); -}).on('click', '#preview-switch', () => { - TexturePreview.previewType === '3D' ? TexturePreview.show2dPreview() : TexturePreview.show3dPreview(); }).on('change', '#preference', async function () { try { const { errno, msg } = await fetch({ @@ -21,6 +19,17 @@ $('body').on('click', '.player', function () { } catch (error) { showAjaxError(error); } +}).on('click', '#preview-switch', () => { + // Switch preview type between 2D and 3D + $('#preview-3d-container').toggle(); + $('#preview-2d-container').toggle(); + $('.operations').toggle(); + + if ($('#preview-3d-container').is(':visible')) { + $('#preview-switch').html(trans('user.switch2dPreview')); + } else { + $('#preview-switch').html(trans('user.switch3dPreview')); + } }); async function showPlayerTexturePreview(pid) { @@ -32,26 +41,53 @@ async function showPlayerTexturePreview(pid) { data: { pid: pid } }); - // Render skin preview of selected player - ['steve', 'alex', 'cape'].forEach((type) => { - const tid = result[`tid_${type}`]; - const preview = new TexturePreview(type, tid, result.preference); + let shouldBeUpdated = false; + + for (const type of ['steve', 'alex', 'cape']) { + // Render skin preview of selected player + const tid = result[`tid_${type}`]; if (tid) { - preview.change2dPreview().change3dPreview(); - } else { - preview.showNotUploaded(); - } - }); + $(`#${type}`) + .attr('src', url(`preview/200/${tid}.png`)).show().parent() + .attr('href', url(`skinlib/show/${tid}`)).next().hide(); - if ((result.preference === 'default' && !result.tid_steve) || - (result.preference === 'slim' && !result.tid_alex)) - { - // show default skin - MSP.changeSkin(defaultSkin); + const { hash } = await fetch({ + type: 'GET', + url: url(`skinlib/info/${tid}`), + dataType: 'json' + }); + + if (type === 'cape') { + $.msp.config.capeUrl = url(`textures/${hash}`); + } else if (type === (result.preference === 'slim' ? 'alex' : 'steve')) { + $.msp.config.skinUrl = url(`textures/${hash}`); + } + } else { + $(`#${type}`).hide().parent().next().show(); + + if (type === 'cape') { + $.msp.config.capeUrl = ''; + } else if (type === (result.preference === 'slim' ? 'alex' : 'steve')) { + $.msp.config.skinUrl = defaultSkin; + } + } } - console.log(`Texture previews of player ${result.player_name} rendered.`); + if ($.msp.config.slim !== (result.preference === 'slim')) { + $.msp.config.slim = !$.msp.config.slim; + shouldBeUpdated = true; + } + + if ($.msp.config.skinUrl !== $.msp.viewer.skinUrl || $.msp.config.capeUrl !== $.msp.viewer.capeUrl) { + shouldBeUpdated = true; + } + + if (shouldBeUpdated) { + initSkinViewer(); + $.msp.handles.walk.paused = $.msp.handles.rotate.paused = false; + console.log(`[skinview3d] texture previews of player ${result.player_name} rendered`); + } } catch (error) { showAjaxError(error); } diff --git a/resources/assets/src/sass/general.scss b/resources/assets/src/sass/general.scss index 3360d5ab..602ec957 100644 --- a/resources/assets/src/sass/general.scss +++ b/resources/assets/src/sass/general.scss @@ -97,6 +97,12 @@ input:-webkit-autofill { } } +@media (min-width: 992px) { + #preview-3d-container { + min-height: 500px; + } +} + .texture-name { width: 65%; display: inline-block; @@ -157,12 +163,7 @@ input:-webkit-autofill { font-size: 16px; } -#canvas3d { - margin: 0 auto; - display: block; -} - -#preview-2d > p { +#preview-2d-container > p { height: 64px; line-height: 64px; } diff --git a/resources/views/common/texture-preview.tpl b/resources/views/common/texture-preview.tpl index a3ce1228..1da57b76 100644 --- a/resources/views/common/texture-preview.tpl +++ b/resources/views/common/texture-preview.tpl @@ -1,5 +1,5 @@
-

{{ trans('general.texture-preview') }} +

{!! $title or trans('general.texture-preview') !!}
@@ -10,7 +10,7 @@

-
+
diff --git a/resources/views/skinlib/show.tpl b/resources/views/skinlib/show.tpl index 54fc9328..06f59148 100644 --- a/resources/views/skinlib/show.tpl +++ b/resources/views/skinlib/show.tpl @@ -2,16 +2,6 @@ @section('title', $texture->name) -@section('style') - -@endsection - @section('content')
@@ -162,13 +152,9 @@ $(document).ready(function () { initSkinViewer(60); - initAnimationControllers(); + registerAnimationController(); + registerWindowResizeHandler(); $.msp.handles.walk.paused = $.msp.handles.rotate.paused = false; }); - - $(window).resize(function () { - $.msp.viewer.width = $('#skin_container').width(); - $.msp.viewer.height = $('#skin_container').height(); - }); @endsection diff --git a/resources/views/skinlib/upload.tpl b/resources/views/skinlib/upload.tpl index eeec3002..f9fe110c 100644 --- a/resources/views/skinlib/upload.tpl +++ b/resources/views/skinlib/upload.tpl @@ -4,15 +4,10 @@ @section('style') @endsection @@ -98,7 +93,8 @@ label[for="type-cape"] { @section('script') @endsection diff --git a/resources/views/user/closet.tpl b/resources/views/user/closet.tpl index 0e73e0d4..1529e95d 100644 --- a/resources/views/user/closet.tpl +++ b/resources/views/user/closet.tpl @@ -93,8 +93,12 @@ @section('script') @endsection diff --git a/resources/views/user/player.tpl b/resources/views/user/player.tpl index 931bcc45..92c52391 100644 --- a/resources/views/user/player.tpl +++ b/resources/views/user/player.tpl @@ -74,30 +74,22 @@
-
-

{!! trans('user.player.player-info') !!} -
- - - -
-

-
+ + @include('common.texture-preview', ['title' => trans('user.player.player-info') ]) +
-
-
-

{{ trans('user.player.textures.steve') }} - {{ trans('user.player.textures.empty') }} -

+ +

{{ trans('user.player.textures.cape') }} + {{ trans('user.player.textures.empty') }} +

@@ -139,22 +131,16 @@
- - - @endsection @section('script') - - @endsection