Merged PR 4247: Match Settings molecule

Match Settings and ToolTip molecules.

Passing as props the `active` useState of the tooltip is not possible as the same instance would be referenced for all tooltips. If anyone would a suggestion for addressing this problem I would love to hear it.

###QA
In `/test` route press on Menu & Match Settings and check that the figma designs are respected.

frontend/src/molecules/match-info/index.ts

@@ -0,0 +1 @@
+export * from "./match-info";

frontend/src/molecules/match-info/match-info-description.tsx

@@ -0,0 +1,73 @@
+import { LightningIconSVG, RaisedHandIconSVG, RoundIconSVG, text } from "../../assets";
+import { BaseIcon, GeneralText, IconImage } from "../../atoms";
+import { color, fontWeights, spacing } from "../../design";
+import { MatchSettings } from "../../types";
+import { Die } from "../die";
+import { RowHeadingIcon } from "../text";
+import { HandImageWrapper } from "./styles";
+
+export type MatchInfoSettings = "players" | "dice" | "powerUps" | "drawRoundOffset" | "healAction" | "sound" | undefined;
+
+export const findInfo = (matchSettingsType: MatchInfoSettings, matchSettings: MatchSettings) => {
+  switch (matchSettingsType) {
+    case "players":
+      return (
+        <HandImageWrapper gap={spacing.xs} alignItems="center" justifyContent="center">
+          <IconImage src={RaisedHandIconSVG} />
+          <GeneralText transformText="none" color={color.black} fontWeight={fontWeights.regular}>
+            {text.param.xAmount(matchSettings.players)}
+          </GeneralText>
+        </HandImageWrapper>
+      );
+    case "dice":
+      return (
+        <RowHeadingIcon
+          headingFontWeight={fontWeights.regular}
+          heading={text.param.xAmount(matchSettings.dicePerPlayer)}
+          icon={<BaseIcon src={<Die borderColor={color.black} pipColor={color.black} dieColor={color.transparent} />} />}
+          iconPosition="row-reverse"
+          justifyContent="flex-end"
+          gap={spacing.xs}
+          transformText="none"
+          headingColor={color.black}
+        />
+      );
+    case "powerUps":
+      return (
+        <RowHeadingIcon
+          headingFontWeight={fontWeights.regular}
+          heading={text.param.xAmount(matchSettings.initialPowerUpAmount)}
+          icon={<BaseIcon src={<LightningIconSVG />} iconColor={color.transparent} strokeColor={color.black} />}
+          iconPosition="row-reverse"
+          justifyContent="flex-end"
+          gap={spacing.xxs}
+          transformText="none"
+          headingColor={color.black}
+        />
+      );
+    case "drawRoundOffset":
+      return (
+        <>
+          <BaseIcon src={<RoundIconSVG />} />
+          <GeneralText transformText="none" color={color.black} fontWeight={fontWeights.regular}>
+            {text.param.xRounds(matchSettings.drawRoundOffset)}
+          </GeneralText>
+        </>
+      );
+    case "healAction":
+      return (
+        <RowHeadingIcon
+          headingFontWeight={fontWeights.regular}
+          heading={text.param.xAmount(matchSettings.healPowerUpAmount)}
+          icon={<BaseIcon src={<LightningIconSVG />} iconColor={color.transparent} strokeColor={color.black} />}
+          iconPosition="row-reverse"
+          justifyContent="flex-end"
+          gap={spacing.xxs}
+          transformText="none"
+          headingColor={color.black}
+        />
+      );
+    default:
+      return <></>;
+  }
+};

frontend/src/molecules/match-info/match-info.tsx

