From 5baa778901640d02e266dc247c903dcfbeb64a81 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Wed, 23 Oct 2024 00:30:36 +0300
Subject: [PATCH] Congratulations message on beating all levels

---
 app/play/page.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/play/page.tsx b/app/play/page.tsx
index 1d9b0d6..ff62acc 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -77,7 +77,7 @@ export default function PlayPage() {
     return true;
   });
 
-  if (!filteredMaps) {
+  if (filteredMaps === undefined) {
     return (
       <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
         <h1 className="mb-6 text-center text-3xl font-bold">Choose a Night</h1>
@@ -125,6 +125,23 @@ export default function PlayPage() {
         </ToggleGroup>
       </Authenticated>
 
+      {filteredMaps.length === 0 && (
+        <div className="py-8">
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex flex-col items-center gap-2 text-center">
+              <h2 className="text-xl/snug text-white">Congratulations!</h2>
+              <p className="text-base/snug text-white">
+                You completed all maps, consider creating and publishing your
+                own map.
+              </p>
+            </div>
+            <Button asChild variant="outline">
+              <Link href="/playground">Create Map</Link>
+            </Button>
+          </div>
+        </div>
+      )}
+
       <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
         {filteredMaps.map((map) => (
           <Card