diff options
| -rw-r--r-- | frontend/app/components/BorderedContainerWithCaption.tsx | 2 | ||||
| -rw-r--r-- | frontend/app/routes/_index.tsx | 12 | ||||
| -rw-r--r-- | frontend/app/routes/dashboard.tsx | 26 |
3 files changed, 26 insertions, 14 deletions
diff --git a/frontend/app/components/BorderedContainerWithCaption.tsx b/frontend/app/components/BorderedContainerWithCaption.tsx index 0fee425..5446ddc 100644 --- a/frontend/app/components/BorderedContainerWithCaption.tsx +++ b/frontend/app/components/BorderedContainerWithCaption.tsx @@ -13,7 +13,7 @@ export default function BorderedContainerWithCaption({ return ( <BorderedContainer> <div className="flex flex-col gap-4"> - <h2 className="text-center text-lg">{caption}</h2> + <h2 className="text-center text-lg font-semibold">{caption}</h2> {children} </div> </BorderedContainer> diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx index 651a61c..5ec60e5 100644 --- a/frontend/app/routes/_index.tsx +++ b/frontend/app/routes/_index.tsx @@ -1,6 +1,6 @@ import type { LoaderFunctionArgs, MetaFunction } from "react-router"; import { ensureUserNotLoggedIn } from "../.server/auth"; -import BorderedContainer from "../components/BorderedContainer"; +import BorderedContainerWithCaption from "../components/BorderedContainerWithCaption"; import NavigateLink from "../components/NavigateLink"; export const meta: MetaFunction = () => [ @@ -26,16 +26,16 @@ export default function Index() { </div> </div> <div className="mx-2"> - <BorderedContainer> + <BorderedContainerWithCaption caption="オンライン予選開催中 (3/21 決勝当日まで)"> <p className="text-gray-900 max-w-prose"> PHPer コードバトルは指示された動作をする PHP コードをより短く書けた方が勝ち、という 1 対 1 の対戦コンテンツです。3/21（金）day0 前夜祭では 3/8 - に実施された予選を勝ち抜いたプレイヤーによるトーナメント形式での - PHPer コードバトルを実施します。 - ここでは短いコードが正義です！可読性も保守性も放り投げた、イベントならではのコードをお楽しみください！ + に実施されたオフライン予選と、当日まで開催しているオンライン予選を勝ち抜いたプレイヤーによるトーナメント形式での + PHPer コードバトルを実施します。ここでは短いコードが正義です！ + 可読性も保守性も放り投げた、イベントならではのコードをお楽しみください！ </p> - </BorderedContainer> + </BorderedContainerWithCaption> </div> <div> <NavigateLink to="/login">ログイン</NavigateLink> diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx index 3c4a684..2320744 100644 --- a/frontend/app/routes/dashboard.tsx +++ b/frontend/app/routes/dashboard.tsx @@ -3,6 +3,7 @@ import { Form, useLoaderData } from "react-router"; import { ensureUserLoggedIn } from "../.server/auth"; import { apiGetGames } from "../api/client"; import BorderedContainer from "../components/BorderedContainer"; +import BorderedContainerWithCaption from "../components/BorderedContainerWithCaption"; import NavigateLink from "../components/NavigateLink"; import UserIcon from "../components/UserIcon"; @@ -31,12 +32,23 @@ export default function Dashboard() { className="w-24 h-24" /> )} - <h1 className="text-2xl font-bold"> - <span className="text-gray-800">{user.display_name}</span> - <span className="text-gray-500 ml-2">@{user.username}</span> - </h1> - <h2 className="text-xl font-semibold text-gray-700">試合</h2> - <BorderedContainer> + <h1 className="text-3xl font-bold text-gray-800">{user.display_name}</h1> + <BorderedContainerWithCaption caption="オンライン予選開催中 (3/21 決勝当日まで)"> + <p className="text-gray-900 max-w-prose"> + 現在オンライン予選を開催中です。 + 予選問題2問を両方解いたプレイヤーのうち合計スコアが最も小さい2名が、3/21 + (金) の PHPerKaigi day0 に実施される決勝戦への進出枠を獲得します。 + 当日は、会場の Track A まで是非お越しください！ + </p> + <p className="text-gray-600 max-w-prose"> + ※ 当日会場 Track A + にいらっしゃらない場合、次点のスコアを獲得されている方が自動的に決勝進出となります。 + </p> + <p className="text-gray-600 max-w-prose"> + ※ 決勝に参加する予定のない方でも、プレイしていただくことは可能です。 + </p> + </BorderedContainerWithCaption> + <BorderedContainerWithCaption caption="試合一覧"> <div className="px-4"> {games.length === 0 ? ( <p>エントリーできる試合はありません</p> @@ -70,7 +82,7 @@ export default function Dashboard() { </ul> )} </div> - </BorderedContainer> + </BorderedContainerWithCaption> <Form method="post" action="/logout"> <button type="submit" |