@@ -0,0 +1,49 @@
+import { FC } from "react";
+import { spacing } from "../../design";
+import { BaseRow, Heading6 } from "../../atoms";
+import { MatchSettings } from "../../types";
+
+import { MatchInfoOverview } from "./styles";
+import { Tooltip } from "../tooltip";
+import { findInfo, MatchInfoSettings } from "./match-info-description";
+
+interface MatchInfoProps {
+  matchSettingsType: MatchInfoSettings;
+  title: string;
+  hasTooltip?: boolean;
+  tooltipTitle?: string;
+  tooltipDescription?: string;
+  matchSettings: MatchSettings;
+}
+
+/**
+ * @description - Match info molecule
+ * @param {matchSettingsType} - Type of match settings
+ * @param {title} - Title of match info
+ * @param {hasTooltip} - If there is a tooltip present
+ * @param {tooltipTitle} - Title of tooltip
+ * @param {tooltipDescription} - Description of tooltip
+ * @param {matchSettings} - Match settings
+ * @param {tooltipPosition} - Position of tooltip
+ */
+
+export const MatchInfo: FC<MatchInfoProps> = ({
+  title,
+  matchSettingsType,
+  hasTooltip,
+  tooltipDescription,
+  tooltipTitle,
+  matchSettings,
+}) => {
+  return (
+    <MatchInfoOverview alignItems="flex-start" padding={`${spacing.xs} ${spacing.sm}`} justifyContent="center">
+      <BaseRow gap={spacing.xxs} alignItems="center">
+        <Heading6>{title}</Heading6>
+        {hasTooltip && <Tooltip title={tooltipTitle} info={tooltipDescription} description={tooltipDescription} />}
+      </BaseRow>
+      <BaseRow gap={spacing.xs} alignItems="center" justifyContent="center">
+        {findInfo(matchSettingsType, matchSettings)}
+      </BaseRow>
+    </MatchInfoOverview>
+  );
+};

frontend/src/molecules/match-info/styles.ts

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { color, containerHeight, spacing } from "../../design";
+import { BaseColumn, BaseRow } from "../../atoms";
+
+interface Props {
+  padding?: string;
+}
+
+export const MatchInfoOverview = styled(BaseColumn)<Props>`
+  padding: ${({ padding }): string => padding ?? "0px"};
+  background: ${color.lightGrey};
+  min-height: ${containerHeight.sm};
+`;
+
+export const HandImageWrapper = styled(BaseRow)`
+  margin-top: ${spacing.xxs};
+`;

frontend/src/molecules/match-settings-overview/index.ts

@@ -0,0 +1 @@
+export * from "./match-settings-overview";

frontend/src/molecules/match-settings-overview/match-settings-overview.tsx

