feat: add difficulty description tooltip

stardustmeg · Jun 17, 2024 · 301b96e · 301b96e · stardustmeg · Jun 17, 2024
1 parent 77faed3
commit 301b96e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/src/pages/AboutUsPage/view/AboutUsPageView.ts b/src/pages/AboutUsPage/view/AboutUsPageView.ts
@@ -1,9 +1,9 @@
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
-import { LINK_DETAILS } from '@/shared/constants/links.ts';
+import { LINK_DETAIL } from '@/shared/constants/links.ts';
 import { PAGE_DESCRIPTION } from '@/shared/constants/pages.ts';
-import SVG_DETAILS from '@/shared/constants/svg.ts';
+import SVG_DETAIL from '@/shared/constants/svg.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
 
@@ -48,13 +48,13 @@ class AboutUsPageView {
     const logo = new LinkModel({
       attrs: {
         href: 'https://rs.school',
-        target: LINK_DETAILS.BLANK,
+        target: LINK_DETAIL.BLANK,
       },
       classes: [styles.logo],
     });
 
-    const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
-    svg.append(createSVGUse(SVG_DETAILS.RSS_LOGO));
+    const svg = document.createElementNS(SVG_DETAIL.SVG_URL, 'svg');
+    svg.append(createSVGUse(SVG_DETAIL.RSS_LOGO));
     logo.getHTML().append(svg);
     return logo;
   }

diff --git a/src/shared/img/svg/leaves.svg b/src/shared/img/svg/leaves.svg
diff --git a/src/shared/types/product.ts b/src/shared/types/product.ts
@@ -18,15 +18,29 @@ export const SIZE = {
   XL: 'XL',
 } as const;
 
+export type SizeType = (typeof SIZE)[keyof typeof SIZE];
+
 export const LEVEL = {
   1: '1',
   2: '2',
   3: '3',
 } as const;
 
-export type SizeType = (typeof SIZE)[keyof typeof SIZE];
 export type LevelType = (typeof LEVEL)[keyof typeof LEVEL];
 
+export const DIFFICULTY = {
+  en: {
+    1: 'Almost unkillable',
+    2: 'Needs some love',
+    3: 'For botanical ninjas',
+  },
+  ru: {
+    1: 'Почти неубиваемое',
+    2: 'Нужно немножко любви',
+    3: 'Для ниндзя ботаников',
+  },
+} as const;
+
 export interface Variant {
   discount: number;
   id: number;

diff --git a/src/widgets/Blog/test/blog.spec.ts b/src/widgets/Blog/test/blog.spec.ts
@@ -1,6 +1,6 @@
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 
-import BlogWidgetModel from '../model/BogWidgetModel.ts';
+import BlogWidgetModel from '../model/BlogWidgetModel.ts';
 
 /**
  * @vitest-environment jsdom

diff --git a/src/widgets/ProductInfo/view/ProductInfoView.ts b/src/widgets/ProductInfo/view/ProductInfoView.ts
@@ -10,6 +10,7 @@ import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
 import { PRODUCT_INFO_TEXT, PRODUCT_INFO_TEXT_KEY } from '@/shared/constants/product.ts';
 import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
 import SVG_DETAIL from '@/shared/constants/svg.ts';
+import { DIFFICULTY } from '@/shared/types/product.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
 import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
@@ -219,8 +220,12 @@ class ProductInfoView {
         cssClasses: ['difficultySpan'],
         innerContent: PRODUCT_INFO_TEXT[currentLanguage].DIFFICULTY,
         tag: 'span',
+        title: DIFFICULTY[getCurrentLanguage()][this.params.level],
       });
 
+      observeStore(selectCurrentLanguage, () => {
+        difficultySpan.title = this.params.level ? DIFFICULTY[getCurrentLanguage()][this.params.level] : '';
+      });
       observeCurrentLanguage(difficultySpan, PRODUCT_INFO_TEXT, PRODUCT_INFO_TEXT_KEY.DIFFICULTY);
 
       difficultySpan.append(...this.createDifficultyPoints());