about card moved to separate component

GregoryKogan · Jun 29, 2023 · b5883f4 · b5883f4
1 parent bf1e9fb
commit b5883f4
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 37 deletions.
diff --git a/hangman-helper/src/components/AboutCard.vue b/hangman-helper/src/components/AboutCard.vue
@@ -0,0 +1,43 @@
+<template>
+  <v-card style="padding: 15px" variant="flat" position="fixed" location="bottom right" color="#00000000">
+    <v-container>
+      <v-row>
+        <v-btn @click="helpDialog = true" icon="mdi-help" density="compact" size="x-large" variant="flat" color="#1a1b26"
+          style="margin-bottom: 10px"></v-btn>
+      </v-row>
+      <v-row>
+        <v-btn @click="goToRepo" icon="mdi-github" density="compact" size="x-large" variant="flat"
+          color="#1a1b26"></v-btn>
+      </v-row>
+    </v-container>
+    <v-dialog v-model="helpDialog" scrim="#1a1b26">
+      <v-card variant="flat" color="#1a1b26">
+        <v-card-title> Помощь </v-card-title>
+        <v-card-text>
+          Это приложение поможет вам в игре <b>"Виселица"</b>. Введите
+          загаданное слово в поле <b>"Ваше слово"</b>, заменяя неизвестные буквы
+          на любой другой символ. А в поле <b>"Использованные буквы"</b> укажите
+          буквы, которые вы уже назвали, но которых нет в слове. Вам будут
+          предложены буквы, которые, возможно, есть в загаданном слове, а также
+          слова, которые могут быть загаданы. <b>Приятной игры!</b>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "AboutCard",
+  data: () => ({
+    helpDialog: false,
+  }),
+  methods: {
+    goToRepo() {
+      window.open("https://github.com/GregoryKogan/hangman-helper", "_blank");
+    },
+  },
+});
+</script>
diff --git a/...man-helper/src/components/Suggestions.vue → ...helper/src/components/WordSuggestions.vue b/...man-helper/src/components/Suggestions.vue → ...helper/src/components/WordSuggestions.vue
@@ -19,7 +19,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: "Suggestions",
+  name: "WordSuggestions",
   props: {
     letters: {
       type: Array<string>,

diff --git a/hangman-helper/src/views/HomeView.vue b/hangman-helper/src/views/HomeView.vue
@@ -12,38 +12,15 @@
         placeholder="з, б, в, у, ш, ж" v-model="lettersInput"></v-text-field>
       <v-divider :thickness="5" color="#bb9af7" class="border-opacity-100"></v-divider>
     </v-container>
-    <Suggestions :letters="letters" :words="words"></Suggestions>
-    <v-card style="padding: 15px" variant="flat" position="fixed" location="bottom right" color="#00000000">
-      <v-container>
-        <v-row>
-          <v-btn @click="helpDialog = true" icon="mdi-help" density="compact" size="x-large" variant="flat"
-            color="#1a1b26" style="margin-bottom: 10px"></v-btn>
-        </v-row>
-        <v-row>
-          <v-btn @click="goToRepo" icon="mdi-github" density="compact" size="x-large" variant="flat"
-            color="#1a1b26"></v-btn>
-        </v-row>
-      </v-container>
-    </v-card>
-    <v-dialog v-model="helpDialog" scrim="#1a1b26">
-      <v-card variant="flat" color="#1a1b26">
-        <v-card-title> Помощь </v-card-title>
-        <v-card-text>
-          Это приложение поможет вам в игре <b>"Виселица"</b>. Введите
-          загаданное слово в поле <b>"Ваше слово"</b>, заменяя неизвестные буквы
-          на любой другой символ. А в поле <b>"Использованные буквы"</b> укажите
-          буквы, которые вы уже назвали, но которых нет в слове. Вам будут
-          предложены буквы, которые, возможно, есть в загаданном слове, а также
-          слова, которые могут быть загаданы. <b>Приятной игры!</b>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
+    <WordSuggestions :letters="letters" :words="words"></WordSuggestions>
+    <AboutCard></AboutCard>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Suggestions from "@/components/Suggestions.vue";
+import WordSuggestions from "@/components/WordSuggestions.vue";
+import AboutCard from "@/components/AboutCard.vue";
 import {
   loadData,
   parseLetters,
@@ -57,18 +34,20 @@ import {
 export default defineComponent({
   name: "HomeView",
   components: {
-    Suggestions,
+    WordSuggestions,
+    AboutCard,
   },
   data: () => ({
     wordInput: "",
     lettersInput: "",
 
-    helpDialog: false,
-
     dictionary: [] as string[],
     letters: [] as string[],
     words: [] as string[],
   }),
+  async created() {
+    this.dictionary = await loadData();
+  },
   methods: {
     submit() {
       if (this.wordInput === null) this.wordInput = "";
@@ -90,12 +69,6 @@ export default defineComponent({
       }
       this.letters = get10BestLetters(countLetters(this.words), word);
     },
-    goToRepo() {
-      window.open("https://github.com/GregoryKogan/hangman-helper", "_blank");
-    },
-  },
-  async created() {
-    this.dictionary = await loadData();
   },
 });
 </script>