Skip to content

Commit 7bb3089

Browse files
daniMiliodaniMilio
committed
ui changes
1 parent d7990df commit 7bb3089

4 files changed

Lines changed: 143 additions & 103 deletions

File tree

‎components/matchmaking-lobby/FriendOptions.vue‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,38 @@
11
<script lang="ts" setup>
22
import { Plus, Trash2, User } from "lucide-vue-next";
3+
4+
const buttonClass = "flex items-center justify-center px-3 hover:bg-gray-100 rounded-r-lg transition-colors border-l border-l-gray-200 group h-full min-h-[64px] focus:outline-none focus:ring-0 active:outline-none active:ring-0 focus:shadow-none active:shadow-none border-transparent focus:border-transparent active:border-transparent button-artifact-fix";
35
</script>
46

57
<template>
6-
<DropdownMenu>
7-
<DropdownMenuTrigger as-child>
8+
<div class="flex items-stretch w-full">
9+
<div class="flex-1">
810
<slot></slot>
9-
</DropdownMenuTrigger>
10-
<DropdownMenuContent class="w-56">
11-
<DropdownMenuItem>
12-
<NuxtLink
13-
:to="{ name: 'players-id', params: { id: player.steam_id } }"
14-
class="flex items-center"
15-
>
16-
<User class="mr-2 h-4 w-4" />
17-
<span>{{ $t("matchmaking.friends.view_profile") }}</span>
18-
</NuxtLink>
19-
</DropdownMenuItem>
20-
21-
<DropdownMenuItem @click="inviteToLobby" v-if="!hideInvite">
22-
<Plus class="mr-2 h-4 w-4" />
23-
<span>{{ $t("matchmaking.friends.invite_to_lobby") }}</span>
24-
</DropdownMenuItem>
25-
26-
<DropdownMenuSeparator />
11+
</div>
2712

28-
<DropdownMenuItem
29-
@click="inviteToMatch"
30-
:class="!canInviteToMatch ? 'opacity-50 pointer-events-none' : ''"
13+
<template v-if="!hideInvite">
14+
<DropdownMenu v-if="!canInviteToMatch" class="h-full">
15+
<DropdownMenuTrigger :class="buttonClass">
16+
<Plus class="h-4 w-4 text-gray-400 group-hover:text-gray-600 transition-colors" />
17+
</DropdownMenuTrigger>
18+
<DropdownMenuContent class="w-48">
19+
<DropdownMenuItem @click="inviteToLobby">
20+
<span>{{ $t("matchmaking.friends.invite_to_lobby") }}</span>
21+
</DropdownMenuItem>
22+
<DropdownMenuItem @click="inviteToMatch">
23+
<span>{{ $t("matchmaking.friends.invite_to_match") }}</span>
24+
</DropdownMenuItem>
25+
</DropdownMenuContent>
26+
</DropdownMenu>
27+
<button
28+
v-else
29+
@click="inviteToLobby"
30+
:class="buttonClass"
3131
>
32-
<Plus class="mr-2 h-4 w-4" />
33-
<span>{{ $t("matchmaking.friends.invite_to_match") }}</span>
34-
</DropdownMenuItem>
35-
36-
<DropdownMenuSeparator />
37-
38-
<DropdownMenuItem @click="removeFriend" class="text-red-500">
39-
<Trash2 class="mr-2 h-4 w-4" />
40-
<span>{{ $t("matchmaking.friends.remove") }}</span>
41-
</DropdownMenuItem>
42-
</DropdownMenuContent>
43-
</DropdownMenu>
32+
<Plus class="h-4 w-4 text-gray-400 group-hover:text-gray-600 transition-colors" />
33+
</button>
34+
</template>
35+
</div>
4436
</template>
4537

4638
<script lang="ts">

‎components/matchmaking-lobby/FriendsList.vue‎

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,26 @@ import PlayerSearch from "~/components/PlayerSearch.vue";
5959
<template v-for="player in pendingFriends">
6060
<template v-if="player.invited_by_steam_id === me.steam_id">
6161
<FriendOptions :player="player" :hideInvite="isLobbyFull">
62+
<NuxtLink :to="{ name: 'players-id', params: { id: player.steam_id } }" custom v-slot="{ navigate }">
63+
<div @click="navigate" class="block">
64+
<PlayerDisplay
65+
class="w-full cursor-pointer opacity-50 hover:opacity-80 hover:bg-muted/50 transition-all duration-200 p-2 rounded-l-md"
66+
:player="player"
67+
:showOnline="false"
68+
:showAddFriend="false"
69+
/>
70+
</div>
71+
</NuxtLink>
72+
</FriendOptions>
73+
</template>
74+
<div class="flex items-center justify-between" v-else>
75+
<NuxtLink :to="{ name: 'players-id', params: { id: player.steam_id } }" class="block">
6276
<PlayerDisplay
63-
class="w-full cursor-pointer opacity-50 hover:opacity-80 hover:bg-muted/50 transition-all duration-200 p-2 rounded-md"
6477
:player="player"
6578
:showOnline="false"
6679
:showAddFriend="false"
6780
/>
68-
</FriendOptions>
69-
</template>
70-
<div class="flex items-center justify-between" v-else>
71-
<PlayerDisplay
72-
:player="player"
73-
:showOnline="false"
74-
:showAddFriend="false"
75-
/>
81+
</NuxtLink>
7682