@@ -0,0 +1,87 @@
+import { FC } from "react";
+import { text } from "../../assets";
+import { buttonSize, color, spacing } from "../../design";
+import { TertiaryButton } from "../../molecules";
+import { getPowerUp } from "../../util";
+import { BaseRow, Heading1, Heading6, PopUpFooter } from "../../atoms";
+import { MatchInfoButtons, MatchSettingsOverviewComponent, Percentage, PowerUpContainer } from "./styles";
+import { MatchSettings } from "../../types";
+import { MatchInfo } from "../match-info";
+import { PowerUpDescription } from "../power-up-description";
+import { Tooltip } from "../tooltip";
+
+interface MatchSettingsOverviewProps {
+  matchSettings: MatchSettings;
+}
+
+/**
+ * @description The MatchSettingsOverview molecule displays the match settings of the current match.
+ * @param {MatchSettingsOverviewProps} props - The match settings props
+ * @param {plusAmount} - The amount of power-ups that are not visible
+ */
+
+export const MatchSettingsOverview: FC<MatchSettingsOverviewProps> = ({ matchSettings }) => {
+  const powerUpProbabilities = matchSettings.powerUpProbability.filter((powerUp) => powerUp.probability > 0);
+  const powerUps = matchSettings.powerUpProbability.map((powerUp) => getPowerUp(powerUp.id));
+  return (
+    <MatchSettingsOverviewComponent>
+      <Heading1 customcolor={color.mediumGrey}>{text.match.matchSettings}</Heading1>
+      <MatchInfoButtons gap={spacing.xxs}>
+        <MatchInfo title={text.match.players} matchSettingsType="players" matchSettings={matchSettings} />
+        <MatchInfo title={text.match.dice} matchSettingsType="dice" matchSettings={matchSettings} />
+        <MatchInfo
+          title={text.match.powerUpPP}
+          matchSettingsType="powerUps"
+          matchSettings={matchSettings}
+          tooltipTitle={text.general.toolTipPowerUpTitle}
+          tooltipDescription={text.general.toolTipPowerUpInfo}
+          hasTooltip
+        />
+        <MatchInfo
+          title={text.match.drawRoundOffset}
+          matchSettingsType="drawRoundOffset"
+          matchSettings={matchSettings}
+          tooltipTitle={text.general.toolTipDrawRoundOffsetTitle}
+          tooltipDescription={text.general.toolTipDrawRoundOffsetInfo}
+          hasTooltip
+        />
+        <MatchInfo
+          title={text.match.healAction}
+          matchSettingsType="healAction"
+          matchSettings={matchSettings}
+          tooltipTitle={text.general.toolTipHealTitle}
+          tooltipDescription={text.general.toolTipHealInfo}
+          hasTooltip
+        />
+        <MatchInfo
+          title={text.general.sound}
+          matchSettingsType="sound"
+          matchSettings={matchSettings}
+          tooltipTitle={text.general.toolTipSoundTitle}
+          tooltipDescription={text.general.toolTipSoundInfo}
+          hasTooltip
+        />
+      </MatchInfoButtons>
+      <Heading6>{text.match.powerUpTypeOnTheTable}</Heading6>
+      <BaseRow justifyContent="flex-end">
+        <TertiaryButton
+          text={text.newMatch.chance}
+          icon={
+            <Tooltip title={text.general.toolTipPowerUpTypeTitle} description={text.general.toolTipPowerUpTypeInfo} infoPosition="right" />
+          }
+          padding={buttonSize.xl}
+        />
+      </BaseRow>
+      {powerUpProbabilities.map((powerUpProbability, index) => {
+        const powerUp = powerUps[index];
+        return (
+          <PowerUpContainer key={powerUps[index]?.id} alignItems="flex-start">
+            {powerUp && <PowerUpDescription powerUp={powerUp} gap={spacing.xxs} />}
+            <Percentage>{text.param.percentageAmount(powerUpProbability.probability)}</Percentage>
+          </PowerUpContainer>
+        );
+      })}
+      <PopUpFooter />
+    </MatchSettingsOverviewComponent>
+  );
+};

frontend/src/molecules/match-settings-overview/styles.ts

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import { containerWidth, spacing } from "../../design";
+import { BodyText, BaseRow } from "../../atoms";
+
+export const MatchSettingsOverviewComponent = styled.section`
+  padding: ${spacing.xl};
+  height: 100%;
+  width: ${containerWidth.xxxl};
+  overflow-y: scroll;
+`;
+
+export const MatchInfoButtons = styled(BaseRow)`
+  margin-top: ${spacing.md};
+  margin-bottom: ${spacing.xl};
+  width: ${containerWidth.xxxl};
+`;
+
+export const Percentage = styled(BodyText)`
+  padding: ${spacing.xs} 0px ${spacing.xs} ${spacing.xs};
+`;
+
+export const PowerUpContainer = styled(BaseRow)`
+  margin-bottom: ${spacing.ms};
+`;

frontend/src/molecules/power-up-description/index.ts

@@ -0,0 +1 @@
+export * from "./power-up-description";

frontend/src/molecules/power-up-description/power-up-description.tsx

@@ -0,0 +1,37 @@
+import { FC } from "react";
+import { LightningIconSVG } from "../../assets";
+import { color } from "../../design";
+import { PowerUp } from "../../types";
+import { Heading6, BodyText, BaseIcon, BaseRow } from "../../atoms";
+import { DescriptionContainer, PowerUpDescriptionWrapper } from "./styles";
+import { PowerUpSmall } from "../power-up";
+
+interface PowerUpDescriptionProps {
+  powerUp: PowerUp;
+  hasLightningIcon?: boolean;
+  gap?: string;
+  plusAmount?: number;
+}
+
+/**
+ * @description Molecule for power-up description.
+ * @param {powerUp} - Power-up object
+ * @param {hasLightningIcon} - If the power-up has a lightning icon
+ */
+
+export const PowerUpDescription: FC<PowerUpDescriptionProps> = ({ powerUp, hasLightningIcon = false, plusAmount, gap }) => {
+  return (
+    <>
+      <PowerUpSmall powerUpName={powerUp.name} powerUpImage={powerUp.cardImage} plusAmount={plusAmount} />
+      <DescriptionContainer>
+        <PowerUpDescriptionWrapper>
+          <BaseRow gap={gap}>
+            {hasLightningIcon && <BaseIcon src={<LightningIconSVG />} strokeColor={color.mediumGrey} />}
+            <Heading6>{powerUp.name}</Heading6>
+          </BaseRow>
+          <BodyText customcolor={color.darkGrey}>{powerUp.shortDescription}</BodyText>
+        </PowerUpDescriptionWrapper>
+      </DescriptionContainer>
+    </>
+  );
+};

