From ca1f5fdb6943de58ba61cbae3a2707fcd8458cd0 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sat, 11 Aug 2018 11:59:11 +0800
Subject: [PATCH] Add players page

---
 .../src/components/common/Previewer.vue       |   6 +-
 resources/assets/src/components/route.js      |   5 +
 .../assets/src/components/user/Players.vue    | 477 ++++++++++++++++++
 resources/assets/src/images/textures/alex.png | Bin 0 -> 3420 bytes
 resources/assets/src/js/polyfill.js           |   1 +
 .../tests/components/common/Previewer.test.js |   5 +
 .../tests/components/user/Players.test.js     | 218 ++++++++
 resources/lang/en/front-end.yml               |  26 +
 resources/lang/zh_CN/front-end.yml            |  23 +
 resources/views/user/player.tpl               | 138 +----
 10 files changed, 766 insertions(+), 133 deletions(-)
 create mode 100644 resources/assets/src/components/user/Players.vue
 create mode 100644 resources/assets/src/images/textures/alex.png
 create mode 100644 resources/assets/tests/components/user/Players.test.js

diff --git a/resources/assets/src/components/common/Previewer.vue b/resources/assets/src/components/common/Previewer.vue
index 4c2c7888..d55d0495 100644
--- a/resources/assets/src/components/common/Previewer.vue
+++ b/resources/assets/src/components/common/Previewer.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="box box-default">
         <div class="box-header with-border">
-            <h3 class="box-title" style="width: 100%;">{{ $t('general.texturePreview') }}
+            <h3 class="box-title" style="width: 100%;">
+                <span v-t="title"></span>
                 <span data-toggle="tooltip" class="badge bg-light-blue">{{ indicator }}</span>
                 <div class="operations">
                     <i
