updated core-js

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     'eslint:recommended'
   ],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.0.2.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

package.json

@@ -8,10 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fontsource/open-sans": "^4.5.13",
+    "@fontsource/orbitron": "^4.5.10",
     "@popperjs/core": "^2.11.6",
     "axios": "^1.1.3",
     "bootstrap": "^5.2.2",
-    "core-js": "^3.26.0",
+    "core-js": "^3.26.1",
     "dotenv-webpack": "^8.0.1",
     "echarts": "^5.4.0",
     "fork-awesome": "^1.2.0",
@@ -20,24 +22,25 @@
     "jquery": "^3.6.1",
     "luxon": "^3.1.0",
     "string-sanitizer": "^2.0.2",
-    "vue": "^3.2.41",
+    "vue": "^3.2.45",
     "vue-matomo": "^4.2.0",
     "vue-router": "^4.1.6",
     "vue3-cookies": "^1.0.6",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.19",
+    "@babel/core": "^7.20.2",
-    "@vue/cli-plugin-eslint": "~4.5.19",
+    "@babel/eslint-parser": "^7.19.1",
-    "@vue/cli-plugin-router": "~4.5.19",
+    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~4.5.19",
+    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~4.5.19",
+    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/cli-plugin-vuex": "~5.0.8",
-    "babel-eslint": "^10.1.0",
+    "@vue/cli-service": "~5.0.8",
-    "eslint": "^6.8.0",
+    "@vue/compiler-sfc": "^3.2.45",
-    "eslint-plugin-vue": "^7.20.0",
+    "eslint": "^8.27.0",
-    "sass": "^1.56.0",
+    "eslint-plugin-vue": "^9.7.0",
-    "sass-loader": "^10.2.1"
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0"
   },
-  "packageManager": "yarn@3.0.2"
+  "packageManager": "yarn@3.2.4"
 }

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <img alt="" class="bg-img" src="">
   <header>
-    <Nav/>
+    <CompNav/>
   </header>
   <main>
     <div :style="{height: offset + 'px'}"/>
@@ -9,20 +9,20 @@
     <router-view name="main"/>
   </main>
   <footer class="mt-auto">
-    <Footer/>
+    <CompFooter/>
   </footer>
   <CookieConsentBtn id="cookie-btn"/>
 </template>
 
 <script>
-import Nav from "@/components/Nav";
-import Footer from "@/components/Footer";
 import CookieConsentBtn from "@/components/CookieConsentBtn";
 import {onMounted, ref} from "vue";
 import InfoModal from "@/components/InfoModal";
