notherbase-fs 1.1.40 → 1.2.0

package/controllers/explorer.js

@@ -31,6 +31,7 @@ let complete = function complete(explorerBuild) {
                         externalStyles: [],
                         localScripts: [],
                         serverScripts: [],
+                        requiredItems: [],
                         needsKey: "",
                         dropOff: "",
                         ...detail.options
@@ -74,6 +75,13 @@ let complete = function complete(explorerBuild) {
                                 }));
                             }
 
+                            let foundItemIDs = [];
+                            for (let m = 0; m < detail.options.requiredItems.length; m++) {
+                                let foundItem = await item.findOne({name: detail.options.requiredItems[m]});
+
+                                foundItemIDs.push(foundItem._id);
+                            }
+
                             let context = {
                                 siteTitle: "NotherBase",
                                 user: req.session.currentUserFull,
@@ -82,6 +90,7 @@ let complete = function complete(explorerBuild) {
                                 main: detail.options.main,
                                 localScripts: detail.options.localScripts,
                                 serverScriptReturns: serverScriptReturns,
+                                itemIDs: foundItemIDs,
                                 pov: req.query.pov,
                                 inventory: foundInventory,
                                 query: req.query
@@ -121,8 +130,9 @@ let complete = function complete(explorerBuild) {
             user: null,
             styles: [`${dir}/${explorerBuild.void}/styles/void`],
             externalStyles: [],
-            scripts: [],
+            localScripts: [],
             inventory: null,
+            itemIDs: [],
             main: `${dir}/${explorerBuild.void}/index`
         });
     });

package/controllers/game.js