@@ -57,6 +58,9 @@ export default {
         skin: String,
         cape: String,
         closetMode: Boolean,
+        title: {
+            default: 'general.texturePreview'
+        },
         initPositionZ: {
             default: 70
         }
diff --git a/resources/assets/src/components/route.js b/resources/assets/src/components/route.js
index b342dc97..e9a3e55d 100644
--- a/resources/assets/src/components/route.js
+++ b/resources/assets/src/components/route.js
@@ -9,6 +9,11 @@ export default [
         component: () => import('./user/Closet'),
         el: '.content'
     },
+    {
+        path: 'user/player',
+        component: () => import('./user/Players'),
+        el: '.content'
+    },
     {
         path: 'user/profile',
         component: () => import('./user/Profile'),
diff --git a/resources/assets/src/components/user/Players.vue b/resources/assets/src/components/user/Players.vue
new file mode 100644
index 00000000..c50416d3
--- /dev/null
+++ b/resources/assets/src/components/user/Players.vue
@@ -0,0 +1,477 @@
+<template>
+    <section class="content">
+        <div class="row">
+            <div class="col-md-6">
+                <div class="box box-primary">
+                    <div class="box-body table-responsive no-padding">
+                        <table class="table table-hover">
+                            <thead>
+                                <tr>
+                                    <th>PID</th>
+                                    <th v-t="'general.player.player-name'"></th>
+                                    <th>
+                                        {{ $t('user.player.preference.title') }}
+                                        <i
+                                            class="fas fa-question-circle"
+                                            :title="$t('user.player.preference.description')"
+                                            data-toggle="tooltip"
+                                            data-placement="right"
+                                        ></i>
+                                    </th>
+                                    <th v-t="'user.player.edit'"></th>
+                                    <th v-t="'user.player.operation'"></th>
+                                </tr>
+                            </thead>
+
+                            <tbody>
+                                <tr
+                                    v-for="player in players"
+                                    :key="player.pid"
+                                    class="player"
+                                    :class="{ 'player-selected': player.pid === selected }"
+                                    @click="preview(player)"
+                                >
+                                    <td class="pid">{{ player.pid }}</td>
+                                    <td class="player-name">{{ player.player_name }}</td>
+                                    <td>
+                                        <select class="form-control" @change="togglePreference(player)">
+                                            <option value="default" :selected="player.preference === 'default'">Default (Steve)</option>
+                                            <option value="slim" :selected="player.preference === 'slim'">Slim (Alex)</option>
+                                        </select>
+                                    </td>
+                                    <td>
+                                        <a
+                                            class="btn btn-default btn-sm"
+                                            @click="changeName(player)"
+                                            v-t="'user.player.edit-pname'"
+                                        ></a>
+                                    </td>
+                                    <td>
+                                        <a
+                                            class="btn btn-warning btn-sm"
+                                            data-toggle="modal"
+                                            data-target="#modal-clear-texture"
+                                            @click="loadICheck"
+                                            v-t="'user.player.delete-texture'"
+                                        ></a>
+                                        <a
+                                            class="btn btn-danger btn-sm"
+                                            @click="deletePlayer(player)"
+                                            v-t="'user.player.delete-player'"
+                                        ></a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="box-footer clearfix">
+                        <button class="btn btn-primary pull-left" data-toggle="modal" data-target="#modal-add-player">
+                            <i class="fas fa-plus" aria-hidden="true"></i> &nbsp;{{ $t('user.player.add-player') }}
+                        </button>
+                    </div>
+                </div>
+
+                <div v-once class="box box-default collapsed-box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title" v-t="'general.tip'"></h3>
+                        <div class="box-tools pull-right">
+                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fas fa-plus"></i></button>
+                        </div><!-- /.box-tools -->
+                    </div><!-- /.box-header -->
+                    <div class="box-body">
+                        <p v-t="'user.player.login-notice'"></p>
+                    </div><!-- /.box-body -->
+                </div><!-- /.box -->
+            </div>
+
+            <div class="col-md-6">
+                <previewer
+                    v-if="using3dPreviewer"
+                    :skin="skinUrl"
+                    :cape="capeUrl"
+                    title="user.player.player-info"
+                >
+                    <template slot="footer">
+                        <button
+                            class="btn btn-default"
+                            @click="togglePreviewer"
+                            v-t="'user.switch2dPreview'"
+                            data-test="to2d"
+                        ></button>
+                    </template>
+                </previewer>
+                <div v-else class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title" v-t="'user.player.player-info'"></h3>
+                    </div>
+                    <div class="box-body">
+                        <div id="preview-2d">
+                            <p>
+                                {{ $t('user.player.textures.steve') }}
+                                <a v-if="preview2d.steve" :href="`${baseUrl}/skinlib/show/${preview2d.steve}`">
+                                    <img
+                                        class="skin2d"
+                                        :src="`${baseUrl}/preview/64/${preview2d.steve}.png`"
+                                    />
+                                </a>
+                                <span v-else class="skin2d" v-t="'user.player.textures.empty'"></span>
+                            </p>
+
+                            <p>
+                                {{ $t('user.player.textures.alex') }}
+                                <a v-if="preview2d.alex" :href="`${baseUrl}/skinlib/show/${preview2d.alex}`">
+                                    <img
+                                        class="skin2d"
+                                        :src="`${baseUrl}/preview/64/${preview2d.alex}.png`"
+                                    />
+                                </a>
+                                <span v-else class="skin2d" v-t="'user.player.textures.empty'"></span>
+                            </p>
+
+                            <p>
+                                {{ $t('user.player.textures.cape') }}
+                                <a v-if="preview2d.cape" :href="`${baseUrl}/skinlib/show/${preview2d.cape}`">
+                                    <img
+                                        class="skin2d"
+                                        :src="`${baseUrl}/preview/64/${preview2d.cape}.png`"
+                                    />
+                                </a>
+                                <span v-else class="skin2d" v-t="'user.player.textures.empty'"></span>
+                            </p>
+                        </div>
+                    </div><!-- /.box-body -->
+                    <div class="box-footer">
+                        <button
+                            class="btn btn-default"
+                            @click="togglePreviewer"
+                            v-t="'user.switch3dPreview'"
+                        ></button>
+                    </div>
+                </div><!-- /.box -->
+            </div>
+        </div>
+
+        <div
+            id="modal-add-player"
+            class="modal fade"
+            tabindex="-1"
+            role="dialog"
+        >
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button
+                            type="button"
+                            class="close"
+                            data-dismiss="modal"
+                            aria-label="Close"
+                        ><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title" v-t="'user.player.add-player'"></h4>
+                    </div>
+                    <div class="modal-body">
+                        <table class="table">
+                            <tbody>
+                                <tr>
+                                    <td class="key" v-t="'general.player.player-name'"></td>
+                                    <td class="value">
+                                        <input
+                                            type="text"
+                                            class="form-control"
+                                            v-model="newPlayer"
+                                        >
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <div class="callout callout-info">
+                            <ul style="padding: 0 0 0 20px; margin: 0;">
+                                <li>{{ playerNameRule }}</li>
+                                <li>{{ playerNameLength }}</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button
+                            type="button"
+                            class="btn btn-default"
+                            data-dismiss="modal"
+                            v-t="'general.close'"
+                        ></button>
+                        <a @click="addPlayer" class="btn btn-primary" v-t="'general.submit'"></a>
+                    </div>
+                </div><!-- /.modal-content -->
+            </div><!-- /.modal-dialog -->
+        </div>
+
+        <div
+            id="modal-clear-texture"
+            class="modal fade"
+            tabindex="-1"
+            role="dialog"
+        >
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button
+                            type="button"
+                            class="close"
+                            data-dismiss="modal"
+                            aria-label="Close"
+                        ><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title" v-t="'user.chooseClearTexture'"></h4>
+                    </div>
+                    <div class="modal-body">
+                        <label class="form-group">
+                            <input type="checkbox" v-model="clear.steve"> Default (Steve)
+                        </label>
+                        <br>
+                        <label class="form-group">
+                            <input type="checkbox" v-model="clear.alex"> Slim (Alex)
+                        </label>
+                        <br>
+                        <label class="form-group">
+                            <input type="checkbox" v-model="clear.cape"> {{ $t('general.cape') }}
+                        </label>
+                    </div>
+                    <div class="modal-footer">
+                        <button
+                            type="button"
+                            class="btn btn-default"
+                            data-dismiss="modal"
+                            v-t="'general.close'"
+                        ></button>
+                        <a @click="clearTexture" class="btn btn-primary" v-t="'general.submit'"></a>
+                    </div>
+                </div><!-- /.modal-content -->
+            </div><!-- /.modal-dialog -->
+        </div>
+    </section>
+</template>
+
+<script>
+import SkinAlex from '../../images/textures/alex.png';
+import { swal } from '../../js/notify';
+import toastr from 'toastr';
+
+export default {
+    name: 'Players',
+    components: {
+        Previewer: () => import('../common/Previewer')
+    },
+    props: {
+        baseUrl: {
+            default: blessing.base_url
+        }
+    },
+    data() {
+        return {
+            players: [],
+            selected: 0,
+            using3dPreviewer: true,
+            skinUrl: '',
+            capeUrl: '',
+            preview2d: {
+                steve: 0,
+                alex: 0,
+                cape: 0
+            },
+            newPlayer: '',
+            clear: {
+                steve: false,
+                alex: false,
+                cape: false
+            }
+        };
+    },
+    computed: {
+        playerNameRule: () => __bs_data__.rule,
+        playerNameLength: () => __bs_data__.length
+    },
+    beforeMount() {
+        this.fetchPlayers();
+    },
+    methods: {
+        async fetchPlayers() {
+            this.players = await this.$http.get('/user/player/list');
+        },
+        togglePreviewer() {
+            this.using3dPreviewer = !this.using3dPreviewer;
+        },
+        async preview(player) {
+            this.selected = player.pid;
+
+            this.preview2d.steve = player.tid_steve;
+            this.preview2d.alex = player.tid_alex;
+            this.preview2d.cape = player.tid_cape;
+
+            if (player.preference === 'default') {
+                if (player.tid_steve) {
+                    const steve = await this.$http.get(`/skinlib/info/${player.tid_steve}`);
+                    this.skinUrl = `${this.baseUrl}/textures/${steve.hash}`;
+                } else {
+                    this.skinUrl = '';
+                }
+            } else {
+                if (player.tid_alex) {
+                    const alex = await this.$http.get(`/skinlib/info/${player.tid_alex}`);
+                    this.skinUrl = `${this.baseUrl}/textures/${alex.hash}`;
+                } else {
+                    this.skinUrl = SkinAlex;
+                }
+            }
+            if (player.tid_cape) {
+                const cape = await this.$http.get(`/skinlib/info/${player.tid_cape}`);
+                this.capeUrl = `${this.baseUrl}/textures/${cape.hash}`;
+            } else {
+                this.capeUrl = '';
+            }
+        },
+        async togglePreference(player) {
+            const preference = player.preference === 'default' ? 'slim' : 'default';
+            const { errno, msg } = await this.$http.post(
+                '/user/player/preference',
+                { pid: player.pid, preference }
+            );
+            if (errno === 0) {
+                player.preference = preference;
+                toastr.success(msg);
+            } else {
+                toastr.warning(msg);
+            }
+        },
+        async changeName(player) {
+            const { dismiss, value } = await swal({
+                title: this.$t('user.changePlayerName'),
+                inputValue: player.player_name,
+                input: 'text',
+                showCancelButton: true,
+                inputValidator: /* istanbul ignore next */ value =>
+                    !value && this.$t('user.emptyPlayerName')
+            });
+            if (dismiss) {
+                return;
+            }
+
+            const { errno, msg } = await this.$http.post(
+                '/user/player/rename',
+                { pid: player.pid, new_player_name: value }
+            );
+            if (errno === 0) {
+                swal({ type: 'success', html: msg });
+                player.player_name = value;
+            } else {
+                swal({ type: 'warning', html: msg });
+            }
+        },
+        loadICheck() {
+            $('input').iCheck({
+                radioClass: 'iradio_square-blue',
+                checkboxClass: 'icheckbox_square-blue'
+            }).on('ifChecked ifUnchecked', function () {
+                $(this)[0].dispatchEvent(new Event('change'));
+            });
+        },
+        async clearTexture() {
+            if (Object.values(this.clear).every(value => !value)) {
+                return toastr.warning(this.$t('user.noClearChoice'));
+            }
+
+            const { errno, msg } = await this.$http.post(
+                '/user/player/texture/clear',
+                { pid: this.selected, ...this.clear }
+            );
+            if (errno === 0) {
+                $('.modal').modal('hide');
+                swal({ type: 'success', text: msg });
+                const player = this.players.find(({ pid }) => pid === this.selected);
+                Object.keys(this.clear)
+                    .filter(type => this.clear[type])
+                    .forEach(type => player[`tid_${type}`] = 0);
+            } else {
+                swal({ type: 'warning', text: msg });
+            }
+        },
+        async deletePlayer(player) {
+            const { dismiss } = await swal({
+                title: this.$t('user.deletePlayer'),
+                text: this.$t('user.deletePlayerNotice'),
+                type: 'warning',
+                showCancelButton: true,
+                cancelButtonColor: '#3085d6',
+                confirmButtonColor: '#d33'
+            });
+            if (dismiss) {
+                return;
+            }
+
+            const { errno, msg } = await this.$http.post(
+                '/user/player/delete',
+                { pid: player.pid }
+            );
+            if (errno === 0) {
+                swal({ type: 'success', html: msg });
+                this.players = this.players.filter(({ pid }) => pid !== player.pid);
+            } else {
+                swal({ type: 'warning', html: msg });
+            }
+        },
+        async addPlayer() {
+            $('.modal').modal('hide');
+            const { errno, msg } = await this.$http.post(
+                '/user/player/add',
+                { player_name: this.newPlayer }
+            );
+            if (errno === 0) {
+                await swal({ type: 'success', html: msg });
+                this.fetchPlayers();
+            } else {
+                swal({ type: 'warning', html: msg });
+            }
+        }
+    }
+};
+</script>
+
+<style lang="stylus">
+.player {
+    cursor: pointer;
+    border-bottom: 1px solid #f4f4f4;
+
+    #preference {
+        height: 31px;
+    }
+
+    .pid, .player-name {
+        padding-top: 13px;
+    }
+}
+
+.player:last-child {
+    border-bottom: none;
+}
+
+.player-selected {
+    background-color: #f5f5f5;
+}
+
+.modal-body > label {
+    margin-bottom: 10px;
+}
+
+.skin2d {
+    float: right;
+    max-height: 64px;
+    width: 64px;
+    font-size: 16px;
+}
+
+#preview-2d > p {
+    height: 64px;
+    line-height: 64px;
+}
+
+.form-group {
+    cursor: pointer;
+}
+</style>
diff --git a/resources/assets/src/images/textures/alex.png b/resources/assets/src/images/textures/alex.png
new file mode 100644
index 0000000000000000000000000000000000000000..b643fe2d083f64677a630087ba4c4004eac1ca06
GIT binary patch
literal 3420
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

