feat(ui): add GameStateCard, PolyButton components, extract hook useC…

…onfirmModal, add SavePage

src/client/config/paths.tsx

@@ -9,6 +9,7 @@ const profile = path("/");
 const mySaves = path("/my-saves");
 const localSaves = mySaves.path("/local");
 const mySave = mySaves.path("/:gameStateId");
+const save = path("/saves/:gameStateId");
 const sharedSaves = path("/shared-saves");
 const publicSaves = path("/public-saves");
 
@@ -28,6 +29,7 @@ export const paths = {
   mySaves,
   localSaves,
   mySave,
+  save,
   sharedSaves,
   publicSaves,
 

src/client/config/routes.tsx

@@ -8,8 +8,9 @@ import { ResetPasswordPage } from "@/client/pages/ResetPassword/ResetPasswordPag
 import { ProfilePage } from "@/client/pages/Profile/ProfilePage";
 import { MySavesPage } from "@/client/pages/MySaves/MySavesPage";
 import { MySavePage } from "@/client/pages/MySaves/MySave/MySavePage";
-import { SharedSavesPage } from "@/client/pages/SharedSaves/SharedSavesPage";
-import { PublicSavesPage } from "@/client/pages/PublicSaves/PublicSavesPage";
+import { SavePage } from "../pages/saves/Save/SavePage";
+import { SharedSavesPage } from "@/client/pages/saves/SharedSaves/SharedSavesPage";
+import { PublicSavesPage } from "@/client/pages/saves/PublicSaves/PublicSavesPage";
 
 import { GamesPage } from "@/client/pages/Games/GamesPage";
 import { GamePage } from "@/client/pages/Games/Game/GamePage";
@@ -116,6 +117,12 @@ export const routes: RouteDescriptor[] = [
     access: RouteAccess.AUTHENTICATED,
     forRoles: [UserRole.USER],
   },
+  {
+    path: paths.save.pattern,
+    component: SavePage,
+    access: RouteAccess.AUTHENTICATED,
+    forRoles: [UserRole.USER],
+  },
   {
     path: paths.sharedSaves.pattern,
     component: SharedSavesPage,

src/client/lib/components/GameStateCard/GameStateCard.tsx

@@ -0,0 +1,60 @@
+import { GameState } from "@/types";
+
+import classes from "./game-state-card.module.scss";
+import { clsx } from "clsx";
+import { Link } from "wouter";
+import { ThreeDotsMenu } from "@/client/ui/molecules/ThreeDotsMenu";
+import { useTranslation } from "react-i18next";
+import { syncMap } from "@/client/pages/MySaves/utils";
+import { useConfirmModal } from "@/client/ui/hooks/useConfirmModal/useConfirmModal";
+
+export type GameStateCardProps = {
+  gameState: GameState;
+  className?: string;
+  onDelete?: (gameStateId: string) => void;
+  href: string;
+};
+
+export const GameStateCard = (props: GameStateCardProps) => {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: "components.GameStateCard",
+  });
+
+  const { modal, onClick: onDelete } = useConfirmModal({
+    onConfirm: () => props.onDelete?.(props.gameState.id),
+  });
+
+  return (
+    <div
+      className={clsx(classes.GameStateCard, props.className)}
+      style={{
+        backgroundImage: `url(${props.gameState.gameIconURL})`,
+      }}
+    >
+      <Link href={props.href} className={classes.GameStateLink}>
+        <div className={classes.GameStateCardInner}>
+          {props.onDelete && (
+            <ThreeDotsMenu
+              className={classes.GameStateActions}
+              menuItems={[
+                {
+                  onClick: () => onDelete(),
+                  children: "Delete",
+                  key: "delete",
+                },
+              ]}
+            />
+          )}
+          {modal}
+
+          <div className={classes.GameStateInfo}>
+            <p>{props.gameState.name}</p>
+            <p>
+              {t("sync")}: {t(syncMap[props.gameState.sync])}
+            </p>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};

src/client/lib/components/GameStateCard/game-state-card.module.scss

@@ -0,0 +1,46 @@
+.GameStateCard {
+  min-width: 200px;
+  min-height: 250px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.GameStateLink {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+}
+
+.GameStateCardInner {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem 0.75rem 1rem;
+
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.2) 0%,
+    rgba(0, 0, 0, 0.8) 60%,
+    rgba(0, 0, 0, 0.9) 100%
+  );
+  background-position: 0% 50%;
+  background-size: 200% 200%;
+  transition: background-position 0.3s ease;
+
+  &:hover {
+    background-position: 0% 60%;
+  }
+}
+
+.GameStateActions {
+  margin-left: auto;
+}
+
+.GameStateInfo {
+  margin-top: auto;
+  color: white;
+}

