Enhanced user experience by increasing nickname input limit to 20 characters, added font size adjustment buttons for mobile, and improved mobile display styles. Updated login handling to ensure valid nicknames and prevent auto-focus on mobile devices.
This commit is contained in:
@@ -25,6 +25,7 @@
|
||||
let showChanlist = true;
|
||||
let showNicklist = true;
|
||||
let notificationsEnabled = false;
|
||||
let fontSize = 14;
|
||||
let reconnectTimer = null;
|
||||
|
||||
// --- Notification sound (short beep generated via AudioContext) ---
|
||||
@@ -109,6 +110,8 @@
|
||||
const inputNickEl = document.getElementById('input-nick');
|
||||
const toggleChanBtn = document.getElementById('toggle-chanlist');
|
||||
const toggleNickBtn = document.getElementById('toggle-nicklist');
|
||||
const fontDecBtn = document.getElementById('font-decrease');
|
||||
const fontIncBtn = document.getElementById('font-increase');
|
||||
|
||||
// --- Nick colors (LRU cache, 1000 max) ---
|
||||
function hashStr(s) {
|
||||
@@ -268,7 +271,10 @@
|
||||
updateInputNick();
|
||||
updateTopicBar();
|
||||
updateStatusBar();
|
||||
inputEl.focus();
|
||||
// Don't auto-focus input on mobile
|
||||
if (window.innerWidth > 600) {
|
||||
inputEl.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(windowName, html, timestamp) {
|
||||
@@ -671,7 +677,7 @@
|
||||
|
||||
if (fromNick === nick) {
|
||||
createWindow(chan);
|
||||
switchWindow(chan);
|
||||
// Don't auto-switch to prevent force-join spam attacks
|
||||
} else if (windows[chan]) {
|
||||
if (windows[chan].nicks.indexOf(fromNick) === -1) {
|
||||
windows[chan].nicks.push(fromNick);
|
||||
@@ -866,6 +872,30 @@
|
||||
break;
|
||||
}
|
||||
|
||||
case '321': {
|
||||
// RPL_LISTSTART
|
||||
addMessage('Status', chatNick('***', '#888') + '<span style="color:#888">Channel list:</span>', timestamp);
|
||||
break;
|
||||
}
|
||||
|
||||
case '322': {
|
||||
// RPL_LIST - channel info
|
||||
const chan = p[1];
|
||||
const userCount = p[2] || '0';
|
||||
const topic = p[3] || '';
|
||||
addMessage('Status', chatNick('***', '#888') +
|
||||
'<span style="color:#0ff;font-weight:bold">' + esc(chan) + '</span> ' +
|
||||
'<span style="color:#666">(' + esc(userCount) + ')</span> ' +
|
||||
(topic ? formatIRC(topic) : ''), timestamp);
|
||||
break;
|
||||
}
|
||||
|
||||
case '323': {
|
||||
// RPL_LISTEND
|
||||
addMessage('Status', chatNick('***', '#888') + '<span style="color:#888">End of channel list</span>', timestamp);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'ERROR':
|
||||
addMessage('Status', chatNick('!!!', '#f00') + '<span style="color:#f00">' + formatIRC(p[0] || '') + '</span>', timestamp);
|
||||
break;
|
||||
@@ -955,7 +985,15 @@
|
||||
// Login
|
||||
// ============================================================
|
||||
function doLogin() {
|
||||
let n = loginNickEl.value.trim().replace(/[^a-zA-Z0-9_\-\[\]\\^{}|`]/g, '').substring(0, 16);
|
||||
let n = loginNickEl.value.trim();
|
||||
// Remove invalid chars: only alphanumeric, -, _, [, ]
|
||||
n = n.replace(/[^a-zA-Z0-9_\-\[\]]/g, '');
|
||||
// Can't start with a number
|
||||
if (n && /^[0-9]/.test(n)) {
|
||||
n = 'Guest' + n;
|
||||
}
|
||||
// Limit to 20 chars
|
||||
n = n.substring(0, 20);
|
||||
if (!n) n = 'WebUser' + Math.floor(Math.random() * 99999);
|
||||
nick = n;
|
||||
loginEl.classList.add('hidden');
|
||||
@@ -968,7 +1006,13 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const urlNick = params.get('nick');
|
||||
if (urlNick && urlNick.trim()) {
|
||||
nick = urlNick.trim().replace(/[^a-zA-Z0-9_\-\[\]\\^{}|`]/g, '').substring(0, 16);
|
||||
let n = urlNick.trim();
|
||||
n = n.replace(/[^a-zA-Z0-9_\-\[\]]/g, '');
|
||||
if (n && /^[0-9]/.test(n)) {
|
||||
n = 'Guest' + n;
|
||||
}
|
||||
n = n.substring(0, 20);
|
||||
nick = n;
|
||||
if (nick) {
|
||||
loginEl.classList.add('hidden');
|
||||
appEl.classList.remove('hidden');
|
||||
@@ -1001,6 +1045,25 @@
|
||||
updateNicklistVisibility();
|
||||
});
|
||||
|
||||
// Font size adjustment
|
||||
function updateFontSize() {
|
||||
messagesEl.style.fontSize = fontSize + 'px';
|
||||
}
|
||||
|
||||
fontDecBtn.addEventListener('click', function () {
|
||||
if (fontSize > 10) {
|
||||
fontSize--;
|
||||
updateFontSize();
|
||||
}
|
||||
});
|
||||
|
||||
fontIncBtn.addEventListener('click', function () {
|
||||
if (fontSize < 24) {
|
||||
fontSize++;
|
||||
updateFontSize();
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Input handling
|
||||
// ============================================================
|
||||
@@ -1131,6 +1194,10 @@
|
||||
if (argStr) send(argStr);
|
||||
break;
|
||||
|
||||
case 'list':
|
||||
send('LIST' + (argStr ? ' ' + argStr : ''));
|
||||
break;
|
||||
|
||||
default:
|
||||
send(text.substring(1));
|
||||
break;
|
||||
|
||||
@@ -279,6 +279,25 @@ body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#font-decrease, #font-increase {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
flex-shrink: 0;
|
||||
padding: 2px 4px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#font-decrease:hover, #font-increase:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --- Input row --- */
|
||||
#input-row {
|
||||
display: flex;
|
||||
@@ -402,4 +421,8 @@ body {
|
||||
.timestamp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<div id="login-box">
|
||||
<img id="login-logo" src="./include/logo.png" alt="SuperNETs">
|
||||
<div id="login-title">SuperNETs IRC</div>
|
||||
<input type="text" id="login-nick" placeholder="Enter nickname..." autofocus spellcheck="false" autocapitalize="off" autocomplete="off" maxlength="16">
|
||||
<input type="text" id="login-nick" placeholder="Enter nickname..." autofocus spellcheck="false" autocapitalize="off" autocomplete="off" maxlength="20">
|
||||
<button id="login-btn">Enter The Void</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,6 +27,8 @@
|
||||
</div>
|
||||
<div id="statusbar">
|
||||
<span id="toggle-chanlist" title="Toggle channel list"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg></span>
|
||||
<span id="font-decrease" class="mobile-only" title="Decrease font size">A-</span>
|
||||
<span id="font-increase" class="mobile-only" title="Increase font size">A+</span>
|
||||
<a id="statusbar-link" href="https://git.supernets.org/supernets/superchat" target="_blank" rel="noopener" title="View source on Gitea"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a>
|
||||
<span id="toggle-nicklist" title="Toggle nick list"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="5" r="2.5"/><path d="M3 14.5c0-3 2.2-5 5-5s5 2 5 5"/></svg></span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user