literal 0
HcmV?d00001

diff --git a/resources/assets/src/js/polyfill.js b/resources/assets/src/js/polyfill.js
index e36d3be0..670cc420 100644
--- a/resources/assets/src/js/polyfill.js
+++ b/resources/assets/src/js/polyfill.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-var */
 import 'core-js/fn/array/includes';
 import 'core-js/fn/array/find';
+import 'core-js/fn/object/values';
 import 'es6-promise/auto';
 import 'whatwg-fetch';
 
diff --git a/resources/assets/tests/components/common/Previewer.test.js b/resources/assets/tests/components/common/Previewer.test.js
index c56febff..f8c80686 100644
--- a/resources/assets/tests/components/common/Previewer.test.js
+++ b/resources/assets/tests/components/common/Previewer.test.js
@@ -88,3 +88,8 @@ test('reset', () => {
     wrapper.find('.fa-stop').trigger('click');
     expect(mockedSkinview3d.SkinViewer.prototype.dispose).toBeCalled();
 });
+
+test('custom title', () => {
+    const wrapper = mount(Previewer, { propsData: { title: 'custom-title' } });
+    expect(wrapper.text()).toContain('custom-title');
+});
diff --git a/resources/assets/tests/components/user/Players.test.js b/resources/assets/tests/components/user/Players.test.js
new file mode 100644
index 00000000..c0b04ea6
--- /dev/null
+++ b/resources/assets/tests/components/user/Players.test.js
@@ -0,0 +1,218 @@
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import { flushPromises } from '../../utils';
+import Players from '@/components/user/Players';
+import { swal } from '@/js/notify';
+
+jest.mock('toastr');
+jest.mock('@/js/notify');
+
+window.__bs_data__ = {
+    rule: 'rule',
+    length: 'length'
+};
+
+test('display player name constraints', () => {
+    const wrapper = mount(Players);
+    const text = wrapper.text();
+    expect(text).toContain('rule');
+    expect(text).toContain('length');
+});
+
+test('fetch players data before mount', () => {
+    Vue.prototype.$http.get.mockResolvedValue([]);
+    mount(Players);
+    expect(Vue.prototype.$http.get).toBeCalledWith('/user/player/list');
+});
+
+test('click to preview player', async () => {
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce([
+            { pid: 1, preference: 'default', tid_steve: 1, tid_alex: 2, tid_cape: 3 },
+            { pid: 2, preference: 'default', tid_steve: 0, tid_alex: 2, tid_cape: 0 },
+            { pid: 3, preference: 'slim', tid_steve: 1, tid_alex: 2, tid_cape: 0 },
+            { pid: 4, preference: 'slim', tid_steve: 0, tid_alex: 0, tid_cape: 0 },
+        ])
+        .mockResolvedValueOnce({ hash: 'a' })
+        .mockResolvedValueOnce({ hash: 'b' })
+        .mockResolvedValueOnce({ hash: 'c' });
+    const wrapper = mount(Players);
+    await wrapper.vm.$nextTick();
+
+    wrapper.find('tbody > tr:nth-child(1)').trigger('click');
+    await flushPromises();
+    expect(Vue.prototype.$http.get).toBeCalledWith('/skinlib/info/1');
+    expect(Vue.prototype.$http.get).toBeCalledWith('/skinlib/info/3');
+    expect(wrapper.findAll('.player').at(0).classes()).toContain('player-selected');
+
+    wrapper.find('tbody > tr:nth-child(2)').trigger('click');
+    await flushPromises();
+
+    wrapper.find('tbody > tr:nth-child(3)').trigger('click');
+    await flushPromises();
+    expect(Vue.prototype.$http.get).toBeCalledWith('/skinlib/info/2');
+
+    wrapper.find('tbody > tr:nth-child(4)').trigger('click');
+    await flushPromises();
+});
+
+test('toggle preference', async () => {
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce([
+            { pid: 1, preference: 'default' },
+            { pid: 2, preference: 'slim' }
+        ]);
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1 })
+        .mockResolvedValue({ errno: 0 });
+    const wrapper = mount(Players);
+    await wrapper.vm.$nextTick();
+
+    wrapper.findAll('select').at(0).trigger('change');
+    expect(Vue.prototype.$http.post).toBeCalledWith(
+        '/user/player/preference',
+        { pid: 1, preference: 'slim' }
+    );
+
+    wrapper.findAll('select').at(1).trigger('change');
+    await flushPromises();
+    expect(Vue.prototype.$http.post).toBeCalledWith(
+        '/user/player/preference',
+        { pid: 2, preference: 'default' }
+    );
+});
+
+test('change player name', async () => {
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce([
+            { pid: 1, player_name: 'old' },
+        ]);
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1 })
+        .mockResolvedValue({ errno: 0 });
+    swal.mockResolvedValueOnce({ dismiss: 1 })
+        .mockResolvedValue({ value: 'new-name' });
+    const wrapper = mount(Players);
+    await wrapper.vm.$nextTick();
+    const button = wrapper.find('.btn-default');
+
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).not.toBeCalled();
+
+    button.trigger('click');
+    await flushPromises();
+    expect(Vue.prototype.$http.post).toBeCalledWith(
+        '/user/player/rename',
+        { pid: 1, new_player_name: 'new-name' }
+    );
+
+    button.trigger('click');
+    await flushPromises();
+    expect(wrapper.text()).toContain('new-name');
+});
+
+test('load iCheck', async () => {
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce([
+            { pid: 1 },
+        ]);
+    window.$ = jest.fn(() => ({
+        iCheck: () => ({
+            on(evt, cb) {
+                cb();
+            },
+        }),
+        0: {
+            dispatchEvent: () => {}
+        }
+    }));
+    const wrapper = mount(Players);
+    await wrapper.vm.$nextTick();
+    wrapper.find('.btn-warning').trigger('click');
+    expect(window.$).toBeCalled();
+});
+
+test('delete player', async () => {
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce([
+            { pid: 1, player_name: 'to-be-deleted' },
+        ]);
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1 })
+        .mockResolvedValue({ errno: 0 });
+    swal.mockResolvedValueOnce({ dismiss: 1 })
+        .mockResolvedValue({});
+    const wrapper = mount(Players);
+    await wrapper.vm.$nextTick();
+    const button = wrapper.find('.btn-danger');
+
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).not.toBeCalled();
+
+    button.trigger('click');
+    expect(wrapper.text()).toContain('to-be-deleted');
+
+    button.trigger('click');
+    await flushPromises();  // Finish HTTP request
+    await wrapper.vm.$nextTick();  // Update DOM
+    expect(wrapper.text()).not.toContain('to-be-deleted');
+});
+
+test('toggle preview mode', () => {
+    Vue.prototype.$http.get.mockResolvedValueOnce([]);
+    const wrapper = mount(Players);
+    wrapper.find('[data-test="to2d"]').trigger('click');
+    expect(wrapper.text()).toContain('user.player.textures.empty');
+});
+
+test('add player', async () => {
+    window.$ = jest.fn(() => ({ modal() {} }));
+    Vue.prototype.$http.get.mockResolvedValueOnce([]);
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1 })
+        .mockResolvedValue({ errno: 0 });
+    const wrapper = mount(Players);
+    const button = wrapper.findAll('.modal-footer').at(0).find('a');
+    wrapper.find('input[type="text"]').setValue('the-new');
+
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).toBeCalledWith(
+        '/user/player/add',
+        { player_name: 'the-new' }
+    );
+    await flushPromises();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.text()).not.toContain('the-new');
+
+    button.trigger('click');
+    await flushPromises();
+    expect(Vue.prototype.$http.get).toHaveBeenCalledTimes(2);
+});
+
+test('clear texture', async () => {
+    window.$ = jest.fn(() => ({ modal() {} }));
+    Vue.prototype.$http.get.mockResolvedValueOnce([
+        { pid: 1, tid_steve: 1, tid_alex: 0, tid_cape: 0 }
+    ]);
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1 })
+        .mockResolvedValue({ errno: 0, msg: 'ok' });
+    const wrapper = mount(Players);
+    await wrapper.vm.$nextTick();
+    const button = wrapper.findAll('.modal-footer').at(1).find('a');
+    wrapper.find('.player').trigger('click');
+
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).not.toBeCalled();
+
+    wrapper.findAll('input[type="checkbox"]').at(0).setChecked();
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).toBeCalledWith(
+        '/user/player/texture/clear',
+        { pid: 1, steve: true, alex: false, cape: false }
+    );
+
+    button.trigger('click');
+    await flushPromises();
+    expect(swal).toBeCalledWith({ type: 'success', text: 'ok' });
+});
diff --git a/resources/lang/en/front-end.yml b/resources/lang/en/front-end.yml
index dc6296f1..eba84efb 100644
--- a/resources/lang/en/front-end.yml
+++ b/resources/lang/en/front-end.yml
@@ -138,6 +138,31 @@ user:
   time-unit-min: min
   last-sign: Last signed at :time
   sign-remain-time: Available after :time :unit
