finished chat settings

src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx

@@ -6,6 +6,7 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro
 import RoomSettingsData from '../../common/RoomSettingsData';
 import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView';
 import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView';
+import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView';
 
 const TABS: string[] = [
     'navigator.roomsettings.tab.1',
@@ -37,36 +38,36 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
     
     CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent);
 
-    const save = useCallback(() =>
+    const save = useCallback((data: RoomSettingsData) =>
     {
         SendMessageHook(
             new SaveRoomSettingsComposer(
-                roomSettingsData.roomId,
+                data.roomId,
-                roomSettingsData.roomName,
+                data.roomName,
-                roomSettingsData.roomDescription,
+                data.roomDescription,
-                roomSettingsData.lockState,
+                data.lockState,
-                roomSettingsData.password,
+                data.password,
-                roomSettingsData.userCount,
+                data.userCount,
-                roomSettingsData.categoryId,
+                data.categoryId,
-                roomSettingsData.tags.length,
+                data.tags.length,
-                roomSettingsData.tags,
+                data.tags,
-                roomSettingsData.tradeState,
+                data.tradeState,
-                roomSettingsData.allowPets,
+                data.allowPets,
-                roomSettingsData.allowPetsEat,
+                data.allowPetsEat,
-                roomSettingsData.allowWalkthrough,
+                data.allowWalkthrough,
-                roomSettingsData.hideWalls,
+                data.hideWalls,
-                roomSettingsData.wallThickness,
+                data.wallThickness,
-                roomSettingsData.floorThickness,
+                data.floorThickness,
-                roomSettingsData.muteState,
+                data.muteState,
-                roomSettingsData.kickState,
+                data.kickState,
-                roomSettingsData.banState,
+                data.banState,
-                roomSettingsData.chatBubbleMode,
+                data.chatBubbleMode,
-                roomSettingsData.chatBubbleWeight,
+                data.chatBubbleWeight,
-                roomSettingsData.chatBubbleSpeed,
+                data.chatBubbleSpeed,
-                roomSettingsData.chatDistance,
+                data.chatDistance,
-                roomSettingsData.chatFloodProtection
+                data.chatFloodProtection
             ));
-    }, [ roomSettingsData ]);
+    }, []);
 
     const processAction = useCallback((action: string) =>
     {
@@ -93,6 +94,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
             <NitroCardContentView className="text-black px-4">
                 { currentTab === TABS[0] && <NavigatorRoomSettingsBasicTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
                 { currentTab === TABS[1] && <NavigatorRoomSettingsAccessTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                { currentTab === TABS[3] && <NavigatorRoomSettingsVipChatTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save }/> }
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts

@@ -4,5 +4,5 @@ export class NavigatorRoomSettingsTabViewProps
 {
     roomSettingsData: RoomSettingsData;
     setRoomSettingsData: (roomSettings: RoomSettingsData) => void;
-    onSave: () => void;
+    onSave: (data: RoomSettingsData) => void;
 }

src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx

@@ -1,6 +1,5 @@
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../../../../api';
-import RoomSettingsData from '../../../../common/RoomSettingsData';
 import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
 
 export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
@@ -9,7 +8,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
 
     const handleChange = useCallback((field: string, value: string | number | boolean) =>
     {
-        const roomSettings = ({ ...roomSettingsData } as RoomSettingsData);
+        const roomSettings = Object.assign({}, roomSettingsData);
         let save = true;
 
         switch(field)
@@ -37,7 +36,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
 
         setRoomSettingsData(roomSettings);
 
-        if(save) onSave();
+        if(save) onSave(roomSettings);
     }, [ roomSettingsData, setRoomSettingsData, onSave ]);
 
     const isPasswordValid = useCallback(() =>
@@ -47,8 +46,8 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
 
     const trySave = useCallback(() =>
     {
-        if(isPasswordValid()) onSave();
+        if(isPasswordValid()) onSave(roomSettingsData);
-    }, [ isPasswordValid, onSave ]);
+    }, [isPasswordValid, onSave, roomSettingsData]);
 
     return (
         <>

src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx

@@ -43,18 +43,18 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
 
         setRoomSettingsData(roomSettings);
 
-        if(save) onSave();
+        if(save) onSave(roomSettings);
     }, [ roomSettingsData, setRoomSettingsData, onSave ]);
 
     return (
         <>
             <div className="form-group mb-1">
                 <label>{ LocalizeText('navigator.roomname') }</label>
-                <input className="form-control form-control-sm" value={ roomSettingsData.roomName } onChange={ event => handleChange('name', event.target.value) } onBlur={ onSave } />
+                <input className="form-control form-control-sm" value={ roomSettingsData.roomName } onChange={ event => handleChange('name', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
             </div>
             <div className="form-group mb-1">
                 <label>{ LocalizeText('navigator.roomsettings.desc') }</label>
-                <input className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ event => handleChange('description', event.target.value) } onBlur={ onSave } />
+                <input className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ event => handleChange('description', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
             </div>
             <div className="form-group mb-1">
                 <label>{ LocalizeText('navigator.category') }</label>

src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx

@@ -0,0 +1,108 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../../api';
+import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
+
+export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
+
+    const handleChange = useCallback((field: string, value: string | number | boolean) =>
+    {
+        const clone =  Object.assign({}, roomSettingsData);
+        let save = true;
+
+        switch(field)
+        {
+            case 'hide_walls':
+                clone.hideWalls = Boolean(value);
+                break;
+            case 'wall_thickness':
+                clone.wallThickness = Number(value);
+                break;
+            case 'floor_thickness':
+                clone.floorThickness = Number(value);
+                break;
+            case 'bubble_mode':
+                clone.chatBubbleMode = Number(value);
+                break;
+            case 'chat_weight':
+                clone.chatBubbleWeight = Number(value);
+                break;
+            case 'bubble_speed':
+                clone.chatBubbleSpeed = Number(value);
+                break;
+            case 'flood_protection':
+                clone.chatFloodProtection = Number(value);
+                break;
+            case 'chat_distance':
+                clone.chatDistance = Number(value);
+                save = false;
+                break;
+        }
+        
+        setRoomSettingsData(clone);
+
+        if(save) onSave(clone);
+    }, [ roomSettingsData, setRoomSettingsData, onSave ]);
+
+    return (
+        <>
+            <div className="fw-bold">{LocalizeText('navigator.roomsettings.vip.caption')}</div>
+            <div className="mb-3">{LocalizeText('navigator.roomsettings.vip.info')}</div>
+            <div className="fw-bold">{LocalizeText('navigator.roomsettings.vip_settings')}</div>
+            <div className="form-check">
+                <input className="form-check-input" type="checkbox" checked={ roomSettingsData.hideWalls } onChange={ (e) => handleChange('hide_walls', e.target.checked) } />
+                <label className="form-check-label">{ LocalizeText('navigator.roomsettings.hide_walls') }</label>
+            </div>
+            <div className="form-group mb-1">
+                <select className="form-select form-select-sm" value={ roomSettingsData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
+                    <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
+                    <option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
+                    <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
+                    <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
+                </select>
+            </div>
+            <div className="form-group mb-1">
+                <select className="form-select form-select-sm" value={ roomSettingsData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
+                    <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
+                    <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
+                    <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>
+                    <option value="-2">{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
+                </select>
+            </div>
+            <div className="fw-bold">{LocalizeText('navigator.roomsettings.chat_settings')}</div>
+            <div className="mb-2">{LocalizeText('navigator.roomsettings.chat_settings.info')}</div>
+            <div className="form-group mb-1">
+                <select className="form-select form-select-sm" value={ roomSettingsData.chatBubbleMode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
+                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
+                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
+                </select>
+            </div>
+            <div className="form-group mb-1">
+                <select className="form-select form-select-sm" value={ roomSettingsData.chatBubbleWeight } onChange={ event => handleChange('chat_weight', event.target.value) }>
+                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
+                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
+                    <option value="2">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
+                </select>
+            </div>
+            <div className="form-group mb-1">
+                <select className="form-select form-select-sm" value={ roomSettingsData.chatBubbleSpeed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
+                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
+                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
+                    <option value="2">{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
+                </select>
+            </div>
+            <div className="form-group mb-1">
+                <select className="form-select form-select-sm" value={ roomSettingsData.chatFloodProtection } onChange={ event => handleChange('flood_protection', event.target.value) }>
+                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
+                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
+                    <option value="2">{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
+                </select>
+            </div>
+            <div className="form-group mb-0">
+    <label>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</label>
+    <input type="number" min="0" className="form-control form-control-sm" value={ roomSettingsData.chatDistance } onChange={ event => handleChange('chat_distance', event.target.valueAsNumber) } onBlur={ () => onSave(roomSettingsData) } />
+</div>
+        </>
+    );
+}