Merge pull request #20 from frudolph77/showCryptCardLabel

show ID,Symbol,Color of Verification/Crypt Card

frontend/src/components/Card.tsx

@@ -4,10 +4,13 @@ import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { CriteriaCard } from "hooks/useCriteriaCard";
 import { FC } from "react";
+import VerifierLabel from "./VerifierLabel";
+import CryptCardLabel from "./CryptCardLabel";
 
 type Props = {
   card: Undefinable<CriteriaCard>;
   cardImage: string;
+  verifier: Verifier;
   onToggleCriteria: (criteria: number) => void;
 };
 
@@ -141,7 +144,10 @@ const Card: FC<Props> = (props) => {
           width: "100%",
         }}
       />
-      <Box position="absolute" top={0} display="flex" width={1}></Box>
+      <Box position="absolute" top={0} display="flex" width={1} justifyContent={"space-between"} zIndex={1}>
+        <VerifierLabel verifier={props.verifier} card={props.card}/>
+        {!props?.card?.nightmare && <CryptCardLabel card={props.card?.cryptCard}/>}
+      </Box>
       <Box
         position="absolute"
         bottom={5}

frontend/src/components/Comment.tsx

@@ -1,89 +1,15 @@
-import Box from "@mui/material/Box";
-import { CriteriaCard, useCriteriaCard } from "hooks/useCriteriaCard";
+import { useCriteriaCard } from "hooks/useCriteriaCard";
 import { FC } from "react";
 import Card from "./Card";
-import SingleCharLabel from "./SingleCharLabel";
-import Incorrect from "@mui/icons-material/HorizontalRuleRounded";
-import IconButton from "@mui/material/IconButton";
-import { useTheme } from "@mui/material/styles";
+import Letters from "./Letters";
 import Grid from "@mui/material/Grid";
-import { Letter } from "../store/slices/commentsSlice";
 
