All files / blacktrigram/src/components/ui/base/korean-text KoreanText.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import * as PIXI from "pixi.js";
import React from "react";
import usePixiExtensions from "../../../../utils/pixiExtensions";
import { KOREAN_TEXT_CONSTANTS } from "./constants";
import type { KoreanPixiTextProps } from "./types";
 
export const KoreanText: React.FC<KoreanPixiTextProps> = ({
  text,
  x = 0,
  y = 0,
  anchor = 0,
  style,
  visible = true,
  alpha = 1,
}) => {
  usePixiExtensions();
 
  const defaultStyle = new PIXI.TextStyle({
    fontFamily: KOREAN_TEXT_CONSTANTS.FONT_FAMILIES.PRIMARY,
    fontSize: KOREAN_TEXT_CONSTANTS.FONT_SIZES.MEDIUM,
    fill: KOREAN_TEXT_CONSTANTS.COLORS.PRIMARY,
    align: "left",
  });
 
  const finalStyle = style || defaultStyle;
 
  return (
    <pixiContainer x={x} y={y} visible={visible} alpha={alpha}>
      {/* Korean text */}
      <pixiText text={text.korean} style={finalStyle} anchor={anchor} y={0} />
 
      {/* English text (if provided) */}
      {text.english && (
        <pixiText
          text={text.english}
          style={
            new PIXI.TextStyle({
              ...finalStyle,
              fontSize:
                (finalStyle.fontSize as number) *
                KOREAN_TEXT_CONSTANTS.LAYOUT.KOREAN_ENGLISH_RATIO,
              fill: KOREAN_TEXT_CONSTANTS.COLORS.SECONDARY,
            })
          }
          anchor={anchor}
          y={(finalStyle.fontSize as number) + 4}
        />
      )}
    </pixiContainer>
  );
};
 
export default KoreanText;