feat: easier /link command

src/commands/link.tsx

@@ -1,25 +1,21 @@
 import { teal } from '@radix-ui/colors';
-import {
+import { GuildMemberRoleManager, SlashCommandBuilder } from 'discord.js';
-  AttachmentBuilder,
-  GuildMemberRoleManager,
-  SlashCommandBuilder,
-} from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import discord from '../../discord.json' assert { type: 'json' };
 import { Glow } from '../components/AllStatsOverview/components/WN8Display/components/Glow';
 import Wrapper from '../components/Wrapper';
-import { REGION_NAMES_SHORT, Region } from '../constants/regions';
+import { REGION_NAMES_SHORT } from '../constants/regions';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import { linkBlitzAndDiscord } from '../core/blitzkrieg/discordBlitz';
 import addUsernameChoices from '../core/discord/addUsernameChoices';
 import autocompleteUsername from '../core/discord/autocompleteUsername';
+import embedInfo from '../core/discord/embedInfo';
 import embedNegative from '../core/discord/embedNegative';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
 import { CommandRegistry } from '../events/interactionCreate';
 import { theme } from '../stitches.config';
 
-const serverAndIdPattern = /(com|eu|asia)\/[0-9]+/;
-
 export const verifyCommand: CommandRegistry = {
   inProduction: true,
   inPublic: true,
@@ -30,193 +26,183 @@ export const verifyCommand: CommandRegistry = {
     .addStringOption((option) => addUsernameChoices(option).setRequired(true)),
 
   async handler(interaction) {
-    const username = interaction.options.getString('username', true);
+    const { id, region } = await resolvePlayerFromCommand(interaction);
+    const discordId = parseInt(interaction.user.id);
+    const accountInfo = await getAccountInfo(region, id);
+    const clanAccountInfo = await getClanAccountInfo(region, id, ['clan']);
 
-    if (serverAndIdPattern.test(username)) {
+    await linkBlitzAndDiscord(discordId, region, id);
-      const [region, idString] = username.split('/');
-      const id = parseInt(idString);
-      const discordId = parseInt(interaction.user.id);
-      const accountInfo = await getAccountInfo(region as Region, id);
-      const clanAccountInfo = await getClanAccountInfo(region as Region, id, [
-        'clan',
-      ]);
 
-      await linkBlitzAndDiscord(discordId, region as Region, id);
+    if (interaction.guildId === discord.sklld_guild_id) {
-
+      if (!interaction.guild?.members.me?.permissions.has('ManageRoles')) {
-      if (interaction.guildId === discord.sklld_guild_id) {
+        return embedNegative(
-        if (!interaction.guild?.members.me?.permissions.has('ManageRoles')) {
+          `${markdownEscape(interaction.user.username)} failed to verify`,
-          return embedNegative(
+          "I don't have the permission to change your manage roles.",
-            `${markdownEscape(interaction.user.username)} failed to verify`,
-            "I don't have the permission to change your manage roles.",
-          );
-        }
-
-        await (interaction.member!.roles as GuildMemberRoleManager).remove(
-          discord.sklld_verify_role,
-        );
-        await (interaction.member!.roles as GuildMemberRoleManager).add(
-          discord.sklld_peasant_role,
         );
       }
 
-      return (
+      await (interaction.member!.roles as GuildMemberRoleManager).remove(
-        <Wrapper fat>
+        discord.sklld_verify_role,
+      );
+      await (interaction.member!.roles as GuildMemberRoleManager).add(
+        discord.sklld_peasant_role,
+      );
+    }
+
+    return [
+      <Wrapper fat>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Glow color={teal.teal9} rotation={90} />
+
           <div
             style={{
               display: 'flex',
+              flexDirection: 'column',
               alignItems: 'center',
-              justifyContent: 'space-between',
+              justifyContent: 'center',
+              gap: 16,
             }}
           >
-            <Glow color={teal.teal9} rotation={90} />
+            <div
+              style={{
+                display: 'flex',
+                gap: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <img
+                src={
+                  interaction.user.avatarURL({ extension: 'png' }) ??
+                  'https://i.stack.imgur.com/l60Hf.png'
+                }
+                style={{
+                  width: 64,
+                  height: 64,
+                  borderRadius: 32,
+                  objectFit: 'cover',
+                }}
+              />
+
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 4,
+                }}
+              >
+                <span
+                  style={{
+                    fontSize: 32,
+                    color: theme.colors.textHighContrast,
+                    fontWeight: 900,
+                    maxWidth: 240,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {interaction.user.displayName}
+                </span>
+                <span
+                  style={{
+                    fontSize: 16,
+                    color: theme.colors.textLowContrast,
+                  }}
+                >
+                  @{interaction.user.username}
+                </span>
+              </div>
+            </div>
 
             <div
               style={{
                 display: 'flex',
-                flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                gap: 16,
+                gap: 4,
+                color: theme.colors.textLowContrast_teal,
               }}
             >
-              <div
+              <img
+                src="https://i.imgur.com/jIcRgog.png"
                 style={{
-                  display: 'flex',
+                  width: 16,
-                  gap: 8,
+                  height: 16,
-                  alignItems: 'center',
-                  justifyContent: 'center',
                 }}
-              >
+              />
+              <span style={{ fontSize: 16 }}>Accounts linked</span>
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                gap: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {clanAccountInfo?.clan ? (
                 <img
-                  src={
-                    interaction.user.avatarURL({ extension: 'png' }) ??
-                    'https://i.stack.imgur.com/l60Hf.png'
-                  }
                   style={{
                     width: 64,
                     height: 64,
                     borderRadius: 32,
                     objectFit: 'cover',
                   }}
+                  src={`https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanAccountInfo?.clan?.emblem_set_id}.png`}
                 />
-
+              ) : null}
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 4,
-                  }}
-                >
-                  <span
-                    style={{
-                      fontSize: 32,
-                      color: theme.colors.textHighContrast,
-                      fontWeight: 900,
-                      maxWidth: 240,
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
-                    {interaction.user.displayName}
-                  </span>
-                  <span
-                    style={{
-                      fontSize: 16,
-                      color: theme.colors.textLowContrast,
-                    }}
-                  >
-                    @{interaction.user.username}
-                  </span>
-                </div>
-              </div>
-
               <div
                 style={{
                   display: 'flex',
-                  alignItems: 'center',
+                  flexDirection: 'column',
-                  justifyContent: 'center',
                   gap: 4,
-                  color: theme.colors.textLowContrast_teal,
                 }}
               >
-                <img
+                <span
-                  src="https://i.imgur.com/jIcRgog.png"
                   style={{
-                    width: 16,
+                    fontSize: 32,
-                    height: 16,
+                    color: theme.colors.textHighContrast,
-                  }}
+                    fontWeight: 900,
-                />
+                    maxWidth: 240,
-                <span style={{ fontSize: 16 }}>Accounts linked</span>
+                    overflow: 'hidden',
-              </div>
+                    textOverflow: 'ellipsis',
-
+                    whiteSpace: 'nowrap',
-              <div
-                style={{
-                  display: 'flex',
-                  gap: 8,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                {clanAccountInfo?.clan ? (
-                  <img
-                    style={{
-                      width: 64,
-                      height: 64,
-                      borderRadius: 32,
-                      objectFit: 'cover',
-                    }}
-                    src={`https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanAccountInfo?.clan?.emblem_set_id}.png`}
-                  />
-                ) : null}
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 4,
                   }}
                 >
-                  <span
+                  {accountInfo.nickname}
-                    style={{
+                </span>
-                      fontSize: 32,
+                <span
-                      color: theme.colors.textHighContrast,
+                  style={{
-                      fontWeight: 900,
+                    fontSize: 16,
-                      maxWidth: 240,
+                    color: theme.colors.textLowContrast,
-                      overflow: 'hidden',
+                  }}
-                      textOverflow: 'ellipsis',
+                >
-                      whiteSpace: 'nowrap',
+                  {clanAccountInfo?.clan
-                    }}
+                    ? `[${clanAccountInfo?.clan?.tag}] - `
-                  >
+                    : ''}
-                    {accountInfo.nickname}
+                  {REGION_NAMES_SHORT[region]}
-                  </span>
+                </span>
-                  <span
-                    style={{
-                      fontSize: 16,
-                      color: theme.colors.textLowContrast,
-                    }}
-                  >
-                    {clanAccountInfo?.clan
-                      ? `[${clanAccountInfo?.clan?.tag}] - `
-                      : ''}
-                    {REGION_NAMES_SHORT[region as Region]}
-                  </span>
-                </div>
               </div>
             </div>
-
-            <Glow color={teal.teal9} rotation={-90} />
           </div>
-        </Wrapper>
+
-      );
+          <Glow color={teal.teal9} rotation={-90} />
-    } else {
+        </div>
-      return [
+      </Wrapper>,
-        embedNegative(
+
-          'Please select from the options',
+      embedInfo(
-          'Follow the procedure like the video above. The search results may take a while to show up.',
+        'Incorrect account?',
-        ),
+        'Use the command again and select a username from the search results.',
-        new AttachmentBuilder('https://i.imgur.com/2p6GFgC.gif'),
+      ),
-      ];
+    ];
-    }
   },
 
   autocomplete: autocompleteUsername,