-type Props = {
+type CommentProps = {
   verifier: Verifier;
+  noDivider?: boolean;
 };
 
-type VerifierProps = {
-  card: Undefinable<CriteriaCard>;
-  verifier: Verifier;
-};
-
-type LettersProps = {
-  card: Undefinable<CriteriaCard>;
-  verifier: Verifier;
-  letters: Undefinable<Letter[]>
-  toggleLetter: (verifier: Verifier) => void;
-};
-
-const Verifier: FC<VerifierProps> = ({card, verifier}) => {
-
-  return (
-    card?.nightmare ? <></> :
-      <Box
-        position="absolute"
-        zIndex={1}
-        px={2}
-        sx={(theme) => ({
-          background: theme.palette.primary.main,
-          color: theme.palette.common.white,
-          borderTopLeftRadius: theme.spacing(1),
-          borderBottomRightRadius: theme.spacing(3),
-        })}
-      >
-        <SingleCharLabel white>{verifier}</SingleCharLabel>
-      </Box>
-  )
-}
-
-const Letters: FC<LettersProps> = ({card, verifier, letters, toggleLetter}) => {
-  const theme = useTheme();
-
-  return (
-    !card?.nightmare ? <></> :
-      <Box display={"flex"} justifyContent={"center"}>
-        {letters?.map((letter) => (
-          <Box key={letter.letter} position="relative">
-            <IconButton
-              id={`digit-code__${verifier}-${letter.letter}-button`}
-              color="primary"
-              sx={{
-                height: theme.spacing(6),
-                width: theme.spacing(6),
-              }}
-              onClick={() => toggleLetter(letter.letter)}
-            >
-              <SingleCharLabel>{letter.letter}</SingleCharLabel>
-              <Box
-                position="absolute"
-                top={4}
-                left={4}
-                sx={{color: theme.palette.text.primary}}
-              >
-                {letter.isIrrelevant && (
-                  <Incorrect
-                    fontSize="large"
-                    sx={{transform: "rotate(-45deg)"}}
-                  />
-                )}
-              </Box>
-            </IconButton>
-          </Box>
-        ))}
-      </Box>
-  )
-}
-
-const Comment: FC<Props> = ({verifier}) => {
+const Comment: FC<CommentProps> = ({verifier}) => {
   const {
     card: firstCard,
     cardImage: firstCardImage,
@@ -101,21 +27,21 @@ const Comment: FC<Props> = ({verifier}) => {
     <>
       {firstCard && (
         <Grid item md={6} xs={12}>
-          <Verifier verifier={verifier} card={firstCard}/>
           <Card
             card={firstCard}
             cardImage={firstCardImage}
+            verifier={verifier}
             onToggleCriteria={toggleFirstCardCriteria}
           />
           <Letters card={firstCard} verifier={verifier} letters={letters} toggleLetter={toggleLetter}/>
         </Grid>
       )}
       {secondCard && (
         <Grid item md={6} xs={12}>
-          <Verifier card={secondCard} verifier={verifier}/>
           <Card
             card={secondCard}
             cardImage={secondCardImage}
+            verifier={verifier}
             onToggleCriteria={toggleSecondCardCriteria}
           />
         </Grid>

frontend/src/components/CryptCardLabel.tsx

@@ -0,0 +1,31 @@
+import Typography from "@mui/material/Typography";
+import { FC } from "react";
+import { CryptCard } from "../hooks/useCriteriaCard";
+
+type CryptCardProps = {
+  card?: CryptCard;
+};
+
+const CryptCardLabel: FC<CryptCardProps> = (props) => {
+  const {card} = props;
+  // `${color <= 2 ? "black" : "white"}`  // contrast
+  return (!card) ? <></> :
+    <Typography
+      component="span"
+      fontSize="12px"
+      fontFamily={"Plus Jakarta Sans"}
+      p={0.25}
+      px={1}
+      sx={(theme) => ({
+        color: "black",
+        background: `${["#2db563", "#febc12", "#58b3da", "#7f66ad"][card.color]}`,
+        borderTopRightRadius: "8px",
+        borderBottomLeftRadius: "8px",
+        height: "min-content",
+      })}
+    >
+      {card.id}&nbsp;{['◊', '#', '/', '¤'][card.color]}
+    </Typography>
+};
+
+export default CryptCardLabel;

frontend/src/components/Letters.tsx

@@ -0,0 +1,55 @@
+import { CriteriaCard } from "../hooks/useCriteriaCard";
+import { Letter } from "../store/slices/commentsSlice";
+import { FC } from "react";
+import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import SingleCharLabel from "./SingleCharLabel";
+import Incorrect from "@mui/icons-material/HorizontalRuleRounded";
+
+type LettersProps = {
+  card: Undefinable<CriteriaCard>;
+  verifier: Verifier;
+  letters: Undefinable<Letter[]>
+  toggleLetter: (verifier: Verifier) => void;
+};
+
+const Letters: FC<LettersProps> = ({card, verifier, letters, toggleLetter}) => {
+  const theme = useTheme();
+
+  return (
+    !card?.nightmare ? <></> :
+      <Box display={"flex"} justifyContent={"center"}>
+        {letters?.map((letter) => (
+          <Box key={letter.letter} position="relative">
+            <IconButton
+              id={`digit-code__${verifier}-${letter.letter}-button`}
+              color="primary"
+              sx={{
+                height: theme.spacing(6),
+                width: theme.spacing(6),
+              }}
+              onClick={() => toggleLetter(letter.letter)}
+            >
+              <SingleCharLabel>{letter.letter}</SingleCharLabel>
+              <Box
+                position="absolute"
+                top={4}
+                left={4}
+                sx={{color: theme.palette.text.primary}}
+              >
+                {letter.isIrrelevant && (
+                  <Incorrect
+                    fontSize="large"
+                    sx={{transform: "rotate(-45deg)"}}
+                  />
+                )}
+              </Box>
+            </IconButton>
+          </Box>
+        ))}
+      </Box>
+  )
+}
+
+export default Letters;

frontend/src/components/VerifierLabel.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import Box from "@mui/material/Box";
+import SingleCharLabel from "./SingleCharLabel";
+import { CriteriaCard } from "../hooks/useCriteriaCard";
+
+type VerifierProps = {
+  card: Undefinable<CriteriaCard>;
+  verifier: Verifier;
+};
+
+const VerifierLabel: FC<VerifierProps> = ({card, verifier}) => {
+
+  return (
+    card?.nightmare ? <></> :
+      <Box
+        zIndex={1}
+        px={2}
+        sx={(theme) => ({
+          background: theme.palette.primary.main,
+          color: theme.palette.common.white,
+          borderTopLeftRadius: theme.spacing(1),
+          borderBottomRightRadius: theme.spacing(3),
+        })}
+      >
+        <SingleCharLabel white>{verifier}</SingleCharLabel>
+      </Box>
+  )
+}
+
+export default VerifierLabel;

frontend/src/hooks/useCriteriaCard.ts

@@ -4,10 +4,16 @@ import { Letter, commentsActions } from "store/slices/commentsSlice";
 import { useAppDispatch } from "./useAppDispatch";
 import { useAppSelector } from "./useAppSelector";
 
+export type CryptCard = {
+  id: number
+  color: number
+}
+
 export type CriteriaCard = {
   id: number;
   criteriaSlots: 1 | 2 | 3 | 4 | 6 | 9;
   irrelevantCriteria: number[];
+  cryptCard?: CryptCard;
   nightmare?: boolean;
 };
 

frontend/src/store/slices/commentsSlice.ts

@@ -1,5 +1,5 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { CriteriaCard, criteriaCardPool } from "hooks/useCriteriaCard";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { CriteriaCard, criteriaCardPool, CryptCard } from "hooks/useCriteriaCard";
 
 const verifiers: Verifier[] = ["A", "B", "C", "D", "E", "F"];
 
@@ -48,20 +48,23 @@ export const commentsSlice = createSlice({
     setCards: (
       state,
       action: PayloadAction<{
-        fake?: number[];
         ind: number[];
+        crypt: number[];
+        color: number;
+        fake?: number[];
         m?: number;
       }>
     ) => {
-      const { fake, ind, m } = action.payload;
+      const { ind, crypt, color, fake, m } = action.payload;
       const nightmare = m === 2;
 
-      const addAdditionalCardAttributes = (card: number) => {
+      const addAdditionalCardAttributes = (card: number, cryptNumber: number) => {
         return {
           ...criteriaCardPool.find((cc) => cc.id === card)!,
-          nightmare
-        }
-      }
+          nightmare,
+          cryptCard: {id: cryptNumber, color: color} as CryptCard,
+        };
+      };
 
       for (let i = 0; i < ind.length; i++) {
         if (fake) {
@@ -72,20 +75,16 @@ export const commentsSlice = createSlice({
             verifier: verifiers[i],
             nightmare,
             criteriaCards: [
-              addAdditionalCardAttributes(shuffledCards[0]),
-              addAdditionalCardAttributes(shuffledCards[1]),
+              addAdditionalCardAttributes(shuffledCards[0], crypt[i]),
+              addAdditionalCardAttributes(shuffledCards[1], crypt[i]),
             ],
             letters: createLetters(ind.length, verifiers[i], nightmare),
           });
         } else {
-          const card = ind.sort((n1, n2) => n1 - n2)[i];
-
           state.push({
             verifier: verifiers[i],
             nightmare,
-            criteriaCards: [
-              addAdditionalCardAttributes(card),
-            ],
+            criteriaCards: [addAdditionalCardAttributes(ind[i], crypt[i])],
             letters: createLetters(ind.length, verifiers[i], nightmare),
           });
         }

frontend/src/views/Registration.tsx

@@ -45,10 +45,12 @@ const Registration: FC = () => {
             const {
               fake,
               ind,
+              crypt,
+              color,
               m,
-            }: { ind: number[]; fake?: number[]; m: number } = data;
+            }: { ind: number[]; fake?: number[]; crypt: number[]; color: number; m: number } = data;
             dispatch(registrationActions.fetchDone());
-            dispatch(commentsActions.setCards({ ind, fake, m }));
+            dispatch(commentsActions.setCards({ ind, fake, crypt, color, m }));
             break;
           case "bad":
             setShowNotFound(true);