notherbase-fs 1.0.38 → 1.0.42

package/public/styles/portfolio.css

@@ -0,0 +1,468 @@
+:root {
+    --textColor: rgb(247, 247, 247);
+    --altTextColor: rgb(20, 20, 20);
+    --bgColor: rgb(31, 31, 31);
+    --bgColorLight: rgb(79, 79, 79);
+    --focusColor: rgb(222, 139, 37);
+    --shadowColor: rgb(0, 0, 0);
+    --extreme-dark: #2e2e2e;
+    --very-dark: #3e3e3e;
+    --dark: #505050;
+    --light: #F7FFE0;
+    --yellow: #D59C00;
+    --brown: #704E2E;
+    --green: #709176;
+    --blue: #00487C;
+    --game-size: 500px;
+}
+
+* {
+    color: var(--textColor);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Chakra Petch', sans-serif;
+}
+
+.invisible {
+    display: none;
+}
+
+a {
+    font-weight: bold;
+}
+
+h4 a {
+    margin-right: 20px;
+}
+
+hr {
+    border: none;
+    border-bottom: 2px solid var(--shadowColor);
+    margin: 5px 20px;
+}
+
+hr.light {
+    border-bottom: 2px solid var(--textColor);
+}
+
+body {
+    background-color: var(--bgColorLight);
+    width: 100%;
+}
+
+header {
+    height: 100vh;
+    width: 100%;
+    position: relative;
+    box-shadow: 0 10px 25px var(--shadowColor);
+    background-color: var(--bgColor);
+}
+
+.portrait {
+    height: 100%;
+    width: 70%;
+    position: absolute;
+    right: 0;
+    background-image: url("/img/fancy-me.jpg");
+    background-size: cover;
+    background-position-x: center;
+    background-repeat: no-repeat;
+    z-index: 0;
+}
+
+.portrait-fade {
+    width: 100%;
+    height: 100%;
+}
+
+header h2 {
+    position: absolute;
+    left: 100px;
+    top: 35%;
+    font-size: 50px;
+    background-color: var(--bgColor);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+header h3 {
+    position: absolute;
+    left: 100px;
+    top: calc(35% + 75px);
+    font-size: 30px;
+    background-color: var(--bgColor);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.external-links {
+    position: absolute;
+    left: 100px;
+    top: calc(35% + 125px);
+    font-size: 50px;
+    background-color: var(--bgColor);
+    width: 110px;
+    height: 65px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+header a {
+    width: 50px;
+    height: 100%;
+    margin: 5px;
+}
+
+header i:hover {
+    cursor: pointer;
+    color: var(--focusColor);
+}
+
+nav {
+    height: 50px;
+    width: 100%;
+    background-color: var(--focusColor);
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    transition: all .2s ease;
+    z-index: 99;
+    border-bottom: 1px solid var(--bgColorLight);
+}
+
+nav * {
+    color: var(--altTextColor);
+}
+
+nav i {
+    font-size: 30px;
+}
+
+.nav-closed {
+    top: -50px;
+    transition: all .2s ease;
+}
+
+main {
+    width: 100%;
+    overflow: hidden;
+}
+
+main img {
+    width: 100%;
+    height: auto;
+    border-radius: 5px;
+}
+
+section {
+    width: 100%;
+    padding: 100px 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+section h3 {
+    margin: 20px;
+    font-size: 25px;
+}
+
+section h4 {
+    margin: 5px 20px;
+    font-size: 18px;
+}
+
+section h4 i {
+    margin: 5px 5px;
+}
+
+section p {
+    margin: 20px;
+}
+
+section img {
+    width: 50%;
+    height: auto;
+}
+
+section iframe {
+    width: 50%;
+    height: 700px;
+    border: none;
+}
+
+.text {
+    width: 600px;
+    height: 100%;
+    padding: 5px;
+}
+
+#notherbase-fs {
+    background-color: var(--extreme-dark);
+    padding: 10px;
+    border: 5% solid var(--bgColor);
+    border-radius: 0% 0% 50px 50px;
+}
+
+#notherbase-fs img {
+    width: 20%;
+}
+
+#cpd {
+    background-color: var(--focusColor);
+    flex-direction: row-reverse;
+}
+
+#cpd * {
+    color: var(--altTextColor);
+}
+
+#tamago-watch {
+    background-color: var(--bgColor);
+}
+
+#won-ventures {
+    background-color: var(--focusColor);
+    flex-direction: row-reverse;
+}
+
+#won-ventures * {
+    color: var(--altTextColor);
+}
+
+#wayfarer {
+    background-color: var(--bgColor);
+}
+
+/* tamago watch styles */
+.watch {
+    width: var(--game-size);
+    min-height: 100;
+    image-rendering: pixelated;
+    position: relative;
+}
+
+.watch * {
+    image-rendering: pixelated;
+}
+
+.cartridge {
+    position: absolute;
+    left: 5%;
+    top: 30%;
+    background-image: url("/img/cartridge.png");
+    background-size: cover;
+    transition: ease-out .15s;
+    z-index: 0;
+    width: 90%;
+    height: 90%;
+}
+
+.cartridge:hover {
+    top: 40%;
+}
+
+.name {
+    background-color: #70917600;
+    position: absolute;
+    top: 73%;
+    left: 32%;
+    width: 280px;
+    height: 80px;
+    transform: rotate(29deg);
+    text-align: center;
+    font-size: 50px;
+    border: none;
+    cursor: pointer;
+}
+
+.console {
+    width: 100%;
+}
+
+.screen {
+    position: absolute;
+    top: 6%;
+    left: 6.25%;
+    width: 87.5%;
+    height: 55%;
+    display: initial;
+}
+
+.bloom {
+    box-shadow: 0px 0px 10px #fff6d759, inset 0px 0px 10px #fff6d759;
+}
+
+.pet {
+    position: absolute;
+    top: 0%;
+    left: 10%;
+    width: 25%;
+    display: none;
+}
+
+#p1 {
+    top: auto;
+    bottom: 10%;
+    left: 40%;
+}
+
+#p2 {
+    top: 0%;
+    left: auto;
+    right: 10%;
+}
+
+.food {
+    position: absolute;
+    right: 0;
+    bottom: 20%;
+    width: 25%;
+    display: none;
+}
+
+.music {
+    position: absolute;
+    bottom: 20%;
+    left: 2%;
+    width: 25%;
+    display: none;
+}
+
+.detached-right {
+    float: right;
+}
+
+.dark {
+    filter: brightness(.5);
+}
+
+.hud {
+    position: absolute;
+    bottom: 5%;
+    left: 5%;
+    width: 90%;
+    height: 32%;
+}
+
+.clock-hand {
+    position: absolute;
+    top: 12.5%;
+    left: 4.10%;
+    height: 80%;
+    width: 25%;
+}
+
+.status {
+    position: absolute;
+    top: 10%;
+    right: 27.75%;
+    height: 16%;
+    width: 29%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+#s1 {
+    top: 45%;
+}
+
+#s2 {
+    top: 78%;
+}
+
+.point {
+    border: 1px solid var(--dark);
+    background-color: var(--yellow);
+    display: none;
+}
+
+.button {
+    background-color: rgba(0, 0, 0, 0);
+    background-image: url("/img/button_brown.png");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    border: none;
+    position: absolute;
+    top: 6%;
+    right: 5%;
+    height: 25%;
+    width: 20%;
+}
+
+.button:active {
+    background-image: url("/img/button_brown_down.png");
+}
+
+#b1 {
+    background-image: url("/img/button_blue.png");
+    top: 40%;
+}
+
+#b1:active {
+    background-image: url("/img/button_blue_down.png");
+}
+
+#b2 {
+    background-image: url("/img/button_green.png");
+    top: 75%;
+}
+
+#b2:active {
+    background-image: url("/img/button_green_down.png");
+}
+
+@media only screen and (max-width: 900px) {
+    .portrait {
+        width: 100%;
+        height: 100vh;
+    }
+
+    header h2 {
+        left: 35px;
+        font-size: 30px;
+        top: 65%;
+    }
+
+    header h3 {
+        left: 35px;
+        font-size: 25px;
+        top: calc(65% + 50px);
+    }
+
+    .external-links {
+        left: 35px;
+        font-size: 30px;
+        top: calc(65% + 95px);
+        height: 45px;
+        width: 75px;
+    }
+
+    section {
+        flex-wrap: wrap;
+        padding: 40px 10px;
+    }
+
+    #cpd, #won-ventures {
+        flex-direction: row;
+    }
+
+    .text, section img, section iframe {
+        width: 100%;
+        padding: 5px;
+    }
+
+    .watch {
+        width: 100%;
+    }
+}

