mode icons in description

TODO.md

@@ -5,8 +5,8 @@
 - [x] Build Analyzer
   - [x] Import /analyzer
   - [x] Builds link to /analyzer
-- [ ] Check that user page fallback / redirect works
-- [ ] Builds mode icons
+- [x] Check that user page fallback / redirect works
+- [x] Builds mode icons
 - [ ] Script to parse data from Top 500 .json to the DB
 - [ ] Top 500 Leaderboards
 - [ ] Localization
@@ -28,5 +28,13 @@
 ### Future
 
 - [ ] Salmon Run Leaderboards
+  - [ ] As a user...
+    - [ ] View leaderboards of different categories
+    - [ ] Submit a new result
+  - [ ] As an admin...
+    - [ ] Submit a new result without the need for approval
+    - [ ] Approve or delete submitted results
+    - [ ] Edit existing result by any user
+    - [ ] Delete existing result of any user
 - [ ] Team pages
 - [ ] Ladder

components/builds/BuildCard.tsx

@@ -10,6 +10,7 @@ import {
 } from "@chakra-ui/react";
 import { Plural, t, Trans } from "@lingui/macro";
 import { Ability, Prisma } from "@prisma/client";
+import ModeImage from "components/common/ModeImage";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
 import { getEmojiFlag } from "countries-list";
@@ -138,28 +139,7 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
                 />
               </a>
             </Link>
-            {build.description && (
-              <Popover placement="top">
-                <PopoverTrigger>
-                  <IconButton
-                    variant="ghost"
-                    isRound
-                    aria-label="Show description"
-                    fontSize="20px"
-                    icon={<FiInfo />}
-                  />
-                </PopoverTrigger>
-                <PopoverContent
-                  zIndex={4}
-                  width="220px"
-                  backgroundColor={secondaryBgColor}
-                >
-                  <PopoverBody textAlign="center" whiteSpace="pre-wrap">
-                    {build.description}
-                  </PopoverBody>
-                </PopoverContent>
-              </Popover>
-            )}
+            <Description />
             {onEdit && (
               <IconButton
                 variant="ghost"
@@ -216,6 +196,42 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
       </Box>
     </>
   );
+
+  function Description() {
+    if (build.modes.length === 0 && !build.description) return null;
+
+    return (
+      <Popover placement="top">
+        <PopoverTrigger>
+          <IconButton
+            variant="ghost"
+            isRound
+            aria-label="Show description"
+            fontSize="20px"
+            icon={<FiInfo />}
+          />
+        </PopoverTrigger>
+        <PopoverContent
+          zIndex={4}
+          width="220px"
+          backgroundColor={secondaryBgColor}
+        >
+          <PopoverBody whiteSpace="pre-wrap">
+            <Box>
+              <Box>
+                {build.modes.map((mode) => (
+                  <Box as="span" mr={1}>
+                    <ModeImage mode={mode} size={24} />
+                  </Box>
+                ))}
+              </Box>
+              {build.description}
+            </Box>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    );
+  }
 };
 
 export default BuildCard;

components/common/ModeImage.tsx

@@ -2,8 +2,8 @@ import Image from "next/image";
 import { CSSProperties } from "react";
 
 interface ModeImageProps {
-  mode: "SZ" | "TC" | "RM" | "CB";
-  size: 32 | 64 | 128;
+  mode: "TW" | "SZ" | "TC" | "RM" | "CB";
+  size: 24 | 32 | 64 | 128;
   onClick?: () => void;
   style?: CSSProperties;
 }

pages/api/builds/index.ts

@@ -8,6 +8,8 @@ import DBClient from "prisma/client";
 
 const prisma = DBClient.getInstance().prisma;
 
+const modes = ["TW", "SZ", "TC", "RM", "CB"];
+
 const postHandler = async (req: NextApiRequest, res: NextApiResponse) => {
   const user = await getMySession(req);
   if (!user) return res.status(401).end();
@@ -49,6 +51,9 @@ const postHandler = async (req: NextApiRequest, res: NextApiResponse) => {
   await prisma.build.create({
     data: {
       ...parsed.data,
+      modes: parsed.data.modes.sort(
+        (a, b) => modes.indexOf(a) - modes.indexOf(b)
+      ),
       abilityPoints: getAbilityPoints(
         parsed.data.headAbilities,
         parsed.data.clothingAbilities,
@@ -97,6 +102,9 @@ const updateHandler = async (req: NextApiRequest, res: NextApiResponse) => {
     where: { id },
     data: {
       ...parsed.data,
+      modes: parsed.data.modes.sort(
+        (a, b) => modes.indexOf(a) - modes.indexOf(b)
+      ),
       abilityPoints: getAbilityPoints(
         parsed.data.headAbilities,
         parsed.data.clothingAbilities,

pages/u/[identifier].tsx

@@ -31,8 +31,6 @@ interface Props {
   peakXPowers: Partial<Record<RankedMode, number>>;
 }
 
-// TODO: when fallback in production seems like the site will never load till F5
-
 const ProfilePage = (props: Props) => {
   const [showProfileModal, setShowProfileModal] = useState(false);
   const [buildToEdit, setBuildToEdit] = useState<boolean | Build>(false);