notherbase-fs 3.2.21 → 3.3.0

package/public/js/base.js

@@ -13,6 +13,108 @@ class Base {
         return response;
     }
 
+    /**
+     * The player's inventory.
+     */
+    #Inventory = class Inventory {
+        constructor() {
+            this.items = [];
+            this.lastUpdate = 0;
+    
+            this.refresh();
+        }
+        
+        /**
+         * Reloads the inventory.
+         */
+        async refresh() {
+            let $list = $(".inventory .item-list");
+
+            let response = await Base.commune("getInventory", { _lastUpdate: this.lastUpdate });
+
+            if (response.status === "success") {
+                this.items = response.data;
+                this.lastUpdate = response.lastUpdate;
+                $list.empty();
+                
+                for (let i = 0; i < this.items.length; i++) {
+                    let $new = $list.append(
+                        `<div class="item-card">
+                            <h5>${this.items[i].name}</h5>
+                            <button id="${i}">X</button>
+                            <hr>
+                            <p>${this.items[i].amount}</p>
+                        </div>`
+                    ).children().last();
+        
+                    $new.find("button").on("click", this.reduceItem);
+                }
+
+                this.clearError();
+            }
+        }
+        
+        /**
+         * Clears the error on screen.
+         */
+        clearError() {
+            let $error = $("#inventory #error");
+
+            $error.addClass("invisible");
+        }
+    
+        /**
+         * Shows an error on screen.
+         * @param {String} text The error message.
+         */
+        setError(text) {
+            let $error = $("#inventory #error");
+
+            $error.text(text);
+            $error.removeClass("invisible");
+        }
+    }
+
+    /**
+     * The player's attributes.
+     */
+    #PlayerAttributes = class PlayerAttributes {
+        constructor() {
+            this.attributes = [];
+            this.lastUpdate = 0;
+
+            this.refresh();
+        }
+
+        /**
+         * Reloads the player's attributes.
+         */
+        async refresh() {
+            let response = await Base.commune("getAttributes", { _lastUpdate: this.lastUpdate });
+            if (response.status === "success") {
+                this.lastUpdate = response.lastUpdate;
+                this.attributes = response.data;
+    
+                this.render();
+            }
+        }
+
+        /**
+         * Renders the attributes.
+         */
+        render() {
+            let $content = $(".menu .content#player");
+
+            $content.empty();
+
+            if (this.attributes) {
+                for (const [key, value] of Object.entries(this.attributes)) {
+                    $content.append(`<h3 id="${key}">${key}: ${value}</h3>`);
+                }
+            }
+        }
+    }
+
     /**
      * Services for the player's account.
      */
@@ -21,6 +123,58 @@ class Base {
             this.username = "";
             this.email = "";
             this.lastUpdate = 0;
+            
+            this.refresh();
+        }
+    
+        /**
+         * Reloads the player's basic info.
+         */
+        async refresh() {
+            let response = await Base.commune("getInfo", { _lastUpdate: this.lastUpdate });
+            if (response.status === "success") {
+                this.lastUpdate = response.lastUpdate;
+                this.email = response.data.email;
+                this.username = response.data.username;
+            }
+
+            let $email = $(".content#account .setting#email p");
+            let $emailInput = $(".content#account .edit#email input");
+            let $username = $(".content#account .setting#username p");
+            let $usernameInput = $(".content#account .edit#username input");
+            
+            $email.text(this.email);
+            $emailInput.val(this.email);
+            $username.text(this.username);
+            $usernameInput.val(this.username);
+    
+            $(".content#account .settings").removeClass("invisible");
+            $(".content#account #please-login").addClass("invisible");
+        }
+    
+        /**
+         * Initiates email editing.
+         */
+        editEmail() {
+            let $emailSetting = $(".content#account .setting#email");
+            let $emailEdit = $(".content#account .edit#email");
+
+            $emailSetting.addClass("invisible");
+            $emailEdit.removeClass("invisible");
+        }
+    
+        /**
+         * Cancels editing the email.
+         */
+        cancelEmail() {
+            let $email = $(".content#account .setting#email p");
+            let $emailSetting = $(".content#account .setting#email");
+            let $emailEdit = $(".content#account .edit#email");
+            let $emailInput = $(".content#account .edit#email input");
+
+            $emailSetting.removeClass("invisible");
+            $emailEdit.addClass("invisible");
+            $emailInput.val($email.text());
         }
     
         /**
@@ -44,6 +198,31 @@ class Base {
             this.cancelEmail();
         }
     
+        /**
+         * Initiates username editing.
+         */
+        editUsername() {
+            let $usernameSetting = $(".content#account .setting#username");
+            let $usernameEdit = $(".content#account .edit#username");
+
+            $usernameSetting.addClass("invisible");
+            $usernameEdit.removeClass("invisible");
+        }
+    
+        /**
+         * Cancels username editing.
+         */
+        cancelUsername() {
+            let $usernameSetting = $(".content#account .setting#username");
+            let $usernameEdit = $(".content#account .edit#username");
+            let $usernameInput = $(".content#account .edit#username input");
+            let $username = $(".content#account .setting#username p");
+
+            $usernameSetting.removeClass("invisible");
+            $usernameEdit.addClass("invisible");
+            $usernameInput.val($username.text());
+        }
+    
         /**
          * Confirms and submits a username edit.
          */
