Latest

components/FiveStackToolTip.vue

@@ -3,14 +3,17 @@ import { Info } from "lucide-vue-next";
 </script>
 
 <template>
-  <TooltipProvider>
+  <TooltipProvider
+    :ignoreNonKeyboardFocus="true"
+    :delay-duration="delayDuration"
+  >
     <Tooltip>
       <TooltipTrigger type="button">
         <slot name="trigger">
           <Info :size="size" v-bind="$attrs"> </Info>
         </slot>
       </TooltipTrigger>
-      <TooltipContent>
+      <TooltipContent :side="side">
         <slot></slot>
       </TooltipContent>
     </Tooltip>
@@ -25,6 +28,14 @@ export default {
       type: Number,
       default: 12,
     },
+    side: {
+      type: String,
+      required: false,
+    },
+    delayDuration: {
+      type: Number,
+      default: 0,
+    },
   },
 };
 </script>

components/InstallPWA.vue

@@ -1,28 +1,43 @@
 <script setup lang="ts">
 import { MonitorDown, PlusSquare, Share } from "lucide-vue-next";
 import { useSidebar } from "@/components/ui/sidebar";
-
+import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
 const { state, isMobile } = useSidebar();
 </script>
 
 <template>
-  <div>
-    <NuxtPwaManifest />
-
-    <SidebarMenuItem
-      class="mb-1"
-      :class="{ 'mx-4': isMobile || state === 'expanded' }"
-      v-if="canInstall"
-    >
-      <SidebarMenuButton as-child :tooltip="$t('pwa.install.tooltip')">
-        <Button @click="installPWA" size="sm">
-          <MonitorDown />
-          <span v-if="isMobile || state === 'expanded'">{{
-            $t("pwa.install.button")
-          }}</span>
-        </Button>
-      </SidebarMenuButton>
-    </SidebarMenuItem>
+  <NuxtPwaManifest />
+  <div v-if="canInstall">
+    <template v-if="isMenuItem">
+      <SidebarMenuItem
+        class="mb-1"
+        :class="{ 'mx-4': isMobile || state === 'expanded' }"
+        v-if="canInstall"
+      >
+        <SidebarMenuButton as-child :tooltip="$t('pwa.install.tooltip')">
+          <Button @click="installPWA" size="sm">
+            <MonitorDown />
+            <span v-if="isMobile || state === 'expanded'">{{
+              $t("pwa.install.button")
+            }}</span>
+          </Button>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </template>
+    <template v-else>
+      <FiveStackToolTip v-if="!isMobile">
+        <template #trigger>
+          <Button @click="installPWA" size="sm">
+            <MonitorDown />
+          </Button>
+        </template>
+        {{ $t("pwa.install.button") }}
+      </FiveStackToolTip>
+      <div class="flex items-center gap-2 uppercase font-bold" v-else>
+        <MonitorDown class="size-5" @click="installPWA" />
+        {{ $t("pwa.install.button") }}
+      </div>
+    </template>
 
     <Drawer
       :open="installPWADrawer"
