feat: merge landing, dashboard and app

clashperk · Oct 25, 2024 · 1cbb9d7 · 1cbb9d7
1 parent ba3e8d1
commit 1cbb9d7
Show file tree

Hide file tree

Showing 25 changed files with 1,517 additions and 53 deletions.
diff --git a/app/(legal)/expired/page.tsx → app/(others)/expired/page.tsx b/app/(legal)/expired/page.tsx → app/(others)/expired/page.tsx
diff --git a/app/(legal)/privacy/page.tsx → app/(others)/privacy/page.tsx b/app/(legal)/privacy/page.tsx → app/(others)/privacy/page.tsx
diff --git a/app/(legal)/terms/page.tsx → app/(others)/terms/page.tsx b/app/(legal)/terms/page.tsx → app/(others)/terms/page.tsx
diff --git a/app/globals.css b/app/globals.css
@@ -6,7 +6,7 @@
 }
 
 body {
-  background: #23272A;
+  background-color: #23272A;
   padding: 0;
   margin: 0;
 }
diff --git a/app/links/components/LinksPage.tsx b/app/links/components/LinksPage.tsx
@@ -1,8 +1,5 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
-
 import AddLinkIcon from '@mui/icons-material/AddLink';
 import LinkIcon from '@mui/icons-material/Link';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
@@ -28,6 +25,8 @@ import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
+import { useRouter, useParams, useSearchParams } from 'next/navigation';
+import { Fragment, useEffect, useState } from 'react';
 
 import { ActionModal } from '@/components/ActionModal';
 import { authCookieKey } from '@/lib/constants';

diff --git a/app/links/page.tsx b/app/links/page.tsx
@@ -1,49 +1,9 @@
-import jwt from 'jsonwebtoken';
-import { headers } from 'next/headers';
-import { redirect } from 'next/navigation';
+import { getAccessToken } from '@/util/access-token.helper';
+import { NextPage } from 'next';
 import { LinksPage } from './components/LinksPage';
 
