Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useMemo } from "react";
import styled from "styled-components";
import { SceneMetadata } from "components/world/entities/scenes/SceneMetadata";
import { useAppSelectorPick } from "store/hooks";
import { sceneSelectors } from "store/features/entities/entitiesSelectors";
import { TILE_SIZE } from "consts";
import { LabelSpan } from "ui/buttons/LabelButton";
import { sceneName } from "shared/lib/entities/entitiesHelpers";
interface SceneTitleProps {
sceneId: string;
sceneIndex: number;
}
const SceneName = styled.div`
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
export const SceneTitle = ({ sceneId, sceneIndex }: SceneTitleProps) => {
const scene = useAppSelectorPick(
(state) => sceneSelectors.selectById(state, sceneId),
["notes", "width", "labelColor", "name"],
);
const name = useMemo(
() => (scene ? sceneName(scene, sceneIndex) : ""),
[sceneIndex, scene],
);
const lastNamePart = useMemo(() => name.replace(/.*[/\\]/, ""), [name]);
if (!scene) {
return null;
}
return (
<SceneMetadata sceneId={sceneId}>
<SceneName
title={scene.notes}
style={{
maxWidth: scene.width * TILE_SIZE,
}}
>
<LabelSpan color={scene.labelColor}>{lastNamePart}</LabelSpan>
</SceneName>
</SceneMetadata>
);
};
|