Leisuretimedock/blessing-skin-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate to skinview3d completely

Browse Source
This commit is contained in:
printempw 2018-02-23 21:56:03 +08:00
parent 9505efb797
commit d2d8eef15f
10 changed files with 133 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/assets/src/js/common/skinview3d.js
View File

@ -4,10 +4,10 @@ $.msp = {};
$.msp.handles = {}; $.msp.handles = {};
$.msp.control = null; $.msp.control = null;
$.msp.config = { $.msp.config = {
domElement: document.getElementById('skin_container'), domElement: document.getElementById('preview-3d-container'),
slim: false, slim: false,
width: $('#skin_container').width(), width: $('#preview-3d-container').width(),
height: $('#skin_container').height(), height: $('#preview-3d-container').height(),
skinUrl: '', skinUrl: '',
capeUrl: '' capeUrl: ''
}; };
@ -29,6 +29,14 @@ function initSkinViewer(cameraPositionZ = 70) {
$.msp.control = skinview3d.createOrbitControls($.msp.viewer); $.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() { function disposeSkinViewer() {
if ($.msp.viewer instanceof skinview3d.SkinViewer) { if ($.msp.viewer instanceof skinview3d.SkinViewer) {
$.msp.viewer.dispose(); $.msp.viewer.dispose();
@ -37,7 +45,7 @@ function disposeSkinViewer() {
} }
} }
function initAnimationControllers() { function registerAnimationController() {
$('.fa-pause').click(function () { $('.fa-pause').click(function () {
$.msp.viewer.animationPaused = !$.msp.viewer.animationPaused; $.msp.viewer.animationPaused = !$.msp.viewer.animationPaused;
$(this).toggleClass('fa-pause').toggleClass('fa-play'); $(this).toggleClass('fa-pause').toggleClass('fa-play');
@ -52,6 +60,13 @@ function initAnimationControllers() {
$('.fa-stop').click(() => initSkinViewer()); $('.fa-stop').click(() => initSkinViewer());
} }
if (process.env.NODE_ENV === 'test') { function registerWindowResizeHandler() {
module.exports = { initSkinViewer, initAnimationControllers }; $(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 };
} }

5
resources/assets/src/js/skinlib/upload.js
View File

@ -25,11 +25,6 @@ function initUploadListeners() {
$('[for="private"]').tooltip(); $('[for="private"]').tooltip();
$.msp.handles.walk.paused = $.msp.handles.rotate.paused = false; $.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 // Real-time preview

21
resources/assets/src/js/user/closet.js
View File

@ -1,4 +1,4 @@
/* global MSP */ /* global initSkinViewer */
'use strict'; 'use strict';
@ -21,13 +21,20 @@ $('body').on('click', '.item-body', async function () {
}); });
if (type === 'cape') { if (type === 'cape') {
MSP.changeCape(url(`textures/${hash}`)); $.msp.viewer.capeUrl = $.msp.config.capeUrl = url(`textures/${hash}`);
$indicator.data('cape', tid); $indicator.data('cape', tid);
} else { } else {
MSP.changeSkin(url(`textures/${hash}`)); $.msp.viewer.skinUrl = $.msp.config.skinUrl = url(`textures/${hash}`);
$indicator.data('skin', tid); $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 skin = $indicator.data('skin');
const cape = $indicator.data('cape'); 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) { function renderClosetItemComponent(item) {
return ` return `
@ -158,9 +165,9 @@ async function reloadCloset(textureCategory, page, search) {
}); });
renderCloset(items, category); renderCloset(items, category);
const paginator = $('#closet-paginator'); const paginator = $('#closet-paginator');
paginator.attr(`last-${category}-page`, page); paginator.attr(`last-${category}-page`, page);
paginator.jqPaginator('option', { paginator.jqPaginator('option', {
currentPage: page, currentPage: page,

72
resources/assets/src/js/user/player.js
View File

@ -1,4 +1,4 @@
/* global MSP, defaultSkin */ /* global defaultSkin, initSkinViewer */
'use strict'; 'use strict';
@ -7,8 +7,6 @@ $('body').on('click', '.player', function () {
$(this).addClass('player-selected'); $(this).addClass('player-selected');
showPlayerTexturePreview(this.id); showPlayerTexturePreview(this.id);
}).on('click', '#preview-switch', () => {
TexturePreview.previewType === '3D' ? TexturePreview.show2dPreview() : TexturePreview.show3dPreview();
}).on('change', '#preference', async function () { }).on('change', '#preference', async function () {
try { try {
const { errno, msg } = await fetch({ const { errno, msg } = await fetch({
@ -21,6 +19,17 @@ $('body').on('click', '.player', function () {
} catch (error) { } catch (error) {
showAjaxError(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) { async function showPlayerTexturePreview(pid) {
@ -32,26 +41,53 @@ async function showPlayerTexturePreview(pid) {
data: { pid: pid } data: { pid: pid }
}); });
// Render skin preview of selected player let shouldBeUpdated = false;
['steve', 'alex', 'cape'].forEach((type) => {
const tid = result[`tid_${type}`]; for (const type of ['steve', 'alex', 'cape']) {
const preview = new TexturePreview(type, tid, result.preference); // Render skin preview of selected player
const tid = result[`tid_${type}`];
if (tid) { if (tid) {
preview.change2dPreview().change3dPreview(); $(`#${type}`)
} else { .attr('src', url(`preview/200/${tid}.png`)).show().parent()
preview.showNotUploaded(); .attr('href', url(`skinlib/show/${tid}`)).next().hide();
}
});
if ((result.preference === 'default' && !result.tid_steve) || const { hash } = await fetch({
(result.preference === 'slim' && !result.tid_alex)) type: 'GET',
{ url: url(`skinlib/info/${tid}`),
// show default skin dataType: 'json'
MSP.changeSkin(defaultSkin); });
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) { } catch (error) {
showAjaxError(error); showAjaxError(error);
} }

13
resources/assets/src/sass/general.scss
View File

@ -97,6 +97,12 @@ input:-webkit-autofill {
} }
} }
@media (min-width: 992px) {
#preview-3d-container {
min-height: 500px;
}
}
.texture-name { .texture-name {
width: 65%; width: 65%;
display: inline-block; display: inline-block;
@ -157,12 +163,7 @@ input:-webkit-autofill {
font-size: 16px; font-size: 16px;
} }
#canvas3d { #preview-2d-container > p {
margin: 0 auto;
display: block;
}
#preview-2d > p {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
} }

4
resources/views/common/texture-preview.tpl
View File

@ -1,5 +1,5 @@
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title" style="width: 100%;">{{ trans('general.texture-preview') }} <h3 class="box-title" style="width: 100%;">{!! $title or trans('general.texture-preview') !!}
<span id="textures-indicator" data-toggle="tooltip" title="" class="badge bg-light-blue"></span> <span id="textures-indicator" data-toggle="tooltip" title="" class="badge bg-light-blue"></span>
<div class="operations"> <div class="operations">
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.walk').' / '.trans('general.run') }}" class="fa fa-forward"></i> <i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.walk').' / '.trans('general.run') }}" class="fa fa-forward"></i>
@ -10,7 +10,7 @@
</h3> </h3>
</div><!-- /.box-header --> </div><!-- /.box-header -->
<div class="box-body"> <div class="box-body">
<div id="skin_container"> <div id="preview-3d-container">
<!-- Container for 3D Preview --> <!-- Container for 3D Preview -->
</div> </div>
</div><!-- /.box-body --> </div><!-- /.box-body -->

18
resources/views/skinlib/show.tpl
View File

@ -2,16 +2,6 @@
@section('title', $texture->name) @section('title', $texture->name)
@section('style')
<style>
@media (min-width: 992px) {
#skin_container {
min-height: 400px;
}
}
</style>
@endsection
@section('content') @section('content')
<!-- Full Width Column --> <!-- Full Width Column -->
<div class="content-wrapper"> <div class="content-wrapper">
@ -162,13 +152,9 @@
$(document).ready(function () { $(document).ready(function () {
initSkinViewer(60); initSkinViewer(60);
initAnimationControllers(); registerAnimationController();
registerWindowResizeHandler();
$.msp.handles.walk.paused = $.msp.handles.rotate.paused = false; $.msp.handles.walk.paused = $.msp.handles.rotate.paused = false;
}); });
$(window).resize(function () {
$.msp.viewer.width = $('#skin_container').width();
$.msp.viewer.height = $('#skin_container').height();
});
</script> </script>
@endsection @endsection

16
resources/views/skinlib/upload.tpl
View File

@ -4,15 +4,10 @@
@section('style') @section('style')
<style> <style>
label[for="type-skin"], label[for="type-skin"],
label[for="type-cape"] { label[for="type-cape"] {
margin-top: 5px; margin-top: 5px;
}
@media (min-width: 992px) {
#skin_container {
min-height: 500px;
} }
}
</style> </style>
@endsection @endsection
@ -98,7 +93,8 @@ label[for="type-cape"] {
@section('script') @section('script')
<script> <script>
initUploadListeners(); initUploadListeners();
initAnimationControllers(); registerAnimationController();
registerWindowResizeHandler();
</script> </script>
@endsection @endsection

10
resources/views/user/closet.tpl
View File

@ -93,8 +93,12 @@
@section('script') @section('script')
<script> <script>
$(document).ready(TexturePreview.init3dPreview); $(document).ready(function () {
// Auto resize canvas to fit responsive design $.msp.config.skinUrl = defaultSkin;
$(window).resize(TexturePreview.init3dPreview); initSkinViewer();
registerAnimationController();
registerWindowResizeHandler();
$.msp.handles.walk.paused = $.msp.handles.rotate.paused = false;
});
</script> </script>
@endsection @endsection

54
resources/views/user/player.tpl
View File

@ -74,30 +74,22 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="box"> <div class="box">
<div class="box-header with-border"> <!-- 3D skin preview -->
<h3 class="box-title" style="width: 100%;">{!! trans('user.player.player-info') !!} @include('common.texture-preview', ['title' => trans('user.player.player-info') ])
<div class="operations"> <!-- 2D skin preview -->
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.walk') }}" class="fa fa-pause"></i>
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.run') }}" class="fa fa-forward"></i>
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.rotation') }}" class="fa fa-repeat"></i>
</div>
</h3>
</div><!-- /.box-header -->
<div class="box-body"> <div class="box-body">
<div id="skinpreview"> <div id="preview-2d-container" style="display: none;">
<div id="preview-2d"> <p>{{ trans('user.player.textures.steve') }}<a href=""><img id="steve" class="skin2d" /></a>
<p>{{ trans('user.player.textures.steve') }}<a href=""><img id="steve" class="skin2d" /></a> <span class="skin2d">{{ trans('user.player.textures.empty') }}</span>
<span class="skin2d">{{ trans('user.player.textures.empty') }}</span> </p>
</p>
<p>{{ trans('user.player.textures.alex') }}<a href=""><img id="alex" class="skin2d" /></a> <p>{{ trans('user.player.textures.alex') }}<a href=""><img id="alex" class="skin2d" /></a>
<span class="skin2d">{{ trans('user.player.textures.empty') }}</span> <span class="skin2d">{{ trans('user.player.textures.empty') }}</span>
</p> </p>
<p>{{ trans('user.player.textures.cape') }}<a href=""><img id="cape" class="skin2d" /></a> <p>{{ trans('user.player.textures.cape') }}<a href=""><img id="cape" class="skin2d" /></a>
<span class="skin2d">{{ trans('user.player.textures.empty') }}</span> <span class="skin2d">{{ trans('user.player.textures.empty') }}</span>
</p> </p>
</div>
</div> </div>
</div><!-- /.box-body --> </div><!-- /.box-body -->
<div class="box-footer"> <div class="box-footer">
@ -139,22 +131,16 @@
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->
<script type="text/javascript" src="{{ assets('js/three.min.js') }}"></script>
<script type="text/javascript" src="{{ assets('js/three.msp.js') }}"></script>
@endsection @endsection
@section('script') @section('script')
<script> <script>
// Default skin image, base64 encoded $(document).ready(function () {
var defaultSkin = "data:image/png;base64,{{ App\Http\Controllers\TextureController::getDefaultSkin() }}"; $.msp.config.skinUrl = defaultSkin;
MSP.changeSkin(defaultSkin); initSkinViewer();
console.log('[3D Preview] Default skin rendered.'); registerAnimationController();
registerWindowResizeHandler();
$(document).ready(TexturePreview.init3dPreview); $.msp.handles.walk.paused = $.msp.handles.rotate.paused = false;
// Auto resize canvas to fit responsive design });
$(window).resize(TexturePreview.init3dPreview);
</script> </script>
@endsection @endsection