-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
292 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <template> | ||
| <div class="listen-in" :style="themeBackground1(team)"> | ||
| <div class="team-logo-square"> | ||
| <ThemeLogo border-width="0px" class="team-logo" :theme="team.theme"></ThemeLogo> | ||
| </div> | ||
| <div class="text">{{ text || "Listen In" }}</div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import ThemeLogo from "@/components/website/ThemeLogo"; | ||
| import { themeBackground1 } from "@/utils/theme-styles"; | ||
| export default { | ||
| name: "ListenInBug", | ||
| components: { ThemeLogo }, | ||
| props: ["team", "text"], | ||
| methods: { | ||
| themeBackground1 | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .listen-in { | ||
| display: flex; | ||
| font-size: 32px; | ||
| border-bottom: 4px solid transparent; | ||
| padding-top: 2px; | ||
| } | ||
| .listen-in .team-logo { | ||
| height: 100%; | ||
| width: 64px; | ||
| } | ||
| .listen-in .text { | ||
| padding: 2px 8px; | ||
| text-transform: uppercase; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 99 additions & 0 deletions
99
website/src/components/broadcast/roots/IngameCommsOverlay.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <template> | ||
| <div class="overlay ingame-comms-overlay" v-if="match && match.teams"> | ||
| <div class="teams" :class="{'flip': match.flip_teams}" :style="{ marginTop: topOffset }"> | ||
| <div class="team" v-for="(team, i) in match.teams" :key="team.id" :style="{ width: teamWidth }" :class="{'left': i === 0 || (i === 1 && match.flip_teams)}"> | ||
| <ThemeTransition class="listen-in-holder" :duration="250" :theme="team.theme" | ||
| :active="activeTeamIndex === i" | ||
| :start="i === 0 || (i === 1 && match.flip_teams) ? 'left' : 'right'" | ||
| :end="i === 0 || (i === 1 && match.flip_teams) ? 'right' : 'left'"> | ||
| <ListenInBug :text="listenInText" :team="team" /> | ||
| </ThemeTransition> | ||
| <PlayerAudio :team="team" :broadcast="broadcast" :task-key="`team${i+1}`" :ref="`team${i+1}`" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive"; | ||
| import PlayerAudio from "@/components/broadcast/PlayerAudio"; | ||
| import ListenInBug from "@/components/broadcast/ListenInBug"; | ||
| import ThemeTransition from "@/components/broadcast/ThemeTransition"; | ||
| export default { | ||
| name: "IngameCommsOverlay", | ||
| props: ["broadcast", "listenInText"], | ||
| components: { ListenInBug, PlayerAudio, ThemeTransition }, | ||
| data: () => ({ | ||
| activeTeamIndex: null, | ||
| noStinger: true | ||
| }), | ||
| computed: { | ||
| match() { | ||
| return ReactiveRoot(this.broadcast?.live_match?.[0], { | ||
| teams: ReactiveArray("teams", { | ||
| theme: ReactiveThing("theme") | ||
| }) | ||
| }); | ||
| }, | ||
| activeTeam() { | ||
| if (!this.match?.teams?.length || this.activeTeamIndex === null) return; | ||
| return this.match.teams[this.activeTeamIndex]; | ||
| }, | ||
| teamWidth() { | ||
| return `${this.broadcast?.ingame_team_width || 690}px`; | ||
| }, | ||
| topOffset() { | ||
| let num = (this.broadcast?.margin || 0) * 55; | ||
| num += 12; // top of overlay | ||
| num += 48; // bottom of top banner | ||
| num += 12; // top of player boxes | ||
| num += 78; // bottom of player boxes | ||
| return `${num}px`; | ||
| } | ||
| }, | ||
| sockets: { | ||
| comms_enable([{ team }]) { | ||
| console.log("ENABLE", team); | ||
| const teamRef = `team${team}`; | ||
| this.$refs[teamRef]?.[0]?.enable(); | ||
| this.activeTeamIndex = team - 1; | ||
| const otherTeamRef = `team${(+!(team - 1)) + 1}`; | ||
| this.$refs[otherTeamRef]?.[0]?.disable(); | ||
| }, | ||
| comms_disable() { | ||
| console.log("DISABLE"); | ||
| this.$refs.team1?.[0].disable(); | ||
| this.$refs.team2?.[0].disable(); | ||
| this.activeTeamIndex = null; | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| <style scoped> | ||
| .ingame-comms-overlay { | ||
| /*background-image: url('https://cdn.discordapp.com/attachments/485493459357007876/1043591450245472306/image.png');*/ | ||
| /*background-size: 1920px 1080px;*/ | ||
| height: 100vh; | ||
| width: 100vw; | ||
| color: white; | ||
| } | ||
| .teams { | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| } | ||
| .team { | ||
| padding: 0 8px; | ||
| display: flex; | ||
| } | ||
| .team.left { | ||
| flex-direction: row-reverse; | ||
| } | ||
| .listen-in-holder { | ||
| margin-top: 8px; | ||
| } | ||
| </style> |
Oops, something went wrong.