src/client/lib/components/GameStateCard/index.ts

@@ -0,0 +1 @@
+export * from "./GameStateCard";

src/client/lib/components/ParametersView/ParametersView.tsx

@@ -0,0 +1,61 @@
+import classes from "./parameters-view.module.scss";
+
+import { GameStateValue } from "@/types";
+
+type ParametersViewProps = {
+  gameStateValues: GameStateValue[];
+};
+
+export const ParametersView = (props: ParametersViewProps) => {
+  return (
+    <div>
+      {props.gameStateValues.map((field, idx) => (
+        <ParameterViewItem key={idx} {...field} />
+      ))}
+    </div>
+  );
+};
+
+function formatTime(value: number, type: "seconds") {
+  if (type === "seconds") {
+    if (value < 60) {
+      return `${value} seconds`;
+    }
+    const minutes = Math.floor(value / 60);
+
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    }
+
+    const hours = Math.floor(minutes / 60);
+
+    return `${hours} hours`;
+  }
+
+  return `${value}`;
+}
+
+const ParameterViewItem = (props: {
+  label: string;
+  value: string;
+  type: string;
+  description: string;
+}) => {
+  if (props.type === "seconds") {
+    return (
+      <div>
+        <span>{props.label}</span>:{" "}
+        <span className={classes.ParameterValue}>
+          {formatTime(parseFloat(props.value), props.type)}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <span>{props.label}</span>:{" "}
+      <span className={classes.ParameterValue}>{props.value.toString()}</span>
+    </div>
+  );
+};

src/client/lib/components/ParametersView/parameters-view.module.scss

@@ -0,0 +1,3 @@
+.ParameterValue {
+  font-weight: bold;
+}

src/client/locales/en/components/GameStateCard.json

@@ -0,0 +1,8 @@
+{
+  "sync": "Sync",
+  "every-hour": "Every hour",
+  "every-day": "Every day",
+  "every-week": "Every week",
+  "every-month": "Every month",
+  "no": "No"
+}

src/client/locales/en/pages/mySaves.json

@@ -6,12 +6,6 @@
   "home": "Home",
   "choose-folder-to-list-files": "Choose folder to list files",
   "upload": "Upload",
-  "sync": "Sync",
-  "every-hour": "Every hour",
-  "every-day": "Every day",
-  "every-week": "Every week",
-  "every-month": "Every month",
-  "no": "No",
   "local-saves": "Local Saves",
   "folder": "Folder",
   "file": "File"

src/client/locales/resources-en.ts

@@ -15,6 +15,8 @@ import sharedSaves from "./en/pages/sharedSaves.json";
 import publicSaves from "./en/pages/publicSaves.json";
 import notFound from "./en/pages/notFound.json";
 
+import GameStateCard from "./en/components/GameStateCard.json";
+
 import common from "./en/common.json";
 
 export const resourcesEN = {
@@ -43,6 +45,9 @@ export const resourcesEN = {
     forms: {
       gameForm,
     },
+    components: {
+      GameStateCard,
+    },
     common: common,
   },
 } as const;

src/client/locales/resources-ru.ts

@@ -15,6 +15,8 @@ import sharedSaves from "./ru/pages/sharedSaves.json";
 import publicSaves from "./ru/pages/publicSaves.json";
 import notFound from "./ru/pages/notFound.json";
 
+import GameStateCard from "./ru/components/GameStateCard.json";
+
 import common from "./ru/common.json";
 
 export const resourcesRU = {
@@ -43,6 +45,9 @@ export const resourcesRU = {
     forms: {
       gameForm,
     },
+    components: {
+      GameStateCard,
+    },
     common: common,
   },
 } as const;

src/client/locales/ru/components/GameStateCard.json

@@ -0,0 +1,8 @@
+{
+  "sync": "Синхронизация",
+  "every-hour": "Каждый час",
+  "every-day": "Каждый день",
+  "every-week": "Каждую неделю",
+  "every-month": "Каждый месяц",
+  "no": "Нет"
+}

src/client/locales/ru/pages/mySaves.json

@@ -6,12 +6,6 @@
   "home": "Главная",
   "choose-folder-to-list-files": "Выберите папку для отображения списка файлов",
   "upload": "Загрузить",
-  "sync": "Синхронизация",
-  "every-hour": "Каждый час",
-  "every-day": "Каждый день",
-  "every-week": "Каждую неделю",
-  "every-month": "Каждый месяц",
-  "no": "Нет",
   "local-saves": "Локальные сохранения",
   "folder": "Папка",
   "file": "Файл"

src/client/pages/MySaves/MySave/MySavePage.tsx

@@ -4,7 +4,7 @@ import { useParams } from "wouter";
 
 import classes from "./my-save-page.module.scss";
 
-import { GameState, GameStateSync, GameStateValue } from "@/types";
+import { GameState, GameStateSync } from "@/types";
 import { useAPIContext } from "@/client/contexts/APIContext";
 import { useUIContext } from "@/client/contexts/UIContext";
 import { useAuthContext } from "@/client/contexts/AuthContext";
@@ -19,7 +19,9 @@ import { Button } from "@/client/ui/atoms/Button/Button";
 import { Flex } from "@/client/ui/atoms/Flex";
 import { Modal } from "@/client/ui/molecules/Modal/Modal";
 import { ConfirmButton } from "@/client/ui/molecules/ConfirmButton/ConfirmButton";
+import { PolyButton } from "@/client/ui/molecules/PolyButton/PolyButton";
 import { SharesWidget } from "@/client/lib/components/SharesWidget";
+import { ParametersView } from "@/client/lib/components/ParametersView/ParametersView";
 
 export const MySavePage = () => {
   const { gameStateAPI } = useAPIContext();
@@ -231,68 +233,20 @@ export const MySavePage = () => {
         </span>
 
         <div className={classes.Buttons}>
-          <Button onClick={downloadStateAs}>{t("download-as")} </Button>
-          <Button onClick={downloadState}>{t("download")} </Button>
+          <PolyButton
+            subActions={[
+              {
+                onClick: downloadStateAs,
+                children: t("download-as"),
+                key: "1",
+              },
+            ]}
+            onClick={downloadState}
+          >
+            {t("download")}
+          </PolyButton>
         </div>
       </div>
     </Container>
   );
 };
-
-type ParametersViewProps = {
-  gameStateValues: GameStateValue[];
-};
-
-const ParametersView = (props: ParametersViewProps) => {
-  return (
-    <div>
-      {props.gameStateValues.map((field, idx) => (
-        <ParameterViewItem key={idx} {...field} />
-      ))}
-    </div>
-  );
-};
-
-function formatTime(value: number, type: "seconds") {
-  if (type === "seconds") {
-    if (value < 60) {
-      return `${value} seconds`;
-    }
-    const minutes = Math.floor(value / 60);
-
-    if (minutes < 60) {
-      return `${minutes} minutes`;
-    }
-
-    const hours = Math.floor(minutes / 60);
-
-    return `${hours} hours`;
-  }
-
-  return `${value}`;
-}
-
-const ParameterViewItem = (props: {
-  label: string;
-  value: string;
-  type: string;
-  description: string;
-}) => {
-  if (props.type === "seconds") {
-    return (
-      <div>
-        <span>{props.label}</span>:{" "}
-        <span className={classes.ParameterValue}>
-          {formatTime(parseFloat(props.value), props.type)}
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <span>{props.label}</span>:{" "}
-      <span className={classes.ParameterValue}>{props.value.toString()}</span>
-    </div>
-  );
-};