zhangyuheng/blessing-skin-server
1
0
Fork 0
forked from mirror/blessing-skin-server
Code Pull Requests Activity

enhance showing previews of player texture

Browse Source
This commit is contained in:
printempw 2017-01-20 21:23:24 +08:00
parent 49fd8e4eb3
commit c16ae91de0
8 changed files with 150 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/options.php
View File

@ -3,7 +3,7 @@
* @Author: printempw
* @Date: 2016-07-29 11:53:11
* @Last Modified by: printempw
* @Last Modified time: 2017-01-20 17:54:15
* @Last Modified time: 2017-01-20 19:24:21
*/
return [
@ -42,5 +42,5 @@ return [
'plugins_enabled' => '',
'copyright_prefer' => '0',
'score_per_closet_item' => '0',
'favicon_url' => 'images/favicon.ico'
'favicon_url' => 'dist/images/favicon.ico'
];

108
resources/assets/src/scripts/general.js
View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-09-15 10:39:41
* @Last Modified by: printempw
* @Last Modified time: 2017-01-19 22:42:44
* @Last Modified time: 2017-01-20 21:13:38
*/
'use strict';
@ -138,18 +138,6 @@ function showAjaxError(json) {
showModal(json.responseText.replace(/\n/g, '<br />'), trans('general.fatalError'), 'danger');
}
/**
* Check if current environment is mobile.
*
* @return {Boolean}
*/
function isMobile() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
return true;
}
return false;
}
/**
* Get parameters in query string with key.
*
@ -166,7 +154,7 @@ function getQueryString(key) {
}
}
// quick fix for compatibility of String.prototype.endsWith
// polyfill of String.prototype.endsWith
if (!String.prototype.endsWith) {
String.prototype.endsWith = function (searchString, position) {
var subjectString = this.toString();
@ -226,3 +214,95 @@ function logout() {
$('#logout-button').click(() => confirmLogout());
$(document).ready(() => $('li.active > ul').show());
var TexturePreview = function (type, tid, preference) {
this.tid = tid;
this.type = type;
this.selector = $('#' + type);
this.preference = type == 'steve' ? 'default' : 'slim';
this.playerPreference = preference;
this.change2dPreview = function () {
this.selector
.attr('src', url(`preview/200/${this.tid}.png`))
.show()
.parent().attr('href', url('skinlib/show?tid=' + this.tid))
.next().hide();
return this;
}
this.change3dPreview = function () {
if (this.playerPreference == this.preference) {
$.ajax({
type: "GET",
url: url(`skinlib/info/${this.tid}`),
dataType: "json",
success: (json) => {
let textureUrl = url('textures/' + json.hash);
if (this.type == 'cape') {
MSP.changeCape(textureUrl);
} else {
MSP.changeSkin(textureUrl);
}
},
error: (json) => showAjaxError(json)
});
}
return this;
}
this.showNotUploaded = function () {
this.selector.hide().parent().next().show();
return this;
}
}
TexturePreview.previewType = '3D';
TexturePreview.init3dPreview = () => {
if (TexturePreview.previewType == '2D') return;
$('#preview-2d').hide();
if ($(window).width() < 800) {
var canvas = MSP.get3dSkinCanvas($('#skinpreview').width(), $('#skinpreview').width());
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
} else {
var canvas = MSP.get3dSkinCanvas(350, 350);
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
}
}
TexturePreview.show3dPreview = () => {
TexturePreview.previewType = "3D";
TexturePreview.init3dPreview();
$('#preview-2d').hide();
$('.operations').show();
$('#preview-switch').html(trans('user.switch2dPreview'));
}
TexturePreview.show2dPreview = function () {
TexturePreview.previewType = '2D';
$('#canvas3d').remove();
$('.operations').hide();
$('#preview-2d').show();
$('#preview-switch').html(trans('user.switch3dPreview')).attr('onclick', 'show3dPreview();');
}
// change 3D preview status
$('.fa-pause').click(function () {
MSP.setStatus('rotation', ! MSP.getStatus('rotation'));
MSP.setStatus('movements', ! MSP.getStatus('movements'));
$(this).toggleClass('fa-pause').toggleClass('fa-play');
});
$('.fa-forward').click(() => MSP.setStatus('running', !MSP.getStatus('running')) );
$('.fa-repeat' ).click(() => MSP.setStatus('rotation', !MSP.getStatus('rotation')) );

30
resources/assets/src/scripts/skinlib.js
View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-07-19 10:46:38
* @Last Modified by: printempw
* @Last Modified time: 2016-10-23 11:38:36
* @Last Modified time: 2017-01-20 20:57:52
*/
'use strict';
@ -123,34 +123,6 @@ function removeFromCloset(tid) {
}
function init3dCanvas() {
if ($(window).width() < 800) {
var canvas = MSP.get3dSkinCanvas($('#skinpreview').width(), $('#skinpreview').width());
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
} else {
var canvas = MSP.get3dSkinCanvas(350, 350);
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
}
}
// Change 3D preview status
$('.fa-pause').click(function(){
MSP.setStatus('movements', !MSP.getStatus('movements'));
if ($(this).hasClass('fa-pause'))
$(this).removeClass('fa-pause').addClass('fa-play');
else
$(this).removeClass('fa-play').addClass('fa-pause');
// stop rotation when pause
MSP.setStatus('rotation', !MSP.getStatus('rotation'));
});
$('.fa-forward').click(function(){
MSP.setStatus('running', !MSP.getStatus('running'));
});
$('.fa-repeat').click(function(){
MSP.setStatus('rotation', !MSP.getStatus('rotation'));
});
$('body').on('change', '#file', function() {
var files = $('#file').prop('files');
var type = $('#type-cape').prop('checked') ? "cape" : "skin";

154
resources/assets/src/scripts/user.js
View File

@ -2,141 +2,35 @@
* @Author: printempw
* @Date: 2016-07-16 10:02:24
* @Last Modified by: printempw
* @Last Modified time: 2017-01-17 22:35:58
* @Last Modified time: 2017-01-20 21:19:07
*/
'use strict';
$('body').on('click', '.player', function() {
$('body').on('click', '.player', function () {
$('.player-selected').removeClass('player-selected');
$(this).addClass('player-selected');
var pid = this.id;
$.ajax({
type: "POST",
url: "./player/show",
dataType: "json",
data: { "pid": pid },
success: function(json) {
if ((json.preference == "default" && !json.tid_steve) || (json.preference == "slim" && !json.tid_alex)) {
MSP.changeSkin(dskin);
} else {
if (json.tid_steve) {
getHashFromTid(json.tid_steve, function(hash) {
$('#steve').attr('src', '../preview/200/' + json.tid_steve + '.png').show();
$('#steve').parent().attr('href', '../skinlib/show?tid=' + json.tid_steve);
$('#steve').parent().next().hide();
if (json.preference == "default")
MSP.changeSkin('../textures/' + hash);
});
} else {
$('#steve').hide().parent().next().show();
}
if (json.tid_alex) {
getHashFromTid(json.tid_alex, function(hash) {
$('#alex').attr('src', '../preview/200/' + json.tid_alex + '.png').show();
$('#alex').parent().attr('href', '../skinlib/show?tid=' + json.tid_alex);
$('#alex').parent().next().hide();
if (json.preference == "slim")
MSP.changeSkin('../textures/' + hash);
});
} else {
$('#alex').hide().parent().next().show();
}
}
if (json.tid_cape) {
getHashFromTid(json.tid_cape, function(hash) {
$('#cape').attr('src', '../preview/200/' + json.tid_cape + '.png').show();
$('#cape').parent().attr('href', '../skinlib/show?tid=' + json.tid_cape);
$('#cape').parent().next().hide();
MSP.changeCape('../textures/' + hash);
});
} else {
$('#cape').hide().parent().next().show();
MSP.changeCape('');
}
},
error: showAjaxError
});
showPlayerTexturePreview(this.id);
});
function getHashFromTid(tid, callback) {
$.ajax({
type: "GET",
url: "../skinlib/info/" + tid,
dataType: "json",
success: function(json) {
callback(json.hash)
},
error: showAjaxError
});
}
var preview_type = "3d";
function init3dCanvas() {
if (preview_type == "2d") return;
$('#preview-2d').hide();
if ($(window).width() < 800) {
var canvas = MSP.get3dSkinCanvas($('#skinpreview').width(), $('#skinpreview').width());
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
} else {
var canvas = MSP.get3dSkinCanvas(350, 350);
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
}
}
function show2dPreview() {
preview_type = "2d";
$('#canvas3d').remove();
$('#preview-msg').remove();
$('.operations').hide();
$('#preview-2d').show();
$('#preview-switch').html(trans('user.switch3dPreview')).attr('onclick', 'show3dPreview();');
}
function show3dPreview() {
if (isMobile() && preview_type == "2d") {
$("#skinpreview").append($('<div id="preview-msg" class="alert alert-info alert-dismissible fade in"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>手机上的 3D 预览可能会出现奇怪的问题（譬如空白一片），亟待解决。</div>'));
}
preview_type = "3d";
init3dCanvas();
$('#preview-2d').hide();
$('.operations').show();
$('#preview-switch').html(trans('user.switch2dPreview')).attr('onclick', 'show2dPreview();');
}
// Change 3D preview status
$('.fa-pause').click(function(){
MSP.setStatus("movements", !MSP.getStatus("movements"));
if ($(this).hasClass('fa-pause'))
$(this).removeClass('fa-pause').addClass('fa-play');
else
$(this).removeClass('fa-play').addClass('fa-pause');
});
$('.fa-forward').click(function(){
MSP.setStatus("running", !MSP.getStatus("running"));
});
$('.fa-repeat').click(function(){
MSP.setStatus("rotation", !MSP.getStatus("rotation"));
$('body').on('click', '#preview-switch', () => {
TexturePreview.previewType == '3D' ? TexturePreview.show2dPreview() : TexturePreview.show3dPreview();
});
var selected = [];
$('body').on('click', '.item', function() {
$('body').on('click', '.item', function () {
$('.item-selected').removeClass('item-selected');
$(this).addClass('item-selected');
var tid = $(this).attr('tid');
let tid = $(this).attr('tid');
$.ajax({
type: "POST",
url: "../skinlib/info/" + tid,
dataType: "json",
success: function(json) {
success: (json) => {
if (json.type == "cape") {
MSP.changeCape('../textures/' + json.hash);
selected['cape'] = tid;
@ -147,7 +41,7 @@ $('body').on('click', '.item', function() {
selected.length = 0;
['skin', 'cape'].forEach(function(key) {
['skin', 'cape'].forEach((key) => {
if (selected[key] !== undefined) selected.length++;
$('#textures-indicator').html(selected.length);
@ -157,6 +51,36 @@ $('body').on('click', '.item', function() {
});
});
function showPlayerTexturePreview(pid) {
$.ajax({
type: "POST",
url: url('user/player/show'),
dataType: "json",
data: { "pid": pid },
success: (json) => {
['steve', 'alex', 'cape'].forEach((type) => {
let tid = json[`tid_${type}`];
let preview = new TexturePreview(type, tid, json.preference);
if (tid) {
preview.change2dPreview().change3dPreview();
} else {
preview.showNotUploaded();
}
});
if ((json.preference == "default" && !json.tid_steve) || (json.preference == "slim" && !json.tid_alex)) {
// show default skin
MSP.changeSkin(defaultSkin);
}
console.log(`Texture previews of player ${json.player_name} rendered.`);
},
error: showAjaxError
});
}
function renameClosetItem(tid) {
swal({
title: trans('user.renameClosetItem'),

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

@ -147,8 +147,8 @@
$('[for="private"]').tooltip();
});
$(document).ready(init3dCanvas);
$(document).ready(TexturePreview.init3dPreview);
// Auto resize canvas to fit responsive design
$(window).resize(init3dCanvas);
$(window).resize(TexturePreview.init3dPreview);
</script>
@endsection

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

@ -95,7 +95,7 @@ label[for="type-cape"] {
@section('script')
<script>
$(document).ready(function() {
init3dCanvas();
TexturePreview.init3dPreview();
$('input[type=radio]').iCheck({
radioClass: 'iradio_square-blue'
});
@ -106,6 +106,6 @@ label[for="type-cape"] {
});
// Auto resize canvas to fit responsive design
$(window).resize(init3dCanvas);
$(window).resize(TexturePreview.init3dPreview);
</script>
@endsection

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

@ -114,8 +114,8 @@
@section('script')
<script>
$(document).ready(init3dCanvas);
$(document).ready(TexturePreview.init3dPreview);
// Auto resize canvas to fit responsive design
$(window).resize(init3dCanvas);
$(window).resize(TexturePreview.init3dPreview);
</script>
@endsection

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

File diff suppressed because one or more lines are too long