diff --git a/config/options.php b/config/options.php
index 30dff54b..9dc86da6 100644
--- a/config/options.php
+++ b/config/options.php
@@ -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'
];
diff --git a/resources/assets/src/scripts/general.js b/resources/assets/src/scripts/general.js
index 09c5c21f..6a64485a 100644
--- a/resources/assets/src/scripts/general.js
+++ b/resources/assets/src/scripts/general.js
@@ -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, '
'), 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')) );
diff --git a/resources/assets/src/scripts/skinlib.js b/resources/assets/src/scripts/skinlib.js
index c4fd6e78..663af621 100644
--- a/resources/assets/src/scripts/skinlib.js
+++ b/resources/assets/src/scripts/skinlib.js
@@ -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";
diff --git a/resources/assets/src/scripts/user.js b/resources/assets/src/scripts/user.js
index a099f617..b14864af 100644
--- a/resources/assets/src/scripts/user.js
+++ b/resources/assets/src/scripts/user.js
@@ -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($('手机上的 3D 预览可能会出现奇怪的问题（譬如空白一片），亟待解决。
'));
- }
- 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'),
diff --git a/resources/views/skinlib/show.tpl b/resources/views/skinlib/show.tpl
index 78adc68d..06981f21 100644
--- a/resources/views/skinlib/show.tpl
+++ b/resources/views/skinlib/show.tpl
@@ -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);
@endsection
diff --git a/resources/views/skinlib/upload.tpl b/resources/views/skinlib/upload.tpl
index f44f2ac3..8247c7b4 100644
--- a/resources/views/skinlib/upload.tpl
+++ b/resources/views/skinlib/upload.tpl
@@ -95,7 +95,7 @@ label[for="type-cape"] {
@section('script')
@endsection
diff --git a/resources/views/user/closet.tpl b/resources/views/user/closet.tpl
index 7b5dca5a..219e1426 100644
--- a/resources/views/user/closet.tpl
+++ b/resources/views/user/closet.tpl
@@ -114,8 +114,8 @@
@section('script')
@endsection
diff --git a/resources/views/user/player.tpl b/resources/views/user/player.tpl
index 6187174f..a2f3ac68 100644
--- a/resources/views/user/player.tpl
+++ b/resources/views/user/player.tpl
@@ -102,7 +102,7 @@
@@ -140,8 +140,8 @@
-
-
+
+
@endsection
@@ -149,12 +149,13 @@
@endsection