generate avatar img with util
This commit is contained in:
Ginger Wong
parent
96258fc0f3
commit
5efa67d605
@ -21,8 +21,6 @@ GW TODO:
|
||||
|
||||
- accessilbity
|
||||
|
||||
- convert all the https://robohash.org/username123 areas to {{}}, put into util
|
||||
- generate ?set=x(1-1)&size=10x10
|
||||
|
||||
*/
|
||||
</script>
|
||||
@ -45,7 +43,12 @@ GW TODO:
|
||||
<div id="user-options-container" class="flex">
|
||||
<div id="user-info">
|
||||
<div id="user-info-display" title="Click to update user name" class="flex">
|
||||
<img src="https://robohash.org/username123" id="username-avatar" class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700" />
|
||||
<img
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
alt=""
|
||||
id="username-avatar"
|
||||
class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
|
||||
/>
|
||||
<span id="username-display" class="text-indigo-600"></span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
const SocketMessageTypes = {
|
||||
CHAT: "CHAT",
|
||||
PING: "PING"
|
||||
CHAT: 'CHAT',
|
||||
PING: 'PING'
|
||||
}
|
||||
|
||||
class Message {
|
||||
constructor(model) {
|
||||
this.author = model.author;
|
||||
this.body = model.body;
|
||||
this.image = model.image || "https://robohash.org/" + model.author;
|
||||
this.image = model.image || generateAvatar(model.author);
|
||||
this.id = model.id;
|
||||
this.type = model.type;
|
||||
}
|
||||
@ -33,63 +33,69 @@ class Message {
|
||||
class Messaging {
|
||||
constructor() {
|
||||
this.chatDisplayed = false;
|
||||
this.username = "";
|
||||
this.avatarSource = "https://robohash.org/";
|
||||
this.username = '';
|
||||
|
||||
this.messageCharCount = 0;
|
||||
this.maxMessageLength = 500;
|
||||
this.maxMessageBuffer = 20;
|
||||
|
||||
this.keyUsername = "owncast_username";
|
||||
this.keyChatDisplayed = "owncast_chat";
|
||||
this.keyUsername = 'owncast_username';
|
||||
this.keyUserAvatar = 'owncast_avatar';
|
||||
this.keyChatDisplayed = 'owncast_chat';
|
||||
|
||||
this.tagAppContainer = document.querySelector("#app-container");
|
||||
this.tagChatToggle = document.querySelector("#chat-toggle");
|
||||
this.tagUserInfoChanger = document.querySelector("#user-info-change");
|
||||
this.tagUsernameDisplay = document.querySelector("#username-display");
|
||||
this.tagMessageFormWarning = document.querySelector("#message-form-warning");
|
||||
this.tagAppContainer = document.querySelector('#app-container');
|
||||
this.tagChatToggle = document.querySelector('#chat-toggle');
|
||||
this.tagUserInfoChanger = document.querySelector('#user-info-change');
|
||||
this.tagUsernameDisplay = document.querySelector('#username-display');
|
||||
this.tagMessageFormWarning = document.querySelector('#message-form-warning');
|
||||
|
||||
this.inputMessageAuthor = document.querySelector("#self-message-author");
|
||||
this.inputChangeUserName = document.querySelector("#username-change-input");
|
||||
this.inputMessageAuthor = document.querySelector('#self-message-author');
|
||||
this.inputChangeUserName = document.querySelector('#username-change-input');
|
||||
|
||||
this.btnUpdateUserName = document.querySelector("#button-update-username");
|
||||
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change");
|
||||
this.btnSubmitMessage = document.querySelector("#button-submit-message");
|
||||
this.btnUpdateUserName = document.querySelector('#button-update-username');
|
||||
this.btnCancelUpdateUsername = document.querySelector('#button-cancel-change');
|
||||
this.btnSubmitMessage = document.querySelector('#button-submit-message');
|
||||
|
||||
this.formMessageInput = document.querySelector("#message-body-form");
|
||||
this.formMessageInput = document.querySelector('#message-body-form');
|
||||
|
||||
this.imgUsernameAvatar = document.querySelector("#username-avatar");
|
||||
this.textUserInfoDisplay = document.querySelector("#user-info-display");
|
||||
this.imgUsernameAvatar = document.querySelector('#username-avatar');
|
||||
this.textUserInfoDisplay = document.querySelector('#user-info-display');
|
||||
|
||||
this.scrollableMessagesContainer = document.querySelector("#messages-container");
|
||||
this.scrollableMessagesContainer = document.querySelector('#messages-container');
|
||||
}
|
||||
init() {
|
||||
this.tagChatToggle.addEventListener("click", this.handleChatToggle.bind(this));
|
||||
this.textUserInfoDisplay.addEventListener("click", this.handleShowChangeNameForm.bind(this));
|
||||
this.tagChatToggle.addEventListener('click', this.handleChatToggle.bind(this));
|
||||
this.textUserInfoDisplay.addEventListener('click', this.handleShowChangeNameForm.bind(this));
|
||||
|
||||
this.btnUpdateUserName.addEventListener("click", this.handleUpdateUsername.bind(this));
|
||||
this.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm.bind(this));
|
||||
this.btnUpdateUserName.addEventListener('click', this.handleUpdateUsername.bind(this));
|
||||
this.btnCancelUpdateUsername.addEventListener('click', this.handleHideChangeNameForm.bind(this));
|
||||
|
||||
this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown.bind(this));
|
||||
this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown.bind(this));
|
||||
this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton.bind(this));
|
||||
this.inputChangeUserName.addEventListener('keydown', this.handleUsernameKeydown.bind(this));
|
||||
this.formMessageInput.addEventListener('keydown', this.handleMessageInputKeydown.bind(this));
|
||||
this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this));
|
||||
this.initLocalStates();
|
||||
|
||||
if (hasTouchScreen()) {
|
||||
this.scrollableMessagesContainer = document.body;
|
||||
this.tagAppContainer.classList.add("touch-screen");
|
||||
window.app.layout = "touch";
|
||||
this.tagAppContainer.classList.add('touch-screen');
|
||||
window.app.layout = 'touch';
|
||||
window.onorientationchange = this.handleOrientationChange.bind(this);
|
||||
this.handleOrientationChange();
|
||||
} else {
|
||||
this.tagAppContainer.classList.add("desktop");
|
||||
window.app.layout = "desktop";
|
||||
this.tagAppContainer.classList.add('desktop');
|
||||
window.app.layout = 'desktop';
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
initLocalStates() {
|
||||
this.username = getLocalStorage(this.keyUsername) || "User" + (Math.floor(Math.random() * 42) + 1);
|
||||
this.username = getLocalStorage(this.keyUsername) || generateUsername();
|
||||
console.log("=== initt state", getLocalStorage(this.keyUserAvatar))
|
||||
this.imgUsernameAvatar.src = getLocalStorage(this.keyUserAvatar) || generateAvatar(this.username);
|
||||
|
||||
|
||||
console.log("===",this.imgUsernameAvatar.src)
|
||||
|
||||
this.updateUsernameFields(this.username);
|
||||
|
||||
this.chatDisplayed = getLocalStorage(this.keyChatDisplayed) || false;
|
||||
@ -99,16 +105,15 @@ class Messaging {
|
||||
this.tagUsernameDisplay.innerText = username;
|
||||
this.inputChangeUserName.value = username;
|
||||
this.inputMessageAuthor.value = username;
|
||||
this.imgUsernameAvatar.src = this.avatarSource + username;
|
||||
}
|
||||
displayChat() {
|
||||
if (this.chatDisplayed) {
|
||||
this.tagAppContainer.classList.add("chat");
|
||||
this.tagAppContainer.classList.remove("no-chat");
|
||||
this.tagAppContainer.classList.add('chat');
|
||||
this.tagAppContainer.classList.remove('no-chat');
|
||||
jumpToBottom(this.scrollableMessagesContainer);
|
||||
} else {
|
||||
this.tagAppContainer.classList.add("no-chat");
|
||||
this.tagAppContainer.classList.remove("chat");
|
||||
this.tagAppContainer.classList.add('no-chat');
|
||||
this.tagAppContainer.classList.remove('chat');
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,12 +122,12 @@ class Messaging {
|
||||
|
||||
if(!isPortrait) {
|
||||
if (document.body.clientWidth < 1024) {
|
||||
this.tagAppContainer.classList.add("no-chat");
|
||||
this.tagAppContainer.classList.add("landscape");
|
||||
this.tagAppContainer.classList.add('no-chat');
|
||||
this.tagAppContainer.classList.add('landscape');
|
||||
}
|
||||
} else {
|
||||
if (this.chatDisplayed) this.tagAppContainer.classList.remove("no-chat");
|
||||
this.tagAppContainer.classList.remove("landscape");
|
||||
if (this.chatDisplayed) this.tagAppContainer.classList.remove('no-chat');
|
||||
this.tagAppContainer.classList.remove('landscape');
|
||||
}
|
||||
}
|
||||
|
||||
@ -136,17 +141,17 @@ class Messaging {
|
||||
this.displayChat();
|
||||
}
|
||||
handleShowChangeNameForm() {
|
||||
this.textUserInfoDisplay.style.display = "none";
|
||||
this.tagUserInfoChanger.style.display = "flex";
|
||||
this.textUserInfoDisplay.style.display = 'none';
|
||||
this.tagUserInfoChanger.style.display = 'flex';
|
||||
if (document.body.clientWidth < 640) {
|
||||
this.tagChatToggle.style.display = "none";
|
||||
this.tagChatToggle.style.display = 'none';
|
||||
}
|
||||
}
|
||||
handleHideChangeNameForm() {
|
||||
this.textUserInfoDisplay.style.display = "flex";
|
||||
this.tagUserInfoChanger.style.display = "none";
|
||||
this.textUserInfoDisplay.style.display = 'flex';
|
||||
this.tagUserInfoChanger.style.display = 'none';
|
||||
if (document.body.clientWidth < 640) {
|
||||
this.tagChatToggle.style.display = "inline-block";
|
||||
this.tagChatToggle.style.display = 'inline-block';
|
||||
|
||||
}
|
||||
}
|
||||
@ -158,7 +163,9 @@ class Messaging {
|
||||
if (newValue) {
|
||||
this.username = newValue;
|
||||
this.updateUsernameFields(newValue);
|
||||
this.imgUsernameAvatar.src = generateAvatar(newValue);
|
||||
setLocalStorage(this.keyUsername, newValue);
|
||||
setLocalStorage(this.keyUserAvatar, this.imgUsernameAvatar.src);
|
||||
}
|
||||
this.handleHideChangeNameForm();
|
||||
}
|
||||
@ -191,13 +198,13 @@ class Messaging {
|
||||
}
|
||||
|
||||
if (numCharsLeft <= this.maxMessageBuffer) {
|
||||
this.tagMessageFormWarning.innerText = numCharsLeft + " chars left";
|
||||
this.tagMessageFormWarning.innerText = `${numCharsLeft} chars left`;
|
||||
if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.tagMessageFormWarning.innerText = "";
|
||||
this.tagMessageFormWarning.innerText = '';
|
||||
}
|
||||
}
|
||||
handleSubmitChatButton(event) {
|
||||
@ -217,6 +224,7 @@ class Messaging {
|
||||
var message = new Message({
|
||||
body: content,
|
||||
author: this.username,
|
||||
image: this.imgUsernameAvatar.src,
|
||||
});
|
||||
const messageJSON = JSON.stringify(message);
|
||||
if (window && window.ws) {
|
||||
@ -224,7 +232,7 @@ class Messaging {
|
||||
}
|
||||
|
||||
// clear out things.
|
||||
this.formMessageInput.value = "";
|
||||
this.tagMessageFormWarning.innerText = "";
|
||||
this.formMessageInput.value = '';
|
||||
this.tagMessageFormWarning.innerText = '';
|
||||
}
|
||||
}
|
||||
@ -75,3 +75,16 @@ function hasTouchScreen() {
|
||||
return hasTouchScreen;
|
||||
}
|
||||
|
||||
// generate random avatar from https://robohash.org
|
||||
function generateAvatar(hash) {
|
||||
const avatarSource = 'https://robohash.org/';
|
||||
const optionSize = '?size=80x80';
|
||||
const optionSet = '&set=set3';
|
||||
const optionBg = ''; // or &bgset=bg1 or bg2
|
||||
|
||||
return avatarSource + hash + optionSize + optionSet + optionBg;
|
||||
}
|
||||
|
||||
function generateUsername() {
|
||||
return `User ${(Math.floor(Math.random() * 42) + 1)}`;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user