diff --git a/components/NewGameBan.tsx b/components/NewGameBan.tsx index 8ea12fc..8de4055 100644 --- a/components/NewGameBan.tsx +++ b/components/NewGameBan.tsx @@ -1,6 +1,8 @@ import { Button, + HStack, Input, + Link, Modal, ModalBody, ModalCloseButton, @@ -10,14 +12,72 @@ import { ModalOverlay, Radio, RadioGroup, + Table, + TableContainer, + Tbody, Text, + Td, + Th, + Thead, + Tr, + useToast, } from "@chakra-ui/react"; +import { useState } from "react"; export default function (props: { isOpen: boolean; onClose: () => void }) { + const actionMap: { [k: string]: number } = {}; + const [rows, setRows] = useState([] as JSX.Element[]); + + function addUser(user: string) { + const newRows = [...rows]; + newRows.push( + <Tr key={user}> + <Td>{user}</Td> + <Td> + <RadioGroup + onChange={(val) => + Object.defineProperty(actionMap, user, { + value: parseInt(val), + }) + } + > + <HStack> + <Radio value="0">Do Nothing</Radio> + <Radio value="1">Hide from Leaderboards</Radio> + <Radio value="2">Ban</Radio> + </HStack> + </RadioGroup> + </Td> + <Td> + <Link onClick={() => removeUser(user)}>Remove</Link> + </Td> + </Tr> + ); + } + + function removeUser(user: string) { + const newRows = [...rows]; + const el = newRows.find((el) => el.key === user); + + if (!el) return; + + const elIdx = newRows.indexOf(el); + + if (elIdx === -1) return; + + newRows.splice(elIdx, 1); + setRows(newRows); + + delete actionMap[user]; + } + function reset() { (document.getElementById("username") as HTMLInputElement).value = ""; (document.getElementById("evidence") as HTMLInputElement).value = ""; + setRows([]); + Object.keys(actionMap).forEach((k) => delete actionMap[k]); + props.onClose(); } @@ -29,9 +89,59 @@ export default function (props: { isOpen: boolean; onClose: () => void }) { <ModalCloseButton /> <ModalBody> <Text>Username(s)</Text> - <Input id="username" placeholder="builderman" /> + <Input id="username" mb="8px" placeholder="builderman" /> + <Button + onClick={function () { + const user = ( + document.getElementById("username") as HTMLInputElement + ).value; + + if ( + !user || + user.length > 3 || + user.length < 20 || + user.match(/_/g)?.length || + 0 > 1 || + user.match(/\W/) + ) { + useToast()({ + description: "Check the username and try again", + duration: 5000, + isClosable: true, + status: "error", + title: "Invalid Username", + }); + return; + } + + addUser(user); + }} + > + Add + </Button> + <br /> + <br /> + <TableContainer> + <Table variant="simple"> + <Thead> + <Tr> + <Th>Username</Th> + <Th>Punishment</Th> + <Th>Remove</Th> + </Tr> + </Thead> + <Tbody>{rows}</Tbody> + </Table> + </TableContainer> <br /> <br /> + <Text>Evidence</Text> + <Button + mr="8px" + onClick={() => document.getElementById("evidence")?.click()} + > + Select Files + </Button> <input id="evidence" type="file" /> </ModalBody> </ModalContent>