Complete game page and add how_to_download page

.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

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>
       )}

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} />

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);
   }
 }

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>
+  );
+}

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>

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"

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(),
+    trailer: z.string().optional(),
-		version: z.string().optional(),
+
-		download_size: 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>;

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
+    version: z.string().optional(),
-			.string()
-			.min(1)
-			.transform((d) => new Date(d)),
   })
   .transform((card) => {
     return {

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.version && (
-					{card.release_date.toLocaleDateString("ru-ru", {
+          <span className="text-xs max-w-[30%] line-clamp-2 text-fg4">
-						year: "numeric",
+            {card.version}
-					})}
           </span>
+        )}
       </div>
       <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
         {card.description}

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}
-		/>
-	);
-};

src/shared/ui/cover/index.ts

@@ -1,3 +0,0 @@
-import { Cover } from "./cover";
-
-export { Cover };

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"

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: {