project: implement animation for the app

Author: Aadv1k

packages/frontendmentor/fem-rock-paper-scissors-game/src/Theme.tsx

@@ -33,5 +33,8 @@ export default {
     darkText: 'hsl(229, 25%, 31%)',
     scoreText: 'hsl(229, 64%, 46%)',
     headerOutline: 'hsl(217, 16%, 45%)',
-    white: "#ffffff"
+    white: "#ffffff",
+
+    shadowInner: "#2b3956",
+    shadowOuter: "#273655"
 }

packages/frontendmentor/fem-rock-paper-scissors-game/src/components/Game.tsx

@@ -12,6 +12,8 @@ const GameContainer = styled.div`
     place-items: center;
     gap: 4.25rem;
 
+    margin-top: 2rem;
+
     background-image: url(${GameBackground});
     background-position: center;
     background-repeat: no-repeat;

packages/frontendmentor/fem-rock-paper-scissors-game/src/components/Gesture.tsx

@@ -1,55 +1,65 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import { GestureProps, Gestures } from "../types";
 
 import RockIcon from "../assets/icon-rock.svg";
 import PaperIcon from "../assets/icon-paper.svg";
 import ScissorsIcon from "../assets/icon-scissors.svg";
 
-
 const GestureBase = styled.div`
     width: 120px;
     height: 120px;
 
     border-radius: 999px;
 
+    z-index: ${props => props.isWinner ? `-1` : ""};
+
+    box-shadow: ${props => props.isWinner ? `
+        0 0 0 40px hsl(214, 47%, 23%),
+        0 0 0 80px hsl(214, 47%, 21%)` : "none"};
+
     display: flex;
     align-items: center;
     justify-content: center;
 
     cursor: pointer;
-    transition: box-shadow 250ms ease, transform 500ms ease;
+    transition: box-shadow 250ms ease, opacity 500ms ease-out;
 
     &:active {
-        transform: scale(.7);
+        opacity: .75;
+    }
+
+    @media screen and (min-width: 650px) {
+        width: 150px;
+        height: 150px;
     }
 
     @media screen and (max-width: 320px) {
         width: 100px;
         height: 100px;
     }
-
-
 `
 
 const GestureInnerBase = styled.div`
   width: 75%;
   height: 75%;
+   
 
 
     background-repeat: no-repeat;
     background-position: center;
     background-size: 55%;
     border-radius: 100px;
+
   background-color: ${props => props.theme.white};
 `
 
 const GestureRock = styled(GestureBase)`
     background-image: linear-gradient(180deg, ${props => props.theme.rockGradient.from}, ${props => props.theme.rockGradient.to});
 
 
