Update wired triggers

This commit is contained in:
Bill 2022-01-12 23:53:39 -05:00
parent 783f805907
commit 578d24cabb
8 changed files with 103 additions and 95 deletions

View File

@ -1,5 +1,8 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Flex } from '../../../../common/Flex';
import { Text } from '../../../../common/Text';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@ -10,39 +13,33 @@ export const WiredTriggerAvatarEnterRoomView: FC<{}> = props =>
const [ avatarMode, setAvatarMode ] = useState(0);
const { trigger = null, setStringParam = null } = useWiredContext();
useEffect(() =>
{
setUsername(trigger.stringData);
setAvatarMode(trigger.stringData ? 1 : 0)
}, [ trigger ]);
const save = useCallback(() =>
{
if(avatarMode === 1) setStringParam(username);
else setStringParam('');
}, [ username, avatarMode, setStringParam ]);
useEffect(() =>
{
setUsername(trigger.stringData);
setAvatarMode(trigger.stringData ? 1 : 0)
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.picktriggerer') }</label>
<div className="form-check">
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.picktriggerer') }</Text>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="radio" name="avatarMode" id="avatarMode0" checked={ (avatarMode === 0) } onChange={ event => setAvatarMode(0) } />
<label className="form-check-label" htmlFor="avatarMode0">
{ LocalizeText('wiredfurni.params.anyavatar') }
</label>
</div>
<div className="form-check">
<Text>{ LocalizeText('wiredfurni.params.anyavatar') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="radio" name="avatarMode" id="avatarMode1" checked={ (avatarMode === 1) } onChange={ event => setAvatarMode(1) } />
<label className="form-check-label" htmlFor="avatarMode1">
{ LocalizeText('wiredfurni.params.certainavatar') }
</label>
</div>
</div>
{ (avatarMode === 1) &&
<div className="form-group">
<input type="text" className="form-control form-control-sm" value={ username } onChange={ event => setUsername(event.target.value) } />
</div> }
<Text>{ LocalizeText('wiredfurni.params.certainavatar') }</Text>
</Flex>
{ (avatarMode === 1) &&
<input type="text" className="form-control form-control-sm" value={ username } onChange={ event => setUsername(event.target.value) } /> }
</Column>
</WiredTriggerBaseView>
);
}

View File

@ -1,5 +1,8 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { GetSessionDataManager, LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Flex } from '../../../../common/Flex';
import { Text } from '../../../../common/Text';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@ -10,39 +13,35 @@ export const WiredTriggerAvatarSaysSomethingView: FC<{}> = props =>
const [ triggererAvatar, setTriggererAvatar ] = useState(-1);
const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
useEffect(() =>
{
setMessage(trigger.stringData);
setTriggererAvatar((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
const save = useCallback(() =>
{
setStringParam(message);
setIntParams([ triggererAvatar ]);
}, [ message, triggererAvatar, setStringParam, setIntParams ]);
useEffect(() =>
{
setMessage(trigger.stringData);
setTriggererAvatar((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group mb-2">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.whatissaid') }</label>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.whatissaid') }</Text>
<input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } />
</div>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.picktriggerer') }</label>
<div className="form-check">
<input className="form-check-input" type="radio" name="triggererAvatar" id="triggererAvatar0" checked={ triggererAvatar === 0 } onChange={() => setTriggererAvatar(0)} />
<label className="form-check-label" htmlFor="triggererAvatar0">
{ LocalizeText('wiredfurni.params.anyavatar') }
</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="triggererAvatar" id="triggererAvatar1" checked={ triggererAvatar === 1 } onChange={() => setTriggererAvatar(1)} />
<label className="form-check-label" htmlFor="triggererAvatar1">
{ GetSessionDataManager().userName }
</label>
</div>
</div>
</Column>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.picktriggerer') }</Text>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="radio" name="triggererAvatar" id="triggererAvatar0" checked={ (triggererAvatar === 0) } onChange={ event => setTriggererAvatar(0) } />
<Text>{ LocalizeText('wiredfurni.params.anyavatar') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="radio" name="triggererAvatar" id="triggererAvatar1" checked={ (triggererAvatar === 1) } onChange={ event => setTriggererAvatar(1) } />
<Text>{ GetSessionDataManager().userName }</Text>
</Flex>
</Column>
</WiredTriggerBaseView>
);
}

View File

@ -1,5 +1,7 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@ -9,22 +11,22 @@ export const WiredTriggerBotReachedAvatarView: FC<{}> = props =>
const [ botName, setBotName ] = useState('');
const { trigger = null, setStringParam = null } = useWiredContext();
useEffect(() =>
{
setBotName(trigger.stringData);
}, [ trigger ]);
const save = useCallback(() =>
{
setStringParam(botName);
}, [ botName, setStringParam ]);
useEffect(() =>
{
setBotName(trigger.stringData);
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
<input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
</div>
</Column>
</WiredTriggerBaseView>
);
}

View File

@ -1,5 +1,7 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@ -9,22 +11,22 @@ export const WiredTriggerBotReachedStuffView: FC<{}> = props =>
const [ botName, setBotName ] = useState('');
const { trigger = null, setStringParam = null } = useWiredContext();
useEffect(() =>
{
setBotName(trigger.stringData);
}, [ trigger ]);
const save = useCallback(() =>
{
setStringParam(botName);
}, [ botName, setStringParam ]);
useEffect(() =>
{
setBotName(trigger.stringData);
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
<input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
</div>
</Column>
</WiredTriggerBaseView>
);
}

View File

@ -1,6 +1,8 @@
import { FC, useCallback, useEffect, useState } from 'react';
import ReactSlider from 'react-slider';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { GetWiredTimeLocale } from '../../common/GetWiredTimeLocale';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
@ -11,27 +13,27 @@ export const WiredTriggeExecuteOnceView: FC<{}> = props =>
const [ time, setTime ] = useState(1);
const { trigger = null, setIntParams = null } = useWiredContext();
useEffect(() =>
{
setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
const save = useCallback(() =>
{
setIntParams([ time ]);
}, [ time, setIntParams ]);
useEffect(() =>
{
setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
<ReactSlider
className={ 'nitro-slider' }
min={ 1 }
max={ 1200 }
value={ time }
onChange={ event => setTime(event) } />
</div>
</Column>
</WiredTriggerBaseView>
);
}

View File

@ -2,6 +2,8 @@ import { FriendlyTime } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import ReactSlider from 'react-slider';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@ -11,27 +13,27 @@ export const WiredTriggeExecutePeriodicallyLongView: FC<{}> = props =>
const [ time, setTime ] = useState(1);
const { trigger = null, setIntParams = null } = useWiredContext();
useEffect(() =>
{
setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
const save = useCallback(() =>
{
setIntParams([ time ]);
}, [ time, setIntParams ]);
useEffect(() =>
{
setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }</label>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }</Text>
<ReactSlider
className={ 'nitro-slider' }
min={ 1 }
max={ 120 }
value={ time }
onChange={ event => setTime(event) } />
</div>
</Column>
</WiredTriggerBaseView>
);
}

View File

@ -1,6 +1,8 @@
import { FC, useCallback, useEffect, useState } from 'react';
import ReactSlider from 'react-slider';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { GetWiredTimeLocale } from '../../common/GetWiredTimeLocale';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
@ -11,27 +13,27 @@ export const WiredTriggeExecutePeriodicallyView: FC<{}> = props =>
const [ time, setTime ] = useState(1);
const { trigger = null, setIntParams = null } = useWiredContext();
useEffect(() =>
{
setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
const save = useCallback(() =>
{
setIntParams([ time ]);
}, [ time, setIntParams ]);
useEffect(() =>
{
setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
<ReactSlider
className={ 'nitro-slider' }
min={ 1 }
max={ 60 }
value={ time }
onChange={ event => setTime(event) } />
</div>
</Column>
</WiredTriggerBaseView>
);
}

View File

@ -1,6 +1,8 @@
import { FC, useCallback, useEffect, useState } from 'react';
import ReactSlider from 'react-slider';
import { LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { WiredFurniType } from '../../common/WiredFurniType';
import { useWiredContext } from '../../context/WiredContext';
import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@ -10,27 +12,27 @@ export const WiredTriggeScoreAchievedView: FC<{}> = props =>
const [ points, setPoints ] = useState(1);
const { trigger = null, setIntParams = null } = useWiredContext();
useEffect(() =>
{
setPoints((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
const save = useCallback(() =>
{
setIntParams([ points ]);
}, [ points, setIntParams ]);
useEffect(() =>
{
setPoints((trigger.intData.length > 0) ? trigger.intData[0] : 0);
}, [ trigger ]);
return (
<WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
<div className="form-group">
<label className="fw-bold">{ LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }</label>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }</Text>
<ReactSlider
className={ 'nitro-slider' }
min={ 1 }
max={ 1000 }
value={ points }
onChange={ event => setPoints(event) } />
</div>
</Column>
</WiredTriggerBaseView>
);
}