Make the entire web page wrapped in a vue object

webroot/index.html

@@ -136,7 +136,7 @@ possible hacks
 
       <div id="chat-container" class="bg-gray-800">
         <div id="messages-container">
-          <div v-for="(message, index) in messages">
+          <div v-for="message in messages">
               <div class="message flex">
                 <img
                   v-bind:src="message.image"
@@ -155,12 +155,11 @@ possible hacks
         <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
           <form id="message-form" class="flex">
 
-            <input type="hidden" name="inputAuthor" id="self-message-author"  v-model="message.author" />
+            <input type="hidden" name="inputAuthor" id="self-message-author" />
 
             <textarea
               id="message-body-form"
               placeholder="Message"
-              v-model="message.body"
               class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
             ></textarea>
             

webroot/js/app.js

@@ -8,23 +8,16 @@ function setupApp() {
   })
 
   window.app = new Vue({
-    el: "#stream-info",
+    el: "#app-container",
     data: {
       streamStatus: "",
       viewerCount: 0,
       sessionMaxViewerCount: 0,
       overallMaxViewerCount: 0,
+      messages: [],
     },
   });
 
-  window.messagesContainer = new Vue({
-    el: "#messages-container",
-    data: {
-      messages: []
-    }
-  })
-
-
   // style hackings
   window.VIDEOJS_NO_DYNAMIC_STYLE = true;
 
@@ -76,10 +69,10 @@ function setupWebsocket() {
   clearTimeout(websocketReconnectTimer)
 
   // Uncomment to point to somewhere other than goth.land
-  // const protocol = location.protocol == "https:" ? "wss" : "ws"
-  // var ws = new WebSocket(protocol + "://" + location.host + "/entry")
+  const protocol = location.protocol == "https:" ? "wss" : "ws"
+  var ws = new WebSocket(protocol + "://" + location.host + "/entry")
 
-  var ws = new WebSocket("wss://goth.land/entry")
+  // var ws = new WebSocket("wss://goth.land/entry")
 
   ws.onmessage = (e) => {
     const model = JSON.parse(e.data)
@@ -88,13 +81,13 @@ function setupWebsocket() {
     if (model.type !== SocketMessageTypes.CHAT) { return; }
 
     const message = new Message(model)
-
-    const existing = this.messagesContainer.messages.filter(function (item) {
+    
+    const existing = this.app.messages.filter(function (item) {
       return item.id === message.id
     })
     
     if (existing.length === 0 || !existing) {
-      this.messagesContainer.messages.push(message);
+      this.app.messages.push(message);
       setTimeout(() => { jumpToBottom("#messages-container"); } , 50); // could be better. is there a sort of Vue "componentDidUpdate" we can do this on?
     }
   }