package/public/styles/void.css

@@ -0,0 +1,37 @@
+:root {
+    --shadow: rgb(71, 71, 71);
+    --textColor: rgb(49, 49, 49);
+    --woodColor: rgb(170, 117, 68);
+    --metalColor: rgb(104, 101, 100);
+    --brickColor: rgb(139, 67, 38);
+    --gravelColor: rgb(160, 158, 154);
+    --grassColor: rgb(50, 93, 61);
+    --voidColor: rgb(41, 0, 41);
+    --darkVoidColor: rgb(24, 0, 24);
+}
+
+* {
+    box-sizing: border-box;
+    font-family: 'Chela One', cursive;
+    color: var(--voidColor);
+}
+
+body {
+    background-color: var(--voidColor);
+}
+
+main {
+    background-color: var(--darkVoidColor);
+}
+
+h1 {
+    width: 100%;
+}
+
+a {
+    background-color: var(--darkVoidColor);
+}
+
+a:hover {
+    border: 1px solid var(--voidColor);
+}

package/server.js

@@ -0,0 +1,83 @@
+let started = false;
+let theFront, explorer = null;
+
+function start() {
+    if (!started) {
+        require("dotenv").config();
+    
+        // Setup for Express
+        const express = require("express");
+        const app = express();
+        app.set("view engine", "ejs");
+    
+        //setup for sockets
+        const http = require('http');
+        const server = http.createServer(app);
+        const { Server } = require("socket.io");
+        const io = new Server(server);
+    
+        // allows us to delete
+        const methodOverride = require('method-override');
+        app.use(methodOverride('_method'));
+    
+        //auth
+        const session = require('express-session');
+        const MongoStore = require('connect-mongo');
+    
+        // allows us to use post body data
+        app.use(express.urlencoded({ extended: true }));
+    
+        // allows us to get static files like css
+        app.use(express.static('public'));
+    
+        // sets the favicon image
+        const favicon = require('serve-favicon');
+        app.use(favicon(__dirname + '/public/img/logo.png'));
+    
+        // Import my Controller
+        const controllers = require("./controllers");
+    
+        //enable cookies
+        app.use(session({
+            store: MongoStore.create({ mongoUrl: process.env.MONGODB_URI }),
+            secret: process.env.SECRET || "won",
+            resave: false,
+            saveUninitialized: false
+        }));
+    
+        io.on('connection', (socket) => {
+            socket.join(socket.handshake.query.room);
+    
+            socket.on('disconnect', () => {});
+        });
+    
+        app.use("/user", controllers.user);
+    
+        app.use("/portfolio", controllers.portfolio);
+    
+        app.use("/chat", controllers.chat(io));
+    
+        app.use("/contact", controllers.contact);
+    
+        app.use("/inventory", controllers.inventory);
+    
+        app.use("/item", controllers.item);
+    
+        app.use("/the-front", theFront);
+    
+        app.use("/", controllers.authCheck, explorer);
+    
+        // Go Off (On)
+        server.listen(process.env.PORT);
+    
+        started = true;
+    }
+    else console.log("Server already started!");
+}
+
+module.exports = function set(frontRouter, exploreRouter) {
+    theFront = frontRouter;
+    explorer = exploreRouter;
+
+    return start;
+}

