project: clean up types, test and build

Author: Aadv1k

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

@@ -2,9 +2,7 @@ import { useState } from 'react'
 
 import styled from "styled-components";
 
-import { ThemeProvider, createGlobalStyle } from 'styled-components';
-
-import { PrimaryButton } from "./components/Button";
+import { ThemeProvider } from 'styled-components';
 
 import theme from "./Theme";
 import GlobalStyle from "./GlobalStyle";

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

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

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

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { GameProps, Gestures } from "../types";
 import Gesture from "./Gesture";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import GameBackground from "../assets/bg-triangle.svg";
 
 import MoveState from "./MoveState";
@@ -41,7 +41,7 @@ function getMove(): Gestures {
 
 export default function ({ setScore, score }: GameProps) {
     const [currentMove, setCurrentMove] = useState<Gestures | null>(null);
-    const [opponentMove, setOpponentMove] = useState<Gestures>(getMove());
+    const [opponentMove, _] = useState<Gestures>(getMove());
     const gestures = [Gestures.rock, Gestures.paper, Gestures.scissors];
 
 

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

@@ -4,7 +4,7 @@ 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`
+const GestureBase = styled("div")<GestureProps>`
   width: 120px;
   height: 120px;
   border-radius: 999px;

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

@@ -154,17 +154,19 @@ export default function Move(props: MoveStateProps) {
     const outcomeMessage = getOutcomeMessage(outcome);
     setMessage(outcomeMessage);
 
+    let score = props.score;
+
     if (outcome === GameOutcome.PlayerWins) {
-      props.setScore(prevScore => prevScore + 3);
+      props.setScore(score + 3);
     } else if (outcome === GameOutcome.HouseWins) {
-      props.setScore(prevScore => prevScore - 2);
+      props.setScore(score - 2);
     } else if (outcome === GameOutcome.Tie) {
-      props.setScore(prevScore => prevScore + 1);
+      props.setScore(score + 1);
     }
   }, [props.player, props.house]);
 
-  const handleClick = () => {
-    props.onClick();
+  const handleClick = (e: any) => {
+    (props.onClick as any)(e);
   };
 
   return (

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

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { ScoreBoardProps } from "./types";
+import { ScoreBoardProps } from "../types";
 
 const Box = styled.div`
     display: flex;
@@ -65,7 +65,7 @@ export default function ({ score, gestures }: ScoreBoardProps ) {
     return (
         <ScoreContainer>
             <Box>
-                {gestures.map(e => <Gesture key={e}>{e}</Gesture>)}
+                {gestures.map((e: any) => <Gesture key={e}>{e}</Gesture>)}
             </Box>
 
             <ScoreBox>

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

@@ -26,12 +26,13 @@ export interface GameProps {
 export interface GestureProps {
     type: Gestures;
     onClick?: (e: any) => void;
+    isWinner?: boolean;
 }
 
 
 export interface MoveStateProps {
-    player: Gesture,
-    house: Gesture,
+    player: Gestures,
+    house: Gestures,
     onClick?: (e: any) => void;
     setScore: (e: number) => void;
     score: number;

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

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "./src/assets.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }