updated webp-images, lazyloaded map images, added fontawesome icons

src/components/Footer.vue

@@ -2,11 +2,8 @@
   <div class="bg-secondary text-center pt-5 pb-4">
     <div class="icons pb-4">
       <a class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
-        <svg class="bi bi-github" fill="currentColor" height="24" viewBox="0 0 16 16" width="24"
-             xmlns="http://www.w3.org/2000/svg">
-          <path
-              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
-        </svg>
+<!--        <i class="bi bi-github"></i>-->
+        <img src="../images/icons/gitea.svg" alt="">
       </a>
     </div>
     <div class="text">
@@ -26,6 +23,10 @@ export default {
 </script>
 
 <style scoped>
+img {
+  width: 35px;
+  height: 35px;
+}
 p {
   font-size: .85rem;
 }

src/components/Nav.vue

@@ -18,15 +18,13 @@
         </ul>
         <form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch">
           <label for="search">
-            <svg class="bi bi-search" viewBox="0 0 16 16" 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>
+            <i class="bi bi-search"></i>
           </label>
 
           <input id="search" v-model="data.searchInput" aria-label="Search"
                  class="form-control bg-transparent border-0"
                  placeholder="SteamID64, Profile Link or Custom URL"
+                 title="SteamID64, Profile Link or Custom URL"
                  type="search">
           <button
               class="btn border-2 btn-outline-info"
@@ -144,6 +142,7 @@ nav {
 
   label {
     padding-top: 6px;
+    font-size: 1.4rem;
   }
 
   input[type="search"] {
@@ -195,16 +194,30 @@ nav {
       }
 
       form {
+        max-width: 87vw;
+        margin-left: -40px;
+
         label {
           display: none;
         }
 
         input[type="search"] {
           margin-bottom: 15px;
-          width: 100%;
+          max-width: 100%;
+          min-width: 82%;
+          font-size: 1rem;
+
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          &::placeholder {
+            background: var(--bs-body-bg);
+          }
         }
 
         button {
+          margin-left: 10px;
           display: block;
           margin-top: -15px;
         }

src/components/ScoreTeam.vue

@@ -40,6 +40,7 @@
             :player_score="player.score"
             :rank="player.extended?.rank?.old"
             :rounds_played="props.rounds_played"
+            :color="player.extended?.color"
         />
       </tr>
       </tbody>
@@ -78,7 +79,7 @@ export default {
       type: Number,
       required: true,
       default: 0
-    }
+    },
   },
   setup(props) {
     return {props}

src/components/ScoreTeamPlayer.vue

@@ -1,16 +1,10 @@
 <template>
   <td>
-    <img :src="props.avatar" alt="Player avatar" class="player__avatar">
+    <img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
   </td>
   <td class="player__name" @click="GoToPlayer(props.steamid64)">
     {{ props.name }}
-    <svg class="bi bi-link-45deg" fill="currentColor" height="12" viewBox="0 0 16 16"
-         width="12" xmlns="http://www.w3.org/2000/svg">
-      <path
-          d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
-      <path
-          d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
-    </svg>
+    <i class="fas fa-link"></i>
   </td>
   <td>
     <img :src="DisplayRank(props.rank)[0]"
@@ -142,6 +136,11 @@ export default {
       type: Number,
       required: true,
       default: 0
+    },
+    color: {
+      type: String,
+      required: true,
+      default: ''
     }
   },
   setup(props) {
@@ -151,6 +150,28 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.team-color-Blue, .team-color-Orange, .team-color-Green, .team-color-Purple, .team-color-Yellow {
+  outline: 3px solid;
+}
+.team-color-Orange {
+  outline-color: #FE9A28;
+}
+.team-color-Blue {
+  outline-color: #5BA7FE;
+}
+.team-color-Yellow {
+  outline-color: #F7F52F;
+}
+.team-color-Purple {
+  outline-color: #A01BEF;
+}
+.team-color-Green {
+  outline-color: #04B462;
+}
+.team-color-Grey {
+  outline: none;
+}
+
 .player__avatar {
   width: 30px;
   height: 30px;
@@ -165,6 +186,11 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
+
+  .fas {
+    font-size: .5rem;
+    vertical-align: top;
+  }
 }
 
 .player__rank {

src/images/icons/gitea.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
+<g>
+	<path id="teabag" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
+	<g>
+		<g>
+			<path style="fill:#FFFFFF" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2     c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5     c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5     c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3     c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1     C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4     c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7     S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55     c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8     l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
+			<path style="fill:#FFFFFF" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4     c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1     c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9     c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3     c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3     c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29     c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8     C343.2,346.5,335,363.3,326.8,380.1z"/>
+		</g>
+	</g>
+</g>
+</svg>