+  player:
+    player-name: Player Name
+    edit: Edit
+    operation: Delete
+    edit-pname: Player name
+    delete-texture: Textures
+    delete-player: Player
+    add-player: Add new player
+    login-notice: Now you can log in with player names you owned instead email address.
+    player-info: Information <small>(click player name to show preview)</small>
+    textures:
+      steve: Steve Model：
+      alex: Alex Model：
+      cape: Cape：
+      empty: Nothing
+    pname-rule: Could only contain letters, numbers and dashes.
+    pname-rule-chinese: Could only contain chinese characters, letters, numbers and dashes.
+    player-name-rule:
+      official: Player name may only contains letters, numbers and underscores.
+      cjk: Player name may contains letters, numbers, underscores and CJK Unified Ideographs.
+      custom: Custom player name rules are applied on this site. Please contact admins for further information.
+    player-name-length: The player name should be at least :min characters and not greater than :max characters.
+    preference:
+      title: Preference
+      description: Default stands for the Steve model with 4-pixel width arms, and Slim for the Alex model with 3-pixel width arms.
 
 admin:
   operationsTitle: Operations
@@ -225,6 +250,7 @@ general:
   submit: Submit
   close: Close
   more: More
+  tip: Tip
   pagination: 'Page :page, total :total'
   searchResult: '(Search result of keyword ":keyword")'
   noResult: No result.
