updated frontend from typescript to javascript

2021-10-05 00:16:20 +02:00
parent 27edfd0cfe
commit 886f182ff2
41 changed files with 1183 additions and 28 deletions
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -0,0 +1,110 @@
+<template>
+  <nav class="navbar navbar-expand navbar-dark fixed-top">
+    <div class="container-fluid w-75">
+      <div class="navbar-nav">
+        <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">CSGO<span class="text-up text-white fw-bold">WTF</span>
+        </router-link>
+        <router-link class="nav-link" to="/explore">Explore</router-link>
+      </div>
+      <form class="d-flex col-5 justify-content-end" @keydown.enter.prevent="parseSearch">
+        <label for="search">
+          <svg class="bi bi-search" fill="currentColor" height="24" viewBox="0 0 16 16" width="24"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+          </svg>
+        </label>
+        <input id="search" v-model="data.searchInput" aria-label="Search"
+               class="form-control w-75 bg-transparent border-0"
+               placeholder="SteamID64, Profile Link or Custom URL"
+               type="search">
+      </form>
+    </div>
+  </nav>
+</template>
+
+<script>
+import {reactive} from "vue";
+import {useStore} from 'vuex'
+import {sanitize} from 'string-sanitizer'
+import router from "../router";
+
+export default {
+  name: 'Nav',
+  setup() {
+    const store = useStore()
+    const data = reactive({
+      searchInput: ''
+    })
+
+    const parseSearch = () => {
+      const input = data.searchInput
+      const customUrlPattern = 'https://steamcommunity.com/id/'
+      const profileUrlPattern = 'https://steamcommunity.com/profiles/'
+      const id64Pattern = /^\d{17}$/
+
+      store.state.id64 = ''
+      store.state.vanityUrl = ''
+
+      if (id64Pattern.test(input)) {
+        store.state.id64 = input
+      } else if (input.match(customUrlPattern)) {
+        store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
+      } else if (input.match(profileUrlPattern)) {
+        const tmp = input.split('/')[4].split('?')[0]
+        if (id64Pattern.test(tmp)) {
+          store.state.id64 = tmp
+        }
+      } else {
+        store.state.vanityUrl = sanitize(input)
+      }
+
+      if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
+        data.searchInput = ''
+
+        if (store.state.id64) {
+          router.push(`/player/${store.state.id64}`)
+        } else if (store.state.vanityUrl) {
+          router.push(`/player/${store.state.vanityUrl}`)
+        }
+      }
+    }
+
+    return {
+      data, parseSearch
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+nav {
+  height: 70px;
+  width: 100vw;
+  background: rgba(16, 18, 26, 0.5);
+
+  .text-up {
+    font-size: 40%;
+    vertical-align: top;
+  }
+
+  label {
+    padding-top: 6px;
+  }
+
+  input[type="search"] {
+    min-width: 300px;
+    max-width: 300px;
+
+    &:focus {
+      box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
+      transition: .2s ease-in-out;
+      transform: scale(.975);
+    }
+
+    &::placeholder {
+      color: #aaa;
+    }
+  }
+}
+</style>