zhangyuheng/blessing-skin-server
1
0
Fork 0
forked from mirror/blessing-skin-server
Code Pull Requests 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.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 };
}

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

@ -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

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

@ -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,

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

@ -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);
}

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 {
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;
}

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

@ -1,5 +1,5 @@
<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>
<div class="operations">
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.walk').' / '.trans('general.run') }}" class="fa fa-forward"></i>
@ -10,7 +10,7 @@
</h3>
</div><!-- /.box-header -->
<div class="box-body">
<div id="skin_container">
<div id="preview-3d-container">
<!-- Container for 3D Preview -->
</div>
</div><!-- /.box-body -->

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

@ -2,16 +2,6 @@
@section('title', $texture->name)
@section('style')
<style>
@media (min-width: 992px) {
#skin_container {
min-height: 400px;
}
}
</style>
@endsection
@section('content')
<!-- Full Width Column -->
<div class="content-wrapper">
@ -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();
});
</script>
@endsection

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

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

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

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

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

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