7783
<div class="flex flex-col gap-2">
7884
<Button
@@ -104,12 +110,16 @@ import PlayerSearch from "~/components/PlayerSearch.vue";
104110
</div>
105111
<div v-for="player in onlineFriends">
106112
<FriendOptions :player="player" :hideInvite="isLobbyFull">
107-
<PlayerDisplay
108-
class="w-full cursor-pointer hover:opacity-80 hover:bg-muted/50 transition-all duration-200 p-2 rounded-md"
109-
:player="player"
110-
:showOnline="false"
111-
:showAddFriend="false"
112-
/>
113+
<NuxtLink :to="{ name: 'players-id', params: { id: player.steam_id } }" custom v-slot="{ navigate }">
114+
<div @click="navigate" class="block">
115+
<PlayerDisplay
116+
class="w-full cursor-pointer hover:opacity-80 hover:bg-muted/50 transition-all duration-200 p-2 rounded-l-md"
117+
:player="player"
118+
:showOnline="false"
119+
:showAddFriend="false"
120+
/>
121+
</div>
122+
</NuxtLink>
113123
</FriendOptions>
114124
<div
115125
class="flex items-center bg-white/5 rounded-md p-2 mt-2"
@@ -130,16 +140,18 @@ import PlayerSearch from "~/components/PlayerSearch.vue";
130140
v-for="{ player } in player.player.lobby_players?.at(0)
131141
?.lobby.players"
132142
>
133-
<PlayerDisplay
134-
class="p-2"
135-
:player="player"
136-
:showOnline="false"
137-
:showAddFriend="false"
138-
:showName="false"
139-
:showFlag="false"
140-
:showElo="false"
141-
:showRole="false"
142-
/>
143+
<NuxtLink :to="{ name: 'players-id', params: { id: player.steam_id } }" class="block">
144+
<PlayerDisplay
145+
class="p-2"
146+
:player="player"
147+
:showOnline="false"
148+
:showAddFriend="false"
149+
:showName="false"
150+
:showFlag="false"
151+
:showElo="false"
152+
:showRole="false"
153+
/>
154+
</NuxtLink>
143155
</template>
144156
</div>
145157
</div>
@@ -159,12 +171,16 @@ import PlayerSearch from "~/components/PlayerSearch.vue";
159171
</div>
160172
<template v-for="player in offlineFriends">
161173
<FriendOptions :player="player" :hideInvite="isLobbyFull">
162-
<PlayerDisplay
163-
class="opacity-50 cursor-pointer hover:opacity-80 hover:bg-muted/50 transition-all duration-200 p-2 rounded-md"
164-
:player="player"
165-
:showOnline="false"
166-
:showAddFriend="false"
167-
/>
174+
<NuxtLink :to="{ name: 'players-id', params: { id: player.steam_id } }" custom v-slot="{ navigate }">
175+
<div @click="navigate" class="block">
176+
<PlayerDisplay
177+
class="opacity-50 cursor-pointer hover:opacity-80 hover:bg-muted/50 transition-all duration-200 p-2 rounded-l-md"
178+
:player="player"
179+
:showOnline="false"
180+
:showAddFriend="false"
181+
/>
182+
</div>
183+
</NuxtLink>
168184
</FriendOptions>
169185
</template>
170186
</div>