-    @media (hover: hover) {
+@media (hover: hover) {
         &:hover {
-box-shadow: ${props => props.theme.rockGradient.from} 0px 5px 15px 0px;
+            box-shadow: ${props => props.theme.rockGradient.from} 0px 5px 15px 0px;
         }
     }
 
@@ -97,19 +107,19 @@ function getGestureComponentFromType(props: GestureProps) {
     switch (props.type) {
             case Gestures.rock:
               return (
-                  <GestureRock onClick={props.onClick}>
+                  <GestureRock onClick={props.onClick} isWinner={props.isWinner}>
                       <GestureInnerRock />
                   </GestureRock>
               )
             case Gestures.paper:
               return (
-                  <GesturePaper onClick={props.onClick}>
+                  <GesturePaper onClick={props.onClick} isWinner={props.isWinner}>
                       <GestureInnerPaper />
                   </GesturePaper>
               )
             case Gestures.scissors:
               return (
-                  <GestureScissors onClick={props.onClick}>
+                  <GestureScissors onClick={props.onClick} isWinner={props.isWinner}>
                       <GestureInnerScissors />
                   </GestureScissors>
               )

packages/frontendmentor/fem-rock-paper-scissors-game/src/components/Modal.tsx

@@ -0,0 +1,5 @@
+import styled  from "styled-components";
+
+export default function {
+
+}

packages/frontendmentor/fem-rock-paper-scissors-game/src/components/MoveState.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import Gesture from "./Gesture";
 
 import { useState, useEffect } from "react";
@@ -7,11 +7,14 @@ import { MoveStateProps, GameOutcome, Gestures } from "../types";
 
 import { PrimaryButton } from "./Button";
 
+
+const ANIMATION_DURATION_IN_MS = 1000; 
+
 const MoveContainer = styled.div`
     display: flex;
     flex-direction: column;
     gap: 2rem;
-    margin-top: 1.5rem;
+    margin-top: 2rem;
 
     @media screen and (min-width: 650px) {
       width: 60%;
@@ -21,6 +24,17 @@ const MoveContainer = styled.div`
 
 `
 
+const statusFadeOut = keyframes`
+  from {
+    opacity: 0;
+
+  }
+
+  to: {
+    opacity: 1;
+  }
+`
+
 const StatusContainer = styled.div`
     display: flex;
     flex-direction: column;
@@ -35,19 +49,46 @@ const StatusContainer = styled.div`
 
     @media screen and (min-width: 650px) {
       position: absolute; 
-
-      left: 50%;
       top: 50%;
-
+      left: 50%;
       transform: translate(-50%, -50%);
+      animation: ${statusFadeOut} ${ANIMATION_DURATION_IN_MS + 1000}ms forwards;
+        animation-timing-function: ease-in-out;
     }
 `
 
+const gestureGoRight = keyframes`
+  from {
+      left: 50%;
+      transform: translateX(-50%);
+  }
+
+  to {
+      left: 100%;
+      transform: translateX(-50%);
+
+  }
+`
+
+const gestureGoLeft = keyframes`
+  from {
+      left: 50%;
+      transform: translateX(-50%);
+  }
+
+
+  to {
+      left: 0;
+      transform: translateX(-50%);
+  }
+`
+
+
+
 const GestureContainer = styled.div`
     display: flex;
     gap: 1.75rem;
     justify-content: center;
-
     > div {
         display: flex;
         flex-direction: column;
@@ -63,8 +104,25 @@ const GestureContainer = styled.div`
     }
 
     @media screen and (min-width: 650px) {
-        width: 100%;
-        justify-content: space-between; 
+        display: block;
+        position: relative;
+        width: 80%;
+        margin-inline: auto;
+        height: 200px;
+
+        > div {
+            animation-timing-function: ease-in;
+        }
+
+        > div:nth-child(2) {
+            position: absolute;
+            animation: ${gestureGoRight} ${ANIMATION_DURATION_IN_MS}ms forwards;
+        }
+
+        > div:nth-child(1) {
+            position: absolute;
+            animation: ${gestureGoLeft} ${ANIMATION_DURATION_IN_MS}ms forwards;
+        }
     }
 `;
 
@@ -97,27 +155,29 @@ function getOutcomeMessage(outcome: GameOutcome): string {
 
 export default function (props: MoveStateProps) {
     const [message, setMessage] = useState<string>("");
+    const [gameOutcome, setGameOutcome] = useState<GameOutcome>("");
 
     useEffect(() => {
-        const gameOutcome = getGameOutcome(props.player, props.house);
+        setGameOutcome(getGameOutcome(props.player, props.house));
+
         const message = getOutcomeMessage(gameOutcome);
         setMessage(message);
 
         if (gameOutcome === GameOutcome.PlayerWins) props.setScore(props.score + 3);
         if (gameOutcome === GameOutcome.HouseWins) props.setScore(props.score - 2);
         if (gameOutcome === GameOutcome.Tie) props.setScore(props.score + 1);
-    }, [])
+    }, [gameOutcome])
 
     return (
         <MoveContainer>
             <GestureContainer>
                 <div>
-                    <Gesture type={props.player} />
+                    <Gesture type={props.player} isWinner={gameOutcome === GameOutcome.PlayerWins} />
                     <p>you picked</p> 
                 </div>
 
                 <div>
-                    <Gesture type={props.house} />
+                    <Gesture type={props.house} isWinner={gameOutcome === GameOutcome.HouseWins}/>
                     <p>house picked</p> 
                 </div>
             </GestureContainer>

packages/frontendmentor/fem-rock-paper-scissors-game/src/components/ScoreBoard.tsx

@@ -12,6 +12,8 @@ const ScoreContainer = styled.div`
     display: flex;
     border-radius: .5rem;
 
+    z-index: 12;
+
     padding: .75rem;
 
     width: 90%;

packages/frontendmentor/fem-rock-paper-scissors-game/src/types.ts

@@ -34,5 +34,6 @@ export interface MoveStateProps {
     house: Gesture,
     onClick?: (e: any) => void;
     setScore: (e: number) => void;
-    score: number
+    score: number;
+    isWinner?: boolean
 }