notherbase-fs 1.1.42 → 1.2.2

package/public/styles/inventory.css

@@ -1,17 +1,11 @@
 .inventory {
     border: 1px solid var(--textColor);
     color: var(--textColor);
-    position: fixed;
-    width: 90%;
-    height: 30%;
-    left: 5%;
-    bottom: 105px;
-    background-color: var(--bgColor);
+    width: 100%;
+    height: 100%;
+    /* background-color: var(--bgColor); */
     padding: 5px;
-    border-radius: 5px;
     z-index: 500;
-    display: flex;
-    flex-wrap: wrap;
     overflow: auto;
 }
 
@@ -21,6 +15,7 @@
     flex-wrap: wrap;
     overflow: auto;
     border: 1px solid var(--textColor);
+    align-content: flex-start;
 }
 
 .inventory .item-spawner {
@@ -43,21 +38,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;
 }
 
@@ -67,9 +54,10 @@ button#inventory {
     top: 0;
     margin: 0;
     padding: 0;
+    border-radius: 0;
 }
 
 .item-card hr {
-    margin:  5px -10px;
-    width: calc(100% + 20px);
+    width: 100%;
+    margin: 0;
 }

package/public/styles/main.css

@@ -1,6 +1,8 @@
 :root {
     --bgColor: rgb(37, 37, 37);
+    --bgColorTransparent: rgba(37, 37, 37, 0.404);
     --darkBgColor: rgb(27, 27, 27);
+    --veryDarkBgColorTransparent: rgba(15, 15, 15, 0.404);
     --veryDarkBgColor: rgb(15, 15, 15);
     --lightBgColor: rgb(57, 57, 57);
     --shadowColor: rgb(26, 26, 26);
@@ -8,6 +10,7 @@
     --textColorBright: rgb(221, 181, 130);
     --woodColor: rgb(95, 68, 43);
     --darkWoodColor: rgb(70, 50, 32);
+    --standardBorder: 1px solid var(--textColor);
 }
 
 * {
@@ -21,6 +24,11 @@
     display: none !important;
 }
 
+.camo {
+    transition: all .15s;
+    opacity: 0;
+}
+
 body {
     background-color: var(--darkBgColor);
     min-height: 100vh;
@@ -163,32 +171,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 +224,6 @@ iframe {
     font-size: 12px;
 }
 
-.ui {
-    position: relative;
-}
-
 @media only screen and (max-width: 500px) {
     main {
         width: 100%;

package/public/styles/menu.css

@@ -1,15 +1,43 @@
 .menu {
     width: 75%;
     height: 50%;
-    margin: 5% 12.5%;
     border: 1px solid var(--textColor);
     color: var(--textColor);
     position: fixed;
+    left: 12.5%;
+    top: 5%;
+    background-color: var(--bgColorTransparent);
+    backdrop-filter: blur(3px);
+    border-radius: 5px;
+    z-index: 500;
+}
+
+.menu hr {
+    margin: 0;
+}
+
+.ui .fade {
+    background-color: var(--veryDarkBgColorTransparent);
+    backdrop-filter: blur(3px);
+    width: 100%;
+    height: 100%;
+    position: fixed;
     left: 0;
     top: 0;
+    z-index: 400;
+}
+
+.ui button {
     background-color: var(--bgColor);
-    border-radius: 5px;
-    z-index: 500;
+    border: 1px solid var(--textColor);
+    margin: 0;
+
+}
+
+.ui button:hover {
+    border: 1px solid var(--textColorBright);
+    color: var(--textColorBright);
+    cursor: pointer;
 }
 
 .ui button#menu {
@@ -18,30 +46,54 @@
     right: 5px;
     width: 64px;
     height: 64px;
+    border-radius: 5px;
 }
 
 .menu button#close {
-    top: 5px;
-    right: 5px;
+    top: 0;
+    right: 0;
     width: 32px;
     height: 32px;
     position: absolute;
+    border-radius: 0;
 }
 
 .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;
 }

package/public/styles/more.css

@@ -0,0 +1,3 @@
+.content#more {
+    padding: 10px;
+}

package/public/styles/player.css

@@ -0,0 +1,12 @@
+.content#player {
+    padding: 10px;
+}
+
+.content#player h3 {
+    width: 100%;
+    text-transform: capitalize;
+}
+
+.content#player h3 button {
+    width: 40px;
+}

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"
+                                            ]
+                                        }
                                     }
                                 ]
                             }