package/views/basic-footer.ejs

@@ -0,0 +1,2 @@
+</body>
+</html>

package/views/chat-box.ejs

@@ -0,0 +1,47 @@
+<link rel="stylesheet" href="/styles/chat.css">
+
+<div class="chat-box">
+    <div class="chat-name">Chatting using the name <%= user.username %>:</div>
+
+    <div class="chat-log">
+        
+    </div>
+    <input autocomplete="off" type="text" name="text" class="chat-entry">
+    <div value="Send" class="chat-send">Send</div>
+</div>
+
+<script>
+    <%- include("../node_modules/socket.io/client-dist/socket.io.js"); %>
+
+    let socket = io({
+        query: {
+            room: "<%= room %>"
+        }
+    });
+    let $chatLog = $(".chat-log");
+    let $entry = $(".chat-entry");
+
+    socket.on('chat message', function(msg) {
+        let time = new Date(msg.time);
+        $chatLog.append(`<p>[${time.toLocaleTimeString('en-US')}] ${msg.name}: ${msg.text}</p>`);
+    });
+
+    const sendMessage = function() {
+        if ($entry.val() !== ""){
+            let val = $entry.val();
+            $entry.val("");
+
+            $.post("/chat", {
+                room: "<%= room %>",
+                text: val
+            }, function () {
+                $chatLog.scrollTop($chatLog[0].scrollHeight);
+            });
+        }
+    }
+
+    $(".chat-send").on("click", sendMessage);
+    $entry.on("keyup", function(e) {
+        if (e.keyCode == 13) sendMessage();
+    });
+</script>

