progress wip. separated out chat input component and its respective methods.

webroot/js/chat/standalone.js

@@ -1,20 +1,23 @@
 import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
 import UserInfo from './user-info.js';
 import Chat from './chat.js';
+import Websocket from '../websocket.js';
 
 import { getLocalStorage, generateAvatar, generateUsername } from '../utils.js';
 import { KEY_USERNAME, KEY_AVATAR } from '../utils/chat.js';
 
-export class StandaloneChat extends Component {
+export default class StandaloneChat extends Component {
   constructor(props, context) {
     super(props, context);
 
     this.state = {
+      websocket: new Websocket(),
       chatEnabled: true, // always true for standalone chat
       username: getLocalStorage(KEY_USERNAME) || generateUsername(),
       userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
     };
 
+    this.websocket = null;
     this.handleUsernameChange = this.handleUsernameChange.bind(this);
   }
 
@@ -30,7 +33,7 @@ export class StandaloneChat extends Component {
   }
 
   render(props, state) {
-    const { username, userAvatarImage } = state;
+    const { username, userAvatarImage, websocket } = state;
     return (
       html`
         <div class="flex">
@@ -40,7 +43,11 @@ export class StandaloneChat extends Component {
             handleUsernameChange=${this.handleUsernameChange}
             handleChatToggle=${this.handleChatToggle}
           />
-          <${Chat} username=${username} userAvatarImage=${userAvatarImage} chatEnabled />
+          <${Chat}
+            websocket=${websocket}
+            username=${username}
+            userAvatarImage=${userAvatarImage}
+            chatEnabled />
         </div>
     `);
   }