Merged PR 4290: Power up animation

This is when u gain a new power up in your hand.

To QA this go to `/test`

There is the match layout new the top and a button add power up.

If you look in the hud, then press add power up.
- The number of power ups increase.
- The background of the hud flashes white.
- A plus one number appears, near the lightning icon. i.e lighting icon  x2. This number slides up
- A new power up appears, it grows from small to large.

Related work items: #19520

frontend/src/assets/text/general.ts

@@ -19,6 +19,7 @@ export const general = {
   inProgress: "in progress",
   // Normal text
   rollingDice: "rolling dice",
+  plusOne: "+1",
   chat: "chat",
   history: "history",
   defaultTime: "0:00",

frontend/src/atoms/animations.ts

@@ -1,5 +1,5 @@
 import { keyframes } from "@emotion/react";
-import { color, opacity, spacing, zIndex } from "../design";
+import { color, opacity, powerUp, spacing, zIndex } from "../design";
 
 // TODO: delete
 // Hands
@@ -48,6 +48,17 @@ export const fadeIn = keyframes`
   100% { opacity:  ${opacity.visible}; }
 `;
 
+export const grow = keyframes`
+  from {
+    opacity: ${opacity.hidden};
+    transform: scale(0);
+  }
+  to {
+    opacity: ${opacity.visible};
+    transform: scale(1);
+  }
+`;
+
 export const fadeInPop = keyframes`
   0% {
     opacity: ${opacity.hidden};
@@ -77,6 +88,48 @@ export const slideUp = keyframes`
   }
 `;
 
+export const fadeTransformUp = keyframes`
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: ${opacity.background};
+  }
+  10%{
+    opacity: ${opacity.visible};
+  }
+  100% {
+    -webkit-transform: translateY(-${powerUp.xl});
+    transform: translateY(-${powerUp.xl});
+    opacity: ${opacity.hidden};
+  }
+`;
+
+export const flash = keyframes`
+  0% {
+    background: ${color.lightGrey};
+  }
+  50%{
+    background: ${color.cloudWhite};
+  }
+  100% {
+    background: ${color.lightGrey};
+  }
+
+`;
+
+export const scaleTransformation = keyframes`
+    0% {
+      opacity: ${opacity.hidden};
+    }
+    50% {
+      transform: scale(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+`;
+
 export const slideRight = keyframes`
 
   0% {

frontend/src/atoms/layout.ts

@@ -1,7 +1,9 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import { color, layoutHeight, layoutWidth } from "../design";
 import { getSidebarHeight, switchStyle } from "../util";
+import { flash } from "./animations";
 
 interface Props {
   active?: boolean;
@@ -53,8 +55,20 @@ export const PlayerBox = styled(LayoutBase)`
   border-right: 1px solid ${color.mediumGrey};
 `;
 
-export const HUDPlayerBox = styled(HUDBlock)`
+interface HUDProps {
+  showPowerUpAnimation?: boolean;
+}
+
+export const HUDPlayerBox = styled(HUDBlock)<HUDProps>`
   width: ${layoutWidth.sm};
+  ${({ showPowerUpAnimation }) =>
+    showPowerUpAnimation &&
+    css`
+      animation: ${flash};
+      animation-duration: 0.6s;
+      animation-delay: 0s;
+      animation-fill-mode: forwards;
+    `};
 `;
 
 export const PlayerMenuBox = styled(LayoutBase)<PlayerMenuProps>`

frontend/src/design/index.ts

@@ -16,3 +16,4 @@ export * from "./mobile-layout";
 export * from "./die";
 export * from "./patterns";
 export * from "./avatar";
+export * from "./power-up";

frontend/src/design/power-up.ts

@@ -0,0 +1,10 @@
+export const POWER_UPS_IN_VIEW = 5;
+
+export const powerUp = {
+  xxs: "clamp(10px, 1.04vw + 0px, 40px)",
+  xs: "0.5vh",
+  sm: "1.57vw",
+  md: "2vw",
+  lg: "3.63vh",
+  xl: "4.5vh",
+};

frontend/src/hooks/index.ts

@@ -4,3 +4,5 @@ export * from "./use-observer";
 export * from "./use-sound";
 export * from "./use-analytics";
 export * from "./use-mobile";
+export * from "./use-mount";
+export * from "./use-update-value";

frontend/src/hooks/use-mount.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * This hook is used to check if the component/page has already been mounted.
+ * It is used when you only want an effect to happen after the component is already mounted.
+ */
+
+export const useIsMounted = () => {
+  const isMountRef = useRef(true);
+
+  useEffect(() => {
+    isMountRef.current = false;
+  }, []);
+
+  return isMountRef.current;
+};

frontend/src/hooks/use-update-value.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+import { NOTIFICATION_VISIBILITY_TIME } from "../constants";
+
+/**
+ * This hook is used to in conjunction with a timer to return a true value after the timer amount has passed.
+ * Its initial value is false and will return true once the timer has run out.
+ */
+
+export const useUpdateValue = () => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShow(true);
+    }, NOTIFICATION_VISIBILITY_TIME);
+
+    return () => clearTimeout(timeout);
+  }, [show]);
+};

frontend/src/molecules/hud-player/hud-player.tsx

