fix: lceonline joining & add invite notification (#125)

src/components/modals/ChooseInstanceModal.tsx

@@ -5,11 +5,11 @@ import { lceOnlineService } from "../../services/LceOnlineService";
 import type { Edition } from "../../types/edition";
 interface GameInvite {
   inviteId: string;
-  from: string | { displayName: string };
+  from: string;
   hostIp: string;
   hostPort: number;
   hostName: string;
-  signalingSessionId?: string;
+  sessionId?: string;
   status: string;
 }
 
@@ -62,7 +62,7 @@ export default function ChooseInstanceModal({
     setError("");
     setStatus("Launching game...");
     try {
-      const sessionId = invite.signalingSessionId || "";
+      const sessionId = invite.sessionId || "";
       if (sessionId) {
         setStatus("Connecting via relay...");
         const accessToken = lceOnlineService.accessToken ?? "";
@@ -142,7 +142,7 @@ export default function ChooseInstanceModal({
   const hostName = invite
     ? typeof invite.from === "string"
       ? invite.from
-      : invite.from.displayName
+      : invite.hostName
     : "";
 
   return (

src/components/views/LceOnlineView.tsx

@@ -32,7 +32,7 @@ const LceOnlineView = memo(function LceOnlineView({
   const [addFriendUsername, setAddFriendUsername] = useState("");
   const addFriendInputRef = useRef<HTMLInputElement>(null);
   const [errorModal, setErrorModal] = useState<string | null>(null);
-  const [joinTarget, setJoinTarget] = useState<{ sessionId: string; hostName: string } | null>(null);
+  const [joinTarget, setJoinTarget] = useState<{ inviteid: string, sessionId: string; hostName: string } | null>(null);
   const [authMode, setAuthMode] = useState<"login" | "register">("login");
   const [authUsername, setAuthUsername] = useState("");
   const [authPassword, setAuthPassword] = useState("");
@@ -204,7 +204,7 @@ const LceOnlineView = memo(function LceOnlineView({
           onClick: () =>
             handleAction(async () => {
               const sessionId = await lceOnlineService.acceptInvite(inv.from.username);
-              setJoinTarget({ sessionId, hostName: inv.from.username });
+              setJoinTarget({ inviteid: inv.inviteid, sessionId, hostName: inv.from.username });
             }),
           onClickSecondary: () =>
             handleAction(() => lceOnlineService.declineInvite(inv.from.username)),
@@ -775,12 +775,12 @@ const LceOnlineView = memo(function LceOnlineView({
           editions={game.editions}
           installs={game.installs}
           invite={{
-            inviteId: joinTarget.sessionId,
+            inviteId: joinTarget.inviteid,
             from: joinTarget.hostName,
             hostIp: "",
             hostPort: 0,
             hostName: joinTarget.hostName,
-            signalingSessionId: joinTarget.sessionId,
+            sessionId: joinTarget.sessionId,
             status: "pending",
           }}
         />

src/hooks/useLceOnlineNotifications.ts

@@ -2,8 +2,10 @@ import { useState, useEffect, useRef } from "react";
 import { lceOnlineService } from "../services/LceOnlineService";
 export function useLceOnlineNotifications() {
   const [friendRequestMessage, setFriendRequestMessage] = useState<string | null>(null);
+  const [InviteMessage, setInviteMessage] = useState<string | null>(null);
   const [invites, setInvites] = useState<Array<{ inviteid: string; from: { uuid: string; username: string; }; sessionid: string; }>>([]);
   const seenRequests = useRef<Set<string>>(new Set());
+  const seenInvites = useRef<Set<string>>(new Set());
   useEffect(() => {
     let pollInterval: ReturnType<typeof setInterval>;
 
@@ -14,13 +16,19 @@ export function useLceOnlineNotifications() {
         lists.requests.forEach((r: string) => {
           if (!seenRequests.current.has(r)) {
             seenRequests.current.add(r);
-            setFriendRequestMessage(`New request from ${r}`);
+            setFriendRequestMessage(`New Friend request from ${r}`);
           }
         });
       } catch (e) { }
       try {
         const invitesData = await lceOnlineService.getInvites();
         setInvites(invitesData);
+        invitesData.forEach((i) => {
+            if (!seenInvites.current.has(i.inviteid)) {
+              seenInvites.current.add(i.inviteid);
+              setInviteMessage(`New invite from ${i.from.username}`);
+            }
+          });
       } catch { }
     };
 
@@ -28,11 +36,22 @@ export function useLceOnlineNotifications() {
       if (lceOnlineService.signedIn) {
         try {
           const lists = await lceOnlineService.getSocialLists();
-          lists.requests.forEach((r: string) => seenRequests.current.add(r));
+          lists.requests.forEach((r: string) => {
+            if (!seenRequests.current.has(r)) {
+              seenRequests.current.add(r);
+              setFriendRequestMessage(`New Friend request from ${r}`);
+            }
+          });
         } catch (e) { }
         try {
           const invitesData = await lceOnlineService.getInvites();
           setInvites(invitesData);
+          invitesData.forEach((i) => {
+              if (!seenInvites.current.has(i.inviteid)) {
+                seenInvites.current.add(i.inviteid);
+                setInviteMessage(`New invite from ${i.from.username}`);
+              }
+            });
         } catch { }
       }
       pollInterval = setInterval(poll, 10000);
@@ -46,7 +65,9 @@ export function useLceOnlineNotifications() {
 
   return {
     friendRequestMessage,
+    InviteMessage,
     clearFriendRequestMessage: () => setFriendRequestMessage(null),
-    invites,
+    clearInviteMessage: () => setInviteMessage(null),
+    invites
   };
 }

src/pages/App.tsx

@@ -70,8 +70,10 @@ export default function App() {
   const notifications = useLceOnlineNotifications();
   const {
     friendRequestMessage,
+    InviteMessage,
     clearFriendRequestMessage,
-    invites,
+    clearInviteMessage,
+    invites
   } = notifications;
   const [showSetup, setShowSetup] = useState(false);
   const [isSetupChecked, setIsSetupChecked] = useState(false);
@@ -668,6 +670,16 @@ export default function App() {
           variant="update"
         />
 
+        <AchievementToast
+          message={InviteMessage}
+          onClose={clearInviteMessage}
+          onClick={() => {
+            clearInviteMessage();
+            setActiveView("lceonline");
+          }}
+          title="Game Invite"
+          variant="update"
+        />
       </div>
     </MotionConfig>
   );