+import CompFooter from "@/components/CompFooter";
+import CompNav from "@/components/CompNav";
 
 export default {
-  components: {InfoModal, Footer, Nav, CookieConsentBtn},
+  components: {CompNav, CompFooter, InfoModal, CookieConsentBtn},
   setup() {
     const offset = ref(0)
 
@@ -52,7 +52,6 @@ export default {
 <style lang="scss">
 @font-face {
   font-family: "Obitron";
-  src: local("Obitron"), url("../public/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
 }
 
 .bg-img {

src/components/CompDetails.vue

@@ -19,7 +19,7 @@ import {onMounted, reactive} from "vue";
 import {GetWeaponDmg} from "@/utils";
 
 export default {
-  name: "Details",
+  name: "CompDetails",
   components: {MultiKillsChart},
   setup() {
     const store = useStore()

src/components/CompFooter.vue

@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: "Footer",
+  name: "CompFooter",
   setup() {
     const version = process.env.VUE_APP_VERSION
     return {version}

src/components/CompNav.vue

@@ -52,7 +52,7 @@ import {closeNav, GetUser, GoToPlayer} from '@/utils'
 import {StatusCodes as STATUS} from "http-status-codes";
 
 export default {
-  name: 'Nav',
+  name: 'CompNav',
   setup() {
     const store = useStore()
     const data = reactive({

src/router/index.js

@@ -17,7 +17,7 @@ const routes = [
     path: '/',
     name: 'Home',
     components: {
-      main: lazyLoadView('Home')
+      main: lazyLoadView('HomeView')
     }
   },
   {
@@ -31,14 +31,14 @@ const routes = [
     path: '/matches',
     name: 'Explore',
     components: {
-      main: lazyLoadView('Explore')
+      main: lazyLoadView('ExploreView')
     }
   },
   {
     path: '/player/:id',
     name: 'Player',
     components: {
-      main: lazyLoadView('Player'),
+      main: lazyLoadView('PlayerView'),
     },
     props: true
   },
@@ -46,7 +46,7 @@ const routes = [
     path: '/match/:match_id',
     name: 'Match',
     components: {
-      main: lazyLoadView('Match')
+      main: lazyLoadView('MatchView')
     },
     props: true,
     children: [
@@ -65,7 +65,7 @@ const routes = [
       {
         path: 'details',
         components: {
-          score: lazyLoadComponent('Details')
+          score: lazyLoadComponent('CompDetails')
         }
       },
       {
@@ -92,21 +92,21 @@ const routes = [
     path: '/404',
     name: '404',
     components: {
-      main: lazyLoadErrorPages('404')
+      main: lazyLoadErrorPages('Error404')
     }
   },
   {
     path: '/500',
     name: '500',
     components: {
-      main: lazyLoadErrorPages('500')
+      main: lazyLoadErrorPages('Error500')
     }
   },
   {
     path: '/502',
     name: '502',
     components: {
-      main: lazyLoadErrorPages('502')
+      main: lazyLoadErrorPages('Error502')
     }
   },
   {

src/scss/custom.scss

@@ -1,18 +1,15 @@
 // Custom.scss
-//@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+@import "~@fontsource/orbitron/index.css";
+@import "~@fontsource/open-sans/index.css";
+
 @font-face {
   font-family: "OpenSans";
-  src: local('OpenSans'),
-       url("/fonts/OpenSans-VariableFont_wdth,wght.woff2") format("woff2"),
-       url("/fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
   font-display: swap;
 }
 
 @font-face {
   font-family: "OpenSansItalic";
-  src: local('OpenSansItalic'),
-       url("/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2") format("woff2"),
-       url("/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
   font-display: swap;
 }
 
@@ -26,9 +23,6 @@
 
 @font-face {
   font-family: "Orbitron";
-  src: local('Orbitron'),
-       url("/fonts/Orbitron-VariableFont_wght.woff2") format("woff2"),
-       url("/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
   font-display: swap;
 }
 

src/utils/DateTime.js

@@ -1,4 +1,4 @@
-import {DateTime, Duration} from "luxon/build/es6/luxon";
+import {DateTime, Duration} from "luxon";
 
 export const ConvertTickToTime = (tick, rate = 64) => {
   const time = Duration.fromObject({hours: 0, minutes: 0, seconds: tick / rate || 0})

src/views/ExploreView.vue

@@ -29,7 +29,7 @@ import {useStore} from "vuex";
 import router from "@/router";
 
 export default {
-  name: 'Explore',
+  name: 'ExploreView',
   components: {MatchesTable},
   setup() {
     document.title = "Matches | csgoWTF"

src/views/HomeView.vue

@@ -84,7 +84,7 @@ import {onBeforeMount, ref} from "vue";
 import {useStore} from "vuex";
 
 export default {
-  name: 'Home',
+  name: 'HomeView',
   setup() {
     setTitle('Home')
     const store = useStore()
@@ -148,7 +148,7 @@ table {
 .main-content {
   .head {
     // display jpg
-    background-image: url("/images/map_screenshots/default.jpg");
+    background-image: url("/images/map_screenshots/default.png");
   }
 
   .head {

src/views/MatchView.vue

@@ -163,11 +163,11 @@ import {
 } from "@/utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
-import {DateTime} from "luxon/build/es6/luxon";
+import {DateTime} from "luxon";
 import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
 
 export default {
-  name: 'Match',
+  name: 'MatchView',
   props: ['match_id'],
   setup(props) {
     const store = useStore()

src/views/PlayerView.vue

@@ -166,7 +166,7 @@ import PlayerSideInfo from "@/components/PlayerSideInfo";
 import {StatusCodes as STATUS} from "http-status-codes";
 
 export default {
-  name: 'Player',
+  name: 'PlayerView',
   components: {PlayerSideInfo, MatchesTable},
   props: ['id'],
   setup(props) {

src/views/errorPages/ErrorPage404.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  name: "404"
+  name: "ErrorPage404"
 }
 </script>
 

src/views/errorPages/ErrorPage500.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  name: "500"
+  name: "ErrorPage500"
 }
 </script>
 

src/views/errorPages/ErrorPage502.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  name: "502"
+  name: "ErrorPage502"
 }
 </script>
 

vue.config.js

@@ -5,6 +5,13 @@ module.exports = {
   configureWebpack: {
     plugins: [
       new Dotenv()
-    ]
+    ],
+  },
+  css: {
+    loaderOptions: {
+      css: {
+        url: false
+      }
+    }
   }
 }