@@ -67,9 +246,56 @@ class Base {
     }
     
     constructor() {
+        this.playerInventory = new this.#Inventory();
+        this.playerAttributes = new this.#PlayerAttributes();
         this.playerAccount = new this.#AccountServices();
+        this.menuClosing = false;
+
+        this.switchTab("inventory");
+    }
+
+    /**
+     * Closes the menu.
+     */
+    closeMenu = () => {
+        let $menu = $(".ui .menu");
+        let $fade = $(".ui .fade");
+
+        if (!this.menuClosing) {
+            this.menuClosing = true;
+            $fade.addClass("camo");
+            
+            setTimeout(() => { 
+                $menu.addClass("invisible");
+                $fade.addClass("invisible");
+                this.menuClosing = false;
+            }, 100);
+        }
+    }
+
+    /**
+     * Opens the menu.
+     */
+    openMenu = () => {
+        let $menu = $(".ui .menu");
+        let $fade = $(".ui .fade");
+
+        $menu.removeClass("invisible");
+        $fade.removeClass("camo");
+        $fade.removeClass("invisible");
     }
 
+    /**
+     * Switches tabs in the menu.
+     * @param {String} id The name of the tab to switch to.
+     */
+    switchTab = function switchTab(id) {
+        $("#content-window .content").addClass("invisible");
+        $(".menu .tabs button").removeClass("selected");
+        $(`#content-window #${id}`).removeClass("invisible");
+        $(`.menu .tabs #${id}`).addClass("selected");
+    }
+    
     /**
      * Communes to logout.
      * @returns Communion response.
@@ -77,8 +303,7 @@ class Base {
     logout = async () => {
         let response = await Base.commune("logout");
 
-        location.reload();
-        //return response;
+        return response;
     }
 
     /**
@@ -109,8 +334,11 @@ class Base {
         });
 
         if (response.status === "success") {
+            this.playerInventory.refresh();
             this.playerAccount.username = response.data;
             this.playerAccount.email = email;
+            this.playerAccount.refresh();
+            this.playerAttributes.refresh();
         }
         
         return response;
@@ -156,45 +384,22 @@ class Base {
         }));
 
         if (response.status != "success") console.log(`${window.location.pathname} - ${response.message}`);
+
+        this.playerInventory.refresh();
+        this.playerAttributes.refresh();
         
         return response;
     }
 
     /**
-     * Loads a certain spirit.
-     * @param {String} service The name of the spirit to load.
+     * Loads all spirits of a certain service.
+     * @param {String} service The name of the spirits to load.
      * @param {String} scope Defaults to local, else global.
      * @returns Spirit world response.
      */
