diff --git a/app/components/field.tsx b/app/components/field.tsx index 02197f3..e4b9b9e 100644 --- a/app/components/field.tsx +++ b/app/components/field.tsx @@ -2,8 +2,8 @@ import { useEffect, useRef } from "react"; import { useVirtualizer } from "@tanstack/react-virtual"; -import { Skull } from "lucide-react"; import { Fade } from "@/components/fade"; +import { GameOverDialog } from "@/components/game-over-dialog"; import { Plot } from "@/components/plot"; import { TutorialDialog } from "@/components/tutorial-dialog"; import { useSocketEvent } from "@/hooks/use-socket-event"; @@ -43,28 +43,24 @@ export function Field() { ); }, [size]); - return !plots || sessionState === "dead" ? ( + return !plots ? (
- {sessionState === "dead" ? ( - - ) : ( -
- {Array.from({ length: 9 }, (_, index) => ( -
- ))} -
- )} +
+ {Array.from({ length: 9 }, (_, index) => ( +
+ ))} +
) : ( @@ -99,6 +95,7 @@ export function Field() { }), )}
+ {sessionState === "dead" && } {isNewSession && }
); diff --git a/app/components/game-over-dialog.tsx b/app/components/game-over-dialog.tsx new file mode 100644 index 0000000..8a84179 --- /dev/null +++ b/app/components/game-over-dialog.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { useRef, useState } from "react"; +import { CheckIcon, CopyIcon, Skull } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; + +export function GameOverDialog() { + const [isOpen, setIsOpen] = useState(true); + const [isCopied, setIsCopied] = useState(false); + const inputRef = useRef(null); + const shareLink = "https://mmmines.fly.dev/"; + + const copyToClipboard = async () => { + if (inputRef.current) { + inputRef.current.select(); + await navigator.clipboard.writeText(shareLink); + setIsCopied(true); + setTimeout(() => setIsCopied(false), 2000); + } + }; + + return ( + + + + Game Over + +
+ +
+

+ You're out this round +

+

+ Share this link with others so you can get back in sooner! +

+
+
+ + +
+
+
+
+ ); +} diff --git a/app/components/tutorial-dialog.tsx b/app/components/tutorial-dialog.tsx index 2e4be7d..3d8adbf 100644 --- a/app/components/tutorial-dialog.tsx +++ b/app/components/tutorial-dialog.tsx @@ -64,7 +64,7 @@ export function TutorialDialog() { return ( - + How to Play diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx new file mode 100644 index 0000000..b3346a2 --- /dev/null +++ b/app/components/ui/input.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { cn } from "@/utils"; + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ); + }, +); +Input.displayName = "Input"; + +export { Input };