-const getServerSideProps = async () => {
-  const headersList = headers();
-  const query = new URLSearchParams(headersList.get('x-search') as string);
-  const authToken = query.get('token');
-
-  try {
-    const decoded = jwt.verify(
-      authToken as string,
-      process.env.JWT_DECODE_SECRET as string
-    ) as {
-      guild_id: string;
-      user_id: string;
-    };
-
-    const token = jwt.sign(
-      {
-        jti: 'vercel-uid',
-        sub: decoded.user_id,
-        roles: ['viewer', 'user'],
-        version: 'v1'
-      },
-      process.env.JWT_SECRET_V2 as string,
-      {
-        expiresIn: '100m'
-      }
-    );
-
-    return {
-      token,
-      userId: decoded.user_id,
-      guildId: decoded.guild_id,
-      isPublicBot: query.get('bot') !== 'custom'
-    };
-  } catch (e) {
-    console.error(e);
-    return redirect('/expired');
-  }
-};
-
-export default async function Links() {
-  const { guildId, userId, token, isPublicBot } = await getServerSideProps();
+const Page: NextPage = async () => {
+  const { guildId, userId, token, isPublicBot } = await getAccessToken();
   return (
     <LinksPage
       guildId={guildId}
@@ -52,4 +12,6 @@ export default async function Links() {
       userId={userId}
     />
   );
-}
+};
+
+export default Page;
diff --git a/app/web/charts/[id]/page.tsx b/app/web/charts/[id]/page.tsx
@@ -0,0 +1,34 @@
+import { NextPage } from 'next';
+import { headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+import { ChartPage } from '../../components/ChartPage';
+
+const Page: NextPage = async () => {
+  const headersList = headers();
+  const query = new URLSearchParams(headersList.get('x-search') as string);
+  const chartId = (headersList.get('x-pathname') as string)
+    .split('/')
+    .at(-1) as string;
+
+  const res = await fetch(`https://chart.clashperk.com/${chartId}/json`);
+  const data = await res.json();
+
+  if (!res.ok) {
+    return notFound();
+  }
+
+  return (
+    <>
+      <ChartPage
+        {...{
+          ...data,
+          title: data.title.replace(/\(.*\)/, '').trim(),
+          id: chartId,
+          desktopOnly: query.get('device') !== 'mobile'
+        }}
+      />
+    </>
+  );
+};
+
+export default Page;
diff --git a/app/web/clans/[tag]/capital-contribution/page.tsx b/app/web/clans/[tag]/capital-contribution/page.tsx
@@ -0,0 +1,15 @@
+import { CapitalContributionPage } from '@/app/web/components/CapitalContributionPage';
+import { getSignedToken } from '@/util/access-token.helper';
+import { NextPage } from 'next';
+
+const Page: NextPage = async () => {
+  const result = await getSignedToken();
+
+  return (
+    <>
+      <CapitalContributionPage {...result} />
+    </>
+  );
+};
+
+export default Page;
diff --git a/app/web/clans/[tag]/page.tsx b/app/web/clans/[tag]/page.tsx
@@ -0,0 +1,7 @@
+import { NextPage } from 'next';
+
+const Page: NextPage = () => {
+  return <></>;
+};
+
+export default Page;
diff --git a/app/web/clans/[tag]/wars/[id]/page.tsx b/app/web/clans/[tag]/wars/[id]/page.tsx
@@ -0,0 +1,15 @@
+import { AttackLogPage } from '@/app/web/components/AttackLogPage';
+import { getSignedToken } from '@/util/access-token.helper';
+import { NextPage } from 'next';
+
+const Page: NextPage = async () => {
+  const result = await getSignedToken();
+
+  return (
+    <>
+      <AttackLogPage {...result} />
+    </>
+  );
+};
+
+export default Page;
diff --git a/app/web/components/AttackLog.tsx b/app/web/components/AttackLog.tsx
@@ -0,0 +1,222 @@
+import Avatar from '@mui/material/Avatar';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import moment from 'moment';
+import { getStars } from './Stars';
+
+interface ClanWar {
+  endTime: string;
+  result: string;
+  clan: {
+    stars: number;
+    destructionPercentage: number;
+    name: string;
+    tag: string;
+    members: {
+      name: string;
+      tag: string;
+      mapPosition: number;
+      townhallLevel: number;
+      attacks: {
+        stars: number;
+        oldStars: number;
+        destructionPercentage: number;
+        order: number;
+        defender: {
+          name: string;
+          tag: string;
+          mapPosition: number;
+          townhallLevel: number;
+        };
+      }[];
+      defenses: {
+        stars: number;
+        destructionPercentage: number;
+        order: number;
+        defender: {
+          name: string;
+          tag: string;
+          mapPosition: number;
+          townhallLevel: number;
+        };
+      }[];
+    }[];
+  };
+  opponent: {
+    name: string;
+    tag: string;
+  };
+}
+
+export default function AttackLog({ data }: { data: ClanWar }) {
+  return (
+    <Paper
+      variant="outlined"
+      sx={{
+        mx: { md: 1 },
+        padding: 1,
+        minHeight: '100vh',
+        flexShrink: 0,
+        background: '#2F3136',
+        borderRadius: '4px 4px 4px 4px'
+        // borderLeft: `4px solid #5865f2`,
+      }}
+    >
+      <Stack
+        direction="row"
+        spacing={2}
+        justifyContent="space-between"
+        alignItems="start"
+        sx={{ mb: 1 }}
+      >
+        <Stack direction="column" spacing={0} alignItems="start">
+          <Typography
+            variant="body2"
+            sx={{
+              textDecoration: 'none',
+              color: '#00b0f4',
+              fontWeight: 'bold'
+            }}
+          >
+            {data.clan.name} vs {data.opponent.name}
+          </Typography>
+
+          <Typography variant="body2" sx={{ color: '#dcddde' }}>
+            {data.clan.stars} stars,{' '}
+            {data.clan.destructionPercentage.toFixed(2)}% destruction (
+            {data.result}) | {moment(data.endTime).format('D MMM YYYY')}
+          </Typography>
+        </Stack>
+
+        <Avatar
+          sx={{ width: 40, height: 40 }}
+          src={
+            'https://api-assets.clashofclans.com/badges/70/qmdmwrz9RtctdUgDml9qFoy7IZ2e0XQuLLssf25eLt8.png'
+          }
+          variant="square"
+        />
+      </Stack>
+
+      <Table aria-label="table">
+        <TableBody>
+          {data.clan.members.map((row, index) => (
+            <TableRow
+              key={index}
+              sx={{
+                '&:last-child td, &:last-child th': { border: 0 },
+                '& td': { border: 0 },
+                ...(index === data.clan.members.length - 1
+                  ? {}
+                  : { borderBottom: '0.5px solid #dcddde' })
+              }}
+            >
+              <TableCell sx={{ p: 0.5 }} width={2} align="right">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: '#1DA1F2',
+                    fontSize: { xs: '10px', md: '12px' }
+                  }}
+                >
+                  {row.mapPosition}
+                </Typography>
+              </TableCell>
+
+              <TableCell sx={{ p: 0.5 }} width={2} align="right">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: '#F98D0F',
+                    fontSize: { xs: '10px', md: '12px' }
+                  }}
+                >
+                  {row.townhallLevel}
+                </Typography>
+              </TableCell>
+
+              <TableCell align="left" sx={{ p: 0.5, pl: 1 }} width={0}>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: '#dcddde',
+                    fontSize: { xs: '10px', md: '12px' }
+                  }}
+                >
+                  {row.name}
+                </Typography>
+
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: '#dcddde',
+                    fontSize: { xs: '10px', md: '12px' }
+                  }}
+                >
+                  <span> {row.tag}</span>
+                </Typography>
+              </TableCell>
+
+              <TableCell sx={{ p: 0.5 }} width={2} align="right">
+                {(row.attacks ?? []).map((atk, n) => (
+                  <Stack key={n} direction="row">
+                    {getStars(atk.oldStars, atk.stars)}
+                  </Stack>
+                ))}
+              </TableCell>
+
+              <TableCell sx={{ p: 0.5 }} width={2} align="right">
+                {row.attacks!.map((atk, n) => (
+                  <Typography
+                    key={n}
+                    variant="body2"
+                    sx={{ color: '#dcddde', fontSize: '10px' }}
+                  >
+                    {atk.destructionPercentage.toFixed(0)}%
+                  </Typography>
+                ))}
+              </TableCell>
+
+              <TableCell sx={{ p: 0.5 }} width={2} align="right">
+                <Typography
+                  variant="body2"
+                  sx={{ color: '#dcddde', fontSize: '10px' }}
+                >
+                  {row.attacks.length > 0 ? 'v' : ''}
+                </Typography>
+              </TableCell>
+
+              <TableCell sx={{ p: 0.5 }} width={2} align="right">
+                {row.attacks!.map((atk, n) => (
+                  <Typography
+                    key={n}
+                    variant="body2"
+                    sx={{ color: '#1DA1F2', fontSize: '10px' }}
+                  >
+                    {atk.defender.mapPosition}
+                  </Typography>
+                ))}
+              </TableCell>
+
+              <TableCell sx={{ p: 0.5 }} width={2} align="right">
+                {row.attacks!.map((atk, n) => (
+                  <Typography
+                    key={n}
+                    variant="body2"
+                    sx={{ color: '#F98D0F', fontSize: '10px' }}
+                  >
+                    {atk.defender.townhallLevel}
+                  </Typography>
+                ))}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}