frontend/src/molecules/power-up-description/styles.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { spacing } from "../../design";
+import { GeneralContentWrapper } from "../../atoms";
+
+export const DescriptionContainer = styled.div`
+  flex: 11;
+  padding: 0px 0px ${spacing.xs} ${spacing.xs};
+`;
+
+export const PowerUpDescriptionWrapper = styled(GeneralContentWrapper)`
+  margin-left: ${spacing.s};
+  margin-top: 0px;
+`;

frontend/src/molecules/power-up/power-up-small.tsx

@@ -7,19 +7,21 @@ interface PowerUpSmallProps {
   powerUpName?: string;
   powerUpImage?: string;
   isEmpty?: boolean;
+  plusAmount?: number;
 }
 
 /**
  * @param {string} powerUpName - The name of the powerUp used for the alt text
  * @param {string} powerUpImage - Image of the powerUp
  * @param {string} isEmpty - If the powerUp is used to display the hidden amount of powerUps. No powerUp image is shown but a number.
+ * @param {number} plusAmount - The amount of powerUps that are not visible, isEmpty prop has to be true
  */
 
-export const PowerUpSmall: FC<PowerUpSmallProps> = ({ powerUpName, powerUpImage, isEmpty = false }) => {
+export const PowerUpSmall: FC<PowerUpSmallProps> = ({ powerUpName, powerUpImage, isEmpty = false, plusAmount = 0 }) => {
   return (
     <Card isSmall isEmpty={isEmpty}>
       <FullHeightColumn alignItems="center" justifyContent="center">
-        {isEmpty ? <GeneralText>{text.param.plusAmount(4)}</GeneralText> : <CenteredImage src={powerUpImage} alt={powerUpName} />}
+        {isEmpty ? <GeneralText>{text.param.plusAmount(plusAmount)}</GeneralText> : <CenteredImage src={powerUpImage} alt={powerUpName} />}
       </FullHeightColumn>
     </Card>
   );

frontend/src/molecules/tooltip/index.ts

@@ -0,0 +1,3 @@
+export * from "./tooltip";
+export * from "./tooltip-info";
+export * from "./styles";

frontend/src/molecules/tooltip/styles.ts

@@ -0,0 +1,36 @@
+import styled from "@emotion/styled";
+import { tooltipAnimation } from "../../atoms";
+import { containerWidth, spacing, zIndex as designZIndex } from "../../design";
+
+export const TooltipContainer = styled.section``;
+
+interface Props {
+  zIndex?: number;
+}
+
+export const TooltipWrapper = styled.div<Props>`
+  position: relative;
+  z-index: ${({ zIndex }) => zIndex ?? designZIndex.background};
+`;
+
+export const TooltipContentWrapper = styled.div`
+  position: absolute;
+  animation: ${tooltipAnimation} 0.5s;
+  &.top {
+    top: "calc(${spacing.xxl} * -1)";
+  }
+  &.bottom {
+    bottom: calc(${spacing.xxl} * -1);
+  }
+  &.left {
+    left: auto;
+    right: calc(100% - ${spacing.xxl} * 4);
+    top: 0%;
+    transform: translateX(0) translateY(0);
+  }
+  &.right {
+    left: -${containerWidth.md};
+    top: 0%;
+    transform: translateX(0) translateY(0);
+  }
+`;