diff --git a/resources/lang/zh_CN/front-end.yml b/resources/lang/zh_CN/front-end.yml
index 3c10ff19..435036b7 100644
--- a/resources/lang/zh_CN/front-end.yml
+++ b/resources/lang/zh_CN/front-end.yml
@@ -139,6 +139,28 @@ user:
   time-unit-min: 分钟
   last-sign: 上次签到于 :time
   sign-remain-time: :time :unit后可签到
+  player:
+    edit: 编辑
+    operation: 操作
+    edit-pname: 修改角色名
+    delete-texture: 删除材质
+    delete-player: 删除角色
+    add-player: 添加新角色
+    login-notice: 你现在可以使用你所拥有的角色名来登录皮肤站啦~
+    player-info: 角色信息 <small>（点击角色名以查看预览）</small>
+    textures:
+      steve: Steve 模型的皮肤：
+      alex: Alex 模型的皮肤：
+      cape: 披风：
+      empty: 未上传
+    player-name-rule:
+      official: 角色名只能包含拉丁字母、数字以及下划线。
+      cjk: 角色名可使用拉丁字母、数字、下划线以及汉字（中日韩统一表意文字）。
+      custom: 本站使用了自定义的角色名规则，详情请咨询站点管理员。
+    player-name-length: 角色名最少要求 :min 个字符，最多不超过 :max 个字符。
+    preference:
+      title: 优先模型
+      description: Default 即为默认的 Steve 模型（手臂 4 个像素宽），Slim 即为手臂宽 3 个像素的 Alex 模型。
 
 admin:
   operationsTitle: 更多操作