@@ -75,6 +90,12 @@ const { state, isMobile } = useSidebar();
 import type { BeforeInstallPromptEvent } from "@vite-pwa/nuxt/dist/runtime/plugins/types.js";
 
 export default {
+  props: {
+    isMenuItem: {
+      type: Boolean,
+      default: true,
+    },
+  },
   created() {
     window.addEventListener(
       "beforeinstallprompt",
@@ -118,6 +139,7 @@ export default {
       return /iPad|iPhone|iPod/.test(navigator.userAgent);
     },
     canInstall() {
+      return true;
       if (this.$pwa?.isPWAInstalled) {
         return false;
       }

components/MatchInviteNotification.vue

@@ -1,36 +1,67 @@
 <script lang="ts" setup>
 import TimeAgo from "./TimeAgo.vue";
+import PlayerDisplay from "./PlayerDisplay.vue";
+import { Check, XIcon } from "lucide-vue-next";
 </script>
 
 <template>
-  <div>
-    <h3 class="text-lg font-semibold mb-2">
-      {{ $t("notifications.match.title") }}
-    </h3>
+  <div class="flex flex-row gap-2 justify-between" v-if="matches_by_pk">
+    <div class="flex flex-row gap-2 items-center overflow-scroll">
+      <div class="flex flex-row gap-2 items-center overflow-scroll">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <PlayerDisplay
+                :player="invitedBy"
+                :showOnline="false"
+                :showFlag="false"
+                :showName="false"
+                :showRole="false"
+              />
+            </TooltipTrigger>
+            <TooltipContent> {{ invitedBy.name }} </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
 
-    {{ $t("notifications.match.description", { match: invite.match_id }) }}
-
-    <div class="flex justify-between space-x-2 mt-3">
-      <p class="text-sm text-muted-foreground mb-2">
-        {{ $t("notifications.match.invited_by") }}
-        {{ invite.invited_by.name }}
-        <TimeAgo :date="invite.created_at" class="text-xs" />
-      </p>
+        <template v-for="player in players">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <PlayerDisplay
+                  :player="player.player"
+                  :showOnline="false"
+                  :showFlag="false"
+                  :showName="false"
+                  :showRole="false"
+                />
+              </TooltipTrigger>
+              <TooltipContent> {{ player.player.name }} </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </template>
+      </div>
 
-      <div class="flex gap-2">
-        <Button variant="outline" @click="denyInvite(invite.id)">{{
-          $t("notifications.invite.deny")
-        }}</Button>
-        <Button variant="default" @click="acceptInvite(invite.id)">{{
-          $t("notifications.invite.accept")
-        }}</Button>
+      <div
+        class="border border-gray-200 border-dashed h-full p-4 rounded-md cursor-pointer hover:bg-green-500/20 bg-transparent transition-all duration-200"
+        @click="acceptInvite(invite.id)"
+      >
+        <Check class="h-3 w-3" />
       </div>
     </div>
+
+    <div
+      class="h-full p-4 rounded-md cursor-pointer hover:bg-red-500/20 bg-transparent transition-all duration-200"
+      @click="denyInvite(invite.id)"
+    >
+      <XIcon class="h-3 w-3" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { generateMutation } from "~/graphql/graphqlGen";
+import { $ } from "~/generated/zeus";
+import { generateMutation, generateSubscription } from "~/graphql/graphqlGen";
+import { simpleMatchFields } from "~/graphql/simpleMatchFields";
 
 export default {
   props: {
@@ -43,6 +74,33 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      matches_by_pk: null,
+    };
+  },
+  apollo: {
+    $subscribe: {
+      matches_by_pk: {
+        query: generateSubscription({
+          matches_by_pk: [
+            {
+              id: $("id", "uuid!"),
+            },
+            simpleMatchFields,
+          ],
+        }),
+        variables() {
+          return {
+            id: this.invite.match_id,
+          };
+        },
+        result({ data }: { data: any }) {
+          this.matches_by_pk = data.matches_by_pk;
+        },
+      },
+    },
+  },
   methods: {
     async acceptInvite(inviteId: string) {
       await this.$apollo.mutate({
@@ -77,5 +135,25 @@ export default {
       });
     },
   },
+  computed: {
+    allPlayers() {
+      if (!this.matches_by_pk) {
+        return [];
+      }
+      return this.matches_by_pk.lineup_1.lineup_players.concat(
+        this.matches_by_pk.lineup_2.lineup_players,
+      );
+    },
+    players() {
+      return this.allPlayers.filter(
+        (player) => player.player.steam_id !== this.invite.invited_by.steam_id,
+      );
+    },
+    invitedBy() {
+      return this.allPlayers.find((player) => {
+        return player.player.steam_id === this.invite.invited_by.steam_id;
+      }).player;
+    },
+  },
 };
 </script>

components/MatchOptions.vue

@@ -815,6 +815,7 @@ export default {
   },
   apollo: {
     e_match_types: {
+      fetchPolicy: "cache-first",
       query: generateQuery({
         e_match_types: [
           {},

components/PlayerChangeName.vue

@@ -14,14 +14,14 @@
       <AlertDialogHeader>
         <AlertDialogTitle>
           {{
-            canUpdate
+            isAdmin
               ? $t("player.change_name.title")
               : $t("player.change_name.request_title")
           }}
         </AlertDialogTitle>
         <AlertDialogDescription>
           {{
-            canUpdate
+            isAdmin
               ? $t("player.change_name.description")
               : $t("player.change_name.request_description")
           }}
@@ -42,7 +42,7 @@
           {{ $t("common.cancel") }}
         </AlertDialogCancel>
         <AlertDialogAction
-          @click="canUpdate ? changeName() : requestNameChange()"
+          @click="isAdmin ? changeName() : requestNameChange()"
         >
           {{ $t("common.confirm") }}
         </AlertDialogAction>
@@ -143,9 +143,6 @@ export default {
     isAdmin() {
       return useAuthStore().isAdmin;
     },
-    canUpdate() {
-      return !useAuthStore().isUser;
-    },
     canChangeName() {
       if (!this.me) {
         return false;

components/PlayerDisplay.vue

@@ -12,6 +12,8 @@ import FiveStackToolTip from "./FiveStackToolTip.vue";
         ? { name: 'players-id', params: { id: player?.steam_id } }
         : null
     "
+    active-class="player-display-active"
+    exact-active-class="player-display-active"
     class="grid gap-2"
     :class="{
       'cursor-pointer': linkable,

components/PlayerSearch.vue

@@ -12,9 +12,20 @@ import debounce from "~/utilities/debounce";
         @click="searchPlayers()"
         variant="outline"
         :aria-expanded="open"
-        class="justify-between"
+        :class="[
+          {
+            'justify-between w-full py-8': selected,
+            'justify-between': !selected,
+          },
+          $props.class,
+        ]"
       >
-        {{ label }}
+        <template v-if="selected">
+          <PlayerDisplay :player="selected" />
+        </template>
+        <template v-else>
+          {{ label }}
+        </template>
         <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
@@ -108,6 +119,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    selected: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    class: {
+      type: String,
+      required: false,
+      default: "",
+    },
   },
   data() {
     return {