fix prettier running on other files issue, start team color scheme fo…

…r player profile

.pre-commit-config.yaml

@@ -66,7 +66,6 @@ repos:
         language: node
         entry: npm run format-check
         files: ^src/.*
-        exclude: ^src/assets/.*
 -   repo: local
     hooks:
     -   id: prettier-fix
@@ -75,4 +74,3 @@ repos:
         entry: npm run format
         stages: [ manual ]
         files: ^src/.*
-        exclude: ^src/assets/.*

.prettierignore

@@ -0,0 +1,3 @@
+.mypy_cache
+
+.gitignore

package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview",
     "lint": "eslint --ext .js,.ts,.vue .",
     "lint-fix": "eslint --fix --ext .js,.ts,.vue .",
-    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json|vue)\"",
-    "format-check": "prettier --ignore-path .gitignore \"**/*.+(js|ts|json|vue)\""
+    "format": "prettier --write \"**/*.+(js|ts|json|vue)\"",
+    "format-check": "prettier --check \"**/*.+(js|ts|json|vue)\""
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.1",

src/assets/mlbTeams.json

@@ -11,6 +11,11 @@
     "name": "Oakland Athletics",
     "link": "/api/v1/teams/133",
     "season": 2024,
+    "colors": {
+      "first": "#003831",
+      "second": "#EFB21E",
+      "third": "#A2AAAD"
+    },
     "venue": {
       "id": 10,
       "name": "Oakland Coliseum",

src/components/PlayerDetails.vue

@@ -1,19 +1,46 @@
 <script setup lang="ts">
+import { getTeamColors } from "../helpers";
 type Player = {
   fullName: string;
   primaryNumber: string;
   primaryPosition: string;
   logo: string;
+  currentTeamId: number;
 };
 
 const details = defineProps<Player>();
+
+function getBackgroundColor(currentTeamId: number) {
+  var teamColors = getTeamColors(currentTeamId);
+  if (currentTeamId == 133 && teamColors && "first" in teamColors) {
+    return teamColors["first"];
+  }
+
+  return "primary";
+}
+
+function getLogoBackgroundColor(currentTeamId: number) {
+  var teamColors = getTeamColors(currentTeamId);
+  if (currentTeamId == 133 && teamColors && "third" in teamColors) {
+    return teamColors["third"];
+  }
+
+  return "white";
+}
 </script>
 
 <template>
-  <v-sheet rounded="xl" color="primary" elevation="12">
+  <v-sheet
+    rounded="xl"
+    :color="getBackgroundColor(details.currentTeamId)"
+    elevation="12"
+  >
     <v-row align="center" justify="center">
       <v-col cols="12" align="center" justify="center">
-        <v-avatar color="white" size="70">
+        <v-avatar
+          :color="getLogoBackgroundColor(details.currentTeamId)"
+          size="70"
+        >
           <img :src="logo" height="60%" />
         </v-avatar>
       </v-col>
@@ -28,3 +55,4 @@ const details = defineProps<Player>();
 </template>
 
 <style scoped></style>
+../helpers

src/components/PlayerPitches.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { ref, watchEffect } from "vue";
 import pitchTypes from "../assets/pitchTypes.json";
+import { getTeamColors } from "../helpers";
 
 const pitches = ref();
 const tasks = ref();
 const ready = ref(false);
 const pitcher = defineProps({
   mlbId: Number,
+  currentTeamId: {
+    type: Number,
+    required: true,
+  },
 });
 
 watchEffect(async () => {
@@ -64,6 +69,20 @@ function findTooltip(code: string) {
 
   return "UNKNOWN";
 }
+
+function getColorScheme(currentTeamId: number) {
+  var teamColors = getTeamColors(currentTeamId);
+  if (
+    currentTeamId == 133 &&
+    teamColors &&
+    "first" in teamColors &&
+    "second" in teamColors
+  ) {
+    return { background: teamColors["first"], color: teamColors["second"] };
+  }
+
+  return "";
+}
 </script>
 
 <template>
@@ -84,7 +103,10 @@ function findTooltip(code: string) {
         v-bind:key="index"
         v-show="ready"
       >
-        <div class="text-h5 text-center mt-2 bg-primary">
+        <div
+          class="text-h5 text-center mt-2"
+          :style="getColorScheme(pitcher.currentTeamId)"
+        >
           {{ pitch["season"] }}
         </div>
 

src/components/PlayerSheet.vue

@@ -34,12 +34,13 @@ import RoyalsLogo from "../assets/logos/kansas-city-royals-logo.svg";
 import DodgersLogo from "../assets/logos/los-angeles-dodgers-logo.svg";
 import NationalsLogo from "../assets/logos/washington-nationals-logo.svg";
 import MetsLogo from "../assets/logos/new-york-mets-logo.svg";
+import { getTeamColors } from "../helpers";
 
 type Pitcher = {
   fullName: string;
   primaryNumber: string;
   primaryPosition: string;
-  currentTeamId: string;
+  currentTeamId: number;
   mlbId: number;
 };
 
@@ -122,6 +123,15 @@ function findLogo(currentTeamId: number) {
       return "";
   }
 }
+
+function getBackgroundColor(currentTeamId: number) {
+  var teamColors = getTeamColors(currentTeamId);
+  if (currentTeamId == 133 && teamColors && "second" in teamColors) {
+    return teamColors["second"];
+  }
+
+  return "primary";
+}
 </script>
 
 <template>
@@ -135,14 +145,19 @@ function findLogo(currentTeamId: number) {
             :primary-number="pitcher.primaryNumber"
             :primary-position="findAbbrev(pitcher.primaryPosition)"
             :logo="findLogo(Number(pitcher.currentTeamId))"
+            :currentTeamId="pitcher.currentTeamId"
           />
         </v-col>
         <v-spacer class="d-none d-sm-flex"></v-spacer>
       </v-row>
       <v-row>
         <v-col>
           <v-card class="ml-4 mr-4 mb-4" rounded="lg">
-            <v-tabs v-model="tab" fixed-tabs bg-color="primary">
+            <v-tabs
+              v-model="tab"
+              fixed-tabs
+              :bg-color="getBackgroundColor(pitcher.currentTeamId)"
+            >
               <v-tab>Stats</v-tab>
               <v-tab>Pitches</v-tab>
             </v-tabs>
@@ -156,7 +171,10 @@ function findLogo(currentTeamId: number) {
 
               <v-window-item :key="1">
                 <v-virtual-scroll height="400" :items="[pitcher]">
-                  <PlayerPitches :mlb-id="pitcher.mlbId" />
+                  <PlayerPitches
+                    :mlb-id="pitcher.mlbId"
+                    :current-team-id="pitcher.currentTeamId"
+                  />
                 </v-virtual-scroll>
               </v-window-item>
             </v-window>

src/helpers/index.ts

@@ -0,0 +1,11 @@
+import mlbTeams from "../assets/mlbTeams.json";
+
+export function getTeamColors(teamId: number): Record<string, string> {
+  for (const team of mlbTeams) {
+    if ("colors" in team && team["colors"] && teamId == team.id) {
+      return team["colors"];
+    }
+  }
+
+  return {};
+}