update nickname on reconnect

This commit is contained in:
legop3
2025-11-22 03:17:20 -05:00
parent 7b017eb7f7
commit b582617535
3 changed files with 30 additions and 14 deletions
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title>
<script type="module" crossorigin src="/assets/index-Dsw_Z9n0.js"></script>
<script type="module" crossorigin src="/assets/index-BSgR8Uj3.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CCqAmxiE.css">
</head>
<body>
+22 -6
View File
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import { useSettingsNamespace } from '../settings/index.js';
import { useSocket } from '../context/SocketContext.jsx';
function roleColors(role) {
switch (role) {
@@ -29,7 +30,8 @@ export default function UserListPanel() {
const { value, save } = useSettingsNamespace('profile', { nickname: '' });
const [nicknameInput, setNicknameInput] = useState(value.nickname || '');
const [saving, setSaving] = useState(false);
const hasSyncedRef = useRef(false);
const lastSyncedSocketRef = useRef(null);
const socket = useSocket();
const canSetNickname = session?.role !== 'spectator';
const users = session?.users ?? [];
const selfId = session?.socketId || null;
@@ -39,16 +41,30 @@ export default function UserListPanel() {
}, [value.nickname]);
useEffect(() => {
if (hasSyncedRef.current) return;
if (!canSetNickname) return;
if (!session?.socketId) return;
if (!nicknameInput) return;
hasSyncedRef.current = true;
setNickname(nicknameInput).catch(() => {
hasSyncedRef.current = false;
});
if (session.socketId === lastSyncedSocketRef.current) return;
const currentId = session.socketId;
setNickname(nicknameInput).then(() => {
lastSyncedSocketRef.current = currentId;
}).catch(() => {});
}, [canSetNickname, nicknameInput, session?.socketId, setNickname]);
useEffect(() => {
if (!socket) return undefined;
const handleConnect = () => {
if (!canSetNickname) return;
const nick = (value.nickname || '').trim();
if (!nick) return;
setNickname(nick).then(() => {
lastSyncedSocketRef.current = session?.socketId || null;
}).catch(() => {});
};
socket.on('connect', handleConnect);
return () => socket.off('connect', handleConnect);
}, [canSetNickname, setNickname, socket, value.nickname, session?.socketId]);
const sorted = useMemo(
() =>
[...users].sort((a, b) => {