Update guide

src/assets/css/graph.css

@@ -28,6 +28,10 @@ html {
   height: 100%;
 }
 
+a {
+  text-decoration: none;
+}
+
 .wrapper {
   display: flex;
   flex: 1;
@@ -529,3 +533,22 @@ p {
     opacity: 1;
   }
 }
+
+.fade-left-enter-active {
+  animation: fade-left 0.5s;
+}
+
+.fade-left-leave-active {
+  animation: fade-left 0.5s reverse;
+}
+
+@keyframes fade-left {
+  from {
+    transform: translateX(40px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

src/components/Graph.vue

@@ -103,7 +103,11 @@ export default {
     // Watchers
     watch(
       () => props.currentStep,
-      (stepId) => {
+      (stepId) => highlight(stepId)
+    );
+
+    // Methodsc
+    const highlight = (stepId) => {
       if (loop === null) return;
 
       // Invalidate all
@@ -124,10 +128,8 @@ export default {
 
       links.value[current_id].selected = 1;
       activateNodes([current.source, current.target]);
-      }
+    };
-    );
 
-    // Methods
     const loopPosition = (coords) => {
       const node = nodes.value[coords];
 
@@ -151,6 +153,7 @@ export default {
 
       if (links.value.length > 0 && euler.check()) {
         loop = euler.find();
+        highlight(0);
       } else {
         loop = null;
       }

src/components/Guide.vue

@@ -11,7 +11,7 @@
       <span class="version">{{ currentStep + 1 }} / {{ steps.length }}</span>
     </template>
     <template v-slot:content>
-      {{ steps[currentStep].content }}
+      <p v-html="steps[currentStep].content"></p>
     </template>
   </popup>
 </template>
@@ -29,16 +29,29 @@ export default {
     // Const
     const steps = [
       {
-        name: "Создание вершин",
+        name: "Создание графа",
         content:
-          "Для создания новой вершины необходимо дважды нажать левую кнопку мыши",
+          "Для создания нового графа, необходимо добавить вершины на рабочую область. Для этого необходимо дважды кликнуть левой кнопкой мыши по рабочей области.",
-        video: "/video/create.mp4",
       },
       {
         name: "Связывание вершин",
         content:
-          "Чтобы связать вершины, необходимо кликнуть левой кнопкой мыши по вершине, которую необходимо связать. Далее выбираются вершины, с которыми необходимо связать",
+          "После создания вершин, их необходимо связать между собой. Для этого один раз кликните по необходимой вершине, после чего она поменяет цвет. Теперь необходимо выбрать вершины, с которыми необходимо связать. Если вершина успешно привязана, то появится ребро. Чтобы снять выделение, кликните в пустое место рабочей области.",
-        video: "/video/linking.mp4",
+      },
+      {
+        name: "Удаление вершин и ребер",
+        content:
+          "В случае, когда необходимо удалить вершину или ребро, то достаточно один раз кликнуть правой кнопкой мыши по элементу.",
+      },
+      {
+        name: "Нахождение эйлерова цикла",
+        content:
+          "После любых действий над вершинами или ребрами, программа проверяет наличие эйлерова цикла. Если эйлеров цикл будет найден, то:<ul><li>В верхней части программы появится количество шагов цикла и текущий шаг.</li><li>В правой части программы появится последовательность вершин в эйлеровом цикле.</li><li>Станет доступна кнопка проигрывания анимации прохождения цикла по графу.</li>",
+      },
+      {
+        name: "Элементы управления анимацией",
+        content:
+          "Когда эйлеров цикл будет найден, появится возможность проиграть анимацию прохождения цикла по графу. Для этого существуют элементы управления в нижней части программы. Также анимацию можно просмотреть, начиная с нужной вершины, кликнув на нужную вершину в правой панели программы.",
       },
     ];
 

src/components/Popup.vue

@@ -10,7 +10,7 @@
       <div class="popup-el popup-text">
         <slot name="content"></slot>
       </div>
-      <!-- <div class="popup-el popup-text gray">by Robonen</div> -->
+      <slot name="footer"></slot>
       <div class="popup-el popup-button-cont">
         <div v-if="leftBtnText" class="popup-button" @click="leftBtn">
           {{ leftBtnText }}

src/views/View.vue

@@ -6,11 +6,33 @@
       <span class="version">v0.2</span>
     </template>
     <template v-slot:content>
+      <p>Алгоритм находит Эйлеров цикл в неориентированном графе.</p>
       <p>
-        <b>Эйлеров цикл</b>
+        Перед запуском алгоритма необходимо проверить граф на эйлеровость, т.е.
-        &mdash; путь, проходящий по всем ребрам графа, и при этом только по
+        каждая вершина должна иметь четную степень. Чтобы построить Эйлеров
-        одному разу.
+        цикл, нужно запустить алгоритм из любой вершины.
       </p>
+      <p>
+        Алгоритм напоминает поиск в глубину. Главное отличие состоит в том, что
+        пройденными помечаются не вершины, а ребра графа.
+      </p>
+      <p>
+        Начиная со стартовой вершины <b>v</b> строим путь, добавляя на каждом
+        шаге не пройденное еще ребро, смежное с текущей вершиной. Вершины пути
+        накапливаются в стеке <b>S</b>. Когда наступает такой момент, что для
+        текущей вершины <b>w</b> все инцидентные ей ребра уже пройдены,
+        записываем вершины из <b>S</b> в ответ, пока не встретим вершину,
+        которой инцидентны не пройденные еще ребра. Далее продолжаем обход по не
+        посещенным ребрам.
+      </p>
+    </template>
+    <template v-slot:footer>
+      <a href="https://github.com/robonen/" class="gray">
+        <div class="popup-el popup-text">Автор &mdash; Робонен А.С.</div>
+      </a>
+      <a href="https://github.com/RomaFedoro" class="gray">
+        <div class="popup-el popup-text">Дизайн &mdash; Фёдоров Р.М.</div>
+      </a>
     </template>
   </popup>
   <div class="addition-cont menu">
@@ -90,14 +112,16 @@
       </div>
     </div>
   </div>
-  <div class="addition-cont">
+  <transition name="fade-left">
-    <div v-if="stepExists" class="step-cont">
+    <div v-if="stepExists" class="addition-cont">
+      <div class="step-cont">
         <div
           class="step"
           v-for="(step, i) in steps"
           :key="i"
           :class="{
-          'active-step': i === currentStepNumber || i === currentStepNumber + 1,
+            'active-step':
+              i === currentStepNumber || i === currentStepNumber + 1,
             'dynamic-active-step': played && i < currentStepNumber,
             'last-active-step': i === currentStepNumber + 1,
           }"
@@ -107,6 +131,7 @@
         </div>
       </div>
     </div>
+  </transition>
 </template>
 
 <script>