feat: update components

remove old components; add new components

src/App.vue

@@ -1,62 +1,48 @@
-<template lang='pug'>
-#app
-  DamageCalculator
-  PageFooter
+<template>
+  <router-link v-if="route.path !== '/'" class="return-home" to="/">
+    <img src="~@/assets/icons/arrow_back.svg" width="16" height="16" />
+    Home page
+  </router-link>
+  <router-view />
 </template>
 
-<script>
-import { mapActions } from 'vuex'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRoute } from 'vue-router'
 
-import DamageCalculator from '@/components/DamageCalculator.vue'
-
-import PageFooter from '@/components/PageFooter.vue'
-
-export default {
-  name: 'app',
-  components: {
-    DamageCalculator,
-    PageFooter
+export default defineComponent({
+  name: 'App',
+  setup() {
+    return {
+      route: useRoute(),
+    }
   },
-  beforeMount () {
-    const version = '0.1.0'
+})
+</script>
 
-    let localStorageVersion = localStorage.version
-    if (!localStorageVersion || localStorageVersion !== version) {
-      localStorage.clear()
-      localStorage.version = version
-    }
+<style lang="scss">
+@import '@/styles/main.scss';
+</style>
 
-    let localStorageUser = localStorage.user
-    if (localStorageUser) {
-      let user = JSON.parse(localStorage.user)
+<style lang="scss" scoped>
+.return-home {
+  padding-left: 5px;
+  font-size: 0.8rem;
+  opacity: 0.3;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: rgb(0, 0, 0);
+  transition: opacity 0.15s;
+
+  &:hover {
+    opacity: 1;
+  }
 
-      this.setLocale(user.locale)
-      this.$i18n.locale = user.locale
-    }
-  },
-  mounted () {
-    this.getUnits()
-    this.getHeroes()
-    this.getUnitsImages()
-    this.getHeroesImages()
-    this.getTerrains()
-    this.getUnitsHates()
-  },
-  methods: {
-    ...mapActions({
-      setLocale: 'user/setLocale',
-      getUnits: 'calculator/getUnits',
-      getHeroes: 'calculator/getHeroes',
-      getUnitsImages: 'calculator/getUnitsImages',
-      getHeroesImages: 'calculator/getHeroesImages',
-      getUnitsHates: 'calculator/getUnitsHates',
-      getTerrains: 'calculator/getTerrains'
-    })
+  &::before {
+    background: url('~@/assets/icons/arrow_back.svg');
+    width: 2rem;
+    height: 2rem;
   }
 }
-</script>
-
-<style lang='scss'>
-@import '@/css/main.scss';
-
 </style>