feat: simple dialog

src/App.css

@@ -71,3 +71,14 @@ button {
   background-color: black;
   border: 4px solid black;
 }
+
+::backdrop {
+  background-image: linear-gradient(
+    45deg,
+    magenta,
+    rebeccapurple,
+    dodgerblue,
+    green
+  );
+  opacity: 0.75;
+}

src/App.tsx

@@ -50,14 +50,19 @@ function App() {
   const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players);
   const [playersRight, setPlayersRight] = useState<Player[]>([]);
 
+  const [dialog, setDialog] = useState("dialog");
+
   function handleSubmit() {
+    const dialog = document.querySelector("dialog");
     if (user.length < 1) {
-      alert("who are you?");
-      return;
-    }
-    for (const u of user) {
-      console.log(u.name);
+      setDialog("who are you?");
+    } else {
+      for (const u of user) {
+        setDialog("sending...");
+        console.log(u.name);
+      }
     }
+    dialog?.showModal();
   }
 
   return (
@@ -111,13 +116,14 @@ function App() {
         </div>
       </div>
 
-      <button
-        onClick={() =>
-          handleSubmit(user, playersLeft, playersMiddle, playersRight)
-        }
+      <button onClick={() => handleSubmit()}>submit</button>
+      <dialog
+        onClick={(event) => {
+          event.currentTarget.close();
+        }}
       >
-        submit
-      </button>
+        {dialog}
+      </dialog>
       <footer>
         <p className="grey">
           something not working? message <a href="https://t.me/x0124816">me</a>.