121 lines
3.3 KiB
JavaScript
121 lines
3.3 KiB
JavaScript
/* global MSP */
|
|
|
|
class TexturePreview {
|
|
|
|
/**
|
|
*
|
|
* @param {'steve'|'alex'|'cape'} type
|
|
* @param {number} tid
|
|
* @param {'default'|'slim'} preference
|
|
*/
|
|
constructor(type, tid, preference) {
|
|
this.tid = tid;
|
|
this.type = type;
|
|
/**
|
|
* @type {JQuery<HTMLImageElement>}
|
|
*/
|
|
this.selector = $(`#${type}`);
|
|
/**
|
|
* @type {'default'|'slim'}
|
|
*/
|
|
this.preference = (type == 'steve') ? 'default' : 'slim';
|
|
this.playerPreference = preference;
|
|
}
|
|
|
|
change2dPreview() {
|
|
this.selector
|
|
.attr('src', url(`preview/200/${this.tid}.png`))
|
|
.show()
|
|
.parent().attr('href', url(`skinlib/show/${this.tid}`))
|
|
.next().hide();
|
|
|
|
return this;
|
|
}
|
|
|
|
async change3dPreview() {
|
|
if (this.playerPreference == this.preference || this.type == 'cape') {
|
|
try {
|
|
const { hash } = await fetch({
|
|
type: 'GET',
|
|
url: url(`skinlib/info/${this.tid}`),
|
|
dataType: 'json'
|
|
});
|
|
|
|
let textureUrl = url(`textures/${hash}`);
|
|
|
|
if (this.type == 'cape') {
|
|
MSP.changeCape(textureUrl);
|
|
} else {
|
|
MSP.changeSkin(textureUrl);
|
|
}
|
|
} catch (error) {
|
|
showAjaxError(error);
|
|
}
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
showNotUploaded() {
|
|
this.selector.hide().parent().next().show();
|
|
|
|
// clear 3D preview of cape
|
|
if (this.type == 'cape') {
|
|
MSP.changeCape('');
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
static init3dPreview() {
|
|
if (TexturePreview.previewType == '2D') return;
|
|
|
|
$('#preview-2d').hide();
|
|
|
|
let canvas = null;
|
|
|
|
if ($(window).width() < 800) {
|
|
canvas = MSP.get3dSkinCanvas($('#skinpreview').width(), $('#skinpreview').width());
|
|
$('#skinpreview').append($(canvas).prop('id', 'canvas3d'));
|
|
} else {
|
|
canvas = MSP.get3dSkinCanvas(350, 350);
|
|
$('#skinpreview').append($(canvas).prop('id', 'canvas3d'));
|
|
}
|
|
}
|
|
|
|
static show3dPreview() {
|
|
TexturePreview.previewType = '3D';
|
|
|
|
TexturePreview.init3dPreview();
|
|
$('#preview-2d').hide();
|
|
$('.operations').show();
|
|
$('#preview-switch').html(trans('user.switch2dPreview'));
|
|
}
|
|
|
|
static show2dPreview() {
|
|
TexturePreview.previewType = '2D';
|
|
|
|
$('#canvas3d').remove();
|
|
$('.operations').hide();
|
|
$('#preview-2d').show();
|
|
$('#preview-switch').html(trans('user.switch3dPreview')).attr('onclick', 'show3dPreview();');
|
|
}
|
|
}
|
|
|
|
TexturePreview.previewType = '3D';
|
|
|
|
// 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')));
|
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
module.exports = TexturePreview;
|
|
}
|