60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
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);
|
|
if (item === 'exit') {
|
|
window.location = 'https://google.com' as any;
|
|
}
|
|
}
|
|
|
|
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;
|