mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
Add NFT avatar tab and wired extras UI
This commit is contained in:
Lorenzune
@@ -57,8 +57,10 @@ import { WiredExtraMoveCarryUsersView } from '../extras/WiredExtraMoveCarryUsers
|
||||
import { WiredExtraExecuteInOrderView } from '../extras/WiredExtraExecuteInOrderView';
|
||||
import { WiredExtraExecutionLimitView } from '../extras/WiredExtraExecutionLimitView';
|
||||
import { WiredExtraMoveNoAnimationView } from '../extras/WiredExtraMoveNoAnimationView';
|
||||
import { WiredExtraOrEvalView } from '../extras/WiredExtraOrEvalView';
|
||||
import { WiredExtraMovePhysicsView } from '../extras/WiredExtraMovePhysicsView';
|
||||
import { WiredExtraRandomView } from '../extras/WiredExtraRandomView';
|
||||
import { WiredExtraTextOutputUsernameView } from '../extras/WiredExtraTextOutputUsernameView';
|
||||
import { WiredExtraUnseenView } from '../extras/WiredExtraUnseenView';
|
||||
|
||||
export const WiredActionLayoutView = (code: number) =>
|
||||
@@ -189,6 +191,10 @@ export const WiredActionLayoutView = (code: number) =>
|
||||
return <WiredExtraExecuteInOrderView />;
|
||||
case WiredActionLayoutCode.EXECUTION_LIMIT_EXTRA:
|
||||
return <WiredExtraExecutionLimitView />;
|
||||
case WiredActionLayoutCode.OR_EVAL_EXTRA:
|
||||
return <WiredExtraOrEvalView />;
|
||||
case WiredActionLayoutCode.TEXT_OUTPUT_USERNAME_EXTRA:
|
||||
return <WiredExtraTextOutputUsernameView />;
|
||||
case WiredActionLayoutCode.SEND_SIGNAL:
|
||||
return <WiredActionSendSignalView />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { LocalizeText, WiredFurniType } from '../../../../api';
|
||||
import { Text } from '../../../../common';
|
||||
import { useWired } from '../../../../hooks';
|
||||
import { WiredSourceOption, WiredSourcesSelector } from '../WiredSourcesSelector';
|
||||
import { WiredExtraBaseView } from './WiredExtraBaseView';
|
||||
|
||||
const MODE_ALL = 0;
|
||||
const MODE_AT_LEAST_ONE = 1;
|
||||
const MODE_NOT_ALL = 2;
|
||||
const MODE_NONE = 3;
|
||||
const MODE_LESS_THAN = 4;
|
||||
const MODE_EXACTLY = 5;
|
||||
const MODE_MORE_THAN = 6;
|
||||
const MIN_COMPARE_VALUE = 0;
|
||||
const MAX_COMPARE_VALUE = 100;
|
||||
const DEFAULT_COMPARE_VALUE = 1;
|
||||
const COMPARE_VALUE_PATTERN = /^\d*$/;
|
||||
const CONDITION_EVALUATION_INTERACTION_TYPES = [ 'wf_cnd_*', 'wf_xtra_*' ];
|
||||
const CONDITION_EVALUATION_ERROR_KEY = 'wiredfurni.error.condition_evaluation_furni';
|
||||
|
||||
const FURNI_SOURCES: WiredSourceOption[] = [
|
||||
{ value: 100, label: 'wiredfurni.params.sources.furni.100' },
|
||||
{ value: 0, label: 'wiredfurni.params.sources.furni.0' },
|
||||
{ value: 200, label: 'wiredfurni.params.sources.furni.200' },
|
||||
{ value: 201, label: 'wiredfurni.params.sources.furni.201' }
|
||||
];
|
||||
|
||||
const MODE_OPTIONS = [ MODE_ALL, MODE_AT_LEAST_ONE, MODE_NOT_ALL, MODE_NONE ];
|
||||
const COMPARISON_OPTIONS = [ MODE_LESS_THAN, MODE_EXACTLY, MODE_MORE_THAN ];
|
||||
|
||||
const normalizeEvaluationMode = (value: number) => ([ ...MODE_OPTIONS, ...COMPARISON_OPTIONS ].includes(value) ? value : MODE_ALL);
|
||||
const normalizeFurniSource = (value: number) => (FURNI_SOURCES.some(option => option.value === value) ? value : 0);
|
||||
const normalizeCompareValue = (value: number) =>
|
||||
{
|
||||
if(isNaN(value)) return DEFAULT_COMPARE_VALUE;
|
||||
|
||||
return Math.max(MIN_COMPARE_VALUE, Math.min(MAX_COMPARE_VALUE, Math.floor(value)));
|
||||
};
|
||||
|
||||
export const WiredExtraOrEvalView: FC<{}> = () =>
|
||||
{
|
||||
const { trigger = null, setIntParams = null, setStringParam = null, setAllowedInteractionTypes = null, setAllowedInteractionErrorKey = null } = useWired();
|
||||
const [ evaluationMode, setEvaluationMode ] = useState(MODE_ALL);
|
||||
const [ furniSource, setFurniSource ] = useState(0);
|
||||
const [ compareValue, setCompareValue ] = useState(DEFAULT_COMPARE_VALUE);
|
||||
const [ compareValueInput, setCompareValueInput ] = useState(DEFAULT_COMPARE_VALUE.toString());
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setAllowedInteractionTypes(CONDITION_EVALUATION_INTERACTION_TYPES);
|
||||
setAllowedInteractionErrorKey(CONDITION_EVALUATION_ERROR_KEY);
|
||||
|
||||
return () =>
|
||||
{
|
||||
setAllowedInteractionTypes(null);
|
||||
setAllowedInteractionErrorKey(null);
|
||||
};
|
||||
}, [ setAllowedInteractionErrorKey, setAllowedInteractionTypes ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!trigger) return;
|
||||
|
||||
setEvaluationMode(normalizeEvaluationMode((trigger.intData.length > 0) ? trigger.intData[0] : MODE_ALL));
|
||||
setFurniSource(normalizeFurniSource((trigger.intData.length > 1) ? trigger.intData[1] : 0));
|
||||
const nextCompareValue = normalizeCompareValue((trigger.intData.length > 2) ? trigger.intData[2] : DEFAULT_COMPARE_VALUE);
|
||||
setCompareValue(nextCompareValue);
|
||||
setCompareValueInput(nextCompareValue.toString());
|
||||
}, [ trigger ]);
|
||||
|
||||
const updateCompareValue = (value: number) =>
|
||||
{
|
||||
const nextValue = normalizeCompareValue(value);
|
||||
|
||||
setCompareValue(nextValue);
|
||||
setCompareValueInput(nextValue.toString());
|
||||
};
|
||||
|
||||
const updateCompareValueInput = (value: string) =>
|
||||
{
|
||||
if(!COMPARE_VALUE_PATTERN.test(value)) return;
|
||||
|
||||
setCompareValueInput(value);
|
||||
|
||||
if(!value.length)
|
||||
{
|
||||
setCompareValue(MIN_COMPARE_VALUE);
|
||||
return;
|
||||
}
|
||||
|
||||
updateCompareValue(parseInt(value));
|
||||
};
|
||||
|
||||
const save = () =>
|
||||
{
|
||||
setIntParams([ normalizeEvaluationMode(evaluationMode), normalizeFurniSource(furniSource), normalizeCompareValue(compareValue) ]);
|
||||
setStringParam('');
|
||||
};
|
||||
|
||||
return (
|
||||
<WiredExtraBaseView
|
||||
hasSpecialInput={ true }
|
||||
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT }
|
||||
save={ save }
|
||||
cardStyle={ { width: 360 } }
|
||||
footer={ <WiredSourcesSelector showFurni={ true } furniSource={ furniSource } furniSources={ FURNI_SOURCES } onChangeFurni={ value => setFurniSource(normalizeFurniSource(value)) } /> }>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Text>{ LocalizeText('wiredfurni.params.eval_mode') }</Text>
|
||||
{ MODE_OPTIONS.map(mode =>
|
||||
{
|
||||
return (
|
||||
<label key={ mode } className="flex items-center gap-1 cursor-pointer">
|
||||
<input checked={ (evaluationMode === mode) } className="form-check-input" name="wiredExtraOrEvalMode" type="radio" onChange={ () => setEvaluationMode(mode) } />
|
||||
<Text>{ LocalizeText(`wiredfurni.params.eval_mode.${ mode }`) }</Text>
|
||||
</label>
|
||||
);
|
||||
}) }
|
||||
{ COMPARISON_OPTIONS.map(mode =>
|
||||
{
|
||||
const isSelected = (evaluationMode === mode);
|
||||
|
||||
return (
|
||||
<label key={ mode } className="flex items-center gap-2 cursor-pointer">
|
||||
<input checked={ isSelected } className="form-check-input" name="wiredExtraOrEvalMode" type="radio" onChange={ () => setEvaluationMode(mode) } />
|
||||
<Text>{ LocalizeText(`wiredfurni.params.eval_mode.cmp.${ mode - MODE_LESS_THAN }`) }</Text>
|
||||
<input
|
||||
className="form-control form-control-sm w-16"
|
||||
inputMode="numeric"
|
||||
max={ MAX_COMPARE_VALUE }
|
||||
min={ MIN_COMPARE_VALUE }
|
||||
type="text"
|
||||
value={ compareValueInput }
|
||||
onBlur={ () => setCompareValueInput(normalizeCompareValue(compareValue).toString()) }
|
||||
onChange={ event => updateCompareValueInput(event.target.value) }
|
||||
onFocus={ () => setEvaluationMode(mode) } />
|
||||
</label>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
</WiredExtraBaseView>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,123 @@
|
||||
import { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { LocalizeText, WiredFurniType } from '../../../../api';
|
||||
import { Text } from '../../../../common';
|
||||
import { useWired } from '../../../../hooks';
|
||||
import { NitroInput } from '../../../../layout';
|
||||
import { WiredSourcesSelector, CLICKED_USER_SOURCE_VALUE } from '../WiredSourcesSelector';
|
||||
import { WiredExtraBaseView } from './WiredExtraBaseView';
|
||||
|
||||
const TYPE_SINGLE = 1;
|
||||
const TYPE_MULTIPLE = 2;
|
||||
const DEFAULT_PLACEHOLDER_NAME = '';
|
||||
const DEFAULT_DELIMITER = ', ';
|
||||
const MAX_PLACEHOLDER_NAME_LENGTH = 32;
|
||||
const MAX_DELIMITER_LENGTH = 16;
|
||||
const PLACEHOLDER_WRAPPER_PATTERN = /^\$\((.*)\)$/;
|
||||
|
||||
const normalizePlaceholderType = (value: number) => ((value === TYPE_MULTIPLE) ? TYPE_MULTIPLE : TYPE_SINGLE);
|
||||
const normalizeUserSource = (value: number) => ((value === 0) || (value === 200) || (value === 201) || (value === CLICKED_USER_SOURCE_VALUE) ? value : 0);
|
||||
const normalizePlaceholderName = (value: string) =>
|
||||
{
|
||||
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
|
||||
|
||||
if(PLACEHOLDER_WRAPPER_PATTERN.test(normalizedValue))
|
||||
{
|
||||
normalizedValue = normalizedValue.substring(2, normalizedValue.length - 1).trim();
|
||||
}
|
||||
|
||||
return normalizedValue.slice(0, MAX_PLACEHOLDER_NAME_LENGTH);
|
||||
};
|
||||
|
||||
const normalizeDelimiter = (value: string) =>
|
||||
{
|
||||
if(value === undefined || value === null) return DEFAULT_DELIMITER;
|
||||
|
||||
return value.replace(/[\t\r\n]/g, '').slice(0, MAX_DELIMITER_LENGTH);
|
||||
};
|
||||
|
||||
const splitStringData = (value: string) =>
|
||||
{
|
||||
if(!value?.length) return [ DEFAULT_PLACEHOLDER_NAME, DEFAULT_DELIMITER ];
|
||||
|
||||
const parts = value.split('\t');
|
||||
|
||||
if(parts.length <= 1) return [ value, DEFAULT_DELIMITER ];
|
||||
|
||||
return [ parts[0], parts[1] ];
|
||||
};
|
||||
|
||||
const escapeHtml = (value: string) => value
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
|
||||
export const WiredExtraTextOutputUsernameView: FC<{}> = () =>
|
||||
{
|
||||
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
|
||||
const [ placeholderName, setPlaceholderName ] = useState(DEFAULT_PLACEHOLDER_NAME);
|
||||
const [ placeholderType, setPlaceholderType ] = useState(TYPE_SINGLE);
|
||||
const [ delimiter, setDelimiter ] = useState(DEFAULT_DELIMITER);
|
||||
const [ userSource, setUserSource ] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!trigger) return;
|
||||
|
||||
const [ nextPlaceholderName, nextDelimiter ] = splitStringData(trigger.stringData);
|
||||
|
||||
setPlaceholderName(normalizePlaceholderName(nextPlaceholderName));
|
||||
setDelimiter(normalizeDelimiter(nextDelimiter));
|
||||
setPlaceholderType(normalizePlaceholderType((trigger.intData.length > 0) ? trigger.intData[0] : TYPE_SINGLE));
|
||||
setUserSource(normalizeUserSource((trigger.intData.length > 1) ? trigger.intData[1] : 0));
|
||||
}, [ trigger ]);
|
||||
|
||||
const previewToken = useMemo(() =>
|
||||
{
|
||||
const effectiveName = normalizePlaceholderName(placeholderName) || 'placeholder';
|
||||
|
||||
return `$(${ effectiveName })`;
|
||||
}, [ placeholderName ]);
|
||||
|
||||
const previewHtml = useMemo(() => LocalizeText('wiredfurni.params.texts.placeholder_preview', [ 'placeholder' ], [ escapeHtml(previewToken) ]), [ previewToken ]);
|
||||
|
||||
const save = () =>
|
||||
{
|
||||
setIntParams([ normalizePlaceholderType(placeholderType), normalizeUserSource(userSource) ]);
|
||||
setStringParam(`${ normalizePlaceholderName(placeholderName) }\t${ normalizeDelimiter(delimiter) }`);
|
||||
};
|
||||
|
||||
return (
|
||||
<WiredExtraBaseView
|
||||
hasSpecialInput={ true }
|
||||
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
|
||||
save={ save }
|
||||
cardStyle={ { width: 400 } }
|
||||
footer={ <WiredSourcesSelector showUsers={ true } userSource={ userSource } onChangeUsers={ value => setUserSource(normalizeUserSource(value)) } /> }>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_name') }</Text>
|
||||
<NitroInput maxLength={ MAX_PLACEHOLDER_NAME_LENGTH } type="text" value={ placeholderName } onChange={ event => setPlaceholderName(normalizePlaceholderName(event.target.value)) } />
|
||||
</div>
|
||||
<Text dangerouslySetInnerHTML={ { __html: previewHtml } } />
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type') }</Text>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input checked={ (placeholderType === TYPE_SINGLE) } className="form-check-input" name="wiredTextOutputUsernameType" type="radio" onChange={ () => setPlaceholderType(TYPE_SINGLE) } />
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type.1') }</Text>
|
||||
</label>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input checked={ (placeholderType === TYPE_MULTIPLE) } className="form-check-input" name="wiredTextOutputUsernameType" type="radio" onChange={ () => setPlaceholderType(TYPE_MULTIPLE) } />
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type.2') }</Text>
|
||||
</label>
|
||||
</div>
|
||||
{ placeholderType === TYPE_MULTIPLE &&
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.select_delimiter') }</Text>
|
||||
<NitroInput maxLength={ MAX_DELIMITER_LENGTH } type="text" value={ delimiter } onChange={ event => setDelimiter(normalizeDelimiter(event.target.value)) } />
|
||||
</div> }
|
||||
</div>
|
||||
</WiredExtraBaseView>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user