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
This commit is contained in:
Ginger Wong
117
webroot/js/chat/chat.js
Normal file
117
webroot/js/chat/chat.js
Normal file
@@ -0,0 +1,117 @@
|
||||
import { h, Component, render } from 'https://unpkg.com/preact?module';
|
||||
import htm from 'https://unpkg.com/htm?module';
|
||||
// Initialize htm with Preact
|
||||
const html = htm.bind(h);
|
||||
|
||||
import SOCKET_MESSAGE_TYPES from '../utils/socketMessageTypes.js';
|
||||
|
||||
|
||||
export default class Chat extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.messageCharCount = 0;
|
||||
this.maxMessageLength = 500;
|
||||
this.maxMessageBuffer = 20;
|
||||
|
||||
this.state = {
|
||||
inputEnabled: false,
|
||||
messages: [],
|
||||
|
||||
chatUserNames: [],
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { username: prevName } = prevProps;
|
||||
const { username, userAvatarImage } = this.props;
|
||||
// if username updated, send a message
|
||||
if (prevName !== username) {
|
||||
this.sendUsernameChange(prevName, username, userAvatarImage);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
sendUsernameChange(oldName, newName, image) {
|
||||
const nameChange = {
|
||||
type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
|
||||
oldName: oldName,
|
||||
newName: newName,
|
||||
image: image,
|
||||
};
|
||||
this.send(nameChange);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { username, userAvatarImage } = this.state;
|
||||
return (
|
||||
html`
|
||||
<section id="chat-container-wrap" class="flex">
|
||||
<div id="chat-container" class="bg-gray-800">
|
||||
<div id="messages-container">
|
||||
messages...
|
||||
<!-- <div v-for="message in messages" v-cloak>
|
||||
<div class="message flex" v-if="message.type === 'CHAT'">
|
||||
<div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
|
||||
<img
|
||||
v-bind:src="message.image"
|
||||
/>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<p class="message-author text-white font-bold">{{ message.author }}</p>
|
||||
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message flex" v-else-if="message.type === 'NAME_CHANGE'">
|
||||
<img
|
||||
class="mr-2"
|
||||
width="30px"
|
||||
v-bind:src="message.image"
|
||||
/>
|
||||
<div class="text-white text-center">
|
||||
<span class="font-bold">{{ message.oldName }}</span> is now known as <span class="font-bold">{{ message.newName }}</span>.
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<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" value=${username} />
|
||||
|
||||
<textarea
|
||||
disabled
|
||||
id="message-body-form"
|
||||
placeholder="Message"
|
||||
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>
|
||||
|
||||
<div id="message-form-actions" class="flex">
|
||||
<span id="message-form-warning" class="text-red-600 text-xs"></span>
|
||||
<button
|
||||
id="button-submit-message"
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
|
||||
> Chat
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
52
webroot/js/chat/message.js
Normal file
52
webroot/js/chat/message.js
Normal file
@@ -0,0 +1,52 @@
|
||||
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 {messageBubbleColorForString } from '../utils/user-colors.js';
|
||||
|
||||
export default class Message extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
displayForm: false,
|
||||
};
|
||||
|
||||
this.handleKeydown = this.handleKeydown.bind(this);
|
||||
this.handleDisplayForm = this.handleDisplayForm.bind(this);
|
||||
this.handleHideForm = this.handleHideForm.bind(this);
|
||||
this.handleUpdateUsername = this.handleUpdateUsername.bind(this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
render(props) {
|
||||
const { message, type } = props;
|
||||
const { image, author, text } = message;
|
||||
|
||||
const styles = {
|
||||
info: {
|
||||
display: displayForm || narrowSpace ? 'none' : 'flex',
|
||||
},
|
||||
form: {
|
||||
display: displayForm ? 'flex' : 'none',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
html`
|
||||
<div class="message flex">
|
||||
<div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
|
||||
<img
|
||||
v-bind:src="message.image"
|
||||
/>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<p class="message-author text-white font-bold">{{ message.author }}</p>
|
||||
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
/**
|
||||
* These are the types of messages that we can handle with the websocket.
|
||||
* Mostly used by `websocket.js` but if other components need to handle
|
||||
* different types then it can import this file.
|
||||
*/
|
||||
export default {
|
||||
CHAT: 'CHAT',
|
||||
PING: 'PING',
|
||||
NAME_CHANGE: 'NAME_CHANGE',
|
||||
PONG: 'PONG'
|
||||
}
|
||||
54
webroot/js/chat/standalone.js
Normal file
54
webroot/js/chat/standalone.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
|
||||
|
||||
// import { h, Component, render } from 'https://unpkg.com/preact?module';
|
||||
// import htm from 'https://unpkg.com/htm?module';
|
||||
// Initialize htm with Preact
|
||||
// const html = htm.bind(h);
|
||||
|
||||
import UserInfo from './user-info.js';
|
||||
import Chat from './chat.js';
|
||||
|
||||
import { getLocalStorage, generateAvatar, generateUsername } from '../utils.js';
|
||||
import { KEY_USERNAME, KEY_AVATAR } from '../utils/chat.js';
|
||||
|
||||
export class StandaloneChat extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
chatEnabled: true, // always true for standalone chat
|
||||
username: getLocalStorage(KEY_USERNAME) || generateUsername(),
|
||||
userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
|
||||
};
|
||||
|
||||
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
||||
}
|
||||
|
||||
handleUsernameChange(newName, newAvatar) {
|
||||
this.setState({
|
||||
username: newName,
|
||||
userAvatarImage: newAvatar,
|
||||
});
|
||||
}
|
||||
|
||||
handleChatToggle() {
|
||||
return;
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
const { username, userAvatarImage } = state;
|
||||
return (
|
||||
html`
|
||||
<div class="flex">
|
||||
<${UserInfo}
|
||||
username=${username}
|
||||
userAvatarImage=${userAvatarImage}
|
||||
handleUsernameChange=${this.handleUsernameChange}
|
||||
handleChatToggle=${this.handleChatToggle}
|
||||
/>
|
||||
<${Chat} username=${username} userAvatarImage=${userAvatarImage} chatEnabled />
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
}
|
||||
108
webroot/js/chat/user-info.js
Normal file
108
webroot/js/chat/user-info.js
Normal file
@@ -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>
|
||||
`);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user