feat: guide and element about

freak-games-studio · Oct 17, 2024 · ce0e91c · ce0e91c
1 parent caf3e48
commit ce0e91c
Show file tree

Hide file tree

Showing 15 changed files with 295 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,22 +40,42 @@ function createElement(element: AlchemyElement) {
       class="search-input"
       type="text"
       name="search"
-      placeholder="Искать элемент"
+      placeholder="Искать элемент..."
     />
     <div class="elements-list">
       <div
         v-for="element in filteredElements"
         :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
@@ -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