notherbase-fs 3.2.2 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notherbase-fs",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Functions to help make developing for NotherBase easier.",
   "exports": "./notherbase-fs.js",
   "scripts": {

package/public/js/chat-box.js

@@ -29,7 +29,8 @@ class ChatBox {
      */
     newMessage = (msg) => {
         let time = new Date(msg.time);
-        this.$chatLog.append(`<p>[${time.toLocaleTimeString('en-US')}] ${msg.name}: ${msg.text}</p>`);
+        let times = time.toLocaleTimeString('en-US').split(":");
+        this.$chatLog.append(`<p>(${times[0]}:${times[1]}) ${msg.name}: ${msg.text}</p>`);
         this.$chatLog.scrollTop(this.$chatLog.prop("scrollHeight"));
         let msgs = this.$chatLog.find("p");
         if (msgs.length > this.maxMessages) {
@@ -44,7 +45,11 @@ class ChatBox {
      * @param {Object} msg An object including the users in the room.
      */
     updateInfo = (msg) => {
+        this.$usersChatting.text(`${msg.data.users.length} User${msg.data.users.length !== 1 ? "s" : ""} Chatting`);
+
         this.$users.empty();
+        this.$header = $(`<h4>You are ${this.username}</h4>`).appendTo(this.$users);
+        
         for (let i = 0; i < msg.data.users.length; i++) {
             this.$users.append(`<li>${msg.data.users[i]}</li>`);
         }
@@ -72,9 +77,11 @@ class ChatBox {
     render() {
         this.$div.empty();
 
-        this.$header = $(`<h4>Chatting with the name ${this.username}:</h4>`).appendTo(this.$div);
+        this.$usersChatting = $(`<button id="chatting">0 Users Chatting</button>`).appendTo(this.$div);
+        this.$usersChatting.click(this.toggleUsers);
         this.$chatLog = $(`<div class="chat-log"></div>`).appendTo(this.$div);
         this.$users = $(`<ul class="users"></ul>`).appendTo(this.$div);
+        this.$header = $(`<h4>You are ${this.username}</h4>`).appendTo(this.$users);
         this.$entry = $(`<input autocomplete="off" type="text" class="chat-entry">`).appendTo(this.$div);
         this.$send = $(`<button class="chat-send">Send</button>`).appendTo(this.$div);
 
@@ -83,5 +90,9 @@ class ChatBox {
             if (e.keyCode == 13) this.sendMessage();
         });
     }
+
+    toggleUsers = () => {
+        this.$users.toggleClass("shown");
+    }
 }
 

package/public/styles/chat.css

@@ -2,26 +2,29 @@
     position: relative;
     box-shadow: var(--boxShadow);
     width: 100%;
-    height: 400px;
+    height: 50vh;
     display: flex;
     flex-wrap: wrap;
+    margin: var(--margin);
 }
 
-.chat-name {
-    color: var(--textColor);
-    padding: 10px;
+.chat-box h4 {
+    padding: var(--padding);
+    border-radius: none;
+    border: none;
 }
 
 .chat-log {
-    width: 80%;
-    height: 300px;
+    width: 100%;
+    height: calc(100% - 65px);
     background-color: rgba(0, 0, 0, 0.534);
     overflow: auto;
     padding: 5px;
+    border-radius: none;
 }
 
 .chat-send {
-    height: calc(var(--pSize) + 2 * var(--padding));
+    height: 35px;
     width: 5em;
     outline: none;
     background-color: var(--bgColor);
@@ -40,7 +43,7 @@
 }
 
 .chat-entry {
-    height: calc(var(--pSize) + 2 * var(--padding));
+    height: 35px;
     width: calc(100% - 5em);
     outline: none;
     background-color: var(--bgColor);
@@ -58,9 +61,25 @@
     text-align: left;
 }
 
-.chat-box>ul{
-    width: 20%;
-    height: 300px;
+.chat-box>ul {
+    width: 100%;
+    height: 0;
     border: var(--standardBorder);
     margin: 0;
+    position: absolute;
+    top: 30px;
+    left: 0;
+    transition: all .25s ease;
+    overflow: hidden;
+    background: var(--bgColor);
+}
+
+.chat-box>ul.shown {
+    height: calc(100% - 30px);
+}
+
+.chat-box #chatting {
+    width: 100%;
+    height: 25px;
+    padding: var(--padding);
 }

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

@@ -20,8 +20,6 @@
     Go to Nono Cove
 </a>
 
-
-<script src="/js/chat-box.js"></script>
 <script>
     let chatTest = new ChatBox("<%= user.username %>", "test-chat");
     let chatTest2 = new ChatBox("<%= user.username %>", "test-chat-2");

package/test/pages/test-page/index.ejs

@@ -21,25 +21,85 @@
     <link rel="stylesheet" href="/styles/chat.css">
     <script src="/js/base.js"></script>
 </head>
-
 <script>
     const currentRoute = "<%- route %>";
 </script>
 
-
 <body>
-    Test hahahahahah
-    <button onclick="emailTime()">email</button>
+    <main>
+        <div class="chatter" id="adam"></div>
+        <input type="text" id="adam">
+        <button id="adam">Chat</button>
+    </main>
 </body>
 
 <script>
-    let emailTime = async () => {
-        base.do("emailTime", {
-            toEmail: "wyattsushi@gmail.com",
-            subject: "New Time Update!",
-            html: `New Time: 358970976`,
-            route: "/pages/test-page"
-        });
+    class Spirit {
+        constructor(name) {
+            this.name = name;
+            this.children = {};
+        }
+
+        addChild(child, parent) {
+            if (!this.children[child.name]) {
+                this.children[child.name] = 1;
+            }
+
+            this.children[child.name]++;
+        }
     }
+
+    class Chatter {
+        constructor(id) {
+            this.name = id;
+            this.brain = new Spirit("i");
+            this.$div = $(`.chatter#${id}`);
+            this.$input = $(`input#${id}`);
+            this.$submit = $(`button#${id}`);
+
+            this.$submit.click(() => {
+                this.listen(this.$input.val());
+            });
+        }
+
+        register = (word) => {
+            if (!this.brain[word]) {
+                this.brain[word] = new Spirit(word);
+            }
+
+            return this.brain[word];
+        }
+
+        think = () => {
+
+        }
+
+        listen = (message) => {
+            message = message.toLowerCase();
+            let words = message.split(" ");
+
+            //add words to the dialogue tree
+            this.register(words[0]);    
+            for (let i = 0; i < words.length; i++) {
+                if (i < words.length - 1) {
+                    let child = this.register(words[i + 1]);
+                    if (i > 0) this.brain[words[i]].addChild(child, this.brain[words[i - 1]]);
+                    else this.brain[words[i]].addChild(child, null);
+                }
+            }
+
+            //think
+
+            this.respond(message);
+        }
+
+        respond(message) {
+            this.$div.append(`<p>${this.name}: ${message}</p>`);
+        }
+    }
+
+    const adam = new Chatter("adam");
+    adam.listen(`In the beginning God created the heavens and the earth`);
+    adam.listen("if i have the first two words in a three word relationship can the third word be guessed")
 </script>
 </html>

package/public/styles/chat copy.css

@@ -1,57 +0,0 @@
-.chat-box {
-    position: relative;
-    box-shadow: var(--boxShadow);
-    width: 100%;
-    height: 400px;
-}
-
-.chat-name {
-    color: var(--textColor);
-    padding: 10px;
-}
-
-.chat-log {
-    width: 100%;
-    height: calc(100% - (var(--h3Size) + 2 * var(--padding) + 2 * var(--margin)) - (var(--pSize) + 2 * var(--padding)));
-    background-color: rgba(0, 0, 0, 0.534);
-    overflow: auto;
-    padding: 5px;
-}
-
-.chat-send {
-    height: calc(var(--pSize) + 2 * var(--padding));
-    width: 5em;
-    outline: none;
-    background-color: var(--bgColor);
-    border: var(--standardBorder);
-    color: var(--textColor);
-    text-align: center;
-    padding: 0;
-    margin: 0;
-    border-radius: 0;
-}
-
-.chat-send:hover {
-    border: 1px solid var(--textColorBright);
-    color: var(--textColorBright);
-    cursor: pointer;
-}
-
-.chat-entry {
-    height: calc(var(--pSize) + 2 * var(--padding));
-    width: calc(100% - 5em);
-    outline: none;
-    background-color: var(--bgColor);
-    border: var(--standardBorder);
-    color: var(--textColor);
-    margin: 0;
-    padding: var(--padding);
-}
-
-.chat-log > p {
-    color: var(--textColor);
-    margin: 0;
-    padding: 2px;
-    line-height: 1em;
-    text-align: left;
-}