aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx13
-rw-r--r--frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx25
-rw-r--r--frontend/app/components/UserIcon.tsx19
-rw-r--r--frontend/app/routes/dashboard.tsx39
4 files changed, 50 insertions, 46 deletions
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index e9139ba..e6cb7e9 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -4,6 +4,7 @@ import SubmitButton from "../../components/SubmitButton";
import type { PlayerInfo } from "../../models/PlayerInfo";
import BorderedContainer from "../BorderedContainer";
import SubmitResult from "../Gaming/SubmitResult";
+import UserIcon from "../UserIcon";
type Props = {
gameDisplayName: string;
@@ -60,14 +61,10 @@ export default function GolfPlayAppGaming({
<div className="text-2xl">{playerInfo.displayName}</div>
</div>
{playerInfo.iconPath && (
- <img
- src={
- process.env.NODE_ENV === "development"
- ? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfo.iconPath}`
- : `/iosdc-japan/2024/code-battle${playerInfo.iconPath}`
- }
- alt={`${playerInfo.displayName} のアイコン`}
- className="w-12 h-12 rounded-full my-auto border-4 border-white"
+ <UserIcon
+ iconPath={playerInfo.iconPath}
+ displayName={playerInfo.displayName!}
+ className="w-12 h-12 my-auto"
/>
)}
</div>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index e8ac825..e325cf7 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -3,6 +3,7 @@ import BorderedContainer from "../BorderedContainer";
import CodeBlock from "../Gaming/CodeBlock";
import ScoreBar from "../Gaming/ScoreBar";
import SubmitResult from "../Gaming/SubmitResult";
+import UserIcon from "../UserIcon";
type Props = {
gameDisplayName: string;
@@ -39,14 +40,10 @@ export default function GolfWatchAppGaming({
<div className="font-bold flex justify-between my-auto">
<div className="flex gap-4">
{playerInfoA.iconPath && (
- <img
- src={
- process.env.NODE_ENV === "development"
- ? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfoA.iconPath}`
- : `/iosdc-japan/2024/code-battle${playerInfoA.iconPath}`
- }
- alt={`${playerInfoA.displayName} のアイコン`}
- className="w-12 h-12 rounded-full my-auto border-4 border-white"
+ <UserIcon
+ iconPath={playerInfoA.iconPath}
+ displayName={playerInfoA.displayName!}
+ className="w-12 h-12 my-auto"
/>
)}
<div>
@@ -68,14 +65,10 @@ export default function GolfWatchAppGaming({
<div className="text-2xl">{playerInfoB.displayName}</div>
</div>
{playerInfoB.iconPath && (
- <img
- src={
- process.env.NODE_ENV === "development"
- ? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfoB.iconPath}`
- : `/iosdc-japan/2024/code-battle${playerInfoB.iconPath}`
- }
- alt={`${playerInfoB.displayName} のアイコン`}
- className="w-12 h-12 rounded-full my-auto border-4 border-white"
+ <UserIcon
+ iconPath={playerInfoB.iconPath}
+ displayName={playerInfoB.displayName!}
+ className="w-12 h-12 my-auto"
/>
)}
</div>
diff --git a/frontend/app/components/UserIcon.tsx b/frontend/app/components/UserIcon.tsx
new file mode 100644
index 0000000..656c170
--- /dev/null
+++ b/frontend/app/components/UserIcon.tsx
@@ -0,0 +1,19 @@
+type Props = {
+ iconPath: string;
+ displayName: string;
+ className: string;
+};
+
+export default function UserIcon({ iconPath, displayName, className }: Props) {
+ return (
+ <img
+ src={
+ process.env.NODE_ENV === "development"
+ ? `http://localhost:8002/iosdc-japan/2024/code-battle${iconPath}`
+ : `/iosdc-japan/2024/code-battle${iconPath}`
+ }
+ alt={`${displayName} のアイコン`}
+ className={`rounded-full border-4 border-white ${className}`}
+ />
+ );
+}
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index 7aa77fd..3a50757 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -4,6 +4,7 @@ import { apiGetGames } from "../.server/api/client";
import { ensureUserLoggedIn } from "../.server/auth";
import BorderedContainer from "../components/BorderedContainer";
import NavigateLink from "../components/NavigateLink";
+import UserIcon from "../components/UserIcon";
export const meta: MetaFunction = () => [
{ title: "Dashboard | iOSDC Japan 2024 Albatross.swift" },
@@ -22,23 +23,19 @@ export default function Dashboard() {
const { user, games } = useLoaderData<typeof loader>()!;
return (
- <div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center">
+ <div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center gap-4">
{user.icon_path && (
- <img
- src={
- process.env.NODE_ENV === "development"
- ? `http://localhost:8002/iosdc-japan/2024/code-battle${user.icon_path}`
- : `/iosdc-japan/2024/code-battle${user.icon_path}`
- }
- alt={`${user.display_name} のアイコン`}
- className="w-24 h-24 rounded-full mb-4"
+ <UserIcon
+ iconPath={user.icon_path}
+ displayName={user.display_name}
+ className="w-24 h-24"
/>
)}
- <h1 className="text-2xl font-bold mb-4">
+ <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 mb-4 text-gray-700">試合</h2>
+ <h2 className="text-xl font-semibold text-gray-700">試合</h2>
<BorderedContainer>
<div className="px-4">
{games.length === 0 ? (
@@ -77,16 +74,14 @@ export default function Dashboard() {
)}
</div>
</BorderedContainer>
- <div className="mt-6">
- <Form method="post" action="/logout">
- <button
- type="submit"
- className="px-4 py-2 bg-red-500 text-white rounded transition duration-300 hover:bg-red-700 focus:ring focus:ring-red-400 focus:outline-none"
- >
- ログアウト
- </button>
- </Form>
- </div>
+ <Form method="post" action="/logout">
+ <button
+ type="submit"
+ className="px-4 py-2 bg-red-500 text-white rounded transition duration-300 hover:bg-red-700 focus:ring focus:ring-red-400 focus:outline-none"
+ >
+ ログアウト
+ </button>
+ </Form>
{user.is_admin && (
<a
href={
@@ -94,7 +89,7 @@ export default function Dashboard() {
? "http://localhost:8002/iosdc-japan/2024/code-battle/admin/dashboard"
: "/iosdc-japan/2024/code-battle/admin/dashboard"
}
- className="mt-4 text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500 focus:ring focus:ring-pink-400 focus:outline-none"
+ className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500 focus:ring focus:ring-pink-400 focus:outline-none"
>
Admin Dashboard
</a>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-30 22:20:36 +0000