🆙 Init V3

src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx

@@ -0,0 +1,34 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+const ALLOWED_HAND_ITEM_IDS: number[] = [ 2, 5, 7, 8, 9, 10, 27 ];
+
+export const WiredConditionActorHasHandItemView: FC<{}> = props =>
+{
+    const [ handItemId, setHandItemId ] = useState(-1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ handItemId ]);
+
+    useEffect(() =>
+    {
+        setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.handitem') }</Text>
+                <select className="form-select form-select-sm" value={ handItemId } onChange={ event => setHandItemId(parseInt(event.target.value)) }>
+                    { ALLOWED_HAND_ITEM_IDS.map(value =>
+                    {
+                        return <option key={ value } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>;
+                    }) }
+                </select>
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionActorIsGroupMemberView: FC<{}> = props =>
+{
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ null } />;
+};

src/components/wired/views/conditions/WiredConditionActorIsOnFurniView.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionActorIsOnFurniView: FC<{}> = props =>
+{
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ null } />;
+};

src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx

@@ -0,0 +1,37 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+const teamIds: number[] = [ 1, 2, 3, 4 ];
+
+export const WiredConditionActorIsTeamMemberView: FC<{}> = props =>
+{
+    const [ selectedTeam, setSelectedTeam ] = useState(-1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ selectedTeam ]);
+
+    useEffect(() =>
+    {
+        setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
+                { teamIds.map(value =>
+                {
+                    return (
+                        <div key={ value } className="items-center gap-1">
+                            <input checked={ (selectedTeam === value) } className="form-check-input" id={ `selectedTeam${ value }` } name="selectedTeam" type="radio" onChange={ event => setSelectedTeam(value) } />
+                            <Text>{ LocalizeText(`wiredfurni.params.team.${ value }`) }</Text>
+                        </div>
+                    );
+                }) }
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx

@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionActorIsWearingBadgeView: FC<{}> = props =>
+{
+    const [ badge, setBadge ] = useState('');
+    const { trigger = null, setStringParam = null } = useWired();
+
+    const save = () => setStringParam(badge);
+
+    useEffect(() =>
+    {
+        setBadge(trigger.stringData);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.badgecode') }</Text>
+                <NitroInput type="text" value={ badge } onChange={ event => setBadge(event.target.value) } />
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx

@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionActorIsWearingEffectView: FC<{}> = props =>
+{
+    const [ effect, setEffect ] = useState(-1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ effect ]);
+
+    useEffect(() =>
+    {
+        setEffect(trigger?.intData[0] ?? 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.tooltip.effectid') }</Text>
+                <NitroInput type="number" value={ effect } onChange={ event => setEffect(parseInt(event.target.value)) } />
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionBaseView.tsx

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredBaseView } from '../WiredBaseView';
+
+export interface WiredConditionBaseViewProps
+{
+    hasSpecialInput: boolean;
+    requiresFurni: number;
+    save: () => void;
+}
+
+export const WiredConditionBaseView: FC<PropsWithChildren<WiredConditionBaseViewProps>> = props =>
+{
+    const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
+
+    const onSave = () => (save && save());
+
+    return (
+        <WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ onSave } wiredType="condition">
+            { children }
+        </WiredBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionDateRangeView.tsx

@@ -0,0 +1,59 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredDateToString, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionDateRangeView: FC<{}> = props =>
+{
+    const [ startDate, setStartDate ] = useState('');
+    const [ endDate, setEndDate ] = useState('');
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () =>
+    {
+        let startDateMili = 0;
+        let endDateMili = 0;
+
+        const startDateInstance = new Date(startDate);
+        const endDateInstance = new Date(endDate);
+
+        if(startDateInstance && endDateInstance)
+        {
+            startDateMili = startDateInstance.getTime() / 1000;
+            endDateMili = endDateInstance.getTime() / 1000;
+        }
+
+        setIntParams([ startDateMili, endDateMili ]);
+    };
+
+    useEffect(() =>
+    {
+        if(trigger.intData.length >= 2)
+        {
+            let startDate = new Date();
+            let endDate = new Date();
+
+            if(trigger.intData[0] > 0) startDate = new Date((trigger.intData[0] * 1000));
+
+            if(trigger.intData[1] > 0) endDate = new Date((trigger.intData[1] * 1000));
+
+            setStartDate(WiredDateToString(startDate));
+            setEndDate(WiredDateToString(endDate));
+        }
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.startdate') }</Text>
+                <NitroInput type="text" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
+            </div>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.enddate') }</Text>
+                <NitroInput type="text" value={ endDate } onChange={ (e) => setEndDate(e.target.value) } />
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniHasAvatarOnView: FC<{}> = props =>
+{
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ null } />;
+};

src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx

@@ -0,0 +1,35 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniHasFurniOnView: FC<{}> = props =>
+{
+    const [ requireAll, setRequireAll ] = useState(-1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ requireAll ]);
+
+    useEffect(() =>
+    {
+        setRequireAll((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.requireall') }</Text>
+                { [ 0, 1 ].map(value =>
+                {
+                    return (
+                        <div key={ value } className="flex items-center gap-1">
+                            <input checked={ (requireAll === value) } className="form-check-input" id={ `requireAll${ value }` } name="requireAll" type="radio" onChange={ event => setRequireAll(value) } />
+                            <Text>{ LocalizeText('wiredfurni.params.requireall.' + value) }</Text>
+                        </div>
+                    );
+                }) }
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx

@@ -0,0 +1,35 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniHasNotFurniOnView: FC<{}> = props =>
+{
+    const [ requireAll, setRequireAll ] = useState(-1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ requireAll ]);
+
+    useEffect(() =>
+    {
+        setRequireAll((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.not_requireall') }</Text>
+                { [ 0, 1 ].map(value =>
+                {
+                    return (
+                        <div key={ value } className="flex items-center gap-1">
+                            <input checked={ (requireAll === value) } className="form-check-input" id={ `requireAll${ value }` } name="requireAll" type="radio" onChange={ event => setRequireAll(value) } />
+                            <Text>{ LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }</Text>
+                        </div>
+                    );
+                }) }
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniIsOfTypeView: FC<{}> = props =>
+{
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ null } />;
+};

src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx

@@ -0,0 +1,42 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniMatchesSnapshotView: FC<{}> = props =>
+{
+    const [ stateFlag, setStateFlag ] = useState(0);
+    const [ directionFlag, setDirectionFlag ] = useState(0);
+    const [ positionFlag, setPositionFlag ] = useState(0);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ stateFlag, directionFlag, positionFlag ]);
+
+    useEffect(() =>
+    {
+        setStateFlag(trigger.getBoolean(0) ? 1 : 0);
+        setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
+        setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
+                <div className="flex items-center gap-1">
+                    <input checked={ !!stateFlag } className="form-check-input" id="stateFlag" type="checkbox" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
+                    <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ !!directionFlag } className="form-check-input" id="directionFlag" type="checkbox" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
+                    <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ !!positionFlag } className="form-check-input" id="positionFlag" type="checkbox" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
+                    <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
+                </div>
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionLayoutView.tsx

@@ -0,0 +1,64 @@
+import { WiredConditionlayout } from '../../../../api';
+import { WiredConditionActorHasHandItemView } from './WiredConditionActorHasHandItem';
+import { WiredConditionActorIsGroupMemberView } from './WiredConditionActorIsGroupMemberView';
+import { WiredConditionActorIsOnFurniView } from './WiredConditionActorIsOnFurniView';
+import { WiredConditionActorIsTeamMemberView } from './WiredConditionActorIsTeamMemberView';
+import { WiredConditionActorIsWearingBadgeView } from './WiredConditionActorIsWearingBadgeView';
+import { WiredConditionActorIsWearingEffectView } from './WiredConditionActorIsWearingEffectView';
+import { WiredConditionDateRangeView } from './WiredConditionDateRangeView';
+import { WiredConditionFurniHasAvatarOnView } from './WiredConditionFurniHasAvatarOnView';
+import { WiredConditionFurniHasFurniOnView } from './WiredConditionFurniHasFurniOnView';
+import { WiredConditionFurniHasNotFurniOnView } from './WiredConditionFurniHasNotFurniOnView';
+import { WiredConditionFurniIsOfTypeView } from './WiredConditionFurniIsOfTypeView';
+import { WiredConditionFurniMatchesSnapshotView } from './WiredConditionFurniMatchesSnapshotView';
+import { WiredConditionTimeElapsedLessView } from './WiredConditionTimeElapsedLessView';
+import { WiredConditionTimeElapsedMoreView } from './WiredConditionTimeElapsedMoreView';
+import { WiredConditionUserCountInRoomView } from './WiredConditionUserCountInRoomView';
+
+export const WiredConditionLayoutView = (code: number) =>
+{
+    switch(code)
+    {
+        case WiredConditionlayout.ACTOR_HAS_HANDITEM:
+            return <WiredConditionActorHasHandItemView />;
+        case WiredConditionlayout.ACTOR_IS_GROUP_MEMBER:
+        case WiredConditionlayout.NOT_ACTOR_IN_GROUP:
+            return <WiredConditionActorIsGroupMemberView />;
+        case WiredConditionlayout.ACTOR_IS_ON_FURNI:
+        case WiredConditionlayout.NOT_ACTOR_ON_FURNI:
+            return <WiredConditionActorIsOnFurniView />;
+        case WiredConditionlayout.ACTOR_IS_IN_TEAM:
+        case WiredConditionlayout.NOT_ACTOR_IN_TEAM:
+            return <WiredConditionActorIsTeamMemberView />;
+        case WiredConditionlayout.ACTOR_IS_WEARING_BADGE:
+        case WiredConditionlayout.NOT_ACTOR_WEARS_BADGE:
+            return <WiredConditionActorIsWearingBadgeView />;
+        case WiredConditionlayout.ACTOR_IS_WEARING_EFFECT:
+        case WiredConditionlayout.NOT_ACTOR_WEARING_EFFECT:
+            return <WiredConditionActorIsWearingEffectView />;
+        case WiredConditionlayout.DATE_RANGE_ACTIVE:
+            return <WiredConditionDateRangeView />;
+        case WiredConditionlayout.FURNIS_HAVE_AVATARS:
+        case WiredConditionlayout.FURNI_NOT_HAVE_HABBO:
+            return <WiredConditionFurniHasAvatarOnView />;
+        case WiredConditionlayout.HAS_STACKED_FURNIS:
+            return <WiredConditionFurniHasFurniOnView />;
+        case WiredConditionlayout.NOT_HAS_STACKED_FURNIS:
+            return <WiredConditionFurniHasNotFurniOnView />;
+        case WiredConditionlayout.STUFF_TYPE_MATCHES:
+        case WiredConditionlayout.NOT_FURNI_IS_OF_TYPE:
+            return <WiredConditionFurniIsOfTypeView />;
+        case WiredConditionlayout.STATES_MATCH:
+        case WiredConditionlayout.NOT_STATES_MATCH:
+            return <WiredConditionFurniMatchesSnapshotView />;
+        case WiredConditionlayout.TIME_ELAPSED_LESS:
+            return <WiredConditionTimeElapsedLessView />;
+        case WiredConditionlayout.TIME_ELAPSED_MORE:
+            return <WiredConditionTimeElapsedMoreView />;
+        case WiredConditionlayout.USER_COUNT_IN:
+        case WiredConditionlayout.NOT_USER_COUNT_IN:
+            return <WiredConditionUserCountInRoomView />;
+    }
+
+    return null;
+};

src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx

@@ -0,0 +1,33 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionTimeElapsedLessView: FC<{}> = props =>
+{
+    const [ time, setTime ] = useState(-1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ time ]);
+
+    useEffect(() =>
+    {
+        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
+                <ReactSlider
+                    className={ 'nitro-slider' }
+                    max={ 1200 }
+                    min={ 1 }
+                    value={ time }
+                    onChange={ event => setTime(event) } />
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx

@@ -0,0 +1,33 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
+{
+    const [ time, setTime ] = useState(-1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ time ]);
+
+    useEffect(() =>
+    {
+        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
+                <ReactSlider
+                    className={ 'nitro-slider' }
+                    max={ 1200 }
+                    min={ 1 }
+                    value={ time }
+                    onChange={ event => setTime(event) } />
+            </div>
+        </WiredConditionBaseView>
+    );
+};

src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx

@@ -0,0 +1,52 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionUserCountInRoomView: FC<{}> = props =>
+{
+    const [ min, setMin ] = useState(1);
+    const [ max, setMax ] = useState(0);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ min, max ]);
+
+    useEffect(() =>
+    {
+        if(trigger.intData.length >= 2)
+        {
+            setMin(trigger.intData[0]);
+            setMax(trigger.intData[1]);
+        }
+        else
+        {
+            setMin(1);
+            setMax(0);
+        }
+    }, [ trigger ]);
+
+    return (
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</Text>
+                <ReactSlider
+                    className={ 'nitro-slider' }
+                    max={ 50 }
+                    min={ 1 }
+                    value={ min }
+                    onChange={ event => setMin(event) } />
+            </div>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</Text>
+                <ReactSlider
+                    className={ 'nitro-slider' }
+                    max={ 125 }
+                    min={ 0 }
+                    value={ max }
+                    onChange={ event => setMax(event) } />
+            </div>
+        </WiredConditionBaseView>
+    );
+};