Add guess states and exact artist match as a yellow

7 files changed, 39 insertions, 25 deletions

diff --git a/src/app.tsx b/src/app.tsx
index 1aab160..7cc348a 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import _ from "lodash";
 
 import { Song } from "./types/song";
-import { GuessType } from "./types/guess";
+import { GuessState, GuessType } from "./types/guess";
 
 import { todaysSolution } from "./helpers";
 
@@ -13,8 +13,7 @@ import * as Styled from "./app.styled";
 function App() {
   const initialGuess = {
     song: undefined,
-    skipped: false,
-    isCorrect: undefined,
+    state: undefined,
   } as GuessType;
 
   const [guesses, setGuesses] = React.useState<GuessType[]>(
@@ -121,8 +120,7 @@ function App() {
       const newGuesses = [...guesses];
       newGuesses[currentTry] = {
         song: undefined,
-        skipped: true,
-        isCorrect: undefined,
+        state: GuessState.Skipped,
       };
 
       return newGuesses;
@@ -132,7 +130,12 @@ function App() {
   }, [currentTry]);
 
   const guess = React.useCallback(() => {
-    const isCorrect = selectedSong === todaysSolution;
+    let state = GuessState.Incorrect;
+    if (selectedSong === todaysSolution) {
+      state = GuessState.Correct;
+    } else if (selectedSong?.artist === todaysSolution.artist) {
+      state = GuessState.PartiallyCorrect
+    }
 
     if (!selectedSong) {
       alert("Choose a song");
@@ -143,8 +146,7 @@ function App() {
       const newGuesses = [...guesses];
       newGuesses[currentTry] = {
         song: selectedSong,
-        skipped: false,
-        isCorrect: isCorrect,
+        state: state,
       };
 
       return newGuesses;
@@ -153,7 +155,7 @@ function App() {
     setCurrentTry((currentTry) => currentTry + 1);
     setSelectedSong(undefined);
 
-    if (isCorrect) {
+    if (state === GuessState.Correct) {
       setDidGuess(true);
     }
   }, [guesses, selectedSong]);
diff --git a/src/components/Game/index.tsx b/src/components/Game/index.tsx
index 6f6b736..2f4a2ec 100644
--- a/src/components/Game/index.tsx
+++ b/src/components/Game/index.tsx
@@ -43,7 +43,6 @@ export function Game({
         <Guess
           key={index}
           guess={guess}
-          isCorrect={guess.isCorrect}
           active={index === currentTry}
         />
       ))}
diff --git a/src/components/Guess/index.styled.ts b/src/components/Guess/index.styled.ts
index 5118b70..a235355 100644
--- a/src/components/Guess/index.styled.ts
+++ b/src/components/Guess/index.styled.ts
@@ -1,8 +1,10 @@
 import styled from "styled-components";
 
+import { GuessState } from "../../types/guess";
+
 export const Container = styled.div<{
   active: boolean;
-  isCorrect: boolean | undefined;
+  state: GuessState | undefined;
 }>`
   width: 100%;
   height: 45px;
@@ -12,10 +14,12 @@ export const Container = styled.div<{
   display: flex;
   align-items: center;
 
-  border-color: ${({ theme, active, isCorrect }) => {
+  border-color: ${({ theme, active, state }) => {
     if (active) {
       return theme.border;
-    } else if (isCorrect === false) {
+    } else if (state === GuessState.PartiallyCorrect) {
+      return theme.yellow;
+    } else if (state === GuessState.Incorrect) {
       return theme.red;
     } else {
       return theme.border100;
diff --git a/src/components/Guess/index.tsx b/src/components/Guess/index.tsx
index 2afd35c..ee5b2c2 100644
--- a/src/components/Guess/index.tsx
+++ b/src/components/Guess/index.tsx
@@ -1,23 +1,22 @@
 import React from "react";
 
-import { GuessType } from "../../types/guess";
+import { GuessType, GuessState } from "../../types/guess";
 
 import * as Styled from "./index.styled";
 
 interface Props {
   guess: GuessType;
-  isCorrect: boolean | undefined;
   active: boolean;
 }
 
-export function Guess({ guess, isCorrect, active }: Props) {
-  const { song, skipped } = guess;
+export function Guess({ guess, active }: Props) {
+  const { song, state } = guess;
   const [text, setText] = React.useState<string>("");
 
   React.useEffect(() => {
     if (song) {
       setText(`${song.artist} - ${song.name}`);
-    } else if (skipped) {
+    } else if (state === GuessState.Skipped) {
       setText("Skipped");
     } else {
       setText("");
@@ -25,7 +24,7 @@ export function Guess({ guess, isCorrect, active }: Props) {
   }, [guess]);
 
   return (
-    <Styled.Container active={active} isCorrect={isCorrect}>
+    <Styled.Container active={active} state={state}>
       <Styled.Text>{text}</Styled.Text>
     </Styled.Container>
   );
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
index 731ef36..1de6309 100644
--- a/src/constants/theme.ts
+++ b/src/constants/theme.ts
@@ -6,6 +6,7 @@ export const theme = {
   background100: "#002E3D",
 
   green: "#4DBB60",
+  yellow: "#FFFF00",
   red: "#FF0000",
   gray: "#E6E6E6",
 } as const;
diff --git a/src/helpers/scoreToEmoji.ts b/src/helpers/scoreToEmoji.ts
index 099a561..3d50d7d 100644
--- a/src/helpers/scoreToEmoji.ts
+++ b/src/helpers/scoreToEmoji.ts
@@ -1,4 +1,4 @@
-import { GuessType } from "../types/guess";
+import { GuessType, GuessState } from "../types/guess";
 import { appName, startDate } from "../constants";
 
 export function scoreToEmoji(guesses: GuessType[]): string {
@@ -7,6 +7,7 @@ export function scoreToEmoji(guesses: GuessType[]): string {
   const index = Math.floor((todaysDate.getTime() - startDate.getTime() )/msInDay) + 1 
   const emojis = {
     incorrect: "🟥",
+    partiallyCorrect: "🟨",
     correct: "🟩",
     skip: "⬜",
     empty: "⬛️",
@@ -16,11 +17,13 @@ export function scoreToEmoji(guesses: GuessType[]): string {
   let scoreEmoji = "";
 
   guesses.forEach((guess: GuessType) => {
-    if (guess.isCorrect === true) {
+    if (guess.state === GuessState.Correct) {
       scoreEmoji += emojis.correct;
-    } else if (guess.skipped === true) {
+    } else if (guess.state === GuessState.Skipped) {
       scoreEmoji += emojis.skip;
-    } else if (guess.isCorrect === false) {
+    } else if (guess.state === GuessState.PartiallyCorrect) {
+      scoreEmoji += emojis.partiallyCorrect;
+    } else if (guess.state === GuessState.Incorrect) {
       scoreEmoji += emojis.incorrect;
     } else {
       scoreEmoji += emojis.empty;
diff --git a/src/types/guess.ts b/src/types/guess.ts
index a84602d..ea5a6ad 100644
--- a/src/types/guess.ts
+++ b/src/types/guess.ts
@@ -2,6 +2,12 @@ import { Song } from "./song";
 
 export type GuessType = {
   song: Song | undefined;
-  skipped: boolean;
-  isCorrect: boolean | undefined;
+  state: GuessState | undefined;
 };
+
+export const enum GuessState {
+  Correct = 0,
+  PartiallyCorrect = 1,
+  Incorrect = 2,
+  Skipped = 3,
+}