How to use the konva.Rect function in konva

const drawClueAreaDisabled = () => {
    // We fade the clue area and draw a rectangle on top of it when there are no clues available
    globals.elements.clueAreaDisabled = new Konva.Group({
        x: clueAreaValues.x * winW,
        y: clueAreaValues.y * winH,
        width: clueAreaValues.w! * winW,
    });

    // A transparent rectangle to stop clicks
    const rect = new Konva.Rect({
        width: clueAreaValues.w! * winW,
        height: clueAreaValues.h! * winH,
        listening: true, // It must listen or it won't stop clicks
    });
    globals.elements.clueAreaDisabled.add(rect);

    const spacing = {
        x: 0.075,
        y: 0.03,
    };
    const lineColor = '#1a1a1a';

    // The line from top-left to bottom-right
    const line1 = new Konva.Line({
        points: [
            spacing.x * winW,

fontSize: fontSize * winH,
        visible: false,
    });
    globals.layers.get('UI')!.add(globals.elements.deckTurnsRemainingLabel1!);
    globals.elements.deckTurnsRemainingLabel2 = basicTextLabel.clone({
        text: 'left: #',
        x: (deckValues.x + xOffset) * winW,
        y: (deckValues.y + deckValues.h! - 0.04) * winH,
        fontSize: fontSize * winH,
        visible: false,
    });
    globals.layers.get('UI')!.add(globals.elements.deckTurnsRemainingLabel2!);

    // This is a yellow border around the deck that will appear when only one card is left
    // (if the "Bottom-Deck Blind-Plays" game option is enabled)
    globals.elements.deckPlayAvailableLabel = new Konva.Rect({
        x: deckValues.x * winW,
        y: deckValues.y * winH,
        width: deckValues.w! * winW,
        height: deckValues.h! * winH,
        stroke: 'yellow',
        cornerRadius: 6,
        strokeWidth: 10,
        visible: false,
    });
    globals.layers.get('UI')!.add(globals.elements.deckPlayAvailableLabel);
};

constructor(config: Konva.ContainerConfig) {
        super(config);
        this.listening(true);

        // Class variables
        this.clue = config.clue;

        // Local variables
        const w = this.width();
        const h = this.height();

        this.background = new Konva.Rect({
            name: 'background',
            x: 0,
            y: 0,
            width: w,
            height: h,
            cornerRadius: 0.12 * h,
            fill: 'black',
            opacity: 0.6,
        });
        this.add(this.background);

        const text = new Konva.Text({
            x: 0,
            y: 0.275 * h, // 0.25 is too high for some reason
            width: w,
            height: 0.5 * h,

export function border(this: HanabiCard) {
    // The card will get a border when it becomes clued
    this.cluedBorder = new Konva.Rect({
        x: 3,
        y: 3,
        width: CARD_W - 6,
        height: CARD_H - 6,
        cornerRadius: 6,
        strokeWidth: 16,
        stroke: '#ffdf00', // Yellow
        visible: false,
        listening: false,
    });
    this.add(this.cluedBorder);

    /*
        The card will also get a border if it is not clued but has a particular note on it
    */

cluster_overlay: new Konva.Rect({
        fill: 'white',
        opacity: 0.5,
      }),

      cluster_border: new Konva.Line({
        stroke: '#3a3a3a',
        strokeWidth: 1,
        dash: [6, 2],
      }),

      icon: new Konva.Path({
        fill: 'grey',
      }),

      rect_gradient: new Konva.Rect({
        x: 0,
        y: 80,
        width: 100,
        height: 20,
        fillLinearGradientStartPoint: {
          x: 0,
          y: 80,
        },
        fillLinearGradientEndPoint: {
          x: 100,
          y: 80,
        },
        stroke: self.options.tooltip.stroke,
        strokeWidth: 1,
      }),

shadowOffset: {
            x: 0,
            y: 0,
        },
        shadowOpacity: 0.9,
        visible: false,
    });
    globals.elements.currentPlayerArea.add(globals.elements.currentPlayerText3);

    const arrowValues = {
        x: (currentPlayerAreaValues.w * 0.75) + currentPlayerAreaValues.spacing,
        w: (currentPlayerAreaValues.w * 0.25) - currentPlayerAreaValues.spacing,
        h: currentPlayerAreaValues.h,
        spacing: 0.01,
    };
    const rect2 = new Konva.Rect({
        x: arrowValues.x * winW,
        width: arrowValues.w * winW,
        height: currentPlayerAreaValues.h * winH,
        cornerRadius: 0.01 * winW,
        fill: 'black',
        opacity: 0.2,
    });
    globals.elements.currentPlayerArea.add(rect2);

    globals.elements.currentPlayerArrow = new Konva.Group({
        x: (arrowValues.x + (arrowValues.w / 2)) * winW,
        y: (currentPlayerAreaValues.h / 2) * winH,
        offset: {
            x: (arrowValues.w / 2) * winW,
            y: (currentPlayerAreaValues.h / 2) * winH,
        },

y: clueAreaValues.y + 0.015,
        w: currentPlayerAreaWidth,
        h: 0.15,
        spacing: 0.006,
    };
    globals.elements.currentPlayerArea = new Konva.Group({
        x: currentPlayerAreaValues.x * winW,
        y: currentPlayerAreaValues.y * winH,
        height: currentPlayerAreaValues.h * winH,
        visible: !globals.replay,
    });
    globals.layers.UI.add(globals.elements.currentPlayerArea);

    let currentPlayerBox1Width = (currentPlayerAreaValues.w * 0.75);
    currentPlayerBox1Width -= currentPlayerAreaValues.spacing;
    globals.elements.currentPlayerRect1 = new Konva.Rect({
        width: currentPlayerBox1Width * winW,
        height: currentPlayerAreaValues.h * winH,
        cornerRadius: 0.01 * winW,
        fill: 'black',
        opacity: 0.2,
    });
    globals.elements.currentPlayerArea.add(globals.elements.currentPlayerRect1);

    const textValues = {
        w: currentPlayerBox1Width - (currentPlayerAreaValues.spacing * 4),
        w2: currentPlayerBox1Width - (currentPlayerAreaValues.spacing * 2),
    };
    textValues.x = (currentPlayerBox1Width / 2) - (textValues.w / 2);
    textValues.x2 = (currentPlayerBox1Width / 2) - (textValues.w2 / 2);

    globals.elements.currentPlayerText1 = new FitText({

y,
    width = BOUNDING_BOX_DEFAULTS.width,
    height = BOUNDING_BOX_DEFAULTS.height,
    text,
    id,
    color = colors(id)
  },
  onDragMove,
  onDragEnd,
  onDragging
) => {
  const group = new Konva.Group({ x, y, draggable: true, id, width, height })

  const { stroke, strokeWidth, opacity } = BOUNDING_BOX_DEFAULTS

  const rect = new Konva.Rect({
    x: 0,
    y: 0,
    width,
    height,
    stroke,
    strokeWidth,
    fill: color,
    opacity
  })
  group.add(rect)

  const topLeft = createAnchor({ x: 0, y: 0, name: ANCHOR_NAMES.topLeft })
  const topRight = createAnchor({ x: width, y: 0, name: ANCHOR_NAMES.topRight })
  const bottomRight = createAnchor({ x: width, y: height, name: ANCHOR_NAMES.bottomRight })
  const bottomLeft = createAnchor({ x: 0, y: height, name: ANCHOR_NAMES.bottomLeft })
  const anchors = [topLeft, topRight, bottomRight, bottomLeft]