Merge in react app code

From  sluchajfun and youtube-heardle-template

2 files changed, 73 insertions, 0 deletions

diff --git a/src/components/Game/index.styled.ts b/src/components/Game/index.styled.ts
new file mode 100644
index 0000000..7860f98
--- /dev/null
+++ b/src/components/Game/index.styled.ts
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const Buttons = styled.div`
+  margin-top: 5%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
diff --git a/src/components/Game/index.tsx b/src/components/Game/index.tsx
new file mode 100644
index 0000000..84ca282
--- /dev/null
+++ b/src/components/Game/index.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+import { GuessType } from "../../types/guess";
+import { Song } from "../../types/song";
+import { playTimes } from "../../constants";
+
+import { Button, Guess, Player, Search, Result } from "../";
+
+import * as Styled from "./index.styled";
+
+interface Props {
+  guesses: GuessType[];
+  todaysSolution: any;
+  currentTry: number;
+  didGuess: boolean;
+  setSelectedSong: React.Dispatch<React.SetStateAction<Song | undefined>>;
+  skip: () => void;
+  guess: () => void;
+}
+
+export function Game({
+  guesses,
+  todaysSolution,
+  currentTry,
+  didGuess,
+  setSelectedSong,
+  skip,
+  guess,
+}: Props) {
+  if (didGuess || currentTry === 6) {
+    return (
+      <Result
+        didGuess={didGuess}
+        currentTry={currentTry}
+        todaysSolution={todaysSolution}
+        guesses={guesses}
+      />
+    );
+  }
+  return (
+    <>
+      {guesses.map((guess: GuessType, index) => (
+        <Guess
+          key={index}
+          guess={guess}
+          isCorrect={guess.isCorrect}
+          active={index === currentTry}
+        />
+      ))}
+      <Player id={todaysSolution.youtubeId} currentTry={currentTry} />
+      <Search currentTry={currentTry} setSelectedSong={setSelectedSong} />
+
+      <Styled.Buttons>
+        <Button onClick={skip}>
+          {currentTry === 5
+            ? "Give Up"
+            : `Skip +${playTimes[currentTry] / 1000}s`}
+        </Button>
+        <Button variant="green" onClick={guess}>
+          Submit
+        </Button>
+      </Styled.Buttons>
+    </>
+  );
+}