Add separate chat setup window for rentable bots

2024-11-23 14:40:50 +01:00 · 2021-06-30 19:48:24 -04:00 · 2021-06-30 19:48:24 -04:00 · 754cf2df2e
commit 754cf2df2e
parent 97db013e45
10 changed files with 156 additions and 77 deletions
--- a/src/layout/draggable-window/DraggableWindow.tsx
+++ b/src/layout/draggable-window/DraggableWindow.tsx
@ -60,6 +60,11 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
            element.style.left = `${ left }px`;
            element.style.top = `${ top }px`;
        }
+        else
+        {
+            element.style.left = `0px`;
+            element.style.top = `0px`;
+        }

        element.style.visibility = 'visible';

--- a/src/views/room/events/RoomWidgetRoomViewUpdateEvent.ts
+++ b/src/views/room/events/RoomWidgetRoomViewUpdateEvent.ts
@ -1,41 +0,0 @@
-import { NitroPoint, NitroRectangle } from 'nitro-renderer';
-import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
-
-export class RoomWidgetRoomViewUpdateEvent extends RoomWidgetUpdateEvent
-{
-    public static SIZE_CHANGED: string      = 'RWRVUE_ROOM_VIEW_SIZE_CHANGED';
-    public static SCALE_CHANGED: string     = 'RWRVUE_ROOM_VIEW_SCALE_CHANGED';
-    public static POSITION_CHANGED: string  = 'RWRVUE_ROOM_VIEW_POSITION_CHANGED';
-
-    private _roomViewRectangle: NitroRectangle;
-    private _positionDelta: NitroPoint;
-    private _scale: number;
-
-    constructor(type: string, view: NitroRectangle = null, position: NitroPoint = null, scale: number = 0)
-    {
-        super(type);
-
-        this._roomViewRectangle = view;
-        this._positionDelta     = position;
-        this._scale             = scale;
-    }
-
-    public get roomViewRectangle(): NitroRectangle
-    {
-        if(!this._roomViewRectangle) return null;
-
-        return this._roomViewRectangle.clone();
-    }
-
-    public get positionDelta(): NitroPoint
-    {
-        if(!this._positionDelta) return null;
-
-        return this._positionDelta.clone();
-    }
-
-    public get scale(): number
-    {
-        return this._scale;
-    }
-}
--- a/src/views/room/events/RoomWidgetUpdateRentableBotChatEvent.ts
+++ b/src/views/room/events/RoomWidgetUpdateRentableBotChatEvent.ts
@ -0,0 +1,62 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateRentableBotChatEvent extends RoomWidgetUpdateEvent
+{
+    public static UPDATE_CHAT: string = 'RWURBCE_UPDATE_CHAT';
+
+    private _objectId: number;
+    private _category: number;
+    private _botId: number;
+    private _chat: string;
+    private _automaticChat: boolean;
+    private _chatDelay: number;
+    private _mixSentences: boolean;
+
+    constructor(objectId: number, category: number, botId: number, chat: string, automaticChat: boolean, chatDelay: number, mixSentences: boolean)
+    {
+        super(RoomWidgetUpdateRentableBotChatEvent.UPDATE_CHAT);
+
+        this._objectId = objectId;
+        this._category = category;
+        this._botId = botId;
+        this._chat = chat;
+        this._automaticChat = automaticChat;
+        this._chatDelay = chatDelay;
+        this._mixSentences = mixSentences;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get category(): number
+    {
+        return this._category;
+    }
+
+    public get botId(): number
+    {
+        return this._botId;
+    }
+
+    public get chat(): string
+    {
+        return this._chat;
+    }
+
+    public get automaticChat(): boolean
+    {
+        return this._automaticChat;
+    }
+
+    public get chatDelay(): number
+    {
+        return this._chatDelay;
+    }
+
+    public get mixSentences(): boolean
+    {
+        return this._mixSentences;
+    }
+}
--- a/src/views/room/events/index.ts
+++ b/src/views/room/events/index.ts
@ -2,7 +2,6 @@ export * from './RoomWidgetAvatarInfoEvent';
 export * from './RoomWidgetObjectNameEvent';
 export * from './RoomWidgetRoomEngineUpdateEvent';
 export * from './RoomWidgetRoomObjectUpdateEvent';
-export * from './RoomWidgetRoomViewUpdateEvent';
 export * from './RoomWidgetUpdateDanceStatusEvent';
 export * from './RoomWidgetUpdateEvent';
 export * from './RoomWidgetUpdateInfostandEvent';
@ -10,4 +9,5 @@ export * from './RoomWidgetUpdateInfostandFurniEvent';
 export * from './RoomWidgetUpdateInfostandPetEvent';
 export * from './RoomWidgetUpdateInfostandRentableBotEvent';
 export * from './RoomWidgetUpdateInfostandUserEvent';
+export * from './RoomWidgetUpdateRentableBotChatEvent';
 export * from './RoomWidgetUserDataUpdateEvent';
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@ -3,7 +3,7 @@ import { FC, useCallback, useMemo, useState } from 'react';
 import { GetRoomSession, GetSessionDataManager } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../context/RoomContext';
-import { RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent } from '../../events';
+import { RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent } from '../../events';
 import { RoomWidgetRoomObjectMessage } from '../../messages';
 import { AvatarInfoWidgetViewProps } from './AvatarInfoWidgetView.types';
 import { AvatarInfoWidgetAvatarView } from './views/avatar/AvatarInfoWidgetAvatarView';
@ -12,6 +12,7 @@ import { AvatarInfoWidgetNameView } from './views/name/AvatarInfoWidgetNameView'
 import { AvatarInfoWidgetOwnAvatarView } from './views/own-avatar/AvatarInfoWidgetOwnAvatarView';
 import { AvatarInfoWidgetOwnPetView } from './views/own-pet/AvatarInfoWidgetOwnPetView';
 import { AvatarInfoWidgetPetView } from './views/pet/AvatarInfoWidgetPetView';
+import { AvatarInfoRentableBotChatView } from './views/rentable-bot-chat/AvatarInfoRentableBotChatView';
 import { AvatarInfoWidgetRentableBotView } from './views/rentable-bot/AvatarInfoWidgetRentableBotView';

 export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
@ -22,6 +23,7 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
    const [ isGameMode, setGameMode ] = useState(false);
    const [ isDancing, setIsDancing ] = useState(false);
    const [ isDecorating, setIsDecorating ] = useState(GetRoomSession().isDecorating);
+    const [ rentableBotChatEvent, setRentableBotChatEvent ] = useState<RoomWidgetUpdateRentableBotChatEvent>(null);

    const onRoomWidgetRoomEngineUpdateEvent = useCallback((event: RoomWidgetRoomEngineUpdateEvent) =>
    {
@ -160,6 +162,13 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);

+    const onRoomWidgetUpdateRentableBotChatEvent = useCallback((event: RoomWidgetUpdateRentableBotChatEvent) =>
+    {
+        setRentableBotChatEvent(event);
+    }, []);
+
+    CreateEventDispatcherHook(RoomWidgetUpdateRentableBotChatEvent.UPDATE_CHAT, eventDispatcher, onRoomWidgetUpdateRentableBotChatEvent);
+
    const decorateView = useMemo(() =>
    {
        GetRoomSession().isDecorating = isDecorating;
@ -237,6 +246,7 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
    return (
        <>
            { currentView }
+            { rentableBotChatEvent && <AvatarInfoRentableBotChatView chatEvent={ rentableBotChatEvent } /> }
        </>
    )
 }
--- a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
+++ b/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { DraggableWindow } from '../../../../../../layout';
+import { ObjectLocationView } from '../../../object-location/ObjectLocationView';
+import { AvatarInfoRentableBotChatViewProps } from './AvatarInfoRentableBotChatView.types';
+
+export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProps> = props =>
+{
+    const { chatEvent = null } = props;
+
+    return (
+        <DraggableWindow noCenter={ true } handle=".drag-handler">
+            <ObjectLocationView objectId={ chatEvent.objectId } category={ chatEvent.category } noFollow={ true }>
+                <div className="nitro-context-menu">
+                    <div className="drag-handler">test!!!!!</div>
+                </div>
+                </ObjectLocationView>
+        </DraggableWindow>
+    );
+}
--- a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
+++ b/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
@ -0,0 +1,6 @@
+import { RoomWidgetUpdateRentableBotChatEvent } from '../../../../events';
+
+export interface AvatarInfoRentableBotChatViewProps
+{
+    chatEvent: RoomWidgetUpdateRentableBotChatEvent;
+}
--- a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx
+++ b/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx
@ -1,19 +1,19 @@
 import { BotCommandConfigurationEvent, BotRemoveComposer, BotSkillSaveComposer, Nitro, RequestBotCommandConfigurationComposer, RoomObjectCategory } from 'nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { GetConnection } from '../../../../../../api';
 import { CreateMessageHook } from '../../../../../../hooks/messages';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
 import { useRoomContext } from '../../../../context/RoomContext';
+import { RoomWidgetUpdateRentableBotChatEvent } from '../../../../events';
 import { ContextMenuView } from '../../../context-menu/ContextMenuView';
 import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
 import { BotSkillsEnum } from '../../utils/BotSkillsEnum';
-import { AvatarInfoWidgetRentableBotViewProps, BotChatOptions } from './AvatarInfoWidgetRentableBotView.types';
+import { AvatarInfoWidgetRentableBotViewProps } from './AvatarInfoWidgetRentableBotView.types';

 const MODE_NORMAL = 0;
 const MODE_CHANGE_NAME = 1;
 const MODE_CHANGE_MOTTO = 2;
-const MODE_CHANGE_SPEECH = 3;

 export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotViewProps> = props =>
 {
@ -21,9 +21,12 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
    const [ mode, setMode ] = useState(MODE_NORMAL);
    const [ newName, setNewName ] = useState('');
    const [ newMotto, setNewMotto ] = useState('');
-    const [ newChat, setNewChat ] = useState('');
-    const [ chatOptions, setChatOptions ] = useState<BotChatOptions>({ automaticChat: false, chatDelay: 0, mixSentences: false });
-    const { widgetHandler = null } = useRoomContext();
+    const { eventDispatcher = null } = useRoomContext();
+
+    useEffect(() =>
+    {
+        setMode(MODE_NORMAL);
+    }, [ rentableBotData ]);

    const onBotCommandConfigurationEvent = useCallback((event: BotCommandConfigurationEvent) =>
    {
@ -49,20 +52,22 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView

                if((pieces.length === 3) || (pieces.length === 4))
                {
-                    setNewChat(pieces[0]);
-                    setChatOptions({
-                        automaticChat: ((pieces[1].toLowerCase() === 'true') || (pieces[1] === '1')),
-                        chatDelay: parseInt(pieces[2]),
-                        mixSentences: ((pieces[3]) ? ((pieces[3].toLowerCase() === 'true') || (pieces[3] === '1')) : false)
-                    });
-                }
+                    eventDispatcher.dispatchEvent(new RoomWidgetUpdateRentableBotChatEvent(
+                        rentableBotData.roomIndex,
+                        RoomObjectCategory.UNIT,
+                        rentableBotData.webID,
+                        pieces[0],
+                        ((pieces[1].toLowerCase() === 'true') || (pieces[1] === '1')),
+                        parseInt(pieces[2]),
+                        ((pieces[3]) ? ((pieces[3].toLowerCase() === 'true') || (pieces[3] === '1')) : false)));

-                setMode(MODE_CHANGE_SPEECH);
+                    close();
+                }

                return;
            }
        }
-    }, [ rentableBotData ]);
+    }, [ rentableBotData, eventDispatcher, close ]);

    CreateMessageHook(BotCommandConfigurationEvent, onBotCommandConfigurationEvent);

