add 'All' style option for player times page & update ai generated code to use the style enum

Author: why-Mia

src/api/offstylesApi.ts

@@ -43,7 +43,7 @@ class OffstylesApi extends Api {
   static offstylesApiUrl = import.meta.env.DEV ? '/api' : 'https://offstyles.tommyy.dev/api';
 
   // Fixed method signature to require style parameter
-  static async getTimesByMap(mapName: string, style: number = 190, steamid?: string, limit: number = 50, page: number = 1): Promise<RankAwareRecord[]> {
+  static async getTimesByMap(mapName: string, style: number = Style.normal, steamid?: string, limit: number = 50, page: number = 1): Promise<RankAwareRecord[]> {
     const params = new URLSearchParams({
       map: mapName,
       style: style.toString(),
@@ -59,7 +59,7 @@ class OffstylesApi extends Api {
     return await this.fetchFromUrl();
   }
 
-  static async getTimesByPlayer(steamID: string, map?: string, style: number = 190, limit: number = 50, page: number = 1, best: boolean = false): Promise<WRAwareRecord[]> {
+  static async getTimesByPlayer(steamID: string, map?: string, style: number = Style.all, limit: number = 50, page: number = 1, best: boolean = false): Promise<WRAwareRecord[]> {
     const params = new URLSearchParams({
       steamid: steamID,
       limit: limit.toString(),
@@ -71,7 +71,7 @@ class OffstylesApi extends Api {
       params.append('map', map);
     }
 
-    if (style !== undefined) {
+    if (style !== undefined && style !== Style.all) {
       params.append('style', style.toString());
     }
 

src/components/CustomDropdown.vue

@@ -9,12 +9,13 @@
   const emit = defineEmits(['dropdown-Changed']);
   
   const props = defineProps<{
-    options: number[], 
+    options: (number)[], 
     name: string,
-    format: (value: number) => string
+    format: (value: number) => string,
+    default: number
   }>()
 
-  const currentInput : Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : Style.normal);
+  const currentInput : Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : props.default);
   
   watch(currentInput, async() => {
     emit('dropdown-Changed', props.name, currentInput.value);

src/components/MapDetails.vue

@@ -35,7 +35,7 @@
     <h1 class="text-2xl mb-3">{{ mapName }}</h1>
     <div class="flex py-2">
       <CustomDropdown :options="[Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
-       :name="'style'" :format="styleFormat.name" @dropdown-Changed="dropdownChanged"></CustomDropdown>
+       :name="'style'" :format="styleFormat.name" :default="Style.normal" @dropdown-Changed="dropdownChanged"></CustomDropdown>
     </div>
     <TimesList v-if="props.mapTimes" :times="props.mapTimes" :cols="[{
       label: 'Player',

src/components/PlayerDetails.vue

@@ -155,8 +155,8 @@
       </button>
     </div>
     <div class="flex py-2">
-      <CustomDropdown :options="[Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
-       :name="'style'" :format="styleFormat.name" @dropdown-Changed="dropdownChanged"></CustomDropdown>
+      <CustomDropdown :options="[Style.all, Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
+       :name="'style'" :format="styleFormat.name" :default="Style.all" @dropdown-Changed="dropdownChanged"></CustomDropdown>
     </div>
     <TimesList v-if="props.playerTimes" :times="props.playerTimes" :cols="[
     {

src/components/RecentTimes.vue

@@ -36,7 +36,7 @@
     <p class="text-sm text-gray-400 mb-4">Displaying records from the last 2 weeks</p>
     <div class="flex py-2 justify-between flex-wrap gap-3">
       <CustomDropdown :options="[Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
-       :name="'style'" :format="styleFormat.name" @dropdown-Changed="dropdownChanged"></CustomDropdown>
+       :name="'style'" :format="styleFormat.name" :default="Style.normal" @dropdown-Changed="dropdownChanged"></CustomDropdown>
       <CheckboxInput @checkbox-Changed="dropdownChanged" :name="'wr'" :label="'Only show WR times'"></CheckboxInput>
     </div>
     <TimesList v-if="props.recentTimes" :times="props.recentTimes" :cols="[{

src/types/Style.ts

@@ -1,4 +1,5 @@
 export enum Style {
+    all = 0,
     normal = 190,
     sideways = 191,
     wonly = 192,

src/utils/styleFormat.ts

@@ -2,6 +2,7 @@ import { Style } from "@/types/Style";
 
 const name = function(style : Style) {
   switch(style){
+    case Style.all: return 'All';
     case Style.normal: return 'Normal';
     case Style.sideways: return 'Sideways';
     case Style.wonly: return 'W-Only';
@@ -15,6 +16,7 @@ const name = function(style : Style) {
 
 const styleFromName = function(name : string) {
   switch(name.toLowerCase()){
+    case 'all': return Style.all;
     case 'normal': return Style.normal;
     case 'sideways': return Style.sideways;
     case 'w-only': return Style.wonly;

src/utils/urlParams.ts

@@ -2,7 +2,7 @@ import { Style } from "@/types/Style";
 const update = function(name: string, value : number | string) {
   const params = new URLSearchParams(window.location.search);
   params.set(name, String(value));
-  if(name === 'style' && value === Style.normal){
+  if(name === 'style' && value === Style.all){
     params.delete(name);
   }
   //cant use router outside of setup component, so need to return the new query and use there instead

src/views/MapsView.vue

@@ -8,6 +8,7 @@
   import MapDetails from '@/components/MapDetails.vue';
   import type { Time } from '@/types/Time';
   import SearchBoxMap from '@/components/SearchBoxMap.vue';
+  import { Style } from '@/types/Style';
 
   const props = defineProps({
     mapName: {
@@ -44,7 +45,7 @@
     const paramsObj = urlParams.getAsObject();
     
     // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : 190;
+    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.normal;
     const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
     
     const apiMapTimes = await OffstylesApi.getTimesByMap(name, style, undefined, undefined, page);

src/views/PlayersView.vue

@@ -8,6 +8,7 @@
   import PlayerDetails from '@/components/PlayerDetails.vue';
   import type { Time } from '@/types/Time';
   import SearchBoxPlayer from '@/components/SearchBoxPlayer.vue';
+  import { Style } from '@/types/Style';
 
   const props = defineProps({
     playerSteamId: {
@@ -77,7 +78,7 @@
     const paramsObj = urlParams.getAsObject();
     
     // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : 190;
+    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
     const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
     
     const apiPlayerTimes = await OffstylesApi.getTimesByPlayer(playerId, undefined, style, undefined, page);