Merge pull request #14 from Lorenzune/pr/wired-trigger-views-clean-20260318

feat(wired): add leave/click/action/short-period trigger views

src/api/wired/WiredTriggerLayoutCode.ts

@@ -15,4 +15,10 @@ export class WiredTriggerLayout
     public static BOT_REACHED_STUFF: number = 13;
     public static BOT_REACHED_AVATAR: number = 14;
     public static RECEIVE_SIGNAL: number = 15;
+    public static AVATAR_LEAVES_ROOM: number = 16;
+    public static EXECUTE_PERIODICALLY_SHORT: number = 17;
+    public static CLICK_FURNI: number = 18;
+    public static CLICK_TILE: number = 19;
+    public static CLICK_USER: number = 20;
+    public static USER_PERFORMS_ACTION: number = 21;
 }

src/components/wired/views/triggers/WiredTriggerAvatarLeaveRoomView.tsx

@@ -0,0 +1,39 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerAvatarLeaveRoomView: FC<{}> = props =>
+{
+    const [ username, setUsername ] = useState('');
+    const [ avatarMode, setAvatarMode ] = useState(0);
+    const { trigger = null, setStringParam = null } = useWired();
+
+    const save = () => setStringParam((avatarMode === 1) ? username : '');
+
+    useEffect(() =>
+    {
+        setUsername(trigger.stringData);
+        setAvatarMode(trigger.stringData ? 1 : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.picktriggerer') }</Text>
+                <div className="flex items-center gap-1">
+                    <input checked={ (avatarMode === 0) } className="form-check-input" id="avatarMode0" name="avatarMode" type="radio" onChange={ event => setAvatarMode(0) } />
+                    <Text>{ LocalizeText('wiredfurni.params.anyavatar') }</Text>
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (avatarMode === 1) } className="form-check-input" id="avatarMode1" name="avatarMode" type="radio" onChange={ event => setAvatarMode(1) } />
+                    <Text>{ LocalizeText('wiredfurni.params.certainavatar') }</Text>
+                </div>
+                { (avatarMode === 1) &&
+                    <NitroInput type="text" value={ username } onChange={ event => setUsername(event.target.value) } /> }
+            </div>
+        </WiredTriggerBaseView>
+    );
+};

src/components/wired/views/triggers/WiredTriggerClickFurniView.tsx

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

src/components/wired/views/triggers/WiredTriggerClickTileView.tsx

@@ -0,0 +1,20 @@
+import { FC, useEffect } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { useWired } from '../../../../hooks';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+const CLICK_TILE_INTERACTION_TYPES = [ 'room_invisible_click_tile' ];
+
+export const WiredTriggerClickTileView: FC<{}> = () =>
+{
+    const { setAllowedInteractionTypes } = useWired();
+
+    useEffect(() =>
+    {
+        setAllowedInteractionTypes(CLICK_TILE_INTERACTION_TYPES);
+
+        return () => setAllowedInteractionTypes(null);
+    }, [ setAllowedInteractionTypes ]);
+
+    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ null } />;
+};

src/components/wired/views/triggers/WiredTriggerClickUserView.tsx

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

src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyShortView.tsx

@@ -0,0 +1,32 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Slider, Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggeExecutePeriodicallyShortView: FC<{}> = () =>
+{
+    const [ time, setTime ] = useState(10);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ time ]);
+
+    useEffect(() =>
+    {
+        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 10);
+    }, [ trigger ]);
+
+    return (
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ ((time * 50) / 1000).toFixed(2) ]) }</Text>
+                <Text small>{ `${ time * 50 } ms` }</Text>
+                <Slider
+                    max={ 10 }
+                    min={ 1 }
+                    value={ time }
+                    onChange={ event => setTime(event) } />
+            </div>
+        </WiredTriggerBaseView>
+    );
+};

src/components/wired/views/triggers/WiredTriggerLayoutView.tsx

@@ -1,14 +1,20 @@
 import { WiredTriggerLayout } from '../../../../api';
 import { WiredTriggerAvatarEnterRoomView } from './WiredTriggerAvatarEnterRoomView';
+import { WiredTriggerAvatarLeaveRoomView } from './WiredTriggerAvatarLeaveRoomView';
 import { WiredTriggerAvatarSaysSomethingView } from './WiredTriggerAvatarSaysSomethingView';
 import { WiredTriggerAvatarWalksOffFurniView } from './WiredTriggerAvatarWalksOffFurniView';
 import { WiredTriggerAvatarWalksOnFurniView } from './WiredTriggerAvatarWalksOnFurni';
 import { WiredTriggerBotReachedAvatarView } from './WiredTriggerBotReachedAvatarView';
 import { WiredTriggerBotReachedStuffView } from './WiredTriggerBotReachedStuffView';