‎components/matchmaking-lobby/MatchmakingLobby.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export default {
202202
const activePlayers = this.currentLobby.players.filter(
203203
(player: any) => player.status === 'Accepted' || player.status === 'Invited'
204204
).length;
205-
return activePlayers >= 2;
205+
return activePlayers >= 5;
206206
},
207207
invitedLobbies() {
208208
return this.lobbies?.filter((lobby: any) => {

‎pages/players/[id].vue‎

Lines changed: 68 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ import SanctionPlayer from "~/components/SanctionPlayer.vue";
1212
import PlayerSanctions from "~/components/PlayerSanctions.vue";
1313
import PlayerChangeName from "~/components/PlayerChangeName.vue";
1414
import SteamIcon from "~/components/icons/SteamIcon.vue";
15+
import { Button } from "~/components/ui/button";
16+
import { typedGql } from "~/generated/zeus/typedDocumentNode";
17+
import { generateMutation } from "~/graphql/graphqlGen";
1518
</script>
1619

1720
<template>
@@ -45,43 +48,51 @@ import SteamIcon from "~/components/icons/SteamIcon.vue";
4548
</template>
4649

4750
<template #actions>
48-
<div class="flex gap-2">
49-
<template v-if="player.steam_id !== me.steam_id && !isUser">
50-
<SanctionPlayer :player="player" />
51-
</template>
51+
<div class="flex flex-col gap-2">
52+
<div class="flex gap-2 items-center">
53+
<template v-if="player.steam_id !== me.steam_id && !isUser">
54+
<SanctionPlayer :player="player" />
55+
</template>
56+
57+
<template v-if="isAdmin && player.steam_id !== me.steam_id">
58+
<Popover>
59+
<PopoverTrigger as-child>
60+
<Button variant="outline">
61+
<span class="capitalize">{{
62+
player.role.replace("_", " ")
63+
}}</span>
64+
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
65+
</Button>
66+
</PopoverTrigger>
67+
<PopoverContent class="p-0" align="end">
68+
<Command v-model="memberRole">
69+
<CommandList>
70+
<CommandGroup>
71+
<CommandItem
72+
:value="role.value"
73+
class="flex flex-col items-start px-4 py-2 cursor-pointer"
74+
v-for="role of roles"
75+
>
76+
<span class="capitalize">{{ role.display }}</span>
77+
</CommandItem>
78+
</CommandGroup>
79+
</CommandList>
80+
</Command>
81+
</PopoverContent>
82+
</Popover>
83+
</template>
5284

53-
<template v-if="isAdmin && player.steam_id !== me.steam_id">
54-
<Popover>
55-
<PopoverTrigger as-child>
56-
<Button variant="outline" class="ml-auto">
57-
<span class="capitalize">{{
58-
player.role.replace("_", " ")
59-
}}</span>
60-
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
61-
</Button>
62-
</PopoverTrigger>
63-
<PopoverContent class="p-0" align="end">
64-
<Command v-model="memberRole">
65-
<CommandList>
66-
<CommandGroup>
67-
<CommandItem
68-
:value="role.value"
69-
class="flex flex-col items-start px-4 py-2 cursor-pointer"
70-
v-for="role of roles"
71-
>
72-
<span class="capitalize">{{ role.display }}</span>
73-
</CommandItem>
74-
</CommandGroup>
75-
</CommandList>
76-
</Command>
77-
</PopoverContent>
78-
</Popover>
79-
</template>
80-
<template v-else-if="player.role !== e_player_roles_enum.user">
81-
<Badge class="capitalize">{{
82-
player.role.replace("_", " ")
83-
}}</Badge>
84-
</template>
85+
<template v-if="player.steam_id !== me.steam_id && isFriend">
86+
<Button variant="destructive" class="ml-auto" @click="removeFriend">
87+
{{ $t('matchmaking.friends.remove') }}
88+
</Button>
89+
</template>
90+
<template v-else-if="player.role !== e_player_roles_enum.user">
91+
<Badge class="capitalize">{{
92+
player.role.replace("_", " ")
93+
}}</Badge>
94+
</template>
95+
</div>
8596
</div>
8697
</template>
8798
</PageHeading>
@@ -369,6 +380,9 @@ export default {
369380
isUser() {
370381
return useAuthStore().isUser;
371382
},
383+
isFriend() {
384+
return useMatchmakingStore().friends.some(friend => friend.steam_id === this.player?.steam_id);
385+
},
372386
kd() {
373387
if (this.player?.deaths_aggregate.aggregate.count === 0) {
374388
return this.player?.kills_aggregate.aggregate.count;
@@ -399,6 +413,24 @@ export default {
399413
}),
400414
});
401415
},
416+
async removeFriend() {
417+
await this.$apollo.mutate({
418+
mutation: typedGql("mutation")({
419+
delete_my_friends: [
420+
{
421+
where: {
422+
steam_id: {
423+
_eq: this.player.steam_id,
424+
},
425+
},
426+
},
427+
{
428+
__typename: true,
429+
},
430+
],
431+
}),
432+
});
433+
},
402434
},
403435
};
404436
</script>

0 commit comments

Comments
 (0)