@@ -6,7 +6,7 @@ const { game } = require("../models");
 
 router.get("/all", async function(req, res) {
     try {
-        let foundGames = await game.find({game: req.query.game});
+        let foundGames = await game.find({name: req.query.name});
 
         res.status(200).send({ foundGames: foundGames });
     }

package/controllers/index.js

@@ -7,5 +7,6 @@ module.exports = {
     contact: require("./contact"),
     explorer: require("./explorer"),
     front: require("./the-front"),
-    inventory: require("./inventory")
+    inventory: require("./inventory"),
+    game: require("./game")
 }

package/controllers/inventory.js

@@ -74,10 +74,8 @@ router.post("/", async function(req, res) {
                 
                 if (!holding) {
                     if (req.body.change.amount > 0) {
-                        let foundItem = await item.findById(req.body.change.item);
-        
                         foundInventory.items.push({
-                            item: foundItem._id,
+                            item: req.body.change.item,
                             amount: req.body.change.amount
                         });
     

package/controllers/the-front.js

@@ -3,6 +3,7 @@ const { inventory, connectionSuccess } = require("../models");
 let router = require("express").Router();
 let dir = "";
 
+
 let front = function front(detail) {
     detail.options = {
         styles: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notherbase-fs",
-  "version": "1.1.40",
+  "version": "1.2.0",
   "description": "Functions to help make developing for NotherBase easier.",
   "main": "index.js",
   "scripts": {

package/public/styles/inventory.css

@@ -1,14 +1,10 @@
 .inventory {
     border: 1px solid var(--textColor);
     color: var(--textColor);
-    position: fixed;
-    width: 90%;
-    height: 30%;
-    left: 5%;
-    bottom: 105px;
+    width: 100%;
+    height: 100%;
     background-color: var(--bgColor);
     padding: 5px;
-    border-radius: 5px;
     z-index: 500;
     display: flex;
     flex-wrap: wrap;
@@ -21,6 +17,7 @@
     flex-wrap: wrap;
     overflow: auto;
     border: 1px solid var(--textColor);
+    align-content: flex-start;
 }
 
 .inventory .item-spawner {
@@ -43,21 +40,13 @@
     background-color: var(--woodColor);
 }
 
-button#inventory {
-    position: fixed;
-    bottom: 30px;
-    right: 75px;
-    width: 64px;
-    height: 64px;
-}
-
 .item-card {
-    width: 100px;
-    height: 100px;
-    border-radius: 5px;
+    width: 150px;
+    height: 45px;
+    border-radius: 3px;
     border: 1px solid var(--textColor);
-    padding: 10px;
-    margin: 5px;
+    padding: 5px;
+    margin: 2.5px;
     position: relative;
 }
 
@@ -70,6 +59,6 @@ button#inventory {
 }
 
 .item-card hr {
-    margin:  5px -10px;
-    width: calc(100% + 20px);
+    width: 100%;
+    margin: 0;
 }

package/public/styles/main.css

@@ -8,6 +8,7 @@
     --textColorBright: rgb(221, 181, 130);
     --woodColor: rgb(95, 68, 43);
     --darkWoodColor: rgb(70, 50, 32);
+    --standardBorder: 1px solid var(--textColor);
 }
 
 * {
@@ -85,7 +86,7 @@ p {
     width: 80%;
 }
 
-input, textarea {
+main input, main textarea {
     padding: 10px;
     width: calc(100% - 10px);
     background-color: var(--bgColor);
@@ -95,7 +96,7 @@ input, textarea {
     font-size: 15px;
 }
 
-input[type=submit], button, a {
+main input[type=submit], main button, main a {
     background-color: var(--bgColor);
     padding: 10px;
     border-radius: 5px;
@@ -107,7 +108,7 @@ input[type=submit], button, a {
     text-align: center;
 }
 
-input[type=submit]:hover, button:hover, a:hover {
+main input[type=submit]:hover, main button:hover, main a:hover {
     border: 1px solid var(--textColorBright);
     color: var(--textColorBright);
     cursor: pointer;
@@ -163,32 +164,6 @@ ul {
     margin: 10px;
 }
 
-#contact {
-    position: fixed;
-    bottom: 30px;
-    left: 5px;
-    width: 64px;
-    height: 64px;
-}
-
-#contact-form {
-    width: 100%;
-    border: 1px solid var(--textColor);
-    color: var(--textColor);
-    position: fixed;
-    width: 90%;
-    height: 30%;
-    left: 5%;
-    bottom: 105px;
-    background-color: var(--bgColor);
-    padding: 5px;
-    border-radius: 5px;
-    z-index: 500;
-    display: flex;
-    flex-wrap: wrap;
-    overflow: auto;
-}
-
 .door {
     border: 1px solid var(--darkWoodColor);
     width: 100px;
@@ -242,10 +217,6 @@ iframe {
     font-size: 12px;
 }
 
-.ui {
-    position: relative;
-}
-
 @media only screen and (max-width: 500px) {
     main {
         width: 100%;

package/public/styles/menu.css

@@ -1,6 +1,6 @@
 .menu {
     width: 75%;
-    height: 50%;
+    height: 75%;
     margin: 5% 12.5%;
     border: 1px solid var(--textColor);
     color: var(--textColor);
@@ -12,6 +12,17 @@
     z-index: 500;
 }
 
+.ui button {
+    background-color: var(--bgColor);
+    border: 1px solid var(--textColor);
+}
+
+.ui button:hover {
+    border: 1px solid var(--textColorBright);
+    color: var(--textColorBright);
+    cursor: pointer;
+}
+
 .ui button#menu {
     position: fixed;
     bottom: 30px;
@@ -21,8 +32,8 @@
 }
 
 .menu button#close {
-    top: 5px;
-    right: 5px;
+    top: 0;
+    right: 0;
     width: 32px;
     height: 32px;
     position: absolute;
@@ -30,18 +41,41 @@
 
 .menu .tabs {
     width: 100%;
-    height: 10%;
+    height: 30px;
     border: 1px solid var(--textColor);
 }
 
-.menu .content {
+.menu .tabs button {
+    height: 30px;
+    border-radius: 0;
+    padding: 0 10px;
+}
+
+.menu .tabs .selected {
+    border: 2px solid var(--textColorBright);
+}
+
+.menu #content-window {
     width: 100%;
-    height: 90%;
+    height: calc(100% - 30px);
     border: 1px solid var(--textColor);
 }
 
 .menu a {
     margin: 0;
     padding: 5px;
-    margin: 5px;
+}
+
+.menu #logout {
+    position: absolute;
+    width: 50%;
+    height: 40px;
+    bottom: -40px;
+    left: calc(25%);
+    background-color: var(--bgColor);
+    border: var(--standardBorder);
+    border-top: none;
+    border-radius: 0 0 5px 5px;
+    text-align: center;
+    z-index: 499;
 }

package/server.js

@@ -62,6 +62,8 @@ module.exports = function start(frontRouter, exploreRouter, dbConnected) {
         app.use("/chat", controllers.chat(io));
     
         app.use("/contact", controllers.contact);
+
+        app.use("/game", controllers.game);
     
         app.use("/inventory", controllers.inventory);
     

package/test/coast/tall-beach/nono-cove/local-scripts/nono.js

@@ -0,0 +1,211 @@
+let tileSize = 30;
+
+class NonoTile {
+    constructor (game, $field, position, modifier) {
+        this.$div = $field.append(`<div class="nono-tile" id="${position[0]},${position[1]}"></div>`).children().last();
+        this.$div.css("width", tileSize);
+        this.$div.css("height", tileSize);
+        this.position = position;
+        this.state = "blank";
+        this.$div.addClass(this.state);
+        this.correctState = this.getRandomState(modifier);
+        this.solved = this.checkIfSolved();
+        this.game = game;
+
+        this.$div.on("click", this.clicked);
+    }
+
+    getRandomState(modifier) {
+        let roll = Math.floor(Math.random() * (2 + modifier));
+        if (roll < 1) return "blank";
+        else return "punched";
+    }
+
+    checkIfSolved() {
+        if ((this.state === "blank" || this.state === "marked") && this.correctState === "blank") return true;
+        else if (this.state === "punched" && this.correctState === "punched") return true;
+        else return false;
+    }
+
+    clicked = () => {
+        this.$div.removeClass(this.state);
+
+        if (this.state === "blank") this.state = "marked";
+        else if (this.state === "marked") this.state = "punched";
+        else if (this.state === "punched") this.state = "blank";
+
+        this.$div.addClass(this.state);
+
+        this.solved = this.checkIfSolved();
+        this.game.tryFinishGame();
+    }
+}
+
+class NonoGame {
+    constructor () {
+        this.difficulty = 0;
+        this.level = 2;
+        this.$board = $("#nono-board");
+        this.$field = null;
+        this.dimensions = [this.level, this.level];
+        this.hints = [[], []];
+        this.tiles = [];
+        this.nonoSize = 100;
+        this.maxNonoId = 4;
+        this.goldItem = itemIDs[0];
+
+        this.startNew();
+    }
+
+    startNew() {
+        this.dimensions = [this.level, this.level];
+
+        this.$board.empty();
+        this.$board.css("width", this.dimensions[0] * (tileSize) + this.nonoSize + 5);
+        this.$board.css("height", this.dimensions[1] * (tileSize) + this.nonoSize + 5);
+
+        let $nono = this.$board.append(`<img class="nono" src="/img/logo.png">`).children().last();
+        $nono.css("width", this.nonoSize);
+        $nono.css("height", this.nonoSize);
+
+        let $topHints = this.$board.append(`<div class="top hints"></div>`).children().last();
+        $topHints.css("width", this.dimensions[0] * tileSize);
+        $topHints.css("height", this.nonoSize);
+
+        let $columns = [];
+        for (let i = 0; i < this.dimensions[0]; i++) {
+            let $newColumn = $topHints.append(`<div class="column"></div>`).children().last();
+            $newColumn.css("width", tileSize);
+            $columns.push($newColumn);
+        }
+
+        let $sideHints = this.$board.append(`<div class="side hints"></div>`).children().last();
+        $sideHints.css("width", this.nonoSize);
+        $sideHints.css("height", this.dimensions[1] * tileSize);
+
+        let $rows = [];
+        for (let i = 0; i < this.dimensions[1]; i++) {
+            let $newRow = $sideHints.append(`<div class="row"></div>`).children().last();
+            $newRow.css("height", tileSize);
+            $rows.push($newRow);
+        }
+
+        this.$field = this.$board.append(`<div class="nono-field"></div>`).children().last();
+        this.$field.css("width", this.dimensions[0] * tileSize);
+        this.$field.css("height", this.dimensions[1] * tileSize);
+
+        this.tiles = this.generateTiles();
+        this.hints = this.generateHints();
+
+        for (let i = 0; i < this.dimensions[0]; i++) {
+            for (let j = 0; j < this.hints[0][i].length; j++) {
+                $columns[i].append(`<p class="hint">${this.hints[0][i][j]}</p>`);
+            }
+        }
+
+        for (let i = 0; i < this.dimensions[1]; i++) {
+            for (let j = 0; j < this.hints[1][i].length; j++) {
+                $rows[i].append(`<p class="hint">${this.hints[1][i][j]}</p>`);
+            }
+        }
+
+        if (this.checkForSolve()) {
+            console.log("Randomly generated nothing!");
+            this.startNew();
+        }
+    }
+
+    generateTiles() {
+        let tiles = [];
+
+        for (let i = 0; i < this.dimensions[0]; i++) {
+            for (let j = 0; j < this.dimensions[1]; j++) {
+                tiles.push(new NonoTile(
+                    this, 
+                    this.$field, 
+                    [i, j],
+                    1 - (this.difficulty / 10)
+                ));
+            }
+        }
+
+        return tiles;
+    }
+
+    generateHints() {
+        let hints = [[], []];
+
+        for (let i = 0; i < this.dimensions[0]; i++) {
+            let current = 0;
+            hints[0].push([]);
+
+            for (let j = 0; j < this.dimensions[1]; j++) {
+                if (this.tiles[j * this.dimensions[0] + i].correctState === "punched") current++;
+                else if (current > 0) {
+                    hints[0][i].push(current);
+                    current = 0;
+                }
+            }
+
+            if (current > 0 || hints[0][i].length < 1) {
+                hints[0][i].push(current);
+            }
+        }
+
+        for (let i = 0; i < this.dimensions[1]; i++) {
+            let current = 0;
+            hints[1].push([]);
+
+            for (let j = 0; j < this.dimensions[0]; j++) {
+                if (this.tiles[i * this.dimensions[0] + j].correctState === "punched") current++;
+                else if (current > 0) {
+                    hints[1][i].push(current);
+                    current = 0;
+                }
+            }
+
+            if (current > 0 || hints[1][i].length < 1) hints[1][i].push(current);
+        }
+
+        return hints;
+    }
+
+    checkForSolve() {
+        let solved = true;
+
+        for (let i = 0; i < this.tiles.length; i++) {
+            if (!this.tiles[i].solved) {
+                solved = false;
+                break;
+            }
+        }
+
+        return solved;
+    }
+
+    tryFinishGame() {
+        if (this.checkForSolve()) {
+            playerInventory.change({ 
+                item: this.goldItem, 
+                amount: this.level + this.difficulty
+            });
+
+            let $tiles = $(".nono-tile");
+            $tiles.off("click");
+            $tiles.addClass("borderless");
+            $tiles = $(".nono-tile.marked");
+            $tiles.addClass("blank");
+            $tiles.removeClass("marked");
+
+            this.level++;
+            if (this.level > 10) {
+                this.difficulty += this.level - 10;
+                if (this.difficulty > 10) this.difficulty = 10;
+                this.level -= 10;
+            }
+            setTimeout(() => {this.startNew();}, 2000);
+        }
+    }
+}
+
+let nonoGame = new NonoGame();

package/test/coast/tall-beach/nono-cove/styles/index.css

@@ -0,0 +1,18 @@
+:root {
+}
+
+.nono-spirit {
+    width: 100%;
+    height: 200px;
+    margin: 10px;
+    position: relative;
+}
+
+.nono-spirit img {
+    width: 100px;
+    height: 100px;
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    image-rendering: pixelated;
+}

package/test/coast/tall-beach/nono-cove/styles/nono.css

@@ -0,0 +1,89 @@
+:root {
+    --nonoColor: rgb(87, 61, 53);
+    --nonoColorBright: rgb(187, 130, 113);
+    --nonoBG: rgb(61, 61, 61);
+}
+
+#nono-board {
+    border: 2px solid black;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.nono {
+    background-color: var(--nonoBG);
+    user-select: none;
+    image-rendering: pixelated;
+}
+
+.hints {
+    background-color: var(--nonoBG);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    user-select: none;
+}
+
+.column {
+    border: 1px solid var(--nonoColor);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    user-select: none;
+}
+
+.row {
+    border: 1px solid var(--nonoColor);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    user-select: none;
+}
+
+.hint {
+    width: 25px;
+    height: 25px;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+}
+
+.nono-field {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.nono-tile {
+    border: 1px solid var(--nonoColor);
+    cursor: pointer;
+}
+
+.borderless {
+    border: none !important;
+    cursor: initial !important;
+}
+
+.nono-tile:hover {
+    border: 1px solid var(--nonoColorBright);
+}
+
+.blank {
+    background-color: white;
+    transition: all .1s ease;
+}
+
+.marked {
+    background-color: rgb(73, 80, 182);
+    transition: all .1s ease;
+}
+
+.punched {
+    background-color: rgb(0, 0, 0);
+    transition: all .1s ease;
+}

package/test/coast/tall-beach/nono-cove/views/index.ejs

@@ -11,6 +11,10 @@
 
 <hr>
 
-<a href="/the-front">
+<a href="/the-front" class="to">
     Go to The Front
+</a>
+
+<a href="/coast/tall-beach/nono-cove/nono-og" class="to">
+    Go to Nono Cove
 </a>

package/test/coast/tall-beach/nono-cove/views/nono-og.ejs

@@ -0,0 +1,37 @@
+<p>
+    A random nono washes up on shore. Will you solve it?
+</p>
+
+<hr>
+
+<div class="nono-spirit">
+    <img id="move-nono-spirit" src="/img/logo.png" alt="Nono Spirit">
+</div>
+
+<div id="nono-board"></div>
+
+<hr>
+
+<a href="/the-front">
+    Go to The Front
+</a>
+
+<script>
+    let lastPos = [0, 0];
+
+    let moveNono = function moveNono() {
+        let focus = $("#move-nono-spirit");
+        let newPos = [Math.floor(Math.random() * 200), Math.floor(Math.random() * 100)];
+
+        focus.animate({
+            left: newPos[0],
+            top: newPos[1],
+        }, 2000);
+
+        lastPos = newPos;
+    };
+
+    moveNono();
+
+    setInterval(moveNono, 2000);
+</script>

package/test/test-index.js

@@ -28,6 +28,16 @@ const world = {
                                             localScripts: ["game"],
                                             serverScripts: ["game"]
                                         }
+                                    },
+                                    {
+                                        name: "nono-og",
+                                        options: {
+                                            localScripts: ["nono"],
+                                            styles: ["nono"],
+                                            requiredItems: [
+                                                "Gold Coin"
+                                            ]
+                                        }
                                     }
                                 ]
                             }

package/test/views/index.ejs

@@ -20,7 +20,7 @@
 </div>
 
 <a href="/coast/tall-beach/nono-cove" class="invisible to nother-base">
-    Go to Nono Cove
+    Go inside
 </a>
 
 <script>
@@ -43,6 +43,10 @@
                 $loginInfo.text("To your right you hear the sound of a bang against a chain-link fence. You've logged in.");
                 $toNonoButton.addClass("invisible");
                 $toNonoLink.removeClass("invisible");
+                
+                if (playerInventory) {
+                    playerInventory.refresh();
+                }
             });
         } catch (error) {
             //console.log(error);

package/views/contact.ejs

@@ -1,4 +1,4 @@
-<div id="contact-form" class="invisible">
+<div id="contact-form" class="invisible content">
     <h4>Message Nother</h4>
     <input type="text" name="content" id="content">
     <button id="send">Send Message</button>

package/views/debug.ejs

@@ -0,0 +1,15 @@
+<div class="content invisible" id="debug">
+    <h3>user</h3>
+    <% if (user) { %>
+        <p><%= user._id %></p>
+    <% } else { %>
+        <p>Please login to view user.</p>
+    <% } %>
+
+    <h3>inv</h3>
+    <% if (user) { %>
+        <p><%= inventory.items.length %> items</p>
+    <% } else { %>
+        <p>Please login to view inventory.</p>
+    <% } %>
+</div>

package/views/explorer.ejs

@@ -9,12 +9,18 @@
     <% } %>
 </style>
 
+<script>
+    let itemIDs = [];
+    <% for (let i = 0; i < itemIDs.length; i++) { %>
+        itemIDs.push("<%= itemIDs[i] %>");
+    <% } %>
+</script>
+
 <main class="override">
     <%- include(`${main}.ejs`); %>
 </main>
 
 <div class="ui">
-    <%- include("./inventory.ejs", {inventory: inventory}); %>
     <%- include("./menu.ejs", {user: user}); %>
 </div>
 

package/views/inventory.ejs

@@ -1,51 +1,30 @@
-<% if (inventory) { %>
-    <% if (inventory.items) { %>
-        <div class="inventory invisible">
-            <% if (user.authLevels.length > 0) { 
-                for (let i = 0; i < user.authLevels.length; i++) {
-                    if (user.authLevels[i] === "Creator") { %>
-
-                        <div class="item-spawner">
-                            <input type="text" class="search">
-                            <div class="search-results">
-                                
-                            </div>
-                        </div>
-
-                        <% break;
-                    }
-                }
-            } %>
-
-            <div class="item-list">
-            </div>
+<div class="inventory content invisible" id="inventory">
+    <div id="error">
+        Please login to view your inventory.
+    </div>
+
+    <div class="item-spawner invisible">
+        <input type="text" class="search">
+        <div class="search-results">
+            
         </div>
+    </div>
 
-        <button id="inventory">
-            <i class="fas fa-database"></i>
-        </button>
-    <% } else { %>
-        <button id="inventory">
-            ERR
-        </button>
-    <% } %>
-<% } %>
+    <div class="item-list">
+    </div>
+</div>
 
 <script>
     class Inventory {
         constructor() {
             this.$div = $(".inventory");
-            this.$list = $(".item-list");
+            this.$list = $(".inventory .item-list");
             this.$search = $(".search");
             this.$searchResults = $(".search-results");
             this.searchResults = [];
-            this.$button = $("button#inventory");
+            this.$error = $("#inventory #error");
             this.items = [];
 
-            this.$button.on("click", () => {
-                this.$div.toggleClass("invisible");
-            });
-
             this.$search.on("keyup", () => {
                 let searchString = this.$search.val();
 
@@ -54,17 +33,13 @@
                 });
             });
 
-            $.get("/inventory", (data) => {
-                this.items = data.foundInventory.items;
-
-                this.render();
-            });
+            this.refresh();
 
             setInterval(this.update, this.updateCooldown);
         }
 
-        change(change) {
-            $.post("/inventory", { change: change }, (data, status) => {
+        async change(change) {
+            await $.post("/inventory", { change: change }, (data, status) => {
                 if (status === "success") {
                     let holding = false;
 
@@ -87,28 +62,52 @@
             });
         }
 
+        async getData() {
+            await $.get("/inventory", (data) => {
+                if (data.foundInventory) this.items = data.foundInventory.items;
+
+                this.clearError();
+            });
+        }
+        
         render() {
             this.$list.empty();
-
+            
             for (let i = 0; i < this.items.length; i++) {
                 let $new = this.$list.append(
-                                                `<div class="item-card">
-                                                    <h5>${this.items[i].item.name}</h5>
-                                                    <button id="${i}">X</button>
-                                                    <hr>
-                                                    <p>${this.items[i].amount}</p>
-                                                </div>`
-                                            ).children().last();
-
-                $new.find("button").on("click", (e) => {
-                    let which = parseInt(e.currentTarget.id);
-
-                    this.change({
-                        item: this.items[which].item._id,
-                        amount: -1
+                    `<div class="item-card">
+                        <h5>${this.items[i].item.name}</h5>
+                        <button id="${i}">X</button>
+                        <hr>
+                        <p>${this.items[i].amount}</p>
+                        </div>`
+                        ).children().last();
+
+                    $new.find("button").on("click", (e) => {
+                        let which = parseInt(e.currentTarget.id);
+                        
+                        this.change({
+                            item: this.items[which].item._id,
+                            amount: -1
+                        });
+
+                        this.clearError();
                     });
-                });
+                }
             }
+        
+        async refresh() {
+            await this.getData();
+            this.render();
+        }
+        
+        clearError() {
+            this.$error.addClass("invisible");
+        }
+
+        setError(text) {
+            this.$error.text(text);
+            this.$error.removeClass("invisible");
         }
 
         renderSearchResults(results) {

package/views/menu.ejs

@@ -1,6 +1,4 @@
 <div class="menu invisible">
-    
-
     <div class="tabs">
         <button id="inventory">
             Inventory
@@ -8,23 +6,26 @@
         <button id="player">
             Player
         </button>
-        <button id="contact">
+        <button id="contact-form">
             Contact
         </button>
-
-        <button id="close">
-            X
+        <button id="debug">
+            Debug
         </button>
     </div>
 
-    <div class="content">
-        <%- include("./contact.ejs"); %>
+    <button id="close">
+        X
+    </button>
 
+    <div id="content-window">
+        <%- include("./inventory.ejs"); %>
+        <%- include("./player.ejs"); %>
+        <%- include("./contact.ejs"); %>
+        <%- include("./debug.ejs"); %>
     </div>
 
-    <% if (user) { %> 
-        <a href="/user/logout">Logout</a>
-    <% } %> 
+    <a href="/user/logout" id="logout">Logout</a>
 </div>
 
 <button id="menu"><i class="fas fa-cog"></i></button>
@@ -36,7 +37,20 @@
         $menu.toggleClass("invisible");
     });
 
-    $("button#close").on("click", function () {
+    $(".menu button#close").on("click", function () {
         $menu.toggleClass("invisible");
     });
+
+    $(".menu .tabs button").on("click", function (e) {
+        switchTab(e.currentTarget.id);
+    });
+
+    let switchTab = function switchTab(id) {
+        $("#content-window .content").addClass("invisible");
+        $(".menu .tabs button").removeClass("selected");
+        $(`#content-window #${id}`).removeClass("invisible");
+        $(`.menu .tabs #${id}`).addClass("selected");
+    }
+
+    switchTab("inventory");
 </script>

package/views/player.ejs

@@ -0,0 +1 @@
+<div class="content invisible" id="player"></div>