diff options
Diffstat (limited to 'frontend/app/components/Gaming')
| -rw-r--r-- | frontend/app/components/Gaming/CodePopover.tsx | 43 | ||||
| -rw-r--r-- | frontend/app/components/Gaming/RankingTable.tsx | 5 |
2 files changed, 48 insertions, 0 deletions
diff --git a/frontend/app/components/Gaming/CodePopover.tsx b/frontend/app/components/Gaming/CodePopover.tsx new file mode 100644 index 0000000..a574a77 --- /dev/null +++ b/frontend/app/components/Gaming/CodePopover.tsx @@ -0,0 +1,43 @@ +import { Popover } from "@base-ui-components/react/popover"; +import { faCode, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { calcCodeSize } from "../../states/play"; +import BorderedContainer from "../BorderedContainer"; +import CodeBlock from "../Gaming/CodeBlock"; + +type Props = { + code: string; +}; + +export default function CodePopover({ code }: Props) { + const codeSize = calcCodeSize(code); + + return ( + <Popover.Root> + <Popover.Trigger> + <FontAwesomeIcon icon={faCode} fixedWidth /> + </Popover.Trigger> + <Popover.Portal> + <Popover.Positioner> + <Popover.Popup> + <BorderedContainer className="grow flex flex-col gap-4"> + <div className="flex flex-row gap-2 items-center"> + <div className="grow font-semibold text-lg"> + コードサイズ: {codeSize} + </div> + <Popover.Close className="p-1 bg-gray-50 border-1 border-gray-300 rounded-sm"> + <FontAwesomeIcon + icon={faXmark} + fixedWidth + className="text-gray-500" + /> + </Popover.Close> + </div> + <CodeBlock code={code} language="php" /> + </BorderedContainer> + </Popover.Popup> + </Popover.Positioner> + </Popover.Portal> + </Popover.Root> + ); +} diff --git a/frontend/app/components/Gaming/RankingTable.tsx b/frontend/app/components/Gaming/RankingTable.tsx index a1e41f5..38d5200 100644 --- a/frontend/app/components/Gaming/RankingTable.tsx +++ b/frontend/app/components/Gaming/RankingTable.tsx @@ -1,6 +1,7 @@ import { useAtomValue } from "jotai"; import React from "react"; import { rankingAtom } from "../../states/watch"; +import CodePopover from "./CodePopover"; function TableHeaderCell({ children }: { children: React.ReactNode }) { return ( @@ -40,6 +41,7 @@ export default function RankingTable() { <TableHeaderCell>プレイヤー</TableHeaderCell> <TableHeaderCell>スコア</TableHeaderCell> <TableHeaderCell>提出時刻</TableHeaderCell> + <TableHeaderCell>コード</TableHeaderCell> </tr> </thead> <tbody className="bg-white divide-y divide-gray-300"> @@ -54,6 +56,9 @@ export default function RankingTable() { <TableBodyCell> {formatUnixTimestamp(entry.submitted_at)} </TableBodyCell> + <TableBodyCell> + {entry.code && <CodePopover code={entry.code} />} + </TableBodyCell> </tr> ))} </tbody> |