attempt getCosmetics query

Talishar · Apr 14, 2023 · 41f2f59 · 41f2f59
1 parent 8bc4d88
commit 41f2f59
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/src/routes/game/components/elements/cardDisplay/CardDisplay.module.css b/src/routes/game/components/elements/cardDisplay/CardDisplay.module.css
@@ -17,13 +17,6 @@
   max-width: 14dvh;
 }
 
-.biggerSize {
-  /* height: 12vh;
-  width: 12vh;
-  height: 12dvh;
-  width: 12dvh; */
-}
-
 .floatTint {
   position: absolute;
   left: 0px;
@@ -137,8 +130,6 @@
 
 @media (orientation: portrait) {
   .normalSize {
-    /* height: 12vw;
-    height: 12dvw; */
     max-width: 130px;
     aspect-ratio: 1;
   }

diff --git a/src/routes/game/components/elements/optionsMenu/OptionsMenu.tsx b/src/routes/game/components/elements/optionsMenu/OptionsMenu.tsx
@@ -34,11 +34,6 @@ const OptionsContent = () => {
 
   useShortcut(DEFAULT_SHORTCUTS.CLOSE_WINDOW, clickCloseOptionsHandler);
 
-  const clickSubmitOptionsHandler = () => {
-    // TODO: implement
-    console.log('submitting options');
-  };
-
   const clickConcedeGameHandler = () => {
     dispatch(submitButton({ button: { mode: PROCESS_INPUT.CONCEDE_GAME } }));
   };

diff --git a/src/routes/game/components/elements/optionsMenu/OptionsSettings/OptionsSettings.tsx b/src/routes/game/components/elements/optionsMenu/OptionsSettings/OptionsSettings.tsx
@@ -15,13 +15,17 @@ import HeroZone from 'routes/game/components/zones/heroZone/HeroZone';
 import CardDisplay from '../../cardDisplay/CardDisplay';
 import { CARD_BACK } from 'features/options/cardBacks';
 import { useGetCosmeticsQuery } from 'features/api/apiSlice';
+import CardPopUp from '../../cardPopUp/CardPopUp';
+import CardImage from '../../cardImage/CardImage';
+import classNames from 'classnames';
 
 const OptionsSettings = () => {
   const gameInfo = useAppSelector(getGameInfo, shallowEqual);
   const settingsData = useAppSelector(getSettingsEntity);
   const isLoading = useAppSelector(getSettingsStatus);
   const dispatch = useAppDispatch();
   const [openCardBacks, setOpenCardBacks] = useState<boolean>(false);
+  const { data } = useGetCosmeticsQuery(undefined);
 
   // fetch all settings when options is loaded
   useEffect(() => {
@@ -341,12 +345,29 @@ const OptionsSettings = () => {
           </label>
         </fieldset>
         <label className={styles.cardBack}>
-          <strong>Card Back</strong> (cannot change for now)
-          <div onClick={handleCardBackOnClick}>
-            <CardDisplay
-              card={{ cardNumber: CARD_BACK[initialValues.cardBack] }}
-              preventUseOnClick
-            />
+          <strong>Card Back</strong>
+          <div className={styles.cardBackListContainer}>
+            {data?.cardBacks.map((cardBack) => {
+              const cardClass = classNames(styles.cardBack, {
+                [styles.selected]: initialValues.cardBack === cardBack.id
+              });
+              return (
+                <div
+                  key={`cardBack${cardBack.id}`}
+                  className={styles.cardConteiner}
+                >
+                  <label>
+                    <CardPopUp cardNumber={cardBack.name}>
+                      <CardImage
+                        src={`/cardsquares/${cardBack}.webp`}
+                        draggable={false}
+                        className={styles.card}
+                      />
+                    </CardPopUp>
+                  </label>
+                </div>
+              );
+            })}
           </div>
         </label>
       </div>