Cancel challenges

Author: singiamtel

src/UI/components/single/Chat.tsx

@@ -73,6 +73,7 @@ export default function Chat(props: Readonly<HTMLAttributes<HTMLDivElement>>) {
                         type={message.type}
                         hld={message.hld}
                         prev={arr[index - 1]}
+                        cancelled={message.cancelled}
                     />
                 </ErrorBoundary>
             )) : null}
@@ -100,44 +101,80 @@ const options = {
 } as const;
 
 export function ChallengeMessage(
-    { message, user }: Readonly<{
+    { message, user, cancelled }: Readonly<{
         message: string;
         user: string;
+        cancelled?: boolean;
     }>,
 ) {
     const { client } = useClientContext();
     const currentRoom = useClientStore(state => state.currentRoom);
 
+
     function acceptChallenge() {
         assert(currentRoom, 'currentRoom');
         client.send('/accept', currentRoom.ID);
     }
 
+    function cancelChallenge() {
+        assert(currentRoom, 'currentRoom');
+        client.send('/reject', currentRoom.ID);
+    }
+
     const formatID = message.split('|')[0];
     const format = client.formatName(formatID) || { gen: 9, name: `Unknown(${formatID})` };
+    if (cancelled) {
+        return (
+            <div className="p-2 bg-gray-100 rounded-md flex flex-col justify-center items-center">
+                Challenge from <Username user={user} bold /> was cancelled
+            </div>
+        );
+    }
     return (
         <div className="p-2 bg-blue-pastel rounded-md flex flex-col justify-center items-center">
-                You received a challenge from <Username user={user} bold />
-            <strong>
-                <span className='text-sm text-gray-125'>[Gen {format.gen}]</span> {format.name}
-            </strong>
-            <Button
-                onClick={() => {
-                    acceptChallenge();
-                }}
-            >Accept</Button>
+            { user === client.username ? (
+                <>
+                    <div>Waiting for opponent to accept challenge</div>
+                    <strong>
+                        <span className='text-sm text-gray-125'>[Gen {format.gen}]</span> {format.name}
+                    </strong>
+                </>
+            ) :
+                <>
+                    <div>You received a challenge from <Username user={user} bold /></div>
+                    <strong>
+                        <span className='text-sm text-gray-125'>[Gen {format.gen}]</span> {format.name}
+                    </strong>
+                    <div className="flex justify-center items-center gap-4">
+                        <Button
+                            variant="secondary"
+                            onClick={() => {
+                                acceptChallenge();
+                            }}
+                        >Accept</Button>
+
+                        <Button
+                            variant="secondary"
+                            onClick={() => {
+                                cancelChallenge();
+                            }}
+                        >Decline</Button>
+                    </div>
+                </>
+            }
         </div>
     );
 }
 
 export function MessageComponent(
-    { message, user, type, time, hld, prev }: Readonly<{
+    { message, user, type, time, hld, prev, cancelled }: Readonly<{
         message: string;
         user: string;
         type: MessageType;
         time?: Date;
         hld?: boolean | null;
         prev?: Message;
+        cancelled?: boolean;
     }>,
 ) {
     if (type === 'boxedHTML') {
@@ -171,7 +208,7 @@ export function MessageComponent(
         );
     }
     if (type === 'challenge') {
-        return <ChallengeMessage message={message} user={user} />;
+        return <ChallengeMessage message={message} user={user} cancelled={cancelled} />;
     }
     if (type === 'log') {
         return (

src/client/client.ts

@@ -24,6 +24,7 @@ interface UseClientStoreType {
     // messages: Message[]; // only messages from the current room
     messages: Record<Room['ID'], Message[]>; // messages from all rooms
     newMessage: (room: Room, message: Message) => void;
+    updateMessages: (room: Room) => void;
     notifications: Record<Room['ID'], RoomNotifications>;
     clearNotifications: (roomID: Room['ID']) => void;
     addUnread: (room: Room) => void;
@@ -58,6 +59,12 @@ export const useClientStore = create<UseClientStoreType>((set) => ({
             };
         });
     },
+    updateMessages: (room: Room) => {
+        // copy all messages from changed room
+        set((state) => ({
+            messages: { ...state.messages, [room.ID]: [...room.messages] },
+        }));
+    },
     notifications: {},
     addUnread: (room: Room) => {
         set((state) => {
@@ -839,9 +846,7 @@ export class Client {
                             const room = this.requiresRoom('pm', inferredRoomid);
                             if (!room) return false;
                             room.endChallenge();
-                            this.events.dispatchEvent(
-                                new CustomEvent('message', { detail: { room: inferredRoomid, end: true } }),
-                            );
+                            useClientStore.getState().updateMessages(room);
                         } else {
                             // start challenge
                             this.addMessageToRoom(
@@ -1331,6 +1336,10 @@ export class Client {
                 type = 'challenge';
                 content = content.slice(11);
                 break;
+            case '/nonotify':
+                type = 'log';
+                content = content.slice(9);
+                break;
             default:
                 break;
         }

src/client/message.ts

@@ -20,6 +20,7 @@ export type Message = {
     /** true if message is highlighted, false if not, null if not parsed yet */
     hld: boolean | null
     name?: string; // only defined for uhtml messages
+    cancelled?: boolean; // only defined for challenge messages
 };
 
 export default function ({

src/client/room/room.ts

@@ -58,14 +58,15 @@ export class Room {
     }
 
     endChallenge() {
-        const challengeMessage = this.messages.find((m) => m.type === 'challenge');
+        const challengeMessage = this.messages.find((m) => m.type === 'challenge' && !m.cancelled);
         if (!challengeMessage) {
             console.error(
                 `endChallenge(): Tried to end non-existent challenge message for room ${this.name}`,
             );
             return;
         }
-        this.messages.splice(this.messages.indexOf(challengeMessage), 1);
+        // this.messages.splice(this.messages.indexOf(challengeMessage), 1);
+        challengeMessage.cancelled = true;
     }
 
     addMessage(