@@ -222,6 +244,7 @@ general:
   submit: 提交
   close: 关闭
   more: 更多
+  tip: 提示
   pagination: '第 :page 页，共 :total 页'
   searchResult: '（关键词 “:keyword” 的搜索结果）'
   noResult: 无结果
diff --git a/resources/views/user/player.tpl b/resources/views/user/player.tpl
index 3e4cdae5..57eaf9cb 100644
--- a/resources/views/user/player.tpl
+++ b/resources/views/user/player.tpl
@@ -14,140 +14,14 @@
     </section>
 
     <!-- Main content -->
-    <section class="content">
-        <div class="row">
-            <div class="col-md-6">
-                <div class="box box-primary">
-                    <div class="box-body table-responsive no-padding">
-                        <table class="table table-hover">
-                            <thead>
-                                <tr>
-                                    <th>PID</th>
-                                    <th>@lang('user.player.player-name')</th>
-                                    <th>
-                                      @lang('user.player.preference.title')
-                                      <i class="fas fa-question-circle" title="@lang('user.player.preference.description')" data-toggle="tooltip" data-placement="right"></i>
-                                    </th>
-                                    <th>@lang('user.player.edit')</th>
-                                    <th>@lang('user.player.operation')</th>
-                                </tr>
-                            </thead>
-
-                            <tbody>
-                                @foreach ($players as $player)
-                                <tr class="player" id="{{ $player['pid'] }}">
-                                    <td class="pid">{{ $player['pid'] }}</td>
-                                    <td class="player-name">{{ $player['player_name'] }}</td>
-                                    <td>
-                                        <select class="form-control" id="preference" pid="{{ $player['pid'] }}">
-                                            <option {{ ($player['preference'] == "default") ? 'selected="selected"' : '' }} value="default">Default (Steve)</option>
-                                            <option {{ ($player['preference'] == "slim") ? 'selected="selected"' : '' }} value="slim">Slim (Alex)</option>
-                                       </select>
-                                    </td>
-                                    <td>
-                                        <a class="btn btn-default btn-sm" onclick="changePlayerName('{{ $player['pid'] }}', '{{ $player['player_name'] }}')">@lang('user.player.edit-pname')</a>
-                                    </td>
-                                    <td>
-                                        <a class="btn btn-warning btn-sm" onclick="clearTexture('{{ $player['pid'] }}');">@lang('user.player.delete-texture')</a>
-                                        <a class="btn btn-danger btn-sm" onclick="deletePlayer('{{ $player['pid'] }}');">@lang('user.player.delete-player')</a>
-                                    </td>
-                                </tr>
-                                @endforeach
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="box-footer clearfix">
-                        <button class="btn btn-primary pull-left" data-toggle="modal" data-target="#modal-add-player">
-                            <i class="fas fa-plus" aria-hidden="true"></i> &nbsp;@lang('user.player.add-player')
-                        </button>
-                    </div>
-                </div>
-
-                <div class="box box-default collapsed-box">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">@lang('general.notice')</h3>
-                        <div class="box-tools pull-right">
-                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fas fa-plus"></i></button>
-                        </div><!-- /.box-tools -->
-                    </div><!-- /.box-header -->
-                    <div class="box-body">
-                        <p>@lang('user.player.login-notice')</p>
-                    </div><!-- /.box-body -->
-                </div><!-- /.box -->
-            </div>
-            <div class="col-md-6">
-                <div class="box">
-                    <!-- 3D skin preview -->
-                    @include('common.texture-preview', ['title' => trans('user.player.player-info') ])
-                    <!-- 2D skin preview -->
-                    <div class="box-body">
-                        <div id="preview-2d-container" style="display: none;">
-                            <p>@lang('user.player.textures.steve')<a href=""><img id="steve" class="skin2d" /></a>
-                                <span class="skin2d">@lang('user.player.textures.empty')</span>
-                            </p>
-
-                            <p>@lang('user.player.textures.alex')<a href=""><img id="alex" class="skin2d" /></a>
-                                <span class="skin2d">@lang('user.player.textures.empty')</span>
-                            </p>
-
-                            <p>@lang('user.player.textures.cape')<a href=""><img id="cape" class="skin2d" /></a>
-                                <span class="skin2d">@lang('user.player.textures.empty')</span>
-                            </p>
-                        </div>
-                    </div><!-- /.box-body -->
-                    <div class="box-footer">
-                        <button id="preview-switch" class="btn btn-default">@lang('general.switch-2d-preview')</button>
-                    </div>
-                </div><!-- /.box -->
-            </div>
-        </div>
-
-    </section><!-- /.content -->
+    <section class="content"></section><!-- /.content -->
 </div><!-- /.content-wrapper -->
 
