little fixes
This commit is contained in:
commit
ddb4a93396
@ -114,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])
|
||||
}, [isGameStarted, isNewGame])
|
||||
|
||||
useEffect(() => {
|
||||
if (isNewGame) setCardsState(cards.map(el => createCard(el)))
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
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);
|
||||
}
|
||||
|
||||
function canContinueGame() {
|
||||
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 className={cls.MatchMenu}>
|
||||
<h2>Match game menu</h2>
|
||||
<ul>
|
||||
{renderMenuItems()}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MatchMenu;
|
||||
Loading…
x
Reference in New Issue
Block a user