Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Add a modal that displays all players on the team and which one is the spirit.

Browse source
This commit is contained in:
Oliver-Akins 2021-02-28 20:13:04 -07:00
parent 9629116470
commit be446a0390
1 changed files with 66 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

66
web/src/components/TeamReminder.vue
View file

@ -1,17 +1,56 @@
<template> <template>
<div id="TeamReminder"> <div id="TeamReminder">
<div
class="container clickable"
@click="modal_visible = true"
>
<img <img
:class="`team_${teamNumber}`" :class="`team_${teamNumber}`"
:src="`/assets/${teamIcon}`" :src="`/assets/${teamIcon}`"
:alt="`${teamName} Team Icon`" :alt="`${teamName} Team Icon`"
> >
</div> </div>
<ModalAnimation
:show="modal_visible"
@closed="modal_visible = false"
>
<h1 class="centre">Players</h1>
<div class="team-list">
<div
class="team centre"
v-for="teamID in 2"
:key="`team-${teamID}`"
>
<h2>{{$store.state[`team_${teamID}`].name}} Team:</h2>
<div class="players">
<p
class="player"
v-for="p in getTeamPlayers(teamID)"
:key="p.name"
>
{{p.name}}
<span v-if="p.role == 'writer'">
<b>({{$store.state.writer_name}})</b>
</span>
</p>
</div>
</div>
</div>
</ModalAnimation>
</div>
</template> </template>
<script> <script>
import ModalAnimation from "./Modal";
export default { export default {
name: `TeamReminder`, name: `TeamReminder`,
components: {}, components: {
ModalAnimation: ModalAnimation
},
data() {return {
modal_visible: false
}},
computed: { computed: {
teamNumber() { teamNumber() {
return this.$store.state.team; return this.$store.state.team;
@ -23,7 +62,11 @@ export default {
return this.$store.state[`team_${this.teamNumber}`].icon; return this.$store.state[`team_${this.teamNumber}`].icon;
}, },
}, },
methods: {}, methods: {
getTeamPlayers(teamID) {
return this.$store.state.players.filter(p => p.team == teamID);
}
},
} }
</script> </script>
@ -31,7 +74,7 @@ export default {
@import "../css/theme.css"; @import "../css/theme.css";
@import "../css/style.css"; @import "../css/style.css";
#TeamReminder { #TeamReminder > .container {
background-color: var(--background3); background-color: var(--background3);
border-radius: 0 100% 0 0; border-radius: 0 100% 0 0;
height: var(--size); height: var(--size);
@ -46,7 +89,7 @@ img.team_1 {
width: calc(var(--size) / 1.5); width: calc(var(--size) / 1.5);
position: absolute; position: absolute;
bottom: 7px; bottom: 7px;
left: 7px;; left: 7px;
} }
img.team_2 { img.team_2 {
@ -55,4 +98,19 @@ img.team_2 {
left: calc(var(--size) / 8); left: calc(var(--size) / 8);
position: absolute; position: absolute;
} }
h1, h2, p {
margin: 5px 0;
}
.team-list {
justify-content: center;
flex-direction: row;
display: flex;
}
.team {
width: 40%;
}
</style> </style>