Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Player History Scene #92

Merged
merged 16 commits into from
Jan 18, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update PlayerHistory.vue to display a player's favorite hero if one i…
…s present
JJ1898 committed Jan 14, 2022
commit ca0a517ab14ac076d9db3504cb48126326e92661
53 changes: 48 additions & 5 deletions website/src/components/broadcast/PlayerHistory.vue
Original file line number Diff line number Diff line change
@@ -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>