From 15b9715aeff8026abbfdfd3d04e46a0f9b188a86 Mon Sep 17 00:00:00 2001
From: printempw <h@prinzeugen.net>
Date: Wed, 10 Feb 2016 18:59:14 +0800
Subject: [PATCH] added real-time 2d preview

---
 assets/css/user.style.css |  4 ++--
 assets/js/user.utils.js   | 25 +++++++++++++++++--------
 user/preview.php          | 11 +++++++++--
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/assets/css/user.style.css b/assets/css/user.style.css
index 1b4bfc9a..1255dca8 100644
--- a/assets/css/user.style.css
+++ b/assets/css/user.style.css
@@ -2,7 +2,7 @@
 * @Author: prpr
 * @Date:   2016-01-21 19:12:06
 * @Last Modified by:   prpr
-* @Last Modified time: 2016-02-05 18:50:36
+* @Last Modified time: 2016-02-10 15:41:59
 */
 
 .home-menu-blur {
@@ -100,7 +100,7 @@ input[type=radio] {
 .container {
     position: initial !important;
 }
-#skinpreview > p {
+#preview-2d > p {
     height: 64px;
     line-height: 64px;
 }
diff --git a/assets/js/user.utils.js b/assets/js/user.utils.js
index ac24d58d..93251a86 100644
--- a/assets/js/user.utils.js
+++ b/assets/js/user.utils.js
@@ -2,7 +2,7 @@
 * @Author: prpr
 * @Date:   2016-01-21 13:56:40
 * @Last Modified by:   prpr
-* @Last Modified time: 2016-02-07 10:25:41
+* @Last Modified time: 2016-02-10 18:54:54
 */
 
 'use strict';
@@ -33,8 +33,11 @@ function handleFiles(files, type) {
                     }
                     if (type == "skin") {
                         MSP.changeSkin(img.src);
+                        var model = $('#model-alex').prop('checked') ? "alex" : "steve";
+                        change2dTexture(model, img.src);
                     } else {
                         MSP.changeCape(img.src);
+                        change2dTexture('cape', img.src);
                     }
                 };
                 img.onerror = function () {
@@ -76,21 +79,19 @@ $("[title='Rotation']").click(function(){
 function show2dPreview() {
     $('#canvas3d').remove();
     $('.operations').hide();
-    $("#skinpreview").html($('<p>Steve 模型的皮肤：</p>').append($('<img />').addClass('skin2d').attr('src', '../skin/'+docCookies.getItem('uname')+'-steve.png?v='+Math.random())));
-    $("#skinpreview").append($('<p>Alex 模型的皮肤：</p>').append($('<img />').addClass('skin2d').attr('src', '../skin/'+docCookies.getItem('uname')+'-alex.png?v='+Math.random())));
-    $("#skinpreview").append($('<p>披风：</p>').append($('<img />').addClass('skin2d').attr('src', '../cape/'+docCookies.getItem('uname')+'.png?v='+Math.random())));
-    $('#preview').html('3D Preview').attr('href', 'javascript:show3dPreview();');
+    $('#preview-2d').show();
+    $('#preview').html('3D 皮肤预览').attr('href', 'javascript:show3dPreview();');
 }
 
 function show3dPreview() {
-    $('#skinpreview').html('');
+    $('#preview-2d').hide();
     $('.operations').show();
     init3dCanvas()
-    $('#preview').html('2D Preview').attr('href', 'javascript:show2dPreview();');
+    $('#preview').html('2D 皮肤预览').attr('href', 'javascript:show2dPreview();');
 }
 
 $("#upload").click(function(){
-    var model = $('#model-steve').prop('checked') ? "steve" : "alex";
+    var model = $('#model-alex').prop('checked') ? "alex" : "steve";
     var skin_file = $('#skininput').get(0).files[0];
     var cape_file = $('#capeinput').get(0).files[0];
     var form_data = new FormData();
@@ -147,3 +148,11 @@ function changeModel(uname) {
     });
 }
 
+$(document).ready(function(){
+    $('#preview-2d').hide();
+    $('#model-steve').prop('checked', true);
+});
+
+function change2dTexture(type, file) {
+    $('#'+type).attr('src', file);
+}
diff --git a/user/preview.php b/user/preview.php
index d5d0799b..b5fa197e 100644
--- a/user/preview.php
+++ b/user/preview.php
@@ -3,10 +3,17 @@
  * @Author: prpr
  * @Date:   2016-02-04 19:37:21
  * @Last Modified by:   prpr
- * @Last Modified time: 2016-02-06 23:24:56
+ * @Last Modified time: 2016-02-10 18:37:35
  */
 ?>
-<div id="skinpreview"></div>
+<div id="skinpreview">
+    <div id="preview-2d">
+        <p>Steve 模型的皮肤：<img id="steve" class="skin2d" src="<?php echo "../textures/".$user->getTexture('skin');?>" /></p>
+        <p>Alex 模型的皮肤：<img id="alex" class="skin2d" src="<?php echo "../textures/".$user->getTexture('alex');?>" /></p>
+        <p>披风：<img id="cape" class="skin2d" src="<?php echo "../textures/".$user->getTexture('cape');?>" /></p>
+    </div>
+</div>
+
 <script type="text/javascript" src="../libs/three.js"></script>
 <script type="text/javascript" src="../libs/three.msp.js"></script>
 <?php