pet-projects/match-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

little fixes

Browse Source
This commit is contained in:
Sergey Krylov 2022-07-25 19:38:30 +05:00
commit ddb4a93396
2 changed files with 1 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardsField/CardsField.tsx
View File

@ -114,7 +114,7 @@ const CardsField: React.FC<CardsFieldProps> = ({cards, isGameStarted = false, fi
useEffect(() => { useEffect(() => {
setCardsState(prev => (prev.map(el => ({...el, disabled: !isGameStarted, toggled: !isGameStarted && isNewGame})))); setCardsState(prev => (prev.map(el => ({...el, disabled: !isGameStarted, toggled: !isGameStarted && isNewGame}))));
if (isGameStarted) localStorage.setItem('match-game:cards', JSON.stringify(cardsState)); if (isGameStarted) localStorage.setItem('match-game:cards', JSON.stringify(cardsState));
}, [isGameStarted]) }, [isGameStarted, isNewGame])
useEffect(() => { useEffect(() => {
if (isNewGame) setCardsState(cards.map(el => createCard(el))) if (isNewGame) setCardsState(cards.map(el => createCard(el)))

56
src/pages/MatchMenu/MatchMenu.tsx
View File

@ -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;