+import { WiredTriggerClickFurniView } from './WiredTriggerClickFurniView';
+import { WiredTriggerClickTileView } from './WiredTriggerClickTileView';
+import { WiredTriggerClickUserView } from './WiredTriggerClickUserView';
 import { WiredTriggerCollisionView } from './WiredTriggerCollisionView';
+import { WiredTriggerUserPerformsActionView } from './WiredTriggerUserPerformsActionView';
 import { WiredTriggeExecuteOnceView } from './WiredTriggerExecuteOnceView';
 import { WiredTriggeExecutePeriodicallyLongView } from './WiredTriggerExecutePeriodicallyLongView';
 import { WiredTriggeExecutePeriodicallyView } from './WiredTriggerExecutePeriodicallyView';
+import { WiredTriggeExecutePeriodicallyShortView } from './WiredTriggerExecutePeriodicallyShortView';
 import { WiredTriggerGameEndsView } from './WiredTriggerGameEndsView';
 import { WiredTriggerGameStartsView } from './WiredTriggerGameStartsView';
 import { WiredTriggeScoreAchievedView } from './WiredTriggerScoreAchievedView';
@@ -21,6 +27,8 @@ export const WiredTriggerLayoutView = (code: number) =>
     {
         case WiredTriggerLayout.AVATAR_ENTERS_ROOM:
             return <WiredTriggerAvatarEnterRoomView />;
+        case WiredTriggerLayout.AVATAR_LEAVES_ROOM:
+            return <WiredTriggerAvatarLeaveRoomView />;
         case WiredTriggerLayout.AVATAR_SAYS_SOMETHING:
             return <WiredTriggerAvatarSaysSomethingView />;
         case WiredTriggerLayout.AVATAR_WALKS_OFF_FURNI:
@@ -31,12 +39,22 @@ export const WiredTriggerLayoutView = (code: number) =>
             return <WiredTriggerBotReachedAvatarView />;
         case WiredTriggerLayout.BOT_REACHED_STUFF:
             return <WiredTriggerBotReachedStuffView />;
+        case WiredTriggerLayout.CLICK_FURNI:
+            return <WiredTriggerClickFurniView />;
+        case WiredTriggerLayout.CLICK_TILE:
+            return <WiredTriggerClickTileView />;
+        case WiredTriggerLayout.CLICK_USER:
+            return <WiredTriggerClickUserView />;
+        case WiredTriggerLayout.USER_PERFORMS_ACTION:
+            return <WiredTriggerUserPerformsActionView />;
         case WiredTriggerLayout.COLLISION:
             return <WiredTriggerCollisionView />;
         case WiredTriggerLayout.EXECUTE_ONCE:
             return <WiredTriggeExecuteOnceView />;
         case WiredTriggerLayout.EXECUTE_PERIODICALLY:
             return <WiredTriggeExecutePeriodicallyView />;
+        case WiredTriggerLayout.EXECUTE_PERIODICALLY_SHORT:
+            return <WiredTriggeExecutePeriodicallyShortView />;
         case WiredTriggerLayout.EXECUTE_PERIODICALLY_LONG:
             return <WiredTriggeExecutePeriodicallyLongView />;
         case WiredTriggerLayout.GAME_ENDS:

src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx

@@ -1,8 +1,34 @@
-import { FC } from 'react';
-import { WiredFurniType } from '../../../../api';
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
-export const WiredTriggerToggleFurniView: FC<{}> = props =>
+export const WiredTriggerToggleFurniView: FC<{}> = () =>
 {
-    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ null } />;
+    const [ triggerMode, setTriggerMode ] = useState(0);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([ triggerMode ]);
+
+    useEffect(() =>
+    {
+        setTriggerMode((trigger?.intData?.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
+    return (
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
+                <div className="flex items-center gap-1">
+                    <input checked={ (triggerMode === 1) } className="form-check-input" id="stateTrigger1" name="stateTrigger" type="radio" onChange={ () => setTriggerMode(1) } />
+                    <Text>{ LocalizeText('wiredfurni.params.state_trigger.1') }</Text>
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (triggerMode === 0) } className="form-check-input" id="stateTrigger0" name="stateTrigger" type="radio" onChange={ () => setTriggerMode(0) } />
+                    <Text>{ LocalizeText('wiredfurni.params.state_trigger.0') }</Text>
+                </div>
+            </div>
+        </WiredTriggerBaseView>
+    );
 };

src/components/wired/views/triggers/WiredTriggerUserPerformsActionView.tsx

@@ -0,0 +1,103 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+const ACTION_WAVE = 1;
+const ACTION_BLOW_KISS = 2;
+const ACTION_LAUGH = 3;
+const ACTION_AWAKE = 4;
+const ACTION_RELAX = 5;
+const ACTION_SIT = 6;
+const ACTION_STAND = 7;
+const ACTION_LAY = 8;
+const ACTION_SIGN = 9;
+const ACTION_DANCE = 10;
+const ACTION_THUMB_UP = 11;
+
+const ACTION_OPTIONS = [
+    { value: ACTION_WAVE, label: 'widget.memenu.wave' },
+    { value: ACTION_BLOW_KISS, label: 'widget.memenu.blow' },
+    { value: ACTION_LAUGH, label: 'widget.memenu.laugh' },
+    { value: ACTION_THUMB_UP, label: 'widget.memenu.thumb' },
+    { value: ACTION_AWAKE, label: 'wiredfurni.params.action.4' },
+    { value: ACTION_RELAX, label: 'avatar.widget.random_walk' },
+    { value: ACTION_SIT, label: 'widget.memenu.sit' },
+    { value: ACTION_STAND, label: 'widget.memenu.stand' },
+    { value: ACTION_LAY, label: 'wiredfurni.params.action.8' },
+    { value: ACTION_SIGN, label: 'widget.memenu.sign' },
+    { value: ACTION_DANCE, label: 'widget.memenu.dance' }
+];
+
+const SIGN_OPTIONS = Array.from({ length: 18 }, (_, value) => ({
+    value,
+    label: `wiredfurni.params.action.sign.${ value }`
+}));
+
+const DANCE_OPTIONS = [
+    { value: 1, label: 'widget.memenu.dance1' },
+    { value: 2, label: 'widget.memenu.dance2' },
+    { value: 3, label: 'widget.memenu.dance3' },
+    { value: 4, label: 'widget.memenu.dance4' }
+];
+
+export const WiredTriggerUserPerformsActionView: FC<{}> = () =>
+{
+    const [ selectedAction, setSelectedAction ] = useState(ACTION_WAVE);
+    const [ signFilterEnabled, setSignFilterEnabled ] = useState(false);
+    const [ signId, setSignId ] = useState(0);
+    const [ danceFilterEnabled, setDanceFilterEnabled ] = useState(false);
+    const [ danceId, setDanceId ] = useState(1);
+    const { trigger = null, setIntParams = null } = useWired();
+
+    const save = () => setIntParams([
+        selectedAction,
+        signFilterEnabled ? 1 : 0,
+        signId,
+        danceFilterEnabled ? 1 : 0,
+        danceId
+    ]);
+
+    useEffect(() =>
+    {
+        setSelectedAction((trigger?.intData?.length > 0) ? trigger.intData[0] : ACTION_WAVE);
+        setSignFilterEnabled((trigger?.intData?.length > 1) ? (trigger.intData[1] === 1) : false);
+        setSignId((trigger?.intData?.length > 2) ? trigger.intData[2] : 0);
+        setDanceFilterEnabled((trigger?.intData?.length > 3) ? (trigger.intData[3] === 1) : false);
+        setDanceId((trigger?.intData?.length > 4) ? trigger.intData[4] : 1);
+    }, [ trigger ]);
+
+    return (
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-col gap-1">
+                <Text bold>Action</Text>
+                <select className="form-select form-select-sm" value={ selectedAction } onChange={ event => setSelectedAction(parseInt(event.target.value)) }>
+                    { ACTION_OPTIONS.map(option => <option key={ option.value } value={ option.value }>{ LocalizeText(option.label) }</option>) }
+                </select>
+            </div>
+            { (selectedAction === ACTION_SIGN) &&
+                <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-1">
+                        <input checked={ signFilterEnabled } className="form-check-input" id="signFilterEnabled" type="checkbox" onChange={ event => setSignFilterEnabled(event.target.checked) } />
+                        <Text>{ LocalizeText('wiredfurni.params.sign_filter') }</Text>
+                    </div>
+                    { signFilterEnabled &&
+                        <select className="form-select form-select-sm" value={ signId } onChange={ event => setSignId(parseInt(event.target.value)) }>
+                            { SIGN_OPTIONS.map(option => <option key={ option.value } value={ option.value }>{ LocalizeText(option.label) }</option>) }
+                        </select> }
+                </div> }
+            { (selectedAction === ACTION_DANCE) &&
+                <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-1">
+                        <input checked={ danceFilterEnabled } className="form-check-input" id="danceFilterEnabled" type="checkbox" onChange={ event => setDanceFilterEnabled(event.target.checked) } />
+                        <Text>{ LocalizeText('wiredfurni.params.dance_filter') }</Text>
+                    </div>
+                    { danceFilterEnabled &&
+                        <select className="form-select form-select-sm" value={ danceId } onChange={ event => setDanceId(parseInt(event.target.value)) }>
+                            { DANCE_OPTIONS.map(option => <option key={ option.value } value={ option.value }>{ LocalizeText(option.label) }</option>) }
+                        </select> }
+                </div> }
+        </WiredTriggerBaseView>
+    );
+};