All files / src/components/world SpriteSheetCanvas.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
98
99
100
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import { useAppSelector } from "store/hooks";
import styled from "styled-components";
import {
  spriteAnimationSelectors,
  spriteSheetSelectors,
  spriteStateSelectors,
} from "store/features/entities/entitiesState";
import { ActorDirection, Palette } from "shared/lib/entities/entitiesTypes";
import { MetaspriteCanvas } from "components/sprites/preview/MetaspriteCanvas";
 
interface SpriteSheetCanvasProps {
  spriteSheetId: string;
  direction?: ActorDirection;
  frame?: number;
  palettes?: Palette[];
  previewAsMono?: boolean;
  offsetPosition?: boolean;
}
 
const Wrapper = styled.div`
  position: relative;
`;
 
const directions: ActorDirection[] = ["right", "left", "up", "down"];
 
const SpriteSheetCanvas = ({
  spriteSheetId,
  direction = "down",
  frame = 0,
  palettes,
  previewAsMono,
  offsetPosition,
}: SpriteSheetCanvasProps) => {
  const sprite = useAppSelector((state) =>
    spriteSheetSelectors.selectById(state, spriteSheetId)
  );
 
  const state = useAppSelector((state) =>
    spriteStateSelectors.selectById(state, sprite?.states?.[0] || "")
  );
 
  const animations = state?.animations || [];
 
  // Determine animation to use based on type
  let animationIndex = directions.indexOf(direction);
  if (
    state?.animationType === "fixed" ||
    state?.animationType === "fixed_movement"
  ) {
    animationIndex = 0;
  } else Iif (state?.animationType === "platform_player") {
    Iif (animationIndex > 1) {
      animationIndex = 0;
    }
  }
  const flipX = state?.flipLeft && direction === "left";
  Iif (flipX) {
    animationIndex = 0;
  }
  Iif (animationIndex < 0) {
    animationIndex = 3;
  }
 
  const animationId = animations[animationIndex] || "";
 
  const animation = useAppSelector((state) =>
    spriteAnimationSelectors.selectById(state, animationId)
  );
  const frames = animation?.frames || [];
  const metaspriteId = frames[frame % frames.length] || "";
 
  Iif (!sprite || !state) {
    return <div />;
  }
 
  return (
    <Wrapper
      style={
        offsetPosition
          ? {
              top: -sprite.canvasHeight + 8,
              left: Math.min(0, 8 - sprite.canvasWidth / 2),
            }
          : undefined
      }
    >
      <MetaspriteCanvas
        spriteSheetId={spriteSheetId}
        metaspriteId={metaspriteId}
        palettes={palettes}
        flipX={flipX}
        previewAsMono={previewAsMono}
      />
    </Wrapper>
  );
};
 
export default SpriteSheetCanvas;