front-end

public/css/index.css

@@ -0,0 +1,74 @@
+html {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    margin-top: 0;
+}
+
+body {
+    margin: 0;  
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    background-image: url("/images/bg.png");
+}
+
+@font-face {
+    font-family: 'Minecraft Rus Regular';
+    src: url("/fonts/minecraft-rus.ttf");
+}
+
+h1 {
+    margin: 0;
+    padding: 0;
+    font-family: 'Minecraft Rus Regular';
+    font-weight: bold;
+    font-size: 30;
+    text-align: center;
+    padding-top: 4%;
+    padding-bottom: 4%;
+}
+
+* {
+    font-family: 'Minecraft Rus Regular';
+    font-size: 15;
+}
+
+canvas {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+.cape_type {
+    margin-top: 4%;
+    text-align: center;
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+.content-container {
+    margin-left: 33%;
+    margin-right: 33%;
+    /* background-color: #1b4c4ccc; */
+    background-color: #b3b7b7cc;
+    padding-left: 3%;
+    padding-right: 3%;
+    margin-top: 0%;
+    border:solid 2px gray;
+    /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
+    box-shadow: 0px 20px 150px rgba(0, 0, 0, 1);
+}
+
+#exitButton {
+    margin-right: auto;
+    margin-left: 75%;
+    margin-bottom: 5%;
+    padding: 2%;
+    font-size: 20;
+}

public/js/skin3d.js

@@ -0,0 +1,52 @@
+window.onload = function() {
+    document.getElementById("cape").addEventListener("click", () => { set_cape_type("cape") }, false);
+    document.getElementById("cape").checked = true;
+    document.getElementById("elytra").addEventListener("click", () => { set_cape_type("elytra") }, false );  
+    document.getElementById("elytra").checked = false;
+}
+
+
+const username = await(await fetch("/api/getUsername")).json();
+
+let skinViewer = new skinview3d.SkinViewer({
+    canvas: document.getElementById("skin_container"),
+    width: 300,
+    height: 400,
+    skin: `https://launcher.foxarmy.org/skins/${username}.png`,
+    cape: `https://launcher.foxarmy.org/cloaks/${username}.png`
+});
+
+skinViewer.width = 300;
+skinViewer.height = 400;
+skinViewer.nameTag = username;
+skinViewer.loadPanorama("images/panorama.jpeg");
+skinViewer.fov = 120;
+skinViewer.zoom = 0.65;
+skinViewer.autoRotate = true;
+
+function set_cape_type(type) {
+    skinViewer.loadCape(`https://launcher.foxarmy.org/cloaks/${username}.png`, { backEquipment: type });
+}
+
+
+
+// onload = () => {
+//     alert(1);
+// //     document.getElementById("cape").addEventListener("click", () => { set_cape_type("cape") }, false);
+// //     document.getElementById("elytra").addEventListener("click", () => { set_cape_type("elytra") }, false );
+//     document.getElementById("cape").addEventListener("click", a, false);
+//     document.getElementById("elytra").addEventListener("click", a, false );
+   
+
+// }
+
+
+
+// function set_cape_type_elytra() {
+//     alert(2)
+//     skinViewer.loadCape(`https://launcher.foxarmy.org/cloaks/${username}.png`, { backEquipment: "elytra" });
+// }
+
+// skinViewer.animation = new skinview3d.WalkingAnimation();
+// skinViewer.animation.speed = 3;
+// skinViewer.animation.paused = true;

src/controllers/user.js

@@ -90,6 +90,11 @@ class UserController {
 
         return res.status(200).send("Cape uploaded!");
     }
+
+    async getUsername(req, res) {
+        const token = req.session.jwt;
+        return res.status(200).send(jwt.decode(token).username);
+    }
 }
 
 export default new UserController();

src/middlewares/requiredParameters.js

@@ -5,7 +5,7 @@ dotenv.config({path: ".env"});
 const requireUsername = async (req, res, next) => {
     const { username } = req.body;
 
-    if (!username) return res.status(400).send("Username is requires");
+    if (!username) return res.status(400).send("Username is required");
     next();
 };
 

src/routers/api.js

@@ -14,5 +14,5 @@ ApiRouter.post('/login', requiredParameters.requireUsername, requiredParameters.
 ApiRouter.get('/logout', auth.authenticate, UserController.logout);
 ApiRouter.post('/uploadSkin', existance.userExist, auth.authenticate, utils.upload.single('file'), requiredParameters.requireFile, UserController.uploadSkin);
 ApiRouter.post('/uploadCape', existance.userExist, auth.authenticate, auth.canHaveCloak, utils.upload.single('file'), requiredParameters.requireFile, UserController.uploadCape);
-
+ApiRouter.get('/getUsername', existance.userExist, auth.authenticate, UserController.getUsername);
 export default ApiRouter;

src/routers/user.js

@@ -20,9 +20,7 @@ UserRouter.get('/register', async (req, res) => {
 
 UserRouter.get(['/', '/login'], async (req, res) => {
     if(req.session.jwt && jwt.verify(req.session.jwt, process.env.SECRET)) {
-        console.log(req.session.jwt)
         return res.redirect("/index");
-
     }
 
     return res.render("login.pug");

views/index.pug

@@ -1,16 +1,32 @@
 html
     head
         title Личный кабинет
+        link(href="css/index.css" rel="stylesheet")
+    script(type="module" src="js/skinview3d.bundle.js")
+    script(type="module" src="js/skin3d.js")
     body
+
+        iframe(name="hiddenFrame" style="position:absolute; top:-1px; left:-1px; width:1px; height:1px;")
+        div(class="content-container")
+            div(class="content")
                 h1 Личный кабинет
-        p Имя пользователя: #{username}
+                canvas(id="skin_container")
+                if can_have_cloak
+                    div(class="cape_type")
+                        input(type="radio" id="cape" name="cape_type" value="cape" checked)
+                        label(for="cape") Плащ
+                        |
+                        input(type="radio" id="elytra" name="cape_type" value="elytra" checked="unchecked")
+                        label(for="elytra") Элитры
                 p Скин: 
-        form(method="post" enctype="multipart/form-data" action="/api/uploadskin") 
+                form(method="post" enctype="multipart/form-data" action="/api/uploadskin" target="hiddenFrame" onsubmit="window.location.reload()") 
                     input(type="file" name="file")
                     input(type="submit" value="Загрузить")
                 if can_have_cloak
                     p Плащ:
-            form(method="post" enctype="multipart/form-data" action="/api/uploadCape")
+                    form(method="post" enctype="multipart/form-data" action="/api/uploadCape" target="hiddenFrame" onsubmit="window.location.reload()")
                         input(type="file", name="file")
                         input(type="submit", value="Загрузить")
-        a(href="/api/logout") Выйти
+                button(onclick="window.location.href='/api/logout'" value="Выйти" id="exitButton") Выйти
+                //- a(href="/api/logout") Выйти
+