@ -176,14 +181,23 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
                        </ContextMenuListItemView> }
                </> }
            { (mode === MODE_CHANGE_NAME) &&
-                <ContextMenuListItemView className="flex-column" onClick={ null }>
+                <div className="d-flex flex-column menu-item" onClick={ null }>
                    <p className="mb-1">{ LocalizeText('bot.skill.name.configuration.new.name') }</p>
                    <input type="text" className="form-control form-control-sm mb-2" value={ newName } onChange={ event => setNewName(event.target.value) } />
                    <div className="d-flex justify-content-between align-items-center">
                        <button type="button" className="btn btn-secondary btn-sm" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</button>
                        <button type="button" className="btn btn-success btn-sm"  onClick={ event => processAction('save_bot_name') }>{ LocalizeText('save') }</button>
                    </div>
-                </ContextMenuListItemView> }
+                </div> }
+            { (mode === MODE_CHANGE_MOTTO) &&
+                <div className="d-flex flex-column menu-item" onClick={ null }>
+                    <p className="mb-1">{ LocalizeText('bot.skill.name.configuration.new.motto') }</p>
+                    <input type="text" className="form-control form-control-sm mb-2" value={ newMotto } onChange={ event => setNewMotto(event.target.value) } />
+                    <div className="d-flex justify-content-between align-items-center">
+                        <button type="button" className="btn btn-secondary btn-sm" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</button>
+                        <button type="button" className="btn btn-success btn-sm"  onClick={ event => processAction('save_bot_motto') }>{ LocalizeText('save') }</button>
+                    </div>
+                </div> }
        </ContextMenuView>
    );
 }