-    load = async (service, scope = "local") => {
-        let response = await $.post("/s/load", JSON.stringify({ service, scope }));
+    loadAll = async (service, scope = "local", data = {}, id = null) => {
+        let response = await $.post("/s/loadAll", JSON.stringify({ service, scope, data, id }));
 
         return response;
     }
-
-    createToggleViewButton = async () => {
-        Base.commune("getView").then((res) => {
-            // add a button to the footer for toggling between compact and full view
-            this.$viewToggle = $("<button>").addClass("view-toggle").text(">");
-            this.$viewToggle.on("click", () => {
-                this.toggleView();
-            });
-            $("footer").append(this.$viewToggle);
-
-            if (res.data === "full") this.toggleView(false);
-        });
-    }
-
-    toggleView = async (save = true) => {
-        if (this.$viewToggle.text() === ">") {
-            this.$viewToggle.text("<");
-            $("main").addClass("full-view");
-            if (save) Base.commune("setView", { view: "full" });
-        }
-        else {
-            this.$viewToggle.text(">");
-            $("main").removeClass("full-view");
-            if (save) Base.commune("setView", { view: "compact" });
-        }
-    }
 }

package/public/js/chat-box.js

@@ -3,7 +3,6 @@
  */
 class ChatBox {
     constructor(username, room) {
-        ChatBox.attemptStyle();
         this.socket = null;
         this.username = username;
         this.room = room;
@@ -24,18 +23,6 @@ class ChatBox {
         this.render();
     }
 
-    static styled = false;
-
-    /**
-     * Adds the chat box styles if needed.
-     */
-    static attemptStyle() {
-        if (!ChatBox.styled) {
-            $("head").append(`<link href='/styles/chat.css' rel='stylesheet' />`);
-            ChatBox.styled = true;
-        }
-    }
-
     /**
      * Renders a new message in the chat.
      * @param {Object} msg An object including the text to render.

package/public/styles/account.css

@@ -0,0 +1,45 @@
+.content#account {
+    padding: 20px;
+}
+
+.content#account h3 {
+    padding: 10px;
+}
+
+.content#account hr {
+    margin: 10px 0;
+}
+
+.content#account #info {
+    text-align: center;
+    width: 100%;
+    margin-top: 40px;
+}
+
+.content#account .setting {
+    background: var(--darkBgColor);
+    padding: 25px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    flex-wrap: wrap;
+}
+
+.content#account p {
+    width: 100%;
+}
+
+.content#account button {
+    width: 40%;
+}
+
+.content#account .edit {
+    background: var(--darkWoodColor);
+    padding: 25px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    flex-wrap: wrap;
+}

package/public/styles/inventory.css

@@ -0,0 +1,76 @@
+.inventory .item-list {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    border: none;
+    align-content: flex-start;
+    justify-content: center;
+    padding: 0;
+}
+
+.inventory .item-spawner {
+    width: 100%;
+    border: 1px solid var(--textColor);
+}
+
+.item-spawner .search-results {
+    width: 100%;
+    border: 1px solid var(--textColor);
+    overflow: auto;
+}
+
+.search-results p {
+    width: 100%;
+    cursor: pointer;
+}
+
+.search-results p:hover {
+    background-color: var(--woodColor);
+}
+
+.item-card {
+    margin: var(--margin);
+    width: var(--fillFromMargin);
+    height: 70px;
+    border: var(--standardBorder);
+    background-color: var(--bgColor);
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.item-card h5 {
+    width: 70%;
+    text-align: left;
+    padding: 5px;
+}
+
+.item-card p {
+    width: 27%;
+    text-align: right;
+}
+
+.item-card hr {
+    border: none;
+    border-right: var(--standardBorder);
+    height: 100%;
+    width: 1px;
+    margin: 0;
+}
+
+.item-card button {
+    margin: 0;
+    padding: 0 3px;
+    border-radius: 0;
+    border-bottom: none;
+    height: 50%;
+    width: 75px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: none;
+}
+
+@media only screen and (max-width: 1000px) {
+
+}