From ce0e91cf356172a17b5ef6c258e1a2c14a0c6026 Mon Sep 17 00:00:00 2001
From: Vitalij Ryndin <crashmax.dev@gmail.com>
Date: Fri, 18 Oct 2024 03:02:00 +0800
Subject: [PATCH] feat: guide and element about

---
 apps/frontend/src/app.vue                     |  5 +-
 .../frontend/src/components/alchemy-board.vue |  4 +-
 .../src/components/alchemy-counter.vue        | 13 ++-
 .../src/components/alchemy-draggable-item.vue |  2 +-
 .../src/components/alchemy-element-about.vue  | 91 +++++++++++++++++++
 .../src/components/alchemy-elements.vue       | 40 ++++++--
 .../frontend/src/components/alchemy-guide.vue | 71 +++++++++------
 apps/frontend/src/stores/use-drawer.ts        | 27 ------
 apps/frontend/src/stores/use-element-about.ts | 53 +++++++++++
 apps/frontend/src/stores/use-game.ts          | 13 +--
 apps/frontend/src/stores/use-guide.ts         | 20 ++++
 .../src/stores/use-opened-elements.ts         | 17 +++-
 apps/frontend/src/styles/main.scss            |  6 ++
 apps/frontend/src/ui/drawer/drawer-header.vue | 10 +-
 apps/frontend/src/ui/drawer/drawer.vue        | 16 +++-
 15 files changed, 295 insertions(+), 93 deletions(-)
 create mode 100644 apps/frontend/src/components/alchemy-element-about.vue
 delete mode 100644 apps/frontend/src/stores/use-drawer.ts
 create mode 100644 apps/frontend/src/stores/use-element-about.ts
 create mode 100644 apps/frontend/src/stores/use-guide.ts

diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index 265f73b..234f68a 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -2,12 +2,15 @@
 import AlchemyBoard from '@/components/alchemy-board.vue'
 import AlchemyElements from '@/components/alchemy-elements.vue'
 import AlchemyCounter from '@/components/alchemy-counter.vue'
-import AlchemyGuide from './components/alchemy-guide.vue'
+import AlchemyElementAbout from './components/alchemy-element-about.vue'
+import AlchemyGuide from './components/alchemy-guide.vue';
 </script>
 
 <template>
   <AlchemyCounter />
   <AlchemyElements />
   <AlchemyBoard />
+
   <AlchemyGuide />
+  <AlchemyElementAbout />
 </template>
diff --git a/apps/frontend/src/components/alchemy-board.vue b/apps/frontend/src/components/alchemy-board.vue
index abe0812..35c08eb 100644
--- a/apps/frontend/src/components/alchemy-board.vue
+++ b/apps/frontend/src/components/alchemy-board.vue
@@ -100,8 +100,8 @@ function createElement(
     ...newElement,
     uuid: crypto.randomUUID(),
     position: {
-      x: isCopy ? boardElement.position.x + 15 : boardElement.position.x,
-      y: isCopy ? boardElement.position.y + 15 : boardElement.position.y
+      x: isCopy ? boardElement.position.x + 30 : boardElement.position.x,
+      y: isCopy ? boardElement.position.y + 30 : boardElement.position.y
     }
   })
 }
diff --git a/apps/frontend/src/components/alchemy-counter.vue b/apps/frontend/src/components/alchemy-counter.vue
index 73f350c..2f5427b 100644
--- a/apps/frontend/src/components/alchemy-counter.vue
+++ b/apps/frontend/src/components/alchemy-counter.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { useGame } from '@/stores/use-game.js'
+import { storeToRefs } from 'pinia'
+import { useOpenedElements } from '@/stores/use-opened-elements'
 
-const game = useGame()
+const { elementsCounter } = storeToRefs(useOpenedElements())
 </script>
 
 <template>
