feat(quest): add plot modal

src/api/routes/quests/controller.ts

@@ -52,6 +52,21 @@ const egerPriceCardImage = path.join(imageRootDir, 'cards/price/desktop/eger.png
 const faraonPriceCardImage = path.join(imageRootDir, 'cards/price/desktop/faraon.png');
 const multPriceCardImage = path.join(imageRootDir, 'cards/price/desktop/mult.png');
 
+const egerPlotBatDesktopImage = path.join(imageRootDir, '/stories/eger/desktop/plot/bat.png');
+const egerPlotBatMobileImage = path.join(imageRootDir, '/stories/eger/desktop/plot/batMobile.png');
+const egerPlotBottleDesktopImage = path.join(imageRootDir, '/stories/eger/desktop/plot/bottle.png');
+const egerPlotBottleMobileImage = path.join(imageRootDir, '/stories/eger/desktop/plot/bottleMobile.png');
+const egerJarDesktopImage = path.join(imageRootDir, '/stories/eger/desktop/plot/jar.png');
+
+const faraonPlotScrollDesktopImage = path.join(imageRootDir, '/stories/faraon/desktop/plot/scroll.png');
+const faraonPlotKeysDesktopImage = path.join(imageRootDir, '/stories/faraon/desktop/plot/keys.png');
+
+const multPlotPlantDesktopImage = path.join(imageRootDir, '/stories/mult/desktop/plot/plant.png');
+const multPlotStarDesktopImage = path.join(imageRootDir, '/stories/mult/desktop/plot/star.png');
+const multPlotTreeDesktopImage = path.join(imageRootDir, '/stories/mult/desktop/plot/tree.png');
+
+const multPlotStarMobileImage = path.join(imageRootDir, '/stories/mult/mobile/plot/star.png');
+
 export type QuestItemType = {
   age: {
     styles?: object;
@@ -113,6 +128,88 @@ const egerStories: StoryType[] = [
       src: egerPlotMobileImage,
     },
     modal: {
+      content: {
+        background: {
+          color: COLORS[ColorVariant.GRADIENT_PURPLE],
+          images: [
+            {
+              alt: 'летучая мышь',
+              height: 124,
+              mobileHeight: 70,
+              mobilePosition: {
+                left: 0,
+                top: -73,
+              },
+              mobileSrc: egerPlotBatMobileImage,
+              mobileWidth: 130,
+              position: {
+                bottom: -63,
+                right: -162,
+              },
+              src: egerPlotBatDesktopImage,
+              width: 170,
+            },
+            {
+              alt: 'bottle',
+              height: 180,
+              mobileHeight: 100,
+              mobilePosition: {
+                bottom: -88,
+                right: 22,
+              },
+              mobileSrc: egerPlotBottleMobileImage,
+              mobileWidth: 64,
+              position: {
+                left: -161,
+                top: -38,
+              },
+              src: egerPlotBottleDesktopImage,
+              width: 180,
+            },
+            {
+              alt: 'jar',
+              height: 127,
+              mobileHeight: 1,
+              mobileWidth: 1,
+              position: {
+                right: -102,
+                top: -30,
+              },
+              src: egerJarDesktopImage,
+              width: 100,
+            },
+          ],
+        },
+        mobileText: 'Гуляя в этих местах, самое главное\n'
+          + '- не упустить солнце.\\n'
+          + 'Ведь в кромешной тьме прятаться негде\\n'
+          + '\\n'
+          + '«Разве что в этой скрипучей хижине»,\\n'
+          + '- так думает каждый,\\n'
+          + 'кто ночью оказывается здесь без ночлега\\n'
+          + '\\n'
+          + 'А зря! В беспроглядной холодной ночи\\n'
+          + 'куда безопаснее, чем там\\n'
+          + '\\n'
+          + 'Ведь вы зашли на ночлег в дом,\\n'
+          + 'где в одиноком долголетии справляется\\n'
+          + 'со скукой сумасшедший дед\\n'
+          + '\\n'
+          + 'Он ужасно не любит незваных гостей,\\n'
+          + 'а потому развлечет вас так,\\n'
+          + 'что вы больше никогда сюда\\n'
+          + 'не вернётесь',
+        text: 'Гуляя в этих местах, самое главное - не упустить солнце.\\n'
+          + 'Ведь в кромешной тьме прятаться негде\\n\\n'
+          + '«Разве что в этой скрипучей хижине», - так думает каждый,'
+          + '\\nкто ночью оказывается здесь без ночлега\\n\\n'
+          + 'А зря! В беспроглядной холодной ночи куда безопаснее, чем там\\n\\n'
+          + 'Ведь вы зашли на ночлег в дом, где в одиноком долголетии\\n'
+          + 'справляется со скукой сумасшедший дед\\n\\n'
+          + 'Он ужасно не любит незваных гостей, а потому\\n'
+          + 'развлечет вас так, что вы больше никогда сюда не вернётесь...',
+        title: 'Сюжет “Егерь”',
+      },
       type: 'questPlot',
     },
     title: 'Сюжет',
@@ -217,6 +314,91 @@ const faraonStories: StoryType[] = [
       src: faraonPlotMobileImage,
     },
     modal: {
+      content: {
+        background: {
+          color: 'linear-gradient(173deg, #FFB76F 0%, #FB5858 100%)',
+          images: [
+            {
+              alt: 'свиток',
+              height: 190,
+              mobileHeight: 1,
+              mobilePosition: {
+                left: -1000,
+                top: -1000,
+              },
+              mobileWidth: 1,
+              position: {
+                left: -180,
+                top: -37,
+              },
+              src: faraonPlotScrollDesktopImage,
+              width: 170,
+            },
+            {
+              alt: 'ключи',
+              height: 138,
+              mobileHeight: 80,
+              mobilePosition: {
+                bottom: -70,
+                right: 5,
+              },
+              mobileWidth: 60,
+              position: {
+                bottom: -75,
+                right: -120,
+              },
+              src: faraonPlotKeysDesktopImage,
+              width: 105,
+            },
+            {
+              alt: 'летучая мышь',
+              height: 124,
+              mobileHeight: 70,
+              mobilePosition: {
+                left: 0,
+                top: -75,
+              },
+              mobileSrc: egerPlotBatMobileImage,
+              mobileWidth: 130,
+              position: {
+                right: -149,
+                top: -75,
+              },
+              src: egerPlotBatDesktopImage,
+              width: 170,
+            },
+          ],
+        },
+        mobileText: 'Гуляя в этих местах, самое главное\n'
+          + '- не упустить солнце.\\n'
+          + 'Ведь в кромешной тьме прятаться негде\\n'
+          + '\\n'
+          + '«Разве что в этой скрипучей хижине»,\\n'
+          + '- так думает каждый,\\n'
+          + 'кто ночью оказывается здесь без ночлега\\n'
+          + '\\n'
+          + 'А зря! В беспроглядной холодной ночи\\n'
+          + 'куда безопаснее, чем там\\n'
+          + '\\n'
+          + 'Ведь вы зашли на ночлег в дом,\\n'
+          + 'где в одиноком долголетии справляется\\n'
+          + 'со скукой сумасшедший дед\\n'
+          + '\\n'
+          + 'Он ужасно не любит незваных гостей,\\n'
+          + 'а потому развлечет вас так,\\n'
+          + 'что вы больше никогда сюда\\n'
+          + 'не вернётесь',
+        text: 'Гуляя в этих местах, самое главное - не упустить солнце.\\n'
+          + 'Ведь в кромешной тьме прятаться негде\\n\\n'
+          + '«Разве что в этой скрипучей хижине», - так думает каждый,'
+          + '\\nкто ночью оказывается здесь без ночлега\\n\\n'
+          + 'А зря! В беспроглядной холодной ночи куда безопаснее, чем там\\n\\n'
+          + 'Ведь вы зашли на ночлег в дом, где в одиноком долголетии\\n'
+          + 'справляется со скукой сумасшедший дед\\n\\n'
+          + 'Он ужасно не любит незваных гостей, а потому\\n'
+          + 'развлечет вас так, что вы больше никогда сюда не вернётесь...',
+        title: 'Сюжет “Фараон”',
+      },
       type: 'questPlot',
     },
     title: 'Сюжет',
@@ -252,7 +434,6 @@ const faraonStories: StoryType[] = [
     title: 'Фотографии\\n и видео',
   },
 ];
-
 export const faraonQuest: QuestItemType = {
   age: {
     styles: {
@@ -329,7 +510,7 @@ export const faraonQuest: QuestItemType = {
   },
 };
 
-const stories: StoryType[] = [
+const multStories: StoryType[] = [
   {
     id: uuid(),
     img: {
@@ -341,6 +522,91 @@ const stories: StoryType[] = [
       src: multPlotMobileImage,
     },
     modal: {
+      content: {
+        background: {
+          color: COLORS[ColorVariant.GRADIENT_GREEN2],
+          images: [
+            {
+              alt: 'елка',
+              height: 205,
+              mobileHeight: 1,
+              mobilePosition: {
+                left: -1000,
+                top: -1000,
+              },
+              mobileWidth: 1,
+              position: {
+                left: -140,
+                top: -40,
+              },
+              src: multPlotTreeDesktopImage,
+              width: 134,
+            },
+            {
+              alt: 'звезды',
+              height: 150,
+              mobileHeight: 80,
+              mobilePosition: {
+                left: 20,
+                top: -60,
+              },
+              mobileSrc: multPlotStarMobileImage,
+              mobileWidth: 80,
+              position: {
+                right: -95,
+                top: -50,
+              },
+              src: multPlotStarDesktopImage,
+              width: 120,
+            },
+            {
+              alt: 'цветок',
+              height: 150,
+              mobileHeight: 114,
+              mobilePosition: {
+                bottom: -100,
+                right: 0,
+              },
+              mobileWidth: 115,
+              position: {
+                bottom: -75,
+                right: -152,
+              },
+              src: multPlotPlantDesktopImage,
+              width: 152,
+            },
+          ],
+        },
+        mobileText: 'Гуляя в этих местах, самое главное\n'
+          + '- не упустить солнце.\\n'
+          + 'Ведь в кромешной тьме прятаться негде\\n'
+          + '\\n'
+          + '«Разве что в этой скрипучей хижине»,\\n'
+          + '- так думает каждый,\\n'
+          + 'кто ночью оказывается здесь без ночлега\\n'
+          + '\\n'
+          + 'А зря! В беспроглядной холодной ночи\\n'
+          + 'куда безопаснее, чем там\\n'
+          + '\\n'
+          + 'Ведь вы зашли на ночлег в дом,\\n'
+          + 'где в одиноком долголетии справляется\\n'
+          + 'со скукой сумасшедший дед\\n'
+          + '\\n'
+          + 'Он ужасно не любит незваных гостей,\\n'
+          + 'а потому развлечет вас так,\\n'
+          + 'что вы больше никогда сюда\\n'
+          + 'не вернётесь',
+        text: 'Гуляя в этих местах, самое главное - не упустить солнце.\\n'
+          + 'Ведь в кромешной тьме прятаться негде\\n\\n'
+          + '«Разве что в этой скрипучей хижине», - так думает каждый,'
+          + '\\nкто ночью оказывается здесь без ночлега\\n\\n'
+          + 'А зря! В беспроглядной холодной ночи куда безопаснее, чем там\\n\\n'
+          + 'Ведь вы зашли на ночлег в дом, где в одиноком долголетии\\n'
+          + 'справляется со скукой сумасшедший дед\\n\\n'
+          + 'Он ужасно не любит незваных гостей, а потому\\n'
+          + 'развлечет вас так, что вы больше никогда сюда не вернётесь...',
+        title: 'Сюжет “Мульт”',
+      },
       type: 'questPlot',
     },
     title: 'Сюжет',
@@ -376,7 +642,6 @@ const stories: StoryType[] = [
     title: 'Фотографии\\n и видео',
   },
 ];
-
 export const multQuest: QuestItemType = {
   age: {
     text: '5+',
@@ -417,7 +682,7 @@ export const multQuest: QuestItemType = {
   price: 7500,
   rating: 230,
   statisticsBackground: COLORS[ColorVariant.GRADIENT_GREEN],
-  stories,
+  stories: multStories,
   time: {
     text: '60 минут',
   },

src/api/routes/stories/controller.ts

@@ -4,6 +4,7 @@ import { Request, Response } from 'express';
 import { v4 as uuid } from 'uuid';
 
 import { PAGE_LINK } from '../../../constants';
+import { ImageType } from '../image/controller';
 
 const imageRootDir = 'static/images/stories/';
 
@@ -20,7 +21,15 @@ const example2 = path.join(imageRootDir, 'example2.jpg');
 export type StoryFeedbackModalType = {};
 export type StoryGalleryModalType = {};
 export type StoryInfoModalType = {};
-export type StoryQuestPlotModalType = {};
+export type StoryQuestPlotModalType = {
+  background: {
+    color: string;
+    images: ImageType[];
+  };
+  mobileText: string;
+  text: string;
+  title: string;
+};
 
 export type StoryModalContent = StoryFeedbackModalType | StoryGalleryModalType | StoryInfoModalType | StoryQuestPlotModalType;
 export type StoryModalType = 'faq' | 'feedback' | 'gallery' | 'info' | 'questPlot';

src/constants/index.ts

@@ -223,6 +223,8 @@ export enum ColorVariant {
   GRADIENT_YELLOW,
   GRADIENT_ORANGE,
   GRADIENT_GREEN,
+  GRADIENT_GREEN2,
+  GRADIENT_PURPLE,
   GREEN,
   GREY,
   ORANGE,
@@ -246,6 +248,8 @@ export const COLORS: ColorType = {
   [ColorVariant.GRADIENT_YELLOW]: 'linear-gradient(154.56deg, #FDF041 -35.9%, #FBAB01 129.39%)',
   [ColorVariant.GRADIENT_ORANGE]: 'linear-gradient(135.23deg, #FFB76F 20.94%, #FB5858 75.76%)',
   [ColorVariant.GRADIENT_GREEN]: 'linear-gradient(120.58deg, #E9CA26 12.53%, #33CC99 92.98%)',
+  [ColorVariant.GRADIENT_GREEN2]: 'linear-gradient(142deg, #E9CA26 6.25%, #3C9 100%)',
+  [ColorVariant.GRADIENT_PURPLE]: 'linear-gradient(142deg, #968CE0 0%, #3748AA 100%)',
   [ColorVariant.GREEN]: '#15B555',
   [ColorVariant.GREY]: '#F1F7FD',
   [ColorVariant.ORANGE]: '#FFB76F',