All files / src/components/world/inspector/scenes/tilemap SceneTilemapInfoPane.tsx

50% Statements 12/24
0% Branches 0/16
0% Functions 0/4
50% Lines 12/24

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 53 54 55 56 57 58 59 60 61 62 63 64 65 661x 1x 1x 1x 1x 1x 1x 1x 1x           1x                 1x                                                                                 1x  
import React from "react";
import { useAppSelector } from "store/hooks";
import l10n from "shared/lib/lang/l10n";
import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
import styled from "styled-components";
import { MAX_BACKGROUND_TILES, MAX_BACKGROUND_TILES_CGB } from "consts";
import { sceneSelectors } from "store/features/entities/entitiesSelectors";
import { Alert } from "ui/alerts/Alert";
import StyledAlert from "ui/alerts/style";
 
interface SceneTilemapInfoPaneProps {
  sceneId: string;
}
 
const InfoPane = styled.div`
  font-size: 11px;
  padding: 10px;
 
  ${StyledAlert} {
    margin-top: 10px;
  }
`;
 
const SceneTilemapInfoPane = ({ sceneId }: SceneTilemapInfoPaneProps) => {
  const sceneTilemapInfo = useAppSelector(
    (state) => state.assets.sceneTilemaps[sceneId],
  );
 
  const cgbOnly = useAppSelector((state) => {
    const colorModeOverride = sceneSelectors.selectById(
      state,
      sceneId,
    )?.colorModeOverride;
    if (!colorModeOverride || colorModeOverride === "none") {
      return state.project.present.settings.colorMode === "color";
    }
    return colorModeOverride === "color";
  });
 
  const maxTiles = cgbOnly ? MAX_BACKGROUND_TILES_CGB : MAX_BACKGROUND_TILES;
 
  if (!sceneTilemapInfo) {
    return null;
  }
 
  return (
    <>
      <SplitPaneHeader collapsed={false} borderTop>
        {l10n("FIELD_INFO")}
      </SplitPaneHeader>
      <InfoPane>
        {l10n("FIELD_UNIQUE_TILES")}: {sceneTilemapInfo.numTiles ?? 0}
        {" / "}
        {maxTiles}
        {sceneTilemapInfo.warnings.map((warning, index) => (
          <Alert key={index} variant="warning">
            {warning}
          </Alert>
        ))}
      </InfoPane>
    </>
  );
};
 
export default React.memo(SceneTilemapInfoPane);