Initial setup for standalone chat with Preact.

- set up standalone static page and message related components
- start separating out css into smaller more manageable files
- start separating out utils into smaller modular files
- renaming some files for consistency

webroot/js/chat/user-info.js

@@ -0,0 +1,108 @@
+import { h, Component, createRef } from 'https://unpkg.com/preact?module';
+import htm from 'https://unpkg.com/htm?module';
+// Initialize htm with Preact
+const html = htm.bind(h);
+
+import { generateAvatar, setLocalStorage } from '../utils.js';
+import { KEY_USERNAME, KEY_AVATAR } from '../utils/chat.js';
+
+
+export default class UserInfo extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      displayForm: false,
+    };
+
+    this.textInput = createRef();
+
+    this.handleKeydown = this.handleKeydown.bind(this);
+    this.handleDisplayForm = this.handleDisplayForm.bind(this);
+    this.handleHideForm = this.handleHideForm.bind(this);
+    this.handleUpdateUsername = this.handleUpdateUsername.bind(this);
+  }
+
+  handleDisplayForm() {
+    this.setState({
+      displayForm: true,
+    });
+  }
+
+  handleHideForm() {
+    this.setState({
+      displayForm: false,
+    });
+  }
+
+  handleKeydown(event) {
+    if (event.keyCode === 13) { // enter
+			this.handleUpdateUsername();
+		} else if (event.keyCode === 27) { // esc
+			this.handleHideForm();
+		}
+  }
+
+  handleUpdateUsername() {
+    const { username: curName, handleUsernameChange } = this.props;
+    let newName = this.textInput.current.value;
+    newName = newName.trim();
+    if (newName !== '' && newName !== curName) {
+      const newAvatar = generateAvatar(`${newName}${Date.now()}`);
+      setLocalStorage(KEY_USERNAME, newName);
+      setLocalStorage(KEY_AVATAR, newAvatar);
+      if (handleUsernameChange) {
+        handleUsernameChange(newName, newAvatar);
+      }
+      this.handleHideForm();
+    }
+
+  }
+
+  render(props, state) {
+    const { username, userAvatarImage, handleChatToggle } = props;
+    const { displayForm } = state;
+
+    const narrowSpace = document.body.clientWidth < 640;
+    const styles = {
+      info: {
+        display: displayForm || narrowSpace ? 'none' : 'flex',
+      },
+      form: {
+        display: displayForm ? 'flex' : 'none',
+      },
+    };
+    if (narrowSpace) {
+      styles.form.display = 'inline-block';
+    }
+    return (
+      html`
+        <div id="user-options-container" class="flex">
+          <div id="user-info">
+            <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex" onClick=${this.handleDisplayForm}>
+              <img
+                src=${userAvatarImage}
+                alt=""
+                class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
+              />
+              <span class="text-indigo-600">${username}</span>
+            </div>
+
+            <div id="user-info-change" style=${styles.form}>
+              <input type="text"
+                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
+                maxlength="100"
+                placeholder="Update username"
+                value=${username}
+                onKeydown=${this.handleKeydown}
+                ref=${this.textInput}
+              >
+              <button onClick=${this.handleUpdateUsername} class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
+              <button onClick=${this.handleHideForm} class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
+            </div>
+          </div>
+          <button type="button" onClick=${handleChatToggle} class="flex bg-gray-800 hover:bg-gray-700">💬</button>
+        </div>
+    `);
+  }
+}