enhance showing previews of player texture

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'
 ];

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, '<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')) );

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";

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;
+    showPlayerTexturePreview(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
-    });
 });
 
-function getHashFromTid(tid, callback) {
+$('body').on('click', '#preview-switch', () => {
-    $.ajax({
+    TexturePreview.previewType == '3D' ? TexturePreview.show2dPreview() : TexturePreview.show3dPreview();
-        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"));
 });
 
 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'),

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);
 </script>
 @endsection

resources/views/skinlib/upload.tpl

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

resources/views/user/closet.tpl

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