From c1f35b820791a26e6b9d0f48c929a078b30809f7 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Mon, 25 Jul 2022 19:36:27 +0500
Subject: [PATCH] little fixes

---
 src/components/CardsField/CardsField.tsx  |  7 ++---
 src/pages/MatchGame/MatchGame.tsx         | 11 ++++---
 src/pages/MatchMenu/MatchMenu.module.scss | 21 +++++++++++++
 src/pages/MatchMenu/MatchMenu.tsx         | 36 ++++++++++++++++++-----
 4 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/CardsField/CardsField.tsx b/src/components/CardsField/CardsField.tsx
index e4e8e40..862b448 100644
--- a/src/components/CardsField/CardsField.tsx
+++ b/src/components/CardsField/CardsField.tsx
@@ -99,9 +99,8 @@ const CardsField: React.FC<CardsFieldProps> = ({cards, isGameStarted = false, fi
   }
 
   useEffect(() => {
-    if (isAllCardsMatched(cardsState)) {
-      setTimeout(finishGameCallback, 800);
-    }
+    if (isAllCardsMatched(cardsState)) setTimeout(finishGameCallback, 800);
+    if (isGameStarted) localStorage.setItem('match-game:cards', JSON.stringify(cardsState));
   }, [cardsState])
 
   useEffect(() => {
@@ -115,7 +114,7 @@ const CardsField: React.FC<CardsFieldProps> = ({cards, isGameStarted = false, fi
   useEffect(() => {
     setCardsState(prev => (prev.map(el => ({...el, disabled: !isGameStarted, toggled: !isGameStarted && isNewGame}))));
     if (isGameStarted) localStorage.setItem('match-game:cards', JSON.stringify(cardsState));
-  }, [isGameStarted, isNewGame])
+  }, [isGameStarted])
 
   useEffect(() => {
     if (isNewGame) setCardsState(cards.map(el => createCard(el)))
diff --git a/src/pages/MatchGame/MatchGame.tsx b/src/pages/MatchGame/MatchGame.tsx
index 194fc36..bee61ec 100644
--- a/src/pages/MatchGame/MatchGame.tsx
+++ b/src/pages/MatchGame/MatchGame.tsx
@@ -1,12 +1,11 @@
-import CardsField from 'components/CardsField/CardsField';
-import FinishedField from 'components/FinishedField/FinishedField';
-
+import React, { useEffect, useState } from 'react';
 import BottomPanel from 'components/UI/BottomPanel/BottomPanel';
 import Button from 'components/UI/Button/Button';
+import CardsField from 'components/CardsField/CardsField';
+import FinishedField from 'components/FinishedField/FinishedField';
 import Timer from 'components/UI/Timer/Timer';
-import { useMatchGame } from 'context/MatchGameContext';
-import React, { useEffect, useState } from 'react';
 import { createCards, randomizeElementInArray } from 'src/utils';
+import { useMatchGame } from 'context/MatchGameContext';
 
 interface MatchGameProps {
   isNewGame: boolean;
@@ -36,7 +35,7 @@ const MatchGame: React.FC<MatchGameProps> = ({isNewGame}) => {
 
   useEffect(() => {
     if (isNewGame) resetGameProgress?.();
-  }, [isNewGame, resetGameProgress])
+  }, [isNewGame])
 
   useEffect(() => {
     if (isGameFinished) {
diff --git a/src/pages/MatchMenu/MatchMenu.module.scss b/src/pages/MatchMenu/MatchMenu.module.scss
index e69de29..05167d4 100644
--- a/src/pages/MatchMenu/MatchMenu.module.scss
+++ b/src/pages/MatchMenu/MatchMenu.module.scss
@@ -0,0 +1,21 @@
+.MatchMenu {
+  color: #ffffff;
+  font-size: 40px;
+
+  .button {
+    width: 240px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    li {
+      text-align: center;
+      cursor: pointer;
+
+      &:focus, &:hover {
+        color: coral;
+      }
+    }
+  }
+}
diff --git a/src/pages/MatchMenu/MatchMenu.tsx b/src/pages/MatchMenu/MatchMenu.tsx
index 4da339c..920171b 100644
--- a/src/pages/MatchMenu/MatchMenu.tsx
+++ b/src/pages/MatchMenu/MatchMenu.tsx
@@ -1,13 +1,28 @@
+import Button from 'components/UI/Button/Button';
 import { MenuItem, useMatchGame } from 'context/MatchGameContext';
 import React from 'react';
 
+import cls from './MatchMenu.module.scss'
+
 type GameMenuProps = {
 
 }
+type MenuItemType = {
+  itemName: MenuItem;
+  itemPlaceholder: string;
+  condition?: () => boolean;
+}
 
 const MatchMenu: React.FC<GameMenuProps> = () => {
   const {setCurrentMenuItem} = useMatchGame();
 
+  const menuItems: MenuItemType[] = [
+    {itemName: 'continue-game', itemPlaceholder: 'Continue', condition: canContinueGame},
+    {itemName: 'new-game', itemPlaceholder: 'New game'},
+    {itemName: 'options', itemPlaceholder: 'Options'},
+    {itemName: 'exit', itemPlaceholder: 'Exit'},
+  ]
+
   function clickItemHandler(item: MenuItem) {
     setCurrentMenuItem?.(item);
   }
@@ -16,16 +31,23 @@ const MatchMenu: React.FC<GameMenuProps> = () => {
     return !!localStorage.getItem('match-game:cards');
   }
 
+  function renderItem(itemName: MenuItem, itemText: string) {
+    return <Button className={cls.button} onClick={() => clickItemHandler(itemName)}>{itemText}</Button>
+  }
+
+  function renderMenuItems() {
+    return menuItems.map(item => {
+        return item?.condition
+          ? item?.condition() && <li key={item.itemName}>{renderItem(item.itemName, item.itemPlaceholder)}</li>
+          : <li key={item.itemName}>{renderItem(item.itemName, item.itemPlaceholder)}</li>;
+    });
+  }
+
   return (
-    <div>
+    <div className={cls.MatchMenu}>
       <h2>Match game menu</h2>
       <ul>
-        {
-          canContinueGame() ? <li onClick={() => clickItemHandler('continue-game')}>Continue</li> : null
-        }
-        <li onClick={() => clickItemHandler('new-game')}>New game</li>
-        <li onClick={() => clickItemHandler('options')}>Options</li>
-        <li onClick={() => clickItemHandler('exit')}>Exit</li>
+        {renderMenuItems()}
       </ul>
     </div>
   );