add restart button to window mode

This commit is contained in:
CutieCat2804 2024-10-16 20:11:08 +02:00
parent 88e74c6de5
commit 2d7a6fc848
1 changed files with 6 additions and 8 deletions

View File

@ -122,7 +122,7 @@ const Board: React.FC<BoardProps> = (props) => {
}, [onViewportChange]); }, [onViewportChange]);
const theme = useTheme( const theme = useTheme(
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
themes.find((t) => t.id === (game.theme as any))!.theme, themes.find((t) => t.id === (game.theme as any))!.theme
); );
const boardWidth = game.width * (theme?.size || 0); const boardWidth = game.width * (theme?.size || 0);
const boardHeight = game.height * (theme?.size || 0); const boardHeight = game.height * (theme?.size || 0);
@ -154,7 +154,7 @@ const Board: React.FC<BoardProps> = (props) => {
className={cn( className={cn(
"w-full h-[70vh] overflow-hidden outline-white/40 outline-2 flex flex-col", "w-full h-[70vh] overflow-hidden outline-white/40 outline-2 flex flex-col",
zenMode && "fixed top-0 left-0 z-50 right-0 bottom-0 h-[100vh]", zenMode && "fixed top-0 left-0 z-50 right-0 bottom-0 h-[100vh]",
props.className, props.className
)} )}
style={{ style={{
width: props.width ? `${props.width}px` : undefined, width: props.width ? `${props.width}px` : undefined,
@ -164,11 +164,9 @@ const Board: React.FC<BoardProps> = (props) => {
> >
<div className="relative"> <div className="relative">
<div className="absolute right-4 top-4 text-white/70 flex gap-2"> <div className="absolute right-4 top-4 text-white/70 flex gap-2">
{zenMode && ( <Button variant="ghost" onClick={() => restartGame()} size="sm">
<Button variant="ghost" onClick={() => restartGame()} size="sm"> <RotateCcw className="size-4" />
<RotateCcw className="size-4" /> </Button>
</Button>
)}
<Button <Button
variant="ghost" variant="ghost"
onClick={() => setZenMode(!zenMode)} onClick={() => setZenMode(!zenMode)}
@ -319,7 +317,7 @@ const Tile = ({
y: theme.size * 0.5, y: theme.size * 0.5,
anchor: 0.5, anchor: 0.5,
}), }),
[scale, theme.size], [scale, theme.size]
); );
let content: ReactNode = null; let content: ReactNode = null;
if (isFlagged) { if (isFlagged) {