--- a/src/views/room/widgets/context-menu/ContextMenu.scss
+++ b/src/views/room/widgets/context-menu/ContextMenu.scss
@ -52,34 +52,38 @@
        }
    }

-    .menu-list-item {
+    .menu-item {
        position: relative;
-        height: 24px;
-        max-height: 24px;
        margin-top: 2px;
        padding: 3px;
-        background: $bg-mirage-split-background;
-        cursor: pointer;
        overflow: hidden;

        &.disabled {
            filter: brightness(0.7);
-            cursor: not-allowed;
+            cursor: not-allowed !important;
        }

-        .fas,
-        .nitro-currency-icon {
-            position: absolute;
-            right: 8px;
+        &.list-item {
+            height: 24px;
+            max-height: 24px;
+            padding: 3px;
+            background: $bg-mirage-split-background;
+            cursor: pointer;

-            &.left {
-                left: 8px;
-                right: unset;
+            &:not(.disabled):hover {
+                background: $bg-cello-split-background;
            }
-        }

-        &:not(.disabled):hover {
-            background: $bg-cello-split-background;
+            .fas,
+            .nitro-currency-icon {
+                position: absolute;
+                right: 8px;
+
+                &.left {
+                    left: 8px;
+                    right: unset;
+                }
+            }
        }
    }
 }
--- a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
+++ b/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
@ -13,7 +13,7 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
    }, [ canSelect, onClick ]);

    return (
-        <div className={ `d-flex justify-content-center align-items-center w-100 menu-list-item ${ !canSelect ? 'disabled ' : '' }${ className }` } onClick={ handleClick }>
+        <div className={ `d-flex justify-content-center align-items-center w-100 menu-item list-item ${ !canSelect ? 'disabled ' : '' }${ className }` } onClick={ handleClick }>
            { children }
        </div>
    )