feat: simple dialog

This commit is contained in:
julius 2025-01-24 12:55:20 +01:00
parent 7b325f9375
commit deeabf2049
Signed by: julius
GPG Key ID: C80A63E6A5FD7092
2 changed files with 28 additions and 11 deletions

View File

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

View File

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