All files / src/components/editors/actor ActorEditorExtraCollisionFlags.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useCallback } from "react";
import { FormRow } from "ui/form/layout/FormLayout";
import entitiesActions from "store/features/entities/entitiesActions";
import { ActorNormalized } from "shared/lib/entities/entitiesTypes";
import { useAppDispatch, useAppSelector } from "store/hooks";
import { CheckboxField } from "ui/form/CheckboxField";
import {
  removeArrayElements,
  toggleArrayElement,
} from "shared/lib/helpers/array";
import { sceneSelectors } from "store/features/entities/entitiesState";
import l10n, { L10NKey } from "shared/lib/lang/l10n";
import { ExtraActorCollisionFlagDef } from "store/features/engine/engineState";
 
interface ActorEditorExtraCollisionFlagsProps {
  actor: ActorNormalized;
  sceneId?: string;
}
 
const emptyCollisionFlagDefs: ExtraActorCollisionFlagDef[] = [];
 
export const ActorEditorExtraCollisionFlags: FC<
  ActorEditorExtraCollisionFlagsProps
> = ({ actor, sceneId }) => {
  const dispatch = useAppDispatch();
 
  const scene = useAppSelector((state) =>
    sceneSelectors.selectById(state, sceneId ?? ""),
  );
 
  const extraActorCollisionFlags = useAppSelector((state) => {
    Iif (!scene || !scene.type || !state.engine.sceneTypes)
      return emptyCollisionFlagDefs;
    const key = scene.type || "";
    const sceneType = state.engine.sceneTypes.find((s) => s.key === key);
    Iif (sceneType && sceneType.extraActorCollisionFlags) {
      return sceneType.extraActorCollisionFlags;
    }
    return emptyCollisionFlagDefs;
  });
 
  const onChangeActorProp = useCallback(
    <K extends keyof ActorNormalized>(key: K, value: ActorNormalized[K]) => {
      dispatch(
        entitiesActions.editActor({
          actorId: actor.id,
          changes: {
            [key]: value,
          },
        }),
      );
    },
    [dispatch, actor.id],
  );
 
  Iif (!actor || extraActorCollisionFlags.length === 0) {
    return <></>;
  }
 
  return Array.from({
    length: Math.ceil(extraActorCollisionFlags.length / 2),
  }).map((_, rowIndex) => {
    const startIndex = rowIndex * 2;
    const items = extraActorCollisionFlags.slice(startIndex, startIndex + 2);
 
    return (
      <FormRow key={rowIndex}>
        {items.map((flagDef) => (
          <CheckboxField
            key={flagDef.key}
            name={flagDef.key}
            label={l10n(flagDef.label as L10NKey)}
            title={
              flagDef.description
                ? l10n(flagDef.description as L10NKey)
                : undefined
            }
            checked={actor.collisionExtraFlags.includes(flagDef.setFlag)}
            onChange={() => {
              onChangeActorProp(
                "collisionExtraFlags",
                removeArrayElements(
                  toggleArrayElement(
                    actor.collisionExtraFlags,
                    flagDef.setFlag,
                  ),
                  flagDef.clearFlags ?? [],
                ),
              );
            }}
          />
        ))}
      </FormRow>
    );
  });
};