Merge pull request #331 from h8570rg/develop

0.2.0

.gitignore

@@ -3,12 +3,7 @@ node_modules
 .npmrc
 .env*
 tsconfig.tsbuildinfo
-
-# next-pwa
-**/public/sw.js
-**/public/sw.js.map
-**/public/workbox-*.js
-**/public/workbox-*.js.map
+certificates
 
 lib/migration/dist
-lib/migration/old-data.json
+lib/migration/old-data.json

app/(main)/(routes)/matches/(components)/MatchCard/index.tsx

@@ -31,13 +31,13 @@ export function MatchCard({ match, userId }: { match: Match; userId: string }) {
       <Divider />
       <CardBody>
         <div className="flex items-center">
-          <div className="flex grow flex-col items-center px-8">
+          <div className="flex shrink-0 grow flex-col items-center px-8">
             <div className="mb-2 text-tiny text-foreground-light">平均着順</div>
             <div className="text-large">
               {data.averageRank?.toFixed(2) ?? "なし"}
             </div>
           </div>
-          <div className="flex w-[224px] justify-center">
+          <div className="flex basis-[224px] justify-center">
             <table className="[&_td]:text-center [&_th]:w-10 [&_th]:text-center">
               <thead className="text-tiny text-foreground-light">
                 <tr>

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/DataModal/(components)/Chart/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import classNames from "classnames";
 import {
   LineChart,
   Line,
@@ -13,7 +14,13 @@ import { Match } from "@/lib/type";
 
 const colors = ["#F871A0", "#66AAF9", "#74DFA2", "#AE7EDE", "#F9C97C"]; // TODO: light dark 切替
 
-export function DataChart({ match }: { match: Match }) {
+export function DataChart({
+  match,
+  className,
+}: {
+  match: Match;
+  className?: string;
+}) {
   const data = match.games.reduce(
     (acc, game, index) => {
       return [
@@ -44,7 +51,12 @@ export function DataChart({ match }: { match: Match }) {
   );
 
   return (
-    <div className="h-[350px] w-full rounded-large bg-default-50 p-2 dark:bg-default-100">
+    <div
+      className={classNames(
+        "h-[300px] w-full rounded-large bg-content1 p-2 shadow-small",
+        className,
+      )}
+    >
       <ResponsiveContainer width="100%" height="100%">
         <LineChart data={data}>
           <XAxis
@@ -55,12 +67,7 @@ export function DataChart({ match }: { match: Match }) {
             tickLine={false}
             tick={{ fontSize: 12 }}
           />
-          <YAxis
-            type="number"
-            width={25}
-            tickLine={false}
-            tick={{ fontSize: 12 }}
-          />
+          <YAxis type="number" tickLine={false} tick={{ fontSize: 12 }} />
           <ReferenceLine y={0} strokeDasharray="4 4" />
           <Legend
             formatter={(v) => (

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/DataModal/(components)/ModalController/index.tsx

@@ -11,7 +11,13 @@ export function DataModalController({
   const { dataModal } = useMatchContext();
 
   return (
-    <Modal {...dataModal.bind} size="full">
+    <Modal
+      {...dataModal.bind}
+      scrollBehavior="inside"
+      classNames={{
+        body: "pb-6",
+      }}
+    >
       <ModalContent>{children}</ModalContent>
     </Modal>
   );

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/DataModal/(components)/Root/index.tsx

@@ -2,6 +2,7 @@ import { ModalBody, ModalHeader } from "@/components/Modal";
 import { serverServices } from "@/lib/services/server";
 import { DataChart } from "../Chart";
 import { DataModalController } from "../ModalController";
+import { Summary } from "../Summary";
 
 export async function DataModalRoot({ matchId }: { matchId: string }) {
   const { getMatch } = await serverServices();
@@ -11,7 +12,8 @@ export async function DataModalRoot({ matchId }: { matchId: string }) {
     <DataModalController>
       <ModalHeader>データ</ModalHeader>
       <ModalBody className="overflow-y-auto">
-        <DataChart match={match} />
+        <DataChart className="shrink-0" match={match} />
+        <Summary match={match} />
       </ModalBody>
     </DataModalController>
   );

app/(main)/(routes)/matches/(routes)/[matchId]/(components)/DataModal/(components)/Summary/index.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import classNames from "classnames";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from "@/components/Table";
+import { Match } from "@/lib/type";
+
+export function Summary({ match }: { match: Match }) {
+  const columns = [
+    { name: "名前", uid: "name" },
+    { name: "着順", uid: "rankCount" },
+    {
+      name: "合計",
+      uid: "totalScore",
+    },
+  ];
+
+  return (
+    <Table
+      classNames={{
+        wrapper: classNames("p-0"),
+        th: classNames("bg-inherit"),
+      }}
+    >
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.uid}>{column.name}</TableColumn>}
+      </TableHeader>
+      <TableBody items={match.players}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => (
+              <TableCell className="break-all">
+                {(() => {
+                  switch (columnKey) {
+                    case "name":
+                      return item.name;
+                    case "rankCount":
+                      return item.rankCounts.join("-");
+                    case "totalScore":
+                      return item.totalScore;
+                  }
+                })()}
+              </TableCell>
+            )}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}

app/layout.tsx

@@ -30,9 +30,6 @@ export default function RootLayout({
       className={classNames(fontClassNames, "h-full scroll-smooth")}
       suppressHydrationWarning
     >
-      <head>
-        <link rel="manifest" href="/manifest.json" />
-      </head>
       <body className="h-full font-rocknroll">
         <IconDefs />
         <Providers>

app/manifest.ts

@@ -0,0 +1,84 @@
+import type { MetadataRoute } from "next";
+
+/**
+ * @see https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps
+ */
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    theme_color: "#2B2A2A",
+    background_color: "#2B2A2A",
+    display: "standalone",
+    scope: "/",
+    start_url: "/matches",
+    name: "雀鬼録",
+    short_name: "雀鬼録",
+    description: "麻雀成績管理アプリ",
+    icons: [
+      {
+        src: "/icon-72.png",
+        sizes: "72x72",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-96.png",
+        sizes: "96x96",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-120.png",
+        sizes: "120x120",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-128.png",
+        sizes: "128x128",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-144.png",
+        sizes: "144x144",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-152.png",
+        sizes: "152x152",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-180.png",
+        sizes: "180x180",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-384.png",
+        sizes: "384x384",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon-512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+      {
+        src: "/icon-512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  };
+}

components/Table/index.tsx

@@ -0,0 +1,8 @@
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableColumn,
+  TableRow,
+  TableCell,
+} from "@heroui/react";

eslint.config.mjs

@@ -40,7 +40,6 @@ export default tseslint.config(
             order: "asc",
             caseInsensitive: false,
           },
-
           groups: [
             "builtin",
             "external",
@@ -50,20 +49,12 @@ export default tseslint.config(
             "index",
             "object",
           ],
-
           pathGroups: [
             {
               pattern: "@/**",
               group: "internal",
             },
-            {
-              pattern: "server-only",
-              group: "builtin",
-              position: "before",
-            },
           ],
-
-          pathGroupsExcludedImportTypes: ["server-only"],
           "newlines-between": "never",
           warnOnUnassignedImports: true,
         },

middleware.ts

@@ -35,6 +35,6 @@ export const config = {
      * - favicon.ico (favicon file)
      * Feel free to modify this pattern to include more paths.
      */
-    "/((?!_next/static|_next/image|favicon.ico|manifest.json|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+    "/((?!_next/static|_next/image|favicon.ico|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
   ],
 };

next.config.mjs

@@ -0,0 +1,22 @@
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
+};
+
+export default nextConfig;