feat(wired-ui): add upcounter clock controls and checks

2026-06-20 15:36:18 +00:00 · 2026-03-19 00:01:59 +01:00
parent 2bbc31b1c7
commit 146f8e6b0d
12 changed files with 462 additions and 5 deletions
@@ -0,0 +1,123 @@
+import { FC, useEffect, useMemo, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Slider, Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredSourcesSelector } from '../WiredSourcesSelector';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+const COUNTER_INTERACTION_TYPES = [ 'game_upcounter' ];
+const MINUTES_MIN = 0;
+const MINUTES_MAX = 99;
+const HALF_SECONDS_MIN = 0;
+const HALF_SECONDS_MAX = 119;
+
+const COMPARISON_OPTIONS = [
+    { value: 0, label: 'wiredfurni.params.comparison.0' },
+    { value: 1, label: 'wiredfurni.params.comparison.1' },
+    { value: 2, label: 'wiredfurni.params.comparison.2' }
+];
+
+const normalizeComparison = (value: number) =>
+{
+    if(value < 0 || value > 2) return 1;
+
+    return value;
+};
+
+const normalizeMinutes = (value: number) => Math.max(MINUTES_MIN, Math.min(MINUTES_MAX, value));
+const normalizeHalfSeconds = (value: number) => Math.max(HALF_SECONDS_MIN, Math.min(HALF_SECONDS_MAX, value));
+
+const formatSeconds = (halfSeconds: number) =>
+{
+    const value = normalizeHalfSeconds(halfSeconds) / 2;
+    const text = value.toFixed(1);
+
+    return text.endsWith('.0') ? text.slice(0, -2) : text;
+};
+
+export const WiredConditionCounterTimeMatchesView: FC<{}> = () =>
+{
+    const { trigger = null, setIntParams = null, setAllowedInteractionTypes = null, setAllowedInteractionErrorKey = null } = useWired();
+    const [ comparison, setComparison ] = useState(1);
+    const [ furniSource, setFurniSource ] = useState<number>(() =>
+    {
+        if(trigger?.intData?.length > 3) return trigger.intData[3];
+        return (trigger?.selectedItems?.length ?? 0) > 0 ? 100 : 0;
+    });
+    const [ minutes, setMinutes ] = useState(0);
+    const [ halfSeconds, setHalfSeconds ] = useState(0);
+
+    const secondsLabel = useMemo(() => formatSeconds(halfSeconds), [ halfSeconds ]);
+
+    const save = () =>
+    {
+        setIntParams([
+            normalizeComparison(comparison),
+            normalizeMinutes(minutes),
+            normalizeHalfSeconds(halfSeconds),
+            furniSource
+        ]);
+    };
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        setComparison((trigger.intData.length > 0) ? normalizeComparison(trigger.intData[0]) : 1);
+        setMinutes((trigger.intData.length > 1) ? normalizeMinutes(trigger.intData[1]) : 0);
+        setHalfSeconds((trigger.intData.length > 2) ? normalizeHalfSeconds(trigger.intData[2]) : 0);
+        setFurniSource((trigger.intData.length > 3) ? trigger.intData[3] : ((trigger.selectedItems?.length ?? 0) > 0 ? 100 : 0));
+    }, [ trigger ]);
+
+    useEffect(() =>
+    {
+        setAllowedInteractionTypes(COUNTER_INTERACTION_TYPES);
+        setAllowedInteractionErrorKey('wiredfurni.error.require_counter_furni');
+
+        return () =>
+        {
+            setAllowedInteractionTypes(null);
+            setAllowedInteractionErrorKey(null);
+        };
+    }, [ setAllowedInteractionErrorKey, setAllowedInteractionTypes ]);
+
+    return (
+        <WiredConditionBaseView
+            hasSpecialInput={ true }
+            requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT }
+            save={ save }
+            footer={ <WiredSourcesSelector showFurni={ true } furniSource={ furniSource } onChangeFurni={ setFurniSource } /> }>
+            <div className="flex flex-col gap-2">
+                { COMPARISON_OPTIONS.map(option =>
+                {
+                    return (
+                        <div key={ option.value } className="flex items-center gap-1">
+                            <input checked={ (comparison === option.value) } className="form-check-input" id={ `counterComparison${ option.value }` } name="counterComparison" type="radio" onChange={ () => setComparison(option.value) } />
+                            <Text>{ LocalizeText(option.label) }</Text>
+                        </div>
+                    );
+                }) }
+            </div>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.clock_minutes_elapsed', [ 'minutes' ], [ minutes.toString() ]) }</Text>
+                <Slider
+                    max={ MINUTES_MAX }
+                    min={ MINUTES_MIN }
+                    step={ 1 }
+                    value={ minutes }
+                    onChange={ event => setMinutes(normalizeMinutes(event as number)) } />
+                <Text small>{ minutes }</Text>
+            </div>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.clock_seconds_elapsed', [ 'seconds' ], [ secondsLabel ]) }</Text>
+                <Slider
+                    max={ HALF_SECONDS_MAX }
+                    min={ HALF_SECONDS_MIN }
+                    step={ 1 }
+                    value={ halfSeconds }
+                    onChange={ event => setHalfSeconds(normalizeHalfSeconds(event as number)) } />
+                <Text small>{ secondsLabel }</Text>
+            </div>
+        </WiredConditionBaseView>
+    );
+};