Lint and format

frontend/components/nav/Bar.vue

@@ -1,22 +1,25 @@
 <script lang="ts" setup>
 defineProps<{
-    championName?: string
-    championLanes?: Array<LaneData>
-    tierlistList?: boolean
+  championName?: string
+  championLanes?: Array<LaneData>
+  tierlistList?: boolean
 }>()
 const emit = defineEmits<{
-    stateChange: [state: string, lane: number]
+  stateChange: [state: string, lane: number]
 }>()
-
 </script>
 
 <template>
-    <LazyNavSideBar :champion-name="championName" 
-        :champion-lanes="championLanes"
-        :tierlist-list="tierlistList"
-        @state-change="(s, l) => emit('stateChange', s, l)"/>
-    <LazyNavBottomBar :champion-name="championName" 
-        :champion-lanes="championLanes" 
-        :tierlist-list="tierlistList"
-        @state-change="(s, l) => emit('stateChange', s, l)"/>
-</template>
+  <LazyNavSideBar
+    :champion-name="championName"
+    :champion-lanes="championLanes"
+    :tierlist-list="tierlistList"
+    @state-change="(s, l) => emit('stateChange', s, l)"
+  />
+  <LazyNavBottomBar
+    :champion-name="championName"
+    :champion-lanes="championLanes"
+    :tierlist-list="tierlistList"
+    @state-change="(s, l) => emit('stateChange', s, l)"
+  />
+</template>

frontend/components/nav/BottomBar.vue

@@ -1,111 +1,145 @@
 <script setup lang="ts">
-import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon';
+import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'
 
 defineProps<{
-    championName?: string
-    championLanes?: Array<LaneData>
-    tierlistList?: boolean
+  championName?: string
+  championLanes?: Array<LaneData>
+  tierlistList?: boolean
 }>()
 const emit = defineEmits<{
-    stateChange: [state: string, lane: number]
+  stateChange: [state: string, lane: number]
 }>()
 
-const state = ref("runes")
+const state = ref('runes')
 const laneState = ref(0)
 
-function handleStateChange(newState : string, newLane: number) {
-    state.value = newState;
-    laneState.value = newLane;
-    emit('stateChange', newState, newLane)
+function handleStateChange(newState: string, newLane: number) {
+  state.value = newState
+  laneState.value = newLane
+  emit('stateChange', newState, newLane)
 }
 
 const route = useRoute()
-const selected = ref("");
-if(route.path.startsWith("/tierlist/")) {
-    const lane = route.params.lane as string
-    selected.value = lane
+const selected = ref('')
+if (route.path.startsWith('/tierlist/')) {
+  const lane = route.params.lane as string
+  selected.value = lane
 }
 </script>
 
 <template>
-    <div class="navbar-container">
-        
-        <NuxtLink 
-            style="display: flex; width: fit-content; text-decoration: none; align-items: center; margin-left: 10px;" 
-            to="/" 
-            prefetch
+  <div class="navbar-container">
+    <NuxtLink
+      style="
+        display: flex;
+        width: fit-content;
+        text-decoration: none;
+        align-items: center;
+        margin-left: 10px;
+      "
+      to="/"
+      prefetch
+    >
+      <NuxtImg
+        id="navbar-logo-img"
+        format="webp"
+        src="/buildpath-high-resolution-logo-transparent.png"
+      />
+    </NuxtLink>
+
+    <div
+      v-for="(lane, i) in championLanes"
+      style="display: flex; align-items: center; margin-left: 20px"
+    >
+      <NuxtImg
+        format="webp"
+        width="40"
+        height="40"
+        :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
+      />
+      <div>
+        <h2
+          :class="
+            'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')
+          "
+          @click="handleStateChange('runes', i)"
         >
-            <NuxtImg format="webp" id="navbar-logo-img" 
-                src="/buildpath-high-resolution-logo-transparent.png" />
-        </NuxtLink>
-
-        <div v-for="(lane, i) in championLanes" style="display: flex; align-items: center; margin-left: 20px;">
-            <NuxtImg format="webp" width="40" height="40" 
-                :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
-            <div>
-            <h2 :class="'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')"
-                @click="handleStateChange('runes', i)" >
-                Runes
-            </h2>
-            <h2 :class="'navbar-link ' + (state == 'items' && laneState == i ? 'navbar-link-selected' : '')"
-                @click="handleStateChange('items', i)" >
-                Items
-            </h2>
-            </div>
-        </div>
-
-        <div v-if="tierlistList == true" style="padding-left: 20px;">
-            <h2 style="padding-left: 0px; font-size: 1.4rem; margin-top: 15px;">Tierlist</h2>
-            <div style="display: flex;">
-            <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
-                <div :class="selected == pos ? 'navbar-link-selected' : ''" 
-                    class="navbar-link" style="display: flex; align-items: center;">
-                    <NuxtImg format="webp" 
-                        width="30" height="30" 
-                        :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
-                </div>
-            </NuxtLink>
-            </div>
-        </div>
+          Runes
+        </h2>
+        <h2
+          :class="
+            'navbar-link ' + (state == 'items' && laneState == i ? 'navbar-link-selected' : '')
+          "
+          @click="handleStateChange('items', i)"
+        >
+          Items
+        </h2>
+      </div>
     </div>
+
+    <div v-if="tierlistList == true" style="padding-left: 20px">
+      <h2 style="padding-left: 0px; font-size: 1.4rem; margin-top: 15px">Tierlist</h2>
+      <div style="display: flex">
+        <NuxtLink
+          v-for="(pos, i) in POSITIONS"
+          style="margin-top: 5px; margin-bottom: 5px"
+          :to="'/tierlist/' + pos"
+        >
+          <div
+            :class="selected == pos ? 'navbar-link-selected' : ''"
+            class="navbar-link"
+            style="display: flex; align-items: center"
+          >
+            <NuxtImg
+              format="webp"
+              width="30"
+              height="30"
+              :src="LANE_IMAGES[i]"
+              :alt="POSITIONS_STR[i]"
+            />
+          </div>
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style>
 .navbar-container {
-    display: flex;
+  display: flex;
 
-    position: fixed;
-    bottom: 0;
-    z-index: 10;
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
 
-    background-color: #2B2826;
-    width: 100%;
-    height: 100px;
+  background-color: #2b2826;
+  width: 100%;
+  height: 100px;
 
-    margin: 0px;
+  margin: 0px;
 }
 .navbar-link {
-    user-select: none;
-    margin: 5px;
-    padding: 5px;
-    border-radius: 8px;
+  user-select: none;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 8px;
 }
 .navbar-link:hover {
-    cursor: pointer;
-    background-color: var(--color-surface-darker);
+  cursor: pointer;
+  background-color: var(--color-surface-darker);
 }
 .navbar-link-selected {
-    background-color: var(--color-surface);
+  background-color: var(--color-surface);
 }
 #navbar-logo-img {
-    height: 70px;
-    width: fit-content;
-    max-width: 55px;
+  height: 70px;
+  width: fit-content;
+  max-width: 55px;
 }
 
 @media only screen and (min-width: 1200px) {
-    .navbar-container {
-        display: none;
-    }
+  .navbar-container {
+    display: none;
+  }
 }
 </style>

