olcxjas-softworks/LarpixClient
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 3

Fix ui bugs:
All checks were successful
Android Build / publish (push) Successful in 47s
Details
Linux Build / publish (push) Successful in 51s
Details

Browse source 
- keyboard screen glitch
- multi-line messages
- missing styling
This commit is contained in:
olcxja 2026-06-03 00:56:29 +02:00
commit 005d2e2820
6 changed files with 94 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

52
webroot/main.js
View file

@ -1697,7 +1697,7 @@ document.addEventListener('touchstart', e => {
touchStartY = e.changedTouches[0].screenY;
touchMoved = false;
activeTouchButton = e.target.closest('button, input');
activeTouchButton = e.target.closest('button, input, textarea');
if (activeTouchButton) {
activeTouchButton.classList.add('is-pressed');
}
@ -1728,8 +1728,8 @@ document.addEventListener('touchend', e => {
activeTouchButton.classList.remove('is-pressed');
if (!touchMoved) {
if (activeTouchButton.tagName !== 'INPUT') {
if (document.activeElement && document.activeElement.tagName === 'INPUT') {
if (activeTouchButton.tagName !== 'INPUT' && activeTouchButton.tagName !== 'TEXTAREA') {
if (document.activeElement && document.activeElement.tagName === 'INPUT' && document.activeElement.tagName === 'TEXTAREA') {
document.activeElement.blur();
}
@ -1836,6 +1836,8 @@ async function renderDms(res) {
var currentDmId = null;
var currentDmKey = null; // AES key for encrypting/decrypting messages
var dmUsernameCache = {};
var dmPfpCache = {};
async function openDm(dmId, username, targetId) {
try {
@ -1939,10 +1941,16 @@ async function renderMessages(messages) {
let authorName = "Unknown";
let pfp = "assets/default_avatar.png";
if (msg.author !== "0") {
let fullUsername = await fetchAsync(`${url}/idtoname?id=${msg.author}`);
if (fullUsername && !fullUsername.startsWith("error:")) {
authorName = fullUsername.split(':')[0];
pfp = await getAvatarUrl(msg.author, fullUsername);
if (!dmUsernameCache[msg.author]) {
let fullUsername = await fetchAsync(`${url}/idtoname?id=${msg.author}`);
if (fullUsername && !fullUsername.startsWith("error:")) {
dmUsernameCache[msg.author] = fullUsername;
dmPfpCache[msg.author] = await getAvatarUrl(msg.author, fullUsername);
}
}
if (dmUsernameCache[msg.author]) {
authorName = dmUsernameCache[msg.author].split(':')[0];
pfp = dmPfpCache[msg.author];
}
}
@ -1953,7 +1961,7 @@ async function renderMessages(messages) {
html += `
<div class="chat-message ${extraClass}">
<img src="${showAvatar ? pfp : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='}" class="chat-message-pfp">
${showAvatar ? `<img src="${pfp}" class="chat-message-pfp">` : `<div style="width: 2.5rem; flex-shrink: 0;"></div>`}
<div class="chat-message-content">
${showAvatar ? `<div class="chat-message-header">
<span class="chat-message-author">${authorName}</span>
@ -1966,8 +1974,21 @@ async function renderMessages(messages) {
}
}
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
let wasAtBottom = (container.scrollHeight - container.scrollTop - container.clientHeight) < (1.5 * rem);
if (window.forceScrollToBottom) {
wasAtBottom = true;
window.forceScrollToBottom = false;
}
let oldScrollTop = container.scrollTop;
container.innerHTML = html;
container.scrollTop = container.scrollHeight;
if (wasAtBottom) {
container.scrollTop = container.scrollHeight;
} else {
container.scrollTop = oldScrollTop;
}
}
async function sendMessage() {
@ -1988,6 +2009,9 @@ async function sendMessage() {
};
input.value = "";
input.style.height = '2.5rem';
window.forceScrollToBottom = true;
let res = await fetchEncrypted("dm/message/send", JSON.stringify(msgPayload));
if (res && res.startsWith("error:")) {
@ -2001,6 +2025,16 @@ async function sendMessage() {
}
}
function handleChatInputResize(textarea) {
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
textarea.style.transition = 'none';
textarea.style.height = '0rem';
let borderHeight = textarea.offsetHeight - textarea.clientHeight;
textarea.style.height = ((textarea.scrollHeight + borderHeight) / rem) + 'rem';
textarea.offsetHeight; // force reflow
textarea.style.transition = '';
}
function handleChatInputKey(event) {
if (event.key === "Enter" && !event.shiftKey) {
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);