-<div id="modal-add-player" class="modal fade" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title">@lang('user.player.add-player')</h4>
-            </div>
-            <div class="modal-body">
-                <table class="table">
-                    <tbody>
-                        <tr>
-                            <td class="key">@lang('user.player.player-name')</td>
-                            <td class="value">
-                               <input type="text" class="form-control" id="player_name" value="">
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <div class="callout callout-info">
-                    <ul style="padding: 0 0 0 20px; margin: 0;">
-                        <li>@lang('user.player.player-name-rule.'.option('player_name_rule'))</li>
-                        <li>@lang('user.player.player-name-length', ['min' => option('player_name_length_min'), 'max' => option('player_name_length_max')])</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">@lang('general.close')</button>
-                <a onclick="addNewPlayer();" class="btn btn-primary">@lang('general.submit')</a>
-            </div>
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
-
-@endsection
-
-@section('script')
 <script>
-    $(document).ready(function () {
-        $.msp.config.skinUrl = defaultSteveSkin;
-        initSkinViewer();
-        registerAnimationController();
-        registerWindowResizeHandler();
-    });
+var __bs_data__ = {
+    rule: "@lang('user.player.player-name-rule.'.option('player_name_rule'))",
+    length: "@lang('user.player.player-name-length', ['min' => option('player_name_length_min'), 'max' => option('player_name_length_max')])"
+}
 </script>
+
 @endsection