package/views/contact.ejs

@@ -0,0 +1,24 @@
+<div id="contact-form" class="invisible">
+    <h4>Message Nother</h4>
+    <input type="text" name="content" id="content">
+    <button id="send">Send Message</button>
+</div>
+
+<button id="contact">Msg Nother</button>
+
+<script>
+    $("#contact").on("click", (e) => {
+        $("#contact-form").toggleClass("invisible");
+    });
+
+    $("#send").on("click", (e) => {
+        $.post("/contact", 
+        {
+            location: "Test",
+            content: $("#content").val(),
+        }, 
+        function () {
+            $("#content").val("");
+        });
+    });
+</script>

package/views/explorer.ejs

@@ -0,0 +1,26 @@
+<%- include("./head.ejs"); %>
+
+<style>
+    <% for (let i = 0; i < styles.length; i++) { %>
+        <%- include(`${styles[i]}.css`); %>
+    <% } %>
+    <% for (let i = 0; i < externalStyles.length; i++) { %>
+        <%- include(`${externalStyles[i]}.css`); %>
+    <% } %>
+</style>
+
+<main class="override">
+    <%- include(`${main}.ejs`); %>
+    
+    <%- include(process.cwd() + "/views/inventory.ejs"); %>
+
+    <%- include(process.cwd() + "/views/contact.ejs"); %>
+</main>
+
+<script>
+    <% for (let i = 0; i < scripts.length; i++) { %>
+        <%- include(`${scripts[i]}.js`); %>
+    <% } %>
+</script>
+
+<%- include("./footer.ejs"); %>

package/views/footer.ejs

@@ -0,0 +1,9 @@
+
+<footer>
+    <% if (user) { %> 
+        <a href="/user/logout">Logout</a>
+    <% } %> 
+</footer>
+
+</body>
+</html>

package/views/head.ejs

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title><%= siteTitle %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- 'Roboto Condensed', sans-serif; -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
+    <!-- 'Redacted Script', cursive; -->
+    <link href="https://fonts.googleapis.com/css2?family=Redacted+Script:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link rel="stylesheet" href="/styles/main.css">
+</head>
+
+<body>