Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 色々改善2 #62

Merged
merged 4 commits into from
Nov 8, 2024
Merged

feat: 色々改善2 #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e279027
feat: エラー画面を作成
shun-shobon Nov 8, 2024
8904c8b
feat: 読み込み画面を追加
shun-shobon Nov 8, 2024
7006a07
feat: ナビバーをSuspense境界で囲んだ
shun-shobon Nov 8, 2024
7351481
feat: エラーメッセージを改善
shun-shobon Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/features/profile/Profile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export interface Ranking {
export const UpdateDisplayNameSchema = v.object({
displayName: v.pipe(
v.string("入力してください。"),
v.minLength(1, "1文字以上で入力してください。"),
v.minLength(1, "入力してください。"),
v.maxLength(8, "8文字以内で入力してください。"),
),
});
Expand Down
1 change: 0 additions & 1 deletion app/features/profile/useMyProfile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export function useMyProfile(): UseMyProfile {
{
suspense: true,
refreshInterval: 1000 * 10,
fallbackData: null,
},
);

Expand Down
112 changes: 98 additions & 14 deletions app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import {
Scripts,
ScrollRestoration,
useLocation,
useRouteError,
} from "@remix-run/react";
import { cva } from "class-variance-authority";
import { Suspense } from "react";
import { type ReactNode, Suspense } from "react";
import { Analytics } from "./components/Analytics";
import { Background } from "./components/Background";
import { BottomNav } from "./components/BottomNav";
import { Button } from "./components/Button";
import { Loading } from "./components/Loading";
import { Patterns } from "./components/Patterns";
import { ThemeProvider } from "./components/Theme";
Expand All @@ -33,7 +35,6 @@ const PATH_THEME_MAP: Record<string, "pink" | "cyan" | "emerald" | "yellow"> = {
export function Layout({ children }: { children: React.ReactNode }) {
const location = useLocation();
const theme = PATH_THEME_MAP[location.pathname] ?? "pink";
const { myProfile } = useMyProfile();

return (
<html lang="ja">
Expand Down Expand Up @@ -71,15 +72,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
<Patterns />
<Background />
{children}
<div
className={cn(
"fixed inset-x-0 bottom-0 translate-y-full px-2 pt-2 pb-3 transition-transform delay-300 duration-300 ease-out",
myProfile && "translate-y-0",
)}
style={{ viewTransitionName: "bottom-nav" }}
>
<BottomNav path={location.pathname} className="mx-auto" />
</div>
<Suspense fallback={null}>
<Nav />
</Suspense>
</ThemeProvider>
<ScrollRestoration />
<Scripts />
Expand All @@ -88,10 +83,99 @@ export function Layout({ children }: { children: React.ReactNode }) {
);
}

function Nav(): ReactNode {
const { myProfile } = useMyProfile();

return (
<div
className={cn(
"fixed inset-x-0 bottom-0 translate-y-full px-2 pt-2 pb-3 transition-transform delay-300 duration-300 ease-out",
myProfile && "translate-y-0",
)}
style={{ viewTransitionName: "bottom-nav" }}
>
<BottomNav path={location.pathname} className="mx-auto" />
</div>
);
}

export default function App() {
return <Outlet />;
}

export function HydrateFallback(): ReactNode {
return (
<Suspense fallback={<Loading />}>
<Outlet />
</Suspense>
<div className="grid h-dvh w-full place-items-center drop-shadow-md">
<div className="aspect-square h-24 animate-spin rounded-full border-8 border-white border-t-transparent duration-500" />
</div>
);
}

export function ErrorBoundary(): ReactNode {
const error = useRouteError();

try {
console.log(error);
// @ts-expect-error
window.gtag("event", "exception", {
// @ts-expect-error
description: error?.message,
fatal: true,
});
} catch {}

return (
<html lang="ja">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="RicoShotはマルチプレイ対応の対戦シューティングゲームです。好きなキャラを選択、カスタマイズしてハイスコアを目指しましょう!"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
{import.meta.env.VITE_GOOGLE_ANALYTICS_ID && (
<Analytics
googleAnalyticsId={import.meta.env.VITE_GOOGLE_ANALYTICS_ID}
/>
)}
<link
href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap"
rel="stylesheet"
/>
<Meta />
<Links />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body className={appThemes()}>
<ThemeProvider theme="yellow">
<Patterns />
<Background />
<div className="grid min-h-dvh w-full place-items-center p-4">
<div className="flex flex-col items-center gap-4">
<p className="text-balance text-center text-lg text-red-500 drop-shadow-base">
エラーが発生しました。リロードしてください。
</p>
<Button
onClick={() => {
window.location.reload();
}}
>
リロード
</Button>
</div>
</div>
</ThemeProvider>
<Scripts />
</body>
</html>
);
}