frontend/components/nav/SideBar.vue

@@ -1,135 +1,181 @@
 <script setup lang="ts">
-import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon';
+import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon'
 
 defineProps<{
-    championName?: string
-    championLanes?: Array<LaneData>
-    tierlistList?: boolean
+  championName?: string
+  championLanes?: Array<LaneData>
+  tierlistList?: boolean
 }>()
 const emit = defineEmits<{
-    stateChange: [state: string, lane: number]
+  stateChange: [state: string, lane: number]
 }>()
 
-const state = ref("runes")
+const state = ref('runes')
 const laneState = ref(0)
 
-function handleStateChange(newState : string, newLane: number) {
-    state.value = newState;
-    laneState.value = newLane;
-    emit('stateChange', newState, newLane)
+function handleStateChange(newState: string, newLane: number) {
+  state.value = newState
+  laneState.value = newLane
+  emit('stateChange', newState, newLane)
 }
 
-const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
+const { data: stats }: { data: Ref<{ patch: number; count: number }> } =
+  await useFetch('/api/stats')
 
 const route = useRoute()
 
-const selected = ref("");
-if(route.path.startsWith("/tierlist/")) {
-    const lane = route.params.lane as string
-    selected.value = lane
+const selected = ref('')
+if (route.path.startsWith('/tierlist/')) {
+  const lane = route.params.lane as string
+  selected.value = lane
 }
 </script>
 
 <template>
-    <!-- To make content have a 300px margin -->
-    <div class="sidebar-margin"></div>
+  <!-- To make content have a 300px margin -->
+  <div class="sidebar-margin"/>
 
-    <div class="sidebar-container">
-        <Logo font-size="2.6rem" img-width="60" style="padding-left: 15px; padding-right: 15px; margin-top: 30px;"/>
+  <div class="sidebar-container">
+    <Logo
+      font-size="2.6rem"
+      img-width="60"
+      style="padding-left: 15px; padding-right: 15px; margin-top: 30px"
+    />
 
-        <div v-for="(lane, i) in championLanes">
-
-        <div style="display: flex; align-items: center; margin-top: 30px; padding-right: 10px; overflow: hidden;">
-        <h1 style="font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
-        <NuxtImg format="webp" style="margin-left: 10px;" 
-            width="40" height="40" 
-            :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
-        <h2 v-if="championName != null && championName != undefined && championName.length < 8" 
-            style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">
-            {{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}
+    <div v-for="(lane, i) in championLanes">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          margin-top: 30px;
+          padding-right: 10px;
+          overflow: hidden;
+        "
+      >
+        <h1 style="font-size: 2.4rem; padding-left: 20px">{{ championName }}</h1>
+        <NuxtImg
+          format="webp"
+          style="margin-left: 10px"
+          width="40"
+          height="40"
+          :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
+        />
+        <h2
+          v-if="championName != null && championName != undefined && championName.length < 8"
+          style="margin-left: 5px; font-size: 1.8rem; font-weight: 200"
+        >
+          {{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}
         </h2>
-        </div>
+      </div>
 
-        <h2 :class="'sidebar-link ' + (state == 'runes' && laneState == i ? 'sidebar-link-selected' : '')" 
-            @click="handleStateChange('runes', i)" 
-            style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
-        <h2 :class="'sidebar-link ' + (state == 'items' && laneState == i ? 'sidebar-link-selected' : '')" 
-            @click="handleStateChange('items', i)" 
-            style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
+      <h2
+        :class="
+          'sidebar-link ' + (state == 'runes' && laneState == i ? 'sidebar-link-selected' : '')
+        "
+        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        @click="handleStateChange('runes', i)"
+      >
+        Runes
+      </h2>
+      <h2
+        :class="
+          'sidebar-link ' + (state == 'items' && laneState == i ? 'sidebar-link-selected' : '')
+        "
+        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        @click="handleStateChange('items', i)"
+      >
+        Items
+      </h2>
 
-        <h2 :class="'sidebar-link ' + (state == 'alternatives' && laneState == i ? 'sidebar-link-selected' : '')" 
-            @click="handleStateChange('alternatives', i)" 
-            style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Alternatives</h2>
-        
-        </div>
-
-        <div v-if="tierlistList == true" style="margin-top: 30px;">
-            <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px;">Tierlist</h2>
-            <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
-                <div :class="selected == pos ? 'sidebar-link-selected' : ''" 
-                    class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
-                    <NuxtImg format="webp" 
-                        width="40" height="40" 
-                        :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
-                    <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
-                </div>
-            </NuxtLink>
-        </div>        
-    
-        <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px;">
-            <h3 style="font-size: 23px; font-weight: 200;">
-                Patch {{ stats.patch }}
-            </h3>
-            <h3 style="font-size: 23px; font-weight: 200;">
-                {{ stats.count }} games
-            </h3>
-            <NuxtLink to="/about"><h3>About</h3></NuxtLink>
-            <h2 style="font-size: 12px; font-weight: 200; margin-top: 5px;">
-                BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of 
-                Riot Games or anyone officially involved in producing or managing Riot Games properties.
-                Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.
-            </h2>
-        </div>
+      <h2
+        :class="
+          'sidebar-link ' +
+          (state == 'alternatives' && laneState == i ? 'sidebar-link-selected' : '')
+        "
+        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        @click="handleStateChange('alternatives', i)"
+      >
+        Alternatives
+      </h2>
     </div>
+
+    <div v-if="tierlistList == true" style="margin-top: 30px">
+      <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px">Tierlist</h2>
+      <NuxtLink
+        v-for="(pos, i) in POSITIONS"
+        style="margin-top: 5px; margin-bottom: 5px"
+        :to="'/tierlist/' + pos"
+      >
+        <div
+          :class="selected == pos ? 'sidebar-link-selected' : ''"
+          class="sidebar-link"
+          style="padding-left: 35px; display: flex; align-items: center"
+        >
+          <NuxtImg
+            format="webp"
+            width="40"
+            height="40"
+            :src="LANE_IMAGES[i]"
+            :alt="POSITIONS_STR[i]"
+          />
+          <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px">
+            {{ POSITIONS_STR[i] }}
+          </h3>
+        </div>
+      </NuxtLink>
+    </div>
+
+    <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px">
+      <h3 style="font-size: 23px; font-weight: 200">Patch {{ stats.patch }}</h3>
+      <h3 style="font-size: 23px; font-weight: 200">{{ stats.count }} games</h3>
+      <NuxtLink to="/about"><h3>About</h3></NuxtLink>
+      <h2 style="font-size: 12px; font-weight: 200; margin-top: 5px">
+        BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
+        Games or anyone officially involved in producing or managing Riot Games properties. Riot
+        Games, and all associated properties are trademarks or registered trademarks of Riot Games,
+        Inc.
+      </h2>
+    </div>
+  </div>
 </template>
 
 <style>
 .sidebar-container {
-    background-color: #2B2826;
-    width: 300px;
+  background-color: #2b2826;
+  width: 300px;
 
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 10;
 }
 .sidebar-margin {
-    width: 300px; 
-    flex-shrink: 0;
+  width: 300px;
+  flex-shrink: 0;
 }
 .sidebar-link {
-    user-select: none;
-    margin: 5px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border-radius: 8px;
+  user-select: none;
+  margin: 5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 8px;
 }
 .sidebar-link:hover {
-    cursor: pointer;
+  cursor: pointer;
 
-    background-color: var(--color-surface-darker);
+  background-color: var(--color-surface-darker);
 }
 .sidebar-link-selected {
-    background-color: var(--color-surface);
+  background-color: var(--color-surface);
 }
 
 @media only screen and (max-width: 1200px) {
-    .sidebar-container {
-        display: none;
-    }
-    .sidebar-margin {
-        display: none;
-    }
+  .sidebar-container {
+    display: none;
+  }
+  .sidebar-margin {
+    display: none;
+  }
 }
-</style>
+</style>