@@ -10,20 +10,22 @@ import { HudPlayerWrapper } from "./styles";
 interface Props {
   player: PlayerPublic;
   isHovered?: boolean;
+  showPowerUpAnimation?: boolean;
 }
 
 /**
  * This component is for the player avatar.
  * @param {PlayerPublic} player - The hud player.
  * @param {boolean} isHovered - A boolean to define if the hud is being hovered.
+ * @param {boolean} showPowerUpAnimation - A boolean used to begin the power up animation. The animation occurs when a new power up is added to your hand.
  */
 
-export const HudPlayer: FC<Props> = ({ player, isHovered = false }) => {
+export const HudPlayer: FC<Props> = ({ player, isHovered = false, showPowerUpAnimation = false }) => {
   const avatarName = avatars[player.avatarId].name;
   const avatar = handProportion(avatarName);
 
   return (
-    <HUDPlayerBox active={player.isActive} hover={isHovered} enabled={isHovered}>
+    <HUDPlayerBox active={player.isActive} hover={isHovered} enabled={isHovered} showPowerUpAnimation={showPowerUpAnimation}>
       <HudPlayerWrapper justifyContent="center">
         <PlayerAvatar
           height={sidebarAvatarHeights[6]}

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

@@ -3,48 +3,58 @@ import { LightningIconSVG, text } from "../../assets";
 import { BaseIcon, BaseRow } from "../../atoms";
 import { color, fontSizes, fontWeights, lineHeights, spacing } from "../../design";
 import { PowerUpId } from "../../types";
-import { getPowerUp, getPowerUpsShown } from "../../util";
+import { getPowerUp } from "../../util";
 import { PowerUpSmall } from "../power-up/power-up-small";
 import { RowHeadingIcon } from "../text";
-import { PowerUpRowWrapper } from "./styles";
+import { AddPowerUp, PowerUpRowContainer, PowerUpRowWrapper } from "./styles";
 
 interface Props {
   powerUpIds?: PowerUpId[];
-  width: number;
   isPowerUpDisabled?: boolean;
   onClick: () => void;
+  showPowerUpAnimation?: boolean;
 }
 
 /** This component shows a list of power ups in the hud. It uses the small power up cards
  * @param {PowerUp} powerUpIds - An array of Power-up ids that needs to be displayed in a list
  * @param {boolean} isPowerUpDisabled - Is true when the powerUp can't be used. A lock icon appears on the power-ups
  * @param {string} width - is the width of the power up list
  * @param {Function} onClick - Opens up a modal when the power up list is clicked
+ * @param {boolean} showPowerUpAnimation - A boolean used to begin the power up animation. The animation occurs when a new power up is added to your hand.
  */
 
-export const PowerUpRow: FC<Props> = ({ powerUpIds, width, isPowerUpDisabled, onClick }) => {
+export const PowerUpRow: FC<Props> = ({ powerUpIds, isPowerUpDisabled, showPowerUpAnimation = false, onClick }) => {
   if (!powerUpIds || !powerUpIds.length) return <></>;
-  const powerUpsShown = getPowerUpsShown(width);
 
   return (
-    <BaseRow gap={spacing.xs}>
-      <RowHeadingIcon
-        icon={<BaseIcon src={<LightningIconSVG />} iconColor={color.transparent} strokeColor={color.black} />}
-        heading={text.param.xAmount(powerUpIds.length)}
-        headingFontSize={fontSizes.body}
-        headingLineHeight={lineHeights.body}
-        headingFontWeight={fontWeights.light}
-        iconPosition="row-reverse"
-        transformText="lowercase"
-      />
-      <PowerUpRowWrapper gap={spacing.xs} onClick={onClick}>
-        {powerUpIds.slice(0, powerUpsShown).map((powerUpId, i) => {
+    <BaseRow gap={spacing.s}>
+      <PowerUpRowContainer>
+        <RowHeadingIcon
+          icon={<BaseIcon src={<LightningIconSVG />} iconColor={color.transparent} strokeColor={color.black} />}
+          heading={text.param.xAmount(powerUpIds.length)}
+          headingFontSize={fontSizes.body}
+          headingLineHeight={lineHeights.body}
+          headingFontWeight={fontWeights.light}
+          iconPosition="row-reverse"
+          transformText="lowercase"
+        />
+        <AddPowerUp fontWeight={fontWeights.bolder} transformText="none" showPowerUpAnimation={showPowerUpAnimation}>
+          {text.general.plusOne}
+        </AddPowerUp>
+      </PowerUpRowContainer>
+      <PowerUpRowWrapper gap={spacing.xs} onClick={onClick} amount={powerUpIds.length}>
+        {powerUpIds.map((powerUpId, i) => {
           const powerUp = getPowerUp(powerUpId);
           return (
-            <PowerUpSmall key={i} powerUpName={powerUp?.name} powerUpImage={powerUp?.cardImage} isPowerUpDisabled={isPowerUpDisabled} />
+            <PowerUpSmall
+              key={i}
+              powerUpName={powerUp?.name}
+              powerUpImage={powerUp?.cardImage}
+              isPowerUpDisabled={isPowerUpDisabled}
+              pointer
+            />
           );
         })}
-        <PowerUpSmall isEmpty isPowerUpDisabled={isPowerUpDisabled} plusAmount={powerUpIds.length - powerUpsShown} padding={spacing.xs} />
       </PowerUpRowWrapper>
     </BaseRow>
   );