Merge pull request #92 from MYiLA/feature/CYB-124-разработать-компоне…

…нт-тултипа

CYB-124: разработать компонент тултипа

packages/client/src/pages/page-game/widgets/game-interface/index.tsx

@@ -2,6 +2,7 @@ import cn from "classnames";
 
 import { useTheme } from "@hooks/use-theme";
 import { Theme } from "@config/constants";
+import { Tooltip } from "@ui/tooltip/tooltip";
 import { Player } from "../../type";
 import { GloryCounter } from "../../entities/glory-counter";
 import { Chronicle } from "../../entities/chronicle";
@@ -35,22 +36,24 @@ export function GameInterface({
     <div className={styles.interface}>
       <div className={styles.info}>
         <div className={styles.progress}>
-          <ul className={styles.glories}>
-            {players.map(
-              (player) =>
-                player && (
-                  <li
-                    key={`${player.type}-${player?.id}`}
-                    className={styles.glory}
-                  >
-                    <GloryCounter
-                      gloryCount={player.gloryCount}
-                      playerType={player.type}
-                    />
-                  </li>
-                )
-            )}
-          </ul>
+          <Tooltip direction="right" text="Слава игроков">
+            <ul className={styles.glories}>
+              {players.map(
+                (player) =>
+                  player && (
+                    <li
+                      key={`${player.type}-${player?.id}`}
+                      className={styles.glory}
+                    >
+                      <GloryCounter
+                        gloryCount={player.gloryCount}
+                        playerType={player.type}
+                      />
+                    </li>
+                  )
+              )}
+            </ul>
+          </Tooltip>
           {gameType === GameType.Online && <TimeCounter />}
         </div>
         <Chronicle />

packages/client/src/pages/page-lobby/components/battle-settings/offline-users-form/offline-users-form.tsx

@@ -9,6 +9,7 @@ import { useGameStart } from "@hooks/use-game-start";
 import { FormEvent } from "react";
 import { userLogout } from "@store/reducers/user-reducer";
 import { useDispatch } from "react-redux";
+import { Tooltip } from "@ui/tooltip/tooltip";
 
 const initialForm: {
   user1: string;
@@ -130,20 +131,25 @@ export const OfflineUsersForm = () => {
         onFocus={onFocus}
         onBlur={onBlur}
       />
-      <MainInput
-        name="max_glory"
-        maxLength={2}
-        placeholder="число славы (макс.)"
-        value={form.max_glory as string}
-        onChange={(e) => {
-          e.target.value = e.target.value.replace(/[^0-9]/g, "");
-          onChange(e);
-        }}
-        className={styles.battle_inputs}
-        error={validate.max_glory.error}
-        onFocus={onFocus}
-        onBlur={onBlur}
-      />
+      <Tooltip
+        direction="top"
+        text="Цель игры - заработать славу. Игра заканчивается, если у одного из игроков наберется нужное количество славы."
+      >
+        <MainInput
+          name="max_glory"
+          maxLength={2}
+          placeholder="число славы (макс.)"
+          value={form.max_glory as string}
+          onChange={(e) => {
+            e.target.value = e.target.value.replace(/[^0-9]/g, "");
+            onChange(e);
+          }}
+          className={styles.battle_inputs}
+          error={validate.max_glory.error}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      </Tooltip>
 
       <div
         style={{

packages/client/src/shared/ui/tooltip/tooltip.module.scss

@@ -0,0 +1,103 @@
+@import "@scss/_variables.scss";
+
+.tooltip {
+    &_wrapper {
+        display: inline-block;
+        position: relative;
+    }
+
+    &_tip {
+        position: absolute;
+        border-radius: 12px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 8px;
+        color: $color-black;
+        font-size: 14px;
+        font-family: sans-serif;
+        line-height: 1;
+        z-index: 100;
+        white-space: nowrap;
+        min-width: 250px;
+        max-width: 300px;
+        text-align: center;
+
+        &::before {
+            content: " ";
+            left: 50%;
+            border: solid transparent;
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            border-width: 12px;
+            margin-left: -6px;
+        }
+
+        &.neon {
+            background: $player-blue;
+
+            &::before {
+                border-top-color: $player-blue;
+            }
+        }
+
+        &.purple {
+            background: $color-violet;
+
+            &::before {
+                border-top-color: $color-violet;
+            }
+        }
+
+        span {
+            width: 100%;
+            white-space: normal;
+            overflow-wrap: break-word;
+            text-align: center;
+        }
+
+        &.top {
+            top: -190%;
+
+            &::before {
+                top: 100%;
+                border-width: 8px;
+            }
+        }
+
+        &.right {
+            left: calc(100% + 30px);
+            top: 50%;
+            transform: translateX(0) translateY(-50%);
+
+            &::before {
+                left: -14px;
+                top: 50%;
+                transform: translateX(0) translateY(-50%) rotate(90deg);
+            }
+        }
+
+        &.bottom {
+            bottom: -38px;
+
+            &::before {
+                bottom: 100%;
+            }
+        }
+
+        &.left {
+            left: auto;
+            right: calc(100% + 30px);
+            top: 50%;
+            transform: translateX(0) translateY(-50%);
+
+            &::before {
+                left: auto;
+                right: -12px;
+                top: 50%;
+                transform: translateX(0) translateY(-50%);
+            }
+        }
+    }
+}

packages/client/src/shared/ui/tooltip/tooltip.tsx

@@ -0,0 +1,57 @@
+import { ReactElement, ReactNode, useState } from "react";
+import { useTheme } from "@hooks/use-theme";
+import { Theme } from "@config/constants";
+import cn from "classnames";
+import styles from "./tooltip.module.scss";
+
+interface TooltipProps {
+  direction: "top" | "left" | "right" | "bottom";
+  children: ReactNode;
+  text: string;
+}
+
+export const Tooltip = ({
+  children,
+  text,
+  direction = "top",
+}: TooltipProps): ReactElement => {
+  let timeout: NodeJS.Timeout;
+  const [active, setActive] = useState(false);
+
+  const themeName = useTheme();
+
+  const showTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, 200);
+  };
+
+  const hideTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+
+  return (
+    <div
+      className={styles.tooltip_wrapper}
+      onMouseEnter={showTip}
+      onMouseLeave={hideTip}
+    >
+      {children}
+      {active && (
+        <div
+          className={cn(styles.tooltip_tip, {
+            [styles.purple]: themeName === Theme.Purple,
+            [styles.neon]: themeName === Theme.Neon,
+            [styles.top]: direction === "top",
+            [styles.bottom]: direction === "bottom",
+            [styles.left]: direction === "left",
+            [styles.right]: direction === "right",
+          })}
+        >
+          <span>{text}</span>
+        </div>
+      )}
+    </div>
+  );
+};