Moved vanity card and bbref link to new component to fix formatting

src/components/CardImagesDisplay.vue

@@ -1,24 +1,29 @@
 <template>
   <div class="card-images-display">
-    <div class="col-sm-auto" style="max-width: 941px;">
+    <div class="row">
-      <div class="row">
+      <div class="col-sm-auto">
-        <img v-if="selectedCardImage1Url" style="max-height:486px; max-width: 941px;" id="card-image"
+        <img style="max-height:485px; max-width: 100%;" id="team-image" :src="playerImageUrl" :alt="playerName">
-          :src="selectedCardImage1Url">
+        <p><a id="bbref-link" target="_blank" :href="baseballReferenceUrl">Baseball Reference Page</a></p>
       </div>
-      <div class="row">
+      <div class="col-sm-auto" style="width: 940px;">
-        <img v-if="selectedCardImage2Url" style="max-height:486px; max-width: 941px;" id="card-image"
+        <div class="row">
-          :src="selectedCardImage2Url">
+          <img v-if="selectedCardImage1Url" style="height:485px; width: 940px;" id="card-image"
-      </div>
+            :src="selectedCardImage1Url">
-      <div class="row">
-        <!-- TODO set visibility off if there is another key with lower value -->
-        <div v-visible="hasPreviousCard" class="col-sm-5">
-          <input type="button" class="w-100" @click="decrementCurrentSeasonNumber" value="<<" />
         </div>
-        <strong class="col-sm-2" style="text-align: center;">
+        <div class="row">
-          {{ getSeasonStringBySeasonNumber(currentSeasonNumber) }}
+          <img v-if="selectedCardImage2Url" style="height:485px; width: 940px;" id="card-image"
-        </strong>
+            :src="selectedCardImage2Url">
-        <div v-visible="hasNextCard" class="col-sm-5">
+        </div>
-          <input type="button" class="w-100" @click="incrementCurrentSeasonNumber" value=">>" />
+        <div class="row">
+          <div v-visible="hasPreviousCard" class="col-sm-5">
+            <input type="button" class="w-100" @click="decrementCurrentSeasonNumber" value="<<" />
+          </div>
+          <strong class="col-sm-2" style="text-align: center;">
+            {{ getSeasonStringBySeasonNumber(currentSeasonNumber) }}
+          </strong>
+          <div v-visible="hasNextCard" class="col-sm-5">
+            <input type="button" class="w-100" @click="incrementCurrentSeasonNumber" value=">>" />
+          </div>
         </div>
       </div>
     </div>
@@ -43,6 +48,18 @@ export default {
     playerName: { type: String, required: true }
   },
   computed: {
+    player(): Player | undefined {
+      return this.playerSeasons.find(ps => ps.season === this.selectedSeasonNumber)
+    },
+    playerImageUrl(): string | undefined {
+      return this.player?.vanity_card ?? this.player?.team.thumbnail
+    },
+    baseballReferenceUrl(): string | undefined {
+      if (!this.player?.bbref_id)
+        return undefined
+      const firstChar = this.player.bbref_id.slice(0, 1)
+      return `https://www.baseball-reference.com/players/${firstChar}/${this.player.bbref_id}.shtml`
+    },
     cardImage1UrlBySeasonNumber(): Map<number, string> {
       return new Map(this.playerSeasons.map(ps => [ps.season, ps.image]))
     },

src/views/PlayerView.vue

@@ -17,36 +17,8 @@
         </div>
       </div>
 
-      <div class="row">
+      <CardImagesDisplay :player-seasons="playerSeasons" :player-name="playerName" :selected-season-number="seasonNumber"
-        <div class="col-sm-auto">
+        :is-authenticated="isAuthenticated" />
-          <img style="max-height:485px; max-width: 100%;" id="team-image" :src="playerImageUrl" :alt="playerName">
-          <p><a id="bbref-link" target="_blank" :href="baseballReferenceUrl">Baseball Reference Page</a></p>
-        </div>
-
-        <CardImagesDisplay :player-seasons="playerSeasons" :player-name="playerName"
-          :selected-season-number="seasonNumber" :is-authenticated="isAuthenticated" />
-        <!-- <div class="col-sm-auto">
-          <div class="row">
-            <img v-if="playerCardImage1Url" style="max-height:485px; max-width: 100%;" id="card-image"
-              :src="playerCardImage1Url">
-          </div>
-          <div class="row">
-            <img v-if="playerCardImage2Url" style="max-height:485px; max-width: 100%;" id="card-image"
-              :src="playerCardImage2Url">
-          </div>
-          <div class="row">
-            <div v-visible="false" class="col-sm-5">
-              <input type="button" class="w-100" @click="console.log('foo')" value="<<" />
-            </div>
-            <strong class="col-sm-2" style="text-align: center;">
-              S8/9
-            </strong>
-            <div v-visible="false" class="col-sm-5">
-              <input type="button" class="w-100" @click="console.log('bar')" value=">>" />
-            </div>
-          </div>
-        </div> -->
-      </div>
 
       <!-- Summary -->
       <div class="row" id="batter-summary">
@@ -234,25 +206,6 @@ export default {
     teamThumbnail(): string | undefined {
       return this.player?.team?.thumbnail
     },
-    baseballReferenceUrl(): string | undefined {
-      if (!this.player?.bbref_id)
-        return undefined
-      const firstChar = this.player.bbref_id.slice(0, 1)
-      return `https://www.baseball-reference.com/players/${firstChar}/${this.player.bbref_id}.shtml`
-    },
-    playerImageUrl(): string | undefined {
-      return this.player?.vanity_card ?? this.teamThumbnail
-    },
-    playerCardImage1Url(): string | undefined {
-      if (!this.isAuthenticated)
-        return undefined
-      return this.player?.image
-    },
-    playerCardImage2Url(): string | undefined {
-      if (!this.isAuthenticated)
-        return undefined
-      return this.player?.image2
-    },
     injuryReturnDate(): string | undefined {
       if (!this.player?.il_return)
         return undefined