-  <div class="counter">{{ game.availableRecipes }}</div>
+  <div class="counter">{{ elementsCounter }}</div>
 </template>
 
 <style scoped>
 .counter {
   position: absolute;
-  top: 0;
-  right: 5px;
-  padding: 5px;
-  line-height: 1.8;
+  top: 4px;
+  right: 10px;
   z-index: 3;
   font-size: 18px;
   pointer-events: none;
diff --git a/apps/frontend/src/components/alchemy-draggable-item.vue b/apps/frontend/src/components/alchemy-draggable-item.vue
index 82b0832..3108e45 100644
--- a/apps/frontend/src/components/alchemy-draggable-item.vue
+++ b/apps/frontend/src/components/alchemy-draggable-item.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AlchemyItem from './alchemy-item.vue'
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { clamp, useDraggable, useElementBounding } from '@vueuse/core'
 import { useSounds } from '@/stores/use-sounds'
 import type { AlchemyElementOnBoard, Position } from '@/types.js'
diff --git a/apps/frontend/src/components/alchemy-element-about.vue b/apps/frontend/src/components/alchemy-element-about.vue
new file mode 100644
index 0000000..289e24c
--- /dev/null
+++ b/apps/frontend/src/components/alchemy-element-about.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import Drawer from '@/ui/drawer/drawer.vue'
+import DrawerBody from '@/ui/drawer/drawer-body.vue'
+import DrawerHeader from '@/ui/drawer/drawer-header.vue'
+import { useElementAbout } from '@/stores/use-element-about'
+import { sprites } from '@/assets/sprites'
+import AlchemyItem from './alchemy-item.vue'
+
+const elementAbout = useElementAbout()
+</script>
+
+<template>
+  <Drawer v-model="elementAbout.isOpen" min-width="65%">
+    <template v-if="elementAbout.activeElement">
+      <DrawerHeader>
+        Об элементе
+      </DrawerHeader>
+      <DrawerBody>
+        <div class="container">
+          <div class="info">
+            <h2>{{ elementAbout.activeElement.name }}</h2>
+            <img
+              class="image"
+              :src="sprites[elementAbout.activeElement.id]"
+            />
+            <p class="description">
+              {{ elementAbout.activeElement.description }}
+            </p>
+          </div>
+
+          <div v-if="elementAbout.activeElement.recipes.length">
+            <h2>Доступные рецепты</h2>
+            <div
+              v-for="(recipe, index) of elementAbout.activeElement.recipes"
+              class="recipe"
+              :key="index"
+            >
+              <div class="element" @click="elementAbout.openElementAbout(recipe[0])">
+                <AlchemyItem :element="recipe[0]" />
+              </div>
+              <span class="plus">+</span>
+              <div class="element" @click="elementAbout.openElementAbout(recipe[1])">
+                <AlchemyItem :element="recipe[1]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </DrawerBody>
+    </template>
+  </Drawer>
+</template>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.info {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  flex-direction: column;
+
+  .image {
+    height: 120px;
+    width: 120px;
+  }
+
+  .description {
+    text-align: justify;
+    font-size: 18px;
+  }
+}
+
+.recipe {
+  display: flex;
+  align-items: baseline;
+
+  .plus {
+    font-size: 64px;
+    font-weight: bold;
+  }
+
+  .element {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/apps/frontend/src/components/alchemy-elements.vue b/apps/frontend/src/components/alchemy-elements.vue
index 9077869..9c4f9ed 100644
--- a/apps/frontend/src/components/alchemy-elements.vue
+++ b/apps/frontend/src/components/alchemy-elements.vue
@@ -4,12 +4,14 @@ import AlchemyItem from './alchemy-item.vue'
 import { useGame } from '@/stores/use-game.js'
 import { useBoard } from '@/stores/use-board.js'
 import { useOpenedElements } from '@/stores/use-opened-elements.js'
-import { useDrawer } from '@/stores/use-drawer'
+import { useElementAbout } from '@/stores/use-element-about'
+import { useGuide } from '@/stores/use-guide'
 import type { AlchemyElement } from '@/types.js'
 
+const guide = useGuide()
 const game = useGame()
 const board = useBoard()
-const drawer = useDrawer()
+const elementAbout = useElementAbout()
 const openedElements = useOpenedElements()
 const searchInput = ref('')
 
@@ -38,7 +40,7 @@ function createElement(element: AlchemyElement) {
       class="search-input"
       type="text"
       name="search"
-      placeholder="Искать элемент"
+      placeholder="Искать элемент..."
     />
     <div class="elements-list">
       <div
@@ -46,14 +48,34 @@ function createElement(element: AlchemyElement) {
         :key="element.id"
         class="element"
         @click="createElement(element)"
-        @contextmenu.prevent="drawer.openDrawer(element)"
+        @contextmenu.prevent="() => {
+          guide.closeGuide()
+          elementAbout.openElementAbout(element)
+        }"
       >
         <AlchemyItem :element="element" />
       </div>
     </div>
     <div class="controls">
-      <div class="button border-right" @click="game.$reset()">Новая игра</div>
-      <div class="button" @click="board.$reset()">Очистить поле</div>
+      <div
+        class="button border-right"
+        @click="game.$reset()"
+      >
+        Новая игра
+      </div>
+      <div
+        class="button border-right"
+        id="toggle-guide"
+        @click="guide.toggleGuide()"
+      >
+        Помощь
+      </div>
+      <div
+        class="button"
+        @click="board.$reset()"
+      >
+        Очистить поле
+      </div>
     </div>
   </div>
 </template>
@@ -95,9 +117,10 @@ function createElement(element: AlchemyElement) {
   border: none;
   outline: none;
   border-bottom: 1px solid var(--vt-c-divider-dark-2);
-  font-size: inherit;
+  font-size: 18px;
   text-align: center;
   color: var(--vt-c-text-dark-2);
+  height: 52px;
 }
 
 .controls {
@@ -114,6 +137,9 @@ function createElement(element: AlchemyElement) {
   text-align: center;
   width: 50%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .border-right {
diff --git a/apps/frontend/src/components/alchemy-guide.vue b/apps/frontend/src/components/alchemy-guide.vue
index 78da3ac..73d4a28 100644
--- a/apps/frontend/src/components/alchemy-guide.vue
+++ b/apps/frontend/src/components/alchemy-guide.vue
@@ -2,46 +2,63 @@
 import Drawer from '@/ui/drawer/drawer.vue'
 import DrawerBody from '@/ui/drawer/drawer-body.vue'
 import DrawerHeader from '@/ui/drawer/drawer-header.vue'
-import { useDrawer } from '@/stores/use-drawer'
 import { storeToRefs } from 'pinia'
-import { sprites } from '@/assets/sprites'
+import { useGuide } from '@/stores/use-guide'
 
-const { isOpen, openedElement } = storeToRefs(useDrawer())
+const { isOpen } = storeToRefs(useGuide())
 </script>
 
 <template>
-  <Drawer v-model="isOpen" min-width="40%">
-    <template v-if="openedElement">
-      <DrawerHeader>
-        Об элементе
-      </DrawerHeader>
-      <DrawerBody>
-        <div class="element">
-          <h2>{{ openedElement.name }}</h2>
-          <img class="element-image" :src="sprites[openedElement.id]" />
-          <p class="element-description">{{ openedElement.description }}</p>
+  <Drawer
+    v-model="isOpen"
+    min-width="65%"
+    :ignore-element="['#toggle-guide']"
+  >
+    <DrawerHeader>
+      Помощь
+    </DrawerHeader>
+    <DrawerBody>
+      <div class="guide">
+        <div>
+          <h2 class="title">Создание элементов</h2>
+          <p class="description">Создавайте новые элементы, комбинируя существующие друг с другом. У одного элемента может быть несколько рецептов. Один элемент может использоваться в создании нескольких элементов.</p>
+          <p class="description">Чтобы добавить уже созданный элемент на поле, найдите его в каталоге и нажмите по нему правой кнопкой мыши.</p>
+          <p class="description">Кликните два раза по пустой области чтобы создать четыре базовых элемента.</p>
         </div>
-      </DrawerBody>
-    </template>
+
+        <div>
+          <h2 class="title">Просмотр информации об элементе</h2>
+          <p class="description">Не забывайте читать описания элементов. В них может содержаться подсказка для создания другого элемента. Для этого найдите элемент в каталоге и нажмите по нему левой кнопкой мыши.</p>
+          <p class="description">Символ <b style="color: tomato;">*</b> около элемента означает, что данный элемент конечный и не может быть использован для создания другого элемента.</p>
+        </div>
+
+        <div>
+          <h2 class="title">Копирование элементов</h2>
+          <p class="description">Чтобы скопировать элемент, кликните по нему два раза.</p>
+        </div>
+
+        <div>
+          <h2 class="title">Удаление элементов</h2>
+          <p class="description">Чтобы удалить элемент, кликните по нему правой кнопкой мыши или воспользуйтесь опцией "Очистить поле".</p>
+        </div>
+      </div>
+    </DrawerBody>
   </Drawer>
 </template>
 
 <style scoped lang="scss">
-.element {
+.guide {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
   flex-direction: column;
+  gap: 24px;
+}
 
-  &-image {
-    height: 120px;
-    width: 120px;
-  }
+.description {
+  text-align: justify;
+  font-size: 18px;
+}
 
-  &-description {
-    text-align: justify;
-    font-size: 18px;
-  }
+.description + .description {
+  margin-top: 12px;
 }
 </style>
diff --git a/apps/frontend/src/stores/use-drawer.ts b/apps/frontend/src/stores/use-drawer.ts
deleted file mode 100644
index 2015dc5..0000000
--- a/apps/frontend/src/stores/use-drawer.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-import recipes from '@/assets/recipes.json'
-import type { AlchemyElement, AlchemyElementOnBoard } from '@/types'
-
-interface AlchemyRecipe {
-  id: string
-  name: string
-  description: string
-  recipes: string[][]
-}
-
-export const useDrawer = defineStore("drawer", () => {
-  const isOpen = ref(false)
-  const openedElement = ref<AlchemyRecipe | null>(null)
-
-  function openDrawer(element: AlchemyElement) {
-    isOpen.value = true
-    openedElement.value = recipes.find((recipe) => recipe.id === element.id)!
-  }
-
-  return {
-    isOpen,
-    openedElement,
-    openDrawer
-  }
-})
diff --git a/apps/frontend/src/stores/use-element-about.ts b/apps/frontend/src/stores/use-element-about.ts
new file mode 100644
index 0000000..b7cf1d8
--- /dev/null
+++ b/apps/frontend/src/stores/use-element-about.ts
@@ -0,0 +1,53 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { useOpenedElements } from '@/stores/use-opened-elements'
+import recipes from '@/assets/recipes.json'
+import type { AlchemyElement } from '@/types'
+
+interface AlchemyRecipe {
+  id: string
+  name: string
+  ended?: boolean
+}
+
+interface AlchemyAboutElement {
+  id: string
+  name: string
+  description: string
+  recipes: AlchemyRecipe[][]
+}
+
+export const useElementAbout = defineStore('element-about', () => {
+  const isOpen = ref(false)
+  const activeElement = ref<AlchemyAboutElement | null>(null)
+  const openedElements = useOpenedElements()
+
+  function openElementAbout(element: AlchemyElement) {
+    isOpen.value = true
+
+    const el = recipes.find((recipe) => recipe.id === element.id)!
+    const openedRecipes: AlchemyRecipe[][] = []
+
+    for (const recipe of el.recipes) {
+      const [el1, el2] = recipe as [string, string]
+      const first = openedElements.isCreatedElement(el1)
+      const second = openedElements.isCreatedElement(el2)
+      if (first && second) {
+        openedRecipes.push([first, second])
+      }
+    }
+
+    activeElement.value = {
+      id: element.id,
+      name: element.name,
+      description: el.description,
+      recipes: openedRecipes
+    }
+  }
+
+  return {
+    isOpen,
+    activeElement,
+    openElementAbout
+  }
+})
diff --git a/apps/frontend/src/stores/use-game.ts b/apps/frontend/src/stores/use-game.ts
index acf3d2d..2a54fda 100644
--- a/apps/frontend/src/stores/use-game.ts
+++ b/apps/frontend/src/stores/use-game.ts
@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue'
+import { onWatcherCleanup, ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { useBoard } from './use-board.js'
 import { useOpenedElements } from './use-opened-elements.js'
@@ -8,11 +8,6 @@ import type { AlchemyElementOnBoard, Position } from '@/types.js'
 export const useGame = defineStore('game', () => {
   const board = useBoard()
   const openedElements = useOpenedElements()
-
-  const availableRecipes = computed(() => {
-    return `${openedElements.openedElements.length} / ${recipes.length}`
-  })
-
   const basicElements = ref<AlchemyElementOnBoard[]>([])
 
   function getRandomPosition(): Position {
@@ -29,7 +24,8 @@ export const useGame = defineStore('game', () => {
     openedElements.$reset()
   }
 
-  watch(board.boardSize, () => {
+  watch(() => board.boardSize, (board) => {
+    if (board.bottom === 0) return;
     basicElements.value = recipes.slice(0, 4).map((element) => {
       return {
         uuid: crypto.randomUUID(),
@@ -39,10 +35,9 @@ export const useGame = defineStore('game', () => {
         position: getRandomPosition()
       }
     })
-  }, { deep: true, once: true })
+  })
 
   return {
-    availableRecipes,
     basicElements,
     getRandomPosition,
     $reset
diff --git a/apps/frontend/src/stores/use-guide.ts b/apps/frontend/src/stores/use-guide.ts
new file mode 100644
index 0000000..6b84976
--- /dev/null
+++ b/apps/frontend/src/stores/use-guide.ts
@@ -0,0 +1,20 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useGuide = defineStore('guide', () => {
+  const isOpen = ref(false)
+
+  function toggleGuide() {
+    isOpen.value = !isOpen.value
+  }
+
+  function closeGuide() {
+    isOpen.value = false
+  }
+
+  return {
+    isOpen,
+    closeGuide,
+    toggleGuide
+  }
+})
diff --git a/apps/frontend/src/stores/use-opened-elements.ts b/apps/frontend/src/stores/use-opened-elements.ts
index de724f0..499b34c 100644
--- a/apps/frontend/src/stores/use-opened-elements.ts
+++ b/apps/frontend/src/stores/use-opened-elements.ts
@@ -1,8 +1,9 @@
-import { watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { defineStore } from 'pinia'
 import * as vueuse from '@vueuse/core'
 import { useGame } from './use-game.js'
 import { useSounds } from './use-sounds.js'
+import recipes from '@/assets/recipes.json'
 import type { AlchemyElement } from '@/types.js'
 
 type OpenedAlchemyElements = Omit<AlchemyElement, 'uuid'>[]
@@ -14,10 +15,20 @@ export const useOpenedElements = defineStore('opened-elements', () => {
     'alchemy-opened-elements', []
   )
 
+  const elementsCounter = computed(() => {
+    return `${openedElements.value.length} / ${recipes.length}`
+  })
+
   function $reset(): void {
     openedElements.value = []
   }
 
+  function isCreatedElement(elementId: string) {
+    return openedElements.value.find((openedElement) => {
+      return openedElement.id === elementId
+    })
+  }
+
   function addElement(element: AlchemyElement): void {
     const isExist = openedElements.value
       .some((openedElement) => openedElement.id === element.id)
@@ -48,7 +59,9 @@ export const useOpenedElements = defineStore('opened-elements', () => {
 
   return {
     openedElements,
+    elementsCounter,
     $reset,
-    addElement
+    addElement,
+    isCreatedElement
   }
 })
diff --git a/apps/frontend/src/styles/main.scss b/apps/frontend/src/styles/main.scss
index 691b247..5cf7cc5 100644
--- a/apps/frontend/src/styles/main.scss
+++ b/apps/frontend/src/styles/main.scss
@@ -80,3 +80,9 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: var(--vt-c-black-soft);
 }
+
+.h6 {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+}
diff --git a/apps/frontend/src/ui/drawer/drawer-header.vue b/apps/frontend/src/ui/drawer/drawer-header.vue
index 1f331a6..516c64c 100644
--- a/apps/frontend/src/ui/drawer/drawer-header.vue
+++ b/apps/frontend/src/ui/drawer/drawer-header.vue
@@ -25,8 +25,10 @@ const { toggleDrawer } = inject(drawerInjectionKey)!
   justify-content: space-between;
   align-items: center;
   gap: 24px;
-  padding: 16px 24px;
+  padding: 0 24px;
   border-bottom: 1px solid var(--vt-c-divider-dark-2);
+  height: 52px;
+  flex-shrink: 0;
 
   &__close {
     width: 24px;
@@ -34,10 +36,4 @@ const { toggleDrawer } = inject(drawerInjectionKey)!
     cursor: pointer;
   }
 }
-
-.h6 {
-  font-size: 20px;
-  line-height: 32px;
-  font-weight: 600;
-}
 </style>
diff --git a/apps/frontend/src/ui/drawer/drawer.vue b/apps/frontend/src/ui/drawer/drawer.vue
index 9a81891..a17371d 100644
--- a/apps/frontend/src/ui/drawer/drawer.vue
+++ b/apps/frontend/src/ui/drawer/drawer.vue
@@ -1,7 +1,12 @@
 <template>
   <Teleport to="body">
     <Transition name="overlay-slide" :data-placement="placement">
-      <div v-if="isOpen" ref="contentElement" class="drawer-content" :style="drawerStyles">
+      <div
+        v-if="isOpen"
+        ref="contentElement"
+        class="drawer-content"
+        :style="drawerStyles"
+      >
         <slot :toggle-drawer="toggleDrawer" />
       </div>
     </Transition>
@@ -10,7 +15,7 @@
 
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
-import { computed, provide, ref, shallowRef, watch } from 'vue'
+import { computed, provide, ref, shallowRef, useAttrs, watch } from 'vue'
 
 import { drawerInjectionKey } from './drawer-injection-key'
 
@@ -20,9 +25,11 @@ const props = withDefaults(defineProps<{
   minWidth: string
   maxWidth?: string
   placement?: DrawerPlacement
+  ignoreElement?: string[]
 }>(), {
   maxWidth: 'auto',
   placement: 'right',
+  ignoreElement: () => []
 })
 
 const drawerStyles = computed(() => {
@@ -41,7 +48,9 @@ watch(openModel, (value) => {
 })
 
 const contentElement = shallowRef<HTMLElement>()
-onClickOutside(contentElement, () => (openModel.value = false))
+onClickOutside(contentElement, () => (openModel.value = false), {
+  ignore: props.ignoreElement
+})
 
 function toggleDrawer() {
   openModel.value = !openModel.value
@@ -75,6 +84,7 @@ provide(drawerInjectionKey, {
     transform: translateX(0%) translateY(0px) translateZ(0px);
     background-color: var(--vt-c-black);
     z-index: 900;
+    border-left: 1px solid var(--vt-c-divider-dark-2);
   }
 }