Complete game page and add how_to_download page

2026-04-03 20:30:48 +04:00 · 2024-05-12 20:06:41 +04:00
parent 15247adfa3
commit ab6eca4661
14 changed files with 410 additions and 267 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_BASE_URL=http://127.0.0.1:3000/api
+NEXT_PUBLIC_CONTENT_URL=http://127.0.0.1:8000/content/torrent
 NEXT_PUBLIC_COVER_FULL_URL=http://127.0.0.1:8000/content/images/cover/full_size
 NEXT_PUBLIC_COVER_PREVIEW_URL=http://127.0.0.1:8000/content/images/cover/preview
--- a/src/app/games/[game_id]/page.tsx
+++ b/src/app/games/[game_id]/page.tsx
@@ -1,7 +1,9 @@
 import { GameService } from "@/entities/game";
 import { GameCard } from "@/features/gameCard";
 import { Section } from "@/widgets/section";
+import clsx from "clsx";
 import Image from "next/image";
+import Link from "next/link";

 export default async function Games({
  params: { game_id },
@@ -13,21 +15,97 @@ export default async function Games({
  return (
    <>
      {game && (
-				<div className="p-4 flex flex-col lp:flex-row">
+        <div className="p-4 flex flex-col lp:block">
          {game.cover && (
+            <div className="lp:w-[60%] lp:px-4 lp:pl-0 pt-2 float-left">
              <Image
                src={game.cover}
-							className="rounded-lg w-[60%] aspect-video object-cover"
+                className="rounded-lg aspect-video object-cover"
                alt=""
                width={1280}
                height={720}
              />
+            </div>
          )}
-					<div className="pt-2 max-w-[40%]">
+          <span className="pt-2 lp:max-w-[40%]">
            <h1 className="text-4xl">{game.title}</h1>
+            {game.description && (
              <p className="text-md text-justify text-fg4 pt-2">
                {game.description}
              </p>
+            )}
+          </span>
+          <div className="flex justify-between pt-6">
+            {[
+              [
+                { name: "Система", value: game.system },
+                { name: "Процессор", value: game.processor },
+                { name: "Оперативная память", value: game.memory },
+                { name: "Видеокарта", value: game.graphics },
+                { name: "Место на диске", value: game.storage },
+              ],
+              [
+                {
+                  name: "Версия игры",
+                  value: `${
+                    game.version
+                  } (обновлена ${game.update_date.toLocaleDateString(
+                    "ru-ru"
+                  )})`,
+                },
+                { name: "Язык", value: game.language },
+                { name: "Разработчик", value: game.developer },
+                {
+                  name: "Год выхода",
+                  value: game.release_date.toLocaleDateString("en-us", {
+                    year: "numeric",
+                  }),
+                },
+                { name: "Объём загрузки", value: game.download_size },
+              ],
+            ].map((section, i) => (
+              <ul key={i} className="w-[48%] bg-bg1 rounded-lg py-1 px-4">
+                {section.map((req) => (
+                  <li
+                    key={req.name}
+                    className="font-bold text-sm lp:text-md py-1"
+                  >
+                    {req.name + ": "}
+                    <span
+                      className={clsx(
+                        "font-normal",
+                        req.value === undefined && "text-fg4"
+                      )}
+                    >
+                      {req.value ?? "Не известно"}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            ))}
+          </div>
+          {game.trailer && (
+            <iframe
+              src={game.trailer.replace("/watch?v=", "/embed/")}
+              className="w-full aspect-video rounded-lg my-4"
+              allowFullScreen
+            />
+          )}
+          <div className="relative w-full flex items-center justify-around">
+            <Link
+              href={
+                process.env.NEXT_PUBLIC_CONTENT_URL + "/" + game.torrent_file
+              }
+              className="p-4 bg-ac0 text-fg1 text-xl rounded-lg"
+            >
+              Скачать {game.title}.torrent
+            </Link>
+          </div>
+          <div className="w-full flex justify-end">
+            <Link className="text-right text-sm" href="/how_to_download">
+              Как скачать игру
+              <br /> с помощью .torrent файла?
+            </Link>
          </div>
        </div>
      )}
--- a/src/app/games/page.tsx
+++ b/src/app/games/page.tsx
@@ -13,7 +13,7 @@ export default async function Games() {
  const gameCards = await GameService.getGameCards();
  return (
    <>
-			{gameCards && (
+      {gameCards && gameCards.length > 0 && (
        <Section>
          {gameCards.map((card) => (
            <GameCard key={card.id} card={card} />
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,8 +11,12 @@
  --color-fg1: #3c3836;
  --color-fg4: #7c6f64;

+  --color-ac0: #83a598;
+  --color-ac1: #fabd2f;
+  --color-ac2: #8ec07c;
+
  --app-width: 70%;
-  font-size: calc((100vh / 1080) * 24);
+  font-size: calc((100vw / 1920) * 24);
 }

 [data-theme="dark"] {
@@ -23,6 +27,10 @@
  --color-fg0: #fbf1c7;
  --color-fg1: #ebdbb2;
  --color-fg4: #a89984;
+
+  --color-ac0: #076678;
+  --color-ac1: #b57614;
+  --color-ac2: #427b58;
 }

 html,
@@ -37,7 +45,7 @@ body {
  transition-property: color, background-color, border-color;
  transition-duration: 0.3s;

-  overflow: hidden;
+  /* overflow: hidden; */
  color: var(--color-fg1);
  background-color: var(--color-bg0);
 }
@@ -48,8 +56,13 @@ body {
  }
 }

-@media (max-width: 640px) {
+@media (max-width: 1024px) {
  :root {
-    font-size: calc((100vh / 1080) * 16);
+    font-size: calc((100vw / 1920) * 56);
+  }
+}
+@media (max-width: 640px) {
+  :root {
+    font-size: calc((100vw / 1920) * 64);
  }
 }
--- a/src/app/how_to_download/page.tsx
+++ b/src/app/how_to_download/page.tsx
@@ -0,0 +1,61 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: ".Torrent: Как скачать?",
+  description:
+    ".Torrent: Как скачать? - краткое руководство по скачиваю данных с помощью .torrent файлов",
+};
+
+export default async function HowToDownload() {
+  return (
+    <div className="w-full flex flex-col lp:flex-row justify-between p-4">
+      <div className="w-full p-4 lp:w-[50%] lp:pr-10">
+        <h1 className="text-4xl lp:text-3xl">Как скачать?</h1>
+        <div className="text-fg4 text-justify pt-2">
+          Чтобы скачать что-либо с помощью торрент-файла, выполните следующие
+          шаги:
+          <ul className="*:text-fg4">
+            <li>
+              1. Найдите и загрузите торрент-файл или magnet-ссылку, содержащую
+              информацию о файле, который вы хотите скачать.
+            </li>
+            <li>
+              2. Откройте программу-клиент для загрузки торрентов, например,
+              uTorrent, BitTorrent или qBittorrent.
+            </li>
+            <li>
+              3. В программе-клиенте выберите опцию "Open Torrent File" или "Add
+              Torrent" и выберите торрент-файл, который вы скачали в первом
+              шаге.
+            </li>
+            <li>
+              4. После этого начнется загрузка файлов, указанных в
+              торрент-файле. Вы также можете выбрать папку, куда сохранять
+              скачанные файлы.
+            </li>
+            <li>
+              5. Дождитесь завершения загрузки файлов. После этого вы сможете
+              открыть и использовать скачанные файлы на своем компьютере.
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="w-full p-4 lp:w-[50%] lp:pl-10">
+        <h2 className="text-4xl lp:text-3xl">Что такое .torrent файл?</h2>
+        <p className="text-fg4 text-justify pt-2">
+          Торрент-файл (или .torrent-файл) - это небольшой файл, который
+          содержит метаданные о файле или наборе файлов, которые можно загрузить
+          с помощью протокола BitTorrent. В торрент-файле обычно указан адрес
+          трекера (специального сервера, отслеживающего пиров) и хеш-суммы
+          частей файлов, которые необходимы для скачивания.
+          <br />
+          <br /> Пользователь, желающий загрузить файл через BitTorrent, сначала
+          скачивает торрент-файл или magnet-ссылку, загружает ее в
+          торрент-клиент (программу для скачивания торрентов), и затем начинает
+          загрузку файлов, участвуя в обмене данными с другими пользователями
+          (пирами) через сеть BitTorrent.
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
      <body className={inter.className}>
        <ThemeProvider enableSystem={false} defaultTheme="light">
          <Header />
-					<div className="w-full h-full max-w-[var(--app-width)] m-auto overflow-y-auto">
+          <div className="w-full h-full max-w-[var(--app-width)] m-auto">
            {children}
          </div>
        </ThemeProvider>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ export default async function Home() {
  const gameCards = await GameService.getGameCards();
  return (
    <>
-			{gameCards && (
+      {gameCards && gameCards.length > 0 && (
        <Section
          name="Игры"
          link="/games"
--- a/src/entities/game/schemas/game.ts
+++ b/src/entities/game/schemas/game.ts
@@ -4,18 +4,30 @@ import { gameCardSchema } from "./gameCard";
 export const gameSchema = gameCardSchema.and(
  z.object({
    torrent_file: z.string().min(1),
-		language: z.string().optional(),
-		version: z.string().optional(),
-		download_size: z.string().optional(),
+    trailer: z.string().optional(),
+
    system: z.string().optional(),
    processor: z.string().optional(),
    memory: z.string().optional(),
    graphics: z.string().optional(),
    storage: z.string().optional(),
+
+    developer: z.string().optional(),
+    language: z.string().optional(),
+    download_size: z.string().optional(),
+
+    update_date: z
+      .string()
+      .min(1)
+      .transform((d) => new Date(d)),
    upload_date: z
      .string()
      .min(1)
      .transform((d) => new Date(d)),
+    release_date: z
+      .string()
+      .min(1)
+      .transform((d) => new Date(d)),
  })
 );
 export type GameType = z.infer<typeof gameSchema>;
--- a/src/entities/game/schemas/gameCard.ts
+++ b/src/entities/game/schemas/gameCard.ts
@@ -6,10 +6,7 @@ export const gameCardSchema = z
    title: z.string().min(3),
    cover: z.string().optional(),
    description: z.string().optional(),
-		release_date: z
-			.string()
-			.min(1)
-			.transform((d) => new Date(d)),
+    version: z.string().optional(),
  })
  .transform((card) => {
    return {
--- a/src/features/gameCard/gameCard.tsx
+++ b/src/features/gameCard/gameCard.tsx
@@ -18,11 +18,11 @@ export const GameCard = ({ card }: { card: GameCardType }) => {
        <h2 className="text-2xl py-1 group-hover/gamecard:underline underline-offset-4">
          {card.title}
        </h2>
-				<span className="text-sm text-fg4">
-					{card.release_date.toLocaleDateString("ru-ru", {
-						year: "numeric",
-					})}
+        {card.version && (
+          <span className="text-xs max-w-[30%] line-clamp-2 text-fg4">
+            {card.version}
          </span>
+        )}
      </div>
      <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
        {card.description}
--- a/src/shared/ui/cover/cover.tsx
+++ b/src/shared/ui/cover/cover.tsx
@@ -1,19 +0,0 @@
-import Image from "next/image";
-
-export const Cover = ({
-	cover,
-	type = "preview",
-}: {
-	cover: string;
-	type?: "cover" | "preview";
-}) => {
-	return (
-		<Image
-			src={cover}
-			className="rounded-lg aspect-video object-cover"
-			alt=""
-			width={type === "preview" ? 700 : 1280}
-			height={type === "preview" ? 400 : 720}
-		/>
-	);
-};
--- a/src/shared/ui/cover/index.ts
+++ b/src/shared/ui/cover/index.ts
@@ -1,3 +0,0 @@
-import { Cover } from "./cover";
-
-export { Cover };
--- a/src/widgets/header/header.tsx
+++ b/src/widgets/header/header.tsx
@@ -11,7 +11,7 @@ const sections = [

 export const Header = () => {
  return (
-		<header className="w-full h-20 bg-bg1">
+    <header className="w-full h-20 bg-bg1 sticky top-0">
      <div
        className="w-full h-full max-w-[var(--app-width)] m-auto px-5
              flex items-center justify-between"
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,6 +21,9 @@ const config: Config = {
        fg0: "var(--color-fg0)",
        fg1: "var(--color-fg1)",
        fg4: "var(--color-fg4)",
+        ac0: "var(--color-ac0)",
+        ac1: "var(--color-ac1)",
+        ac2: "var(--color-ac2)",
      },
    },
    screens: {