From 1bb191668d42f747d7b5c5f128d9170d975d6ded Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Wed, 12 Jan 2022 22:32:47 -0600
Subject: [PATCH 01/16] added toggleable team name to PlayerTeamDisplay.vue

---
 .../src/components/broadcast/auction/PlayerTeamDisplay.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/website/src/components/broadcast/auction/PlayerTeamDisplay.vue b/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
index 3964d7f6..7a87f194 100644
--- a/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
+++ b/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="player-team-display d-flex" :style="teamBG">
+  <div class="player-team-display d-flex flex-column" :style="teamBG">
+    <div class="team-name flex-center text-center font-weight-bold" v-if="showName">{{team.name}}</div>
+    <div class="team-full-box d-flex">
         <div class="team-logo box flex-center">
             <div class="team-logo-inner bg-center" :style="teamLogo"></div>
             <div class="event-logo-inner bg-center" :style="eventLogo"></div>
@@ -8,6 +10,7 @@
             <div class="ranking-text">{{ team.ranking_text }}</div>
         </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -16,7 +19,7 @@ import { cssImage } from "@/utils/content-utils";
 
 export default {
     name: "PlayerTeamDisplay",
-    props: ["team"],
+    props: ["team", "showName"],
     computed: {
         teamBG() {
             return logoBackground1(this.team);

From cb10af2bd630479f225af82922dfd9188dca8a66 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Wed, 12 Jan 2022 22:34:00 -0600
Subject: [PATCH 02/16] add PlayerHistory as routeable

---
 .../components/broadcast/PlayerHistory.vue    | 55 +++++++++++++++++++
 website/src/router/broadcast.js               |  4 +-
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 website/src/components/broadcast/PlayerHistory.vue

diff --git a/website/src/components/broadcast/PlayerHistory.vue b/website/src/components/broadcast/PlayerHistory.vue
new file mode 100644
index 00000000..62f63b6e
--- /dev/null
+++ b/website/src/components/broadcast/PlayerHistory.vue
@@ -0,0 +1,55 @@
+<template>
+  <GenericOverlay class="player-history-overlay" :title="customTitle">
+    <div class="player-teams d-flex flex-wrap flex-center">
+      <PlayerTeamDisplay :team="team" v-for="team in playerTeams" v-bind:key="team.id" :showName="true"/>
+    </div>
+
+  </GenericOverlay>
+</template>
+
+<script>
+import GenericOverlay from "@/components/broadcast/roots/GenericOverlay";
+import { sortEvents } from "@/utils/sorts";
+import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
+import PlayerTeamDisplay from "@/components/broadcast/auction/PlayerTeamDisplay";
+export default {
+    name: "PlayerHistory",
+    components: { PlayerTeamDisplay, GenericOverlay },
+    props: ["title", "broadcast", "showMinor"],
+    computed: {
+        customTitle() {
+            if (this.player?.name) return (this.player.name + "'s Career");
+            return "Player Career";
+        },
+        highlightedPlayerID() {
+            if (!this.broadcast?.highlight_player?.length) return null;
+            return this.broadcast?.highlight_player[0];
+        },
+        player() {
+            return ReactiveRoot(this.highlightedPlayerID, {
+                member_of: ReactiveArray("member_of", {
+                    theme: ReactiveThing("theme"),
+                    event: ReactiveThing("event", {
+                        theme: ReactiveThing("theme")
+                    })
+
+                })
+            });
+        },
+        playerTeams() {
+            if (!this.player?.member_of) return [];
+            return this.player.member_of.filter(t => {
+                if (!t) return;
+                if (!t.event) return;
+                if (!this.showMinor && t.minor_team) return false;
+                // if (!t.ranking_sort) return false;
+                return true;
+            }).sort((a, b) => sortEvents(a.event, b.event));
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index c1256dda..11827682 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -29,6 +29,7 @@ import SeasonHistoryOverlay from "@/components/broadcast/roots/SeasonHistoryOver
 import IframeOverlay from "@/components/broadcast/roots/IframeOverlay";
 import TallyTransmitter from "@/components/broadcast/roots/TallyTransmitter";
 import TallyViewer from "@/components/broadcast/roots/TallyViewer";
+import PlayerHistory from "@/components/broadcast/PlayerHistory";
 
 export default [
     { path: "ingame", component: IngameOverlay, props: route => ({ codes: route.query.codes }) },
@@ -86,5 +87,6 @@ export default [
     { path: "auction", component: AuctionOverlay, props: route => ({ category: route.query.category }) },
     { path: "ad-read", component: AdReadOverlay, props: route => ({ extraDelay: route.query.delay }) },
     { path: "logos", component: LogoAdOverlay },
-    { path: "staff", component: StaffOverlay }
+    { path: "staff", component: StaffOverlay },
+    { path: "player-history", component: PlayerHistory, props: route => ({ showMinor: route.query.minor }) }
 ];

From 20fe6478749e3f5acb019cb41169576acb11a739 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Thu, 13 Jan 2022 03:24:02 -0600
Subject: [PATCH 03/16] add a fallback if a team's ranking is empty (return
 N/A)

---
 .../src/components/broadcast/auction/PlayerTeamDisplay.vue  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/website/src/components/broadcast/auction/PlayerTeamDisplay.vue b/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
index 7a87f194..08758654 100644
--- a/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
+++ b/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
@@ -7,7 +7,7 @@
             <div class="event-logo-inner bg-center" :style="eventLogo"></div>
         </div>
         <div class="team-rank box flex-center">
-            <div class="ranking-text">{{ team.ranking_text }}</div>
+            <div class="ranking-text">{{ rankingText }}</div>
         </div>
     </div>
   </div>
@@ -29,6 +29,10 @@ export default {
         },
         eventLogo() {
             return cssImage("backgroundImage", this.team?.event?.theme, ["small_logo", "default_logo"], 100);
+        },
+        rankingText() {
+            if (!this.team?.ranking_text) return "N/A";
+            return this.team?.ranking_text;
         }
     }
 };

From 64c1a896870bcc49f5a2d6f9abcd6d6c9d536990 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Thu, 13 Jan 2022 03:54:33 -0600
Subject: [PATCH 04/16] create a generic component that displays a hero's name,
 role, and portrait

---
 .../src/components/broadcast/PlayerHero.vue   | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 website/src/components/broadcast/PlayerHero.vue

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
new file mode 100644
index 00000000..489aa9dd
--- /dev/null
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="hero-card d-flex flex-column flex-center" v-if="hero">
+    <div class="hero-name d-flex flex-row text-center font-weight-bold"><span v-if="roleIcon" class="icon" v-html="roleIcon"></span> {{heroName}}</div>
+    <div class="hero-role d-flex flex-row text-center">{{heroRole}}</div>
+    <div class="hero-portrait d-flex flex-row flex-center"><img :src="heroPortraitURL"/></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: "PlayerHero",
+    props: ["hero", "british"],
+    computed: {
+        heroName() {
+            if (!this.hero?.name) return null;
+            return this.hero.name;
+        },
+        heroRole() {
+            if (!this.hero?.name) return null;
+            return this.hero.role;
+        },
+        roleIcon() {
+            switch (this.heroRole) {
+            case "Tank":
+                return "<i class=\"fas fa-shield-alt\"></i>";
+            case "Support":
+                return "<i class=\"fas fa-plus-circle\"></i>";
+            case "DPS":
+                return "<i class=\"fas fa-crosshairs\"></i>";
+            }
+            return null;
+        },
+        heroPortraitURL() {
+            if (!this.hero?.main_image) return null;
+            return this.hero?.main_image[0].url;
+        }
+    }
+
+
+};
+</script>
+
+<style scoped>
+  .hero-card {
+    margin: 10px;
+  }
+  .hero-name {
+    font-size: 3em;
+  }
+  .hero-role {
+    font-size: 1.2em;
+  }
+  .icon {
+    margin-right: 5px;
+  }
+  .hero-portrait {
+    height: auto;
+    width: 300px;
+  }
+
+</style>

From 12899a8eadaec2de30f50922fcf3d38a922fa56c Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Thu, 13 Jan 2022 04:01:44 -0600
Subject: [PATCH 05/16] remove british (was intended to swap spelling)

---
 website/src/components/broadcast/PlayerHero.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index 489aa9dd..228fba44 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -10,7 +10,7 @@
 
 export default {
     name: "PlayerHero",
-    props: ["hero", "british"],
+    props: ["hero"],
     computed: {
         heroName() {
             if (!this.hero?.name) return null;

From ca0a517ab14ac076d9db3504cb48126326e92661 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Thu, 13 Jan 2022 20:14:20 -0600
Subject: [PATCH 06/16] update PlayerHistory.vue to display a player's favorite
 hero if one is present

---
 .../components/broadcast/PlayerHistory.vue    | 53 +++++++++++++++++--
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHistory.vue b/website/src/components/broadcast/PlayerHistory.vue
index 62f63b6e..f2f4ccab 100644
--- a/website/src/components/broadcast/PlayerHistory.vue
+++ b/website/src/components/broadcast/PlayerHistory.vue
@@ -1,8 +1,21 @@
 <template>
   <GenericOverlay class="player-history-overlay" :title="customTitle">
-    <div class="player-teams d-flex flex-wrap flex-center">
-      <PlayerTeamDisplay :team="team" v-for="team in playerTeams" v-bind:key="team.id" :showName="true"/>
+    <div class="career-wrapper d-flex flex-center">
+      <div class="hero-segment d-flex flex-column flex-center" v-if="hero">
+        <div class="hero-card-title d-flex flex-column flex-center">Favorite Hero
+        </div>
+        <div class="hero-card d-flex flex-column"><PlayerHero :hero="hero"></PlayerHero>
+        </div>
     </div>
+    <div class="teams-wrapper">
+      <div class="teams-label d-flex flex-column text-center">Team History
+      </div>
+      <div class="player-teams d-flex flex-wrap flex-center">
+        <PlayerTeamDisplay :team="team" v-for="team in playerTeams" v-bind:key="team.id" :showName="true"/>
+      </div>
+    </div>
+    </div>
+
 
   </GenericOverlay>
 </template>
@@ -12,10 +25,11 @@ import GenericOverlay from "@/components/broadcast/roots/GenericOverlay";
 import { sortEvents } from "@/utils/sorts";
 import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 import PlayerTeamDisplay from "@/components/broadcast/auction/PlayerTeamDisplay";
+import PlayerHero from "@/components/broadcast/PlayerHero";
 export default {
     name: "PlayerHistory",
-    components: { PlayerTeamDisplay, GenericOverlay },
-    props: ["title", "broadcast", "showMinor"],
+    components: { PlayerTeamDisplay, GenericOverlay, PlayerHero },
+    props: ["title", "broadcast", "showMinor", "britishSpelling"],
     computed: {
         customTitle() {
             if (this.player?.name) return (this.player.name + "'s Career");
@@ -32,10 +46,13 @@ export default {
                     event: ReactiveThing("event", {
                         theme: ReactiveThing("theme")
                     })
-
                 })
             });
         },
+        hero() {
+            if (!this.player?.favourite_hero) return null;
+            return ReactiveRoot(this.player?.favourite_hero[0]); // british spelling MyEyes
+        },
         playerTeams() {
             if (!this.player?.member_of) return [];
             return this.player.member_of.filter(t => {
@@ -46,10 +63,36 @@ export default {
                 return true;
             }).sort((a, b) => sortEvents(a.event, b.event));
         }
+        // TODO: Get a list of all events a player has participated in, sort by date, and display the start date of the earliest event as "Player Since"
     }
 };
 </script>
 
 <style scoped>
+  .career-wrapper {
+    height: 100%;
+    width: 100%;
+  }
+  .hero-segment {
+    overflow: hidden;
+    height: 740px;
+    width: 300px;
+    margin-left: -170px;
+    margin-top: -100px;
+    margin-bottom: -100px;
+    background-color: rgba(0,0,0,.2);
+  }
+  .hero-card-title {
+    font-size: 1.5em;
+  }
+  .teams-wrapper {
+    margin: 5px;
+    min-height: 600px;
+    width: 800px;
+  }
+  .teams-label {
+    font-size: 5em;
+    float: top;
+  }
 
 </style>

From af0f00dccca6a4444240a5ba20a0a9a0f3468ea6 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Mon, 17 Jan 2022 17:15:09 -0600
Subject: [PATCH 07/16] don't display a broken image icon if there is no hero
 portrait available

---
 website/src/components/broadcast/PlayerHero.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index 228fba44..0461cc57 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -2,7 +2,7 @@
   <div class="hero-card d-flex flex-column flex-center" v-if="hero">
     <div class="hero-name d-flex flex-row text-center font-weight-bold"><span v-if="roleIcon" class="icon" v-html="roleIcon"></span> {{heroName}}</div>
     <div class="hero-role d-flex flex-row text-center">{{heroRole}}</div>
-    <div class="hero-portrait d-flex flex-row flex-center"><img :src="heroPortraitURL"/></div>
+    <div class="hero-portrait d-flex flex-row flex-center" v-if="heroPortraitURL"><img :src="heroPortraitURL"/></div>
   </div>
 </template>
 

From 0138d637ed2a075a6673fdc17e0333da890b8878 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Mon, 17 Jan 2022 17:16:12 -0600
Subject: [PATCH 08/16] implement change suggestion from
 https://github.com/slmnio/slmngg-sfc/pull/92#discussion_r784521631

---
 website/src/components/broadcast/PlayerHero.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index 0461cc57..64bc9567 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -13,8 +13,7 @@ export default {
     props: ["hero"],
     computed: {
         heroName() {
-            if (!this.hero?.name) return null;
-            return this.hero.name;
+            return this.hero?.name || null;
         },
         heroRole() {
             if (!this.hero?.name) return null;

From 8a1a2023816d3e9c70cfc34a2663fa7a4d68db50 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Mon, 17 Jan 2022 17:18:02 -0600
Subject: [PATCH 09/16] use optional chaining to simplify logic

---
 website/src/components/broadcast/PlayerHero.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index 64bc9567..000d25d4 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -31,8 +31,7 @@ export default {
             return null;
         },
         heroPortraitURL() {
-            if (!this.hero?.main_image) return null;
-            return this.hero?.main_image[0].url;
+            return this.hero?.main_image?.[0]?.url;
         }
     }
 

From 373a8fbac5c338683f9759c36be4204277e30b8c Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Mon, 17 Jan 2022 17:18:40 -0600
Subject: [PATCH 10/16] import and use getRoleSVG method for role icons instead
 of FontAwesome

---
 website/src/components/broadcast/PlayerHero.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index 000d25d4..3de58a6b 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -8,6 +8,8 @@
 
 <script>
 
+import { getRoleSVG } from "@/utils/content-utils";
+
 export default {
     name: "PlayerHero",
     props: ["hero"],
@@ -33,6 +35,9 @@ export default {
         heroPortraitURL() {
             return this.hero?.main_image?.[0]?.url;
         }
+    },
+    methods: {
+        getRoleSVG
     }
 
 

From 14ddda9e8f94f1bae7f49efb06b5694aa8503d68 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Mon, 17 Jan 2022 17:20:03 -0600
Subject: [PATCH 11/16] remove and replace old logic

---
 website/src/components/broadcast/PlayerHero.vue | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index 3de58a6b..e66d00f6 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -22,16 +22,9 @@ export default {
             return this.hero.role;
         },
         roleIcon() {
-            switch (this.heroRole) {
-            case "Tank":
-                return "<i class=\"fas fa-shield-alt\"></i>";
-            case "Support":
-                return "<i class=\"fas fa-plus-circle\"></i>";
-            case "DPS":
-                return "<i class=\"fas fa-crosshairs\"></i>";
-            }
-            return null;
+            return getRoleSVG(this.heroRole);
         },
+
         heroPortraitURL() {
             return this.hero?.main_image?.[0]?.url;
         }

From 6f783b988c579a061cd3d729fbeec55d7b9a1065 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Mon, 17 Jan 2022 18:26:07 -0600
Subject: [PATCH 12/16] (incomplete) styling for PlayerHistory with a fav hero
 selected

---
 .../components/broadcast/PlayerHistory.vue    | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHistory.vue b/website/src/components/broadcast/PlayerHistory.vue
index f2f4ccab..dba7ae80 100644
--- a/website/src/components/broadcast/PlayerHistory.vue
+++ b/website/src/components/broadcast/PlayerHistory.vue
@@ -7,7 +7,7 @@
         <div class="hero-card d-flex flex-column"><PlayerHero :hero="hero"></PlayerHero>
         </div>
     </div>
-    <div class="teams-wrapper">
+    <div class="teams-wrapper flex-column flex-center">
       <div class="teams-label d-flex flex-column text-center">Team History
       </div>
       <div class="player-teams d-flex flex-wrap flex-center">
@@ -77,22 +77,35 @@ export default {
     overflow: hidden;
     height: 740px;
     width: 300px;
-    margin-left: -170px;
+    margin-left: -80px;
     margin-top: -100px;
     margin-bottom: -100px;
     background-color: rgba(0,0,0,.2);
   }
   .hero-card-title {
     font-size: 1.5em;
+    padding-top: 50px;
   }
   .teams-wrapper {
-    margin: 5px;
     min-height: 600px;
-    width: 800px;
+    max-height: 700px;
+    min-width: 900px;
+    width: 900px;
+    padding-left: 50px;
   }
   .teams-label {
-    font-size: 5em;
+    font-size: 3em;
     float: top;
   }
+  .teams-wrapper >>> .player-team-display {
+    height: 110px;
+    width: 180px;
+  }
+  .teams-wrapper >>> .team-name {
+    min-height: 24px;
+    min-width: 180px;
+    width: 180px;
+  }
+
 
 </style>

From 758f52760fd4607024ed19b501b08f2c39cc1995 Mon Sep 17 00:00:00 2001
From: Jordan Medrano <jordanmedrano@gmail.com>
Date: Mon, 17 Jan 2022 18:26:44 -0600
Subject: [PATCH 13/16] style for svg instead of font

---
 website/src/components/broadcast/PlayerHero.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index e66d00f6..678fe293 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -49,6 +49,8 @@ export default {
   }
   .icon {
     margin-right: 5px;
+    height: 50px;
+    width: 50px;
   }
   .hero-portrait {
     height: auto;

From e715a896eeeb4c9ddf55d8b459fcfc2233792cf4 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Tue, 18 Jan 2022 19:48:39 +0000
Subject: [PATCH 14/16] Adjust some styling

---
 .../src/components/broadcast/PlayerHero.vue   | 64 ++++++++++++-------
 .../components/broadcast/PlayerHistory.vue    | 55 +++++++---------
 2 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHero.vue b/website/src/components/broadcast/PlayerHero.vue
index 678fe293..9d0f6b4d 100644
--- a/website/src/components/broadcast/PlayerHero.vue
+++ b/website/src/components/broadcast/PlayerHero.vue
@@ -1,9 +1,17 @@
 <template>
-  <div class="hero-card d-flex flex-column flex-center" v-if="hero">
-    <div class="hero-name d-flex flex-row text-center font-weight-bold"><span v-if="roleIcon" class="icon" v-html="roleIcon"></span> {{heroName}}</div>
-    <div class="hero-role d-flex flex-row text-center">{{heroRole}}</div>
-    <div class="hero-portrait d-flex flex-row flex-center" v-if="heroPortraitURL"><img :src="heroPortraitURL"/></div>
-  </div>
+    <div class="hero-card d-flex flex-column flex-center" v-if="hero">
+        <div class="hero-top h-100 flex-center flex-column">
+            <div class="hero-card-title d-flex flex-column flex-center">Favorite Hero</div>
+            <div class="hero-name py-2 d-flex flex-row text-center flex-center font-weight-bold">
+                <span v-if="roleIcon" class="hero-icon" v-html="roleIcon"></span>
+                <span class="hero-real-name">{{ heroName }}</span>
+            </div>
+            <div class="hero-role d-flex flex-row text-center">{{ heroRole }}</div>
+        </div>
+        <div class="hero-portrait d-flex flex-row flex-center" v-if="heroPortraitURL">
+            <img :src="heroPortraitURL"/>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -38,23 +46,33 @@ export default {
 </script>
 
 <style scoped>
-  .hero-card {
-    margin: 10px;
-  }
-  .hero-name {
-    font-size: 3em;
-  }
-  .hero-role {
-    font-size: 1.2em;
-  }
-  .icon {
-    margin-right: 5px;
-    height: 50px;
-    width: 50px;
-  }
-  .hero-portrait {
-    height: auto;
-    width: 300px;
-  }
+    .hero-top {
+        flex-grow: 1;
+    }
+    .hero-card-title {
+        font-size: 1.5em;
+    }
+    .hero-name {
+        font-size: 3em;
+        line-height: 1;
+    }
+
+    .hero-role {
+        font-size: 1.2em;
+    }
+
+    .hero-icon {
+        margin-right: 0.05em;
+        height: 1em;
+        width: 1em;
+    }
+    .hero-icon >>> svg {
+        vertical-align: text-bottom;
+    }
+
+    .hero-portrait {
+        height: 547px;
+        width: 296px;
+    }
 
 </style>
diff --git a/website/src/components/broadcast/PlayerHistory.vue b/website/src/components/broadcast/PlayerHistory.vue
index dba7ae80..4ddb0f64 100644
--- a/website/src/components/broadcast/PlayerHistory.vue
+++ b/website/src/components/broadcast/PlayerHistory.vue
@@ -2,14 +2,12 @@
   <GenericOverlay class="player-history-overlay" :title="customTitle">
     <div class="career-wrapper d-flex flex-center">
       <div class="hero-segment d-flex flex-column flex-center" v-if="hero">
-        <div class="hero-card-title d-flex flex-column flex-center">Favorite Hero
-        </div>
-        <div class="hero-card d-flex flex-column"><PlayerHero :hero="hero"></PlayerHero>
+        <div class="hero-card h-100 d-flex flex-column">
+            <PlayerHero class="h-100" :hero="hero"></PlayerHero>
         </div>
     </div>
     <div class="teams-wrapper flex-column flex-center">
-      <div class="teams-label d-flex flex-column text-center">Team History
-      </div>
+      <div class="teams-label d-flex flex-column text-center">Team History</div>
       <div class="player-teams d-flex flex-wrap flex-center">
         <PlayerTeamDisplay :team="team" v-for="team in playerTeams" v-bind:key="team.id" :showName="true"/>
       </div>
@@ -69,43 +67,36 @@ export default {
 </script>
 
 <style scoped>
-  .career-wrapper {
+.player-history-overlay >>> .generic-overlay-body {
+    padding: 0;
+}
+.career-wrapper {
     height: 100%;
     width: 100%;
-  }
-  .hero-segment {
+}
+.hero-segment {
     overflow: hidden;
     height: 740px;
-    width: 300px;
-    margin-left: -80px;
-    margin-top: -100px;
-    margin-bottom: -100px;
-    background-color: rgba(0,0,0,.2);
-  }
-  .hero-card-title {
-    font-size: 1.5em;
-    padding-top: 50px;
-  }
-  .teams-wrapper {
-    min-height: 600px;
-    max-height: 700px;
+    width: 296px;
+    flex-shrink: 0;
+    background-color: rgba(0, 0, 0, .2);
+}
+.teams-wrapper {
     min-width: 900px;
-    width: 900px;
-    padding-left: 50px;
-  }
-  .teams-label {
+    flex-grow: 1;
+    padding: 0 50px;
+}
+.teams-label {
     font-size: 3em;
     float: top;
-  }
-  .teams-wrapper >>> .player-team-display {
+}
+.teams-wrapper >>> .player-team-display {
     height: 110px;
     width: 180px;
-  }
-  .teams-wrapper >>> .team-name {
+}
+.teams-wrapper >>> .team-name {
     min-height: 24px;
     min-width: 180px;
     width: 180px;
-  }
-
-
+}
 </style>

From 00d114d5240794df062b947eb84da34d77038acf Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Tue, 18 Jan 2022 20:05:23 +0000
Subject: [PATCH 15/16] Replace some hardcoded sizes with dynamic styling

---
 .../components/broadcast/PlayerHistory.vue    | 39 ++++++++-----------
 .../broadcast/auction/PlayerTeamDisplay.vue   | 24 +++++++-----
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHistory.vue b/website/src/components/broadcast/PlayerHistory.vue
index 4ddb0f64..a641327f 100644
--- a/website/src/components/broadcast/PlayerHistory.vue
+++ b/website/src/components/broadcast/PlayerHistory.vue
@@ -1,21 +1,19 @@
 <template>
-  <GenericOverlay class="player-history-overlay" :title="customTitle">
-    <div class="career-wrapper d-flex flex-center">
-      <div class="hero-segment d-flex flex-column flex-center" v-if="hero">
-        <div class="hero-card h-100 d-flex flex-column">
-            <PlayerHero class="h-100" :hero="hero"></PlayerHero>
+    <GenericOverlay class="player-history-overlay" :title="customTitle">
+        <div class="career-wrapper d-flex flex-center">
+            <div class="hero-segment d-flex flex-column flex-center" v-if="hero">
+                <div class="hero-card h-100 d-flex flex-column">
+                    <PlayerHero class="h-100" :hero="hero"></PlayerHero>
+                </div>
+            </div>
+            <div class="teams-wrapper flex-column flex-center">
+                <h3 class="teams-label d-flex flex-column text-center mb-3">Team History</h3>
+                <div class="player-teams d-flex flex-wrap flex-center">
+                    <PlayerTeamDisplay :team="team" v-for="team in playerTeams" v-bind:key="team.id" :showName="true"/>
+                </div>
+            </div>
         </div>
-    </div>
-    <div class="teams-wrapper flex-column flex-center">
-      <div class="teams-label d-flex flex-column text-center">Team History</div>
-      <div class="player-teams d-flex flex-wrap flex-center">
-        <PlayerTeamDisplay :team="team" v-for="team in playerTeams" v-bind:key="team.id" :showName="true"/>
-      </div>
-    </div>
-    </div>
-
-
-  </GenericOverlay>
+    </GenericOverlay>
 </template>
 
 <script>
@@ -90,13 +88,8 @@ export default {
     font-size: 3em;
     float: top;
 }
-.teams-wrapper >>> .player-team-display {
-    height: 110px;
-    width: 180px;
-}
+.teams-wrapper >>> .player-team-display,
 .teams-wrapper >>> .team-name {
-    min-height: 24px;
-    min-width: 180px;
-    width: 180px;
+    width: 176px;
 }
 </style>
diff --git a/website/src/components/broadcast/auction/PlayerTeamDisplay.vue b/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
index 08758654..8ec7e3cf 100644
--- a/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
+++ b/website/src/components/broadcast/auction/PlayerTeamDisplay.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="player-team-display d-flex flex-column" :style="teamBG">
-    <div class="team-name flex-center text-center font-weight-bold" v-if="showName">{{team.name}}</div>
-    <div class="team-full-box d-flex">
-        <div class="team-logo box flex-center">
-            <div class="team-logo-inner bg-center" :style="teamLogo"></div>
-            <div class="event-logo-inner bg-center" :style="eventLogo"></div>
-        </div>
-        <div class="team-rank box flex-center">
-            <div class="ranking-text">{{ rankingText }}</div>
+    <div class="player-team-display d-flex flex-column" :style="teamBG">
+        <div class="team-name flex-center text-center font-weight-bold" v-if="showName">{{ team.name }}</div>
+        <div class="team-full-box d-flex">
+            <div class="team-logo box flex-center">
+                <div class="team-logo-inner bg-center" :style="teamLogo"></div>
+                <div class="event-logo-inner bg-center" :style="eventLogo"></div>
+            </div>
+            <div class="team-rank box flex-center">
+                <div class="ranking-text">{{ rankingText }}</div>
+            </div>
         </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -39,6 +39,10 @@ export default {
 </script>
 
 <style scoped>
+    .team-name {
+        line-height: .8;
+        min-height: 28px;
+    }
     .player-team-display {
         margin: .5em;
     }

From 7c69af4fc7581b7826859b1d25d588d2a7def9ce Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Tue, 18 Jan 2022 20:21:57 +0000
Subject: [PATCH 16/16] Add first event, adjust the new event view to em based
 for scaling

---
 .../components/broadcast/PlayerHistory.vue    | 37 +++++++++++++++++--
 website/src/views/lists/NewEventDisplay.vue   | 14 +++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/website/src/components/broadcast/PlayerHistory.vue b/website/src/components/broadcast/PlayerHistory.vue
index a641327f..f09b2d18 100644
--- a/website/src/components/broadcast/PlayerHistory.vue
+++ b/website/src/components/broadcast/PlayerHistory.vue
@@ -7,7 +7,12 @@
                 </div>
             </div>
             <div class="teams-wrapper flex-column flex-center">
-                <h3 class="teams-label d-flex flex-column text-center mb-3">Team History</h3>
+                <div class="first-event d-flex flex-center mb-3" v-if="firstEvent">
+                    <div class="first-event-text mr-3">First event</div>
+                    <NewEventDisplay :event="firstEvent"/>
+                </div>
+
+                <div class="title d-flex flex-column text-center mb-2">Team History</div>
                 <div class="player-teams d-flex flex-wrap flex-center">
                     <PlayerTeamDisplay :team="team" v-for="team in playerTeams" v-bind:key="team.id" :showName="true"/>
                 </div>
@@ -22,9 +27,10 @@ import { sortEvents } from "@/utils/sorts";
 import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 import PlayerTeamDisplay from "@/components/broadcast/auction/PlayerTeamDisplay";
 import PlayerHero from "@/components/broadcast/PlayerHero";
+import NewEventDisplay from "@/views/lists/NewEventDisplay";
 export default {
     name: "PlayerHistory",
-    components: { PlayerTeamDisplay, GenericOverlay, PlayerHero },
+    components: { PlayerTeamDisplay, GenericOverlay, PlayerHero, NewEventDisplay },
     props: ["title", "broadcast", "showMinor", "britishSpelling"],
     computed: {
         customTitle() {
@@ -58,6 +64,13 @@ export default {
                 // if (!t.ranking_sort) return false;
                 return true;
             }).sort((a, b) => sortEvents(a.event, b.event));
+        },
+        firstEvent() {
+            const events = [...(this.player?.member_of || [])]
+                .map(t => t.event)
+                .filter(e => e?.start_date)
+                .sort(sortEvents);
+            return events[0];
         }
         // TODO: Get a list of all events a player has participated in, sort by date, and display the start date of the earliest event as "Player Since"
     }
@@ -85,11 +98,29 @@ export default {
     padding: 0 50px;
 }
 .teams-label {
-    font-size: 3em;
     float: top;
 }
 .teams-wrapper >>> .player-team-display,
 .teams-wrapper >>> .team-name {
     width: 176px;
 }
+.teams-wrapper .title {
+    font-size: 3em;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+.first-event {
+    font-size: 1.25em;
+}
+.first-event-text {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+.first-event >>> .event-name {
+    margin: 0 0.3em 0 0  !important;
+}
+.player-teams {
+    max-height: 530px;
+    overflow: hidden;
+}
 </style>
diff --git a/website/src/views/lists/NewEventDisplay.vue b/website/src/views/lists/NewEventDisplay.vue
index 7019872b..743cf3be 100644
--- a/website/src/views/lists/NewEventDisplay.vue
+++ b/website/src/views/lists/NewEventDisplay.vue
@@ -46,7 +46,7 @@ export default {
 
 <style scoped>
 .event {
-    border-bottom-width: 4px;
+    border-bottom-width: .25em;
     border-bottom-style: solid;
     min-height: 58px;
 }
@@ -54,22 +54,22 @@ export default {
     color: inherit;
 }
 .event-block {
-    width: 50px;
-    height: 40px;
+    width: 3em;
+    height: 2.5em;
     flex-shrink: 0;
-    margin-right: 2px;
+    margin-right: .125em;
 }
 .event {
     align-items: center;
 }
 .event-block-logo {
-    width: calc(100% - 8px);
-    height: calc(100% - 6px);
+    width: calc(100% - .5em);
+    height: calc(100% - .3em);
 }
 .event-name {
     font-size: 1.2em;
     line-height: 1;
-    margin: 0 4px 4px 0;
+    margin: 0 .25em .25em 0;
 }
 .event.team-display .event-name {
     font-weight: bold;