Merge pull request #316 from Talishar/card-backs

attempt getCosmetics query
Talishar · Apr 14, 2023 · afccb82 · afccb82
2 parents 8bc4d88 + b3d2293
commit afccb82
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 29 deletions.
diff --git a/src/app/ParseGameState.ts b/src/app/ParseGameState.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ZONE } from 'appConstants';
+import { PLAYMATS } from 'features/options/cardBacks';
 import { Card } from '../features/Card';
 import CombatChainLink from '../features/CombatChainLink';
 import GameState from '../features/GameState';
@@ -324,5 +325,9 @@ export default function ParseGameState(input: any) {
 
   result.hasPriority = !!input.havePriority;
 
+  // playmat
+  result.playerOne.Playmat = PLAYMATS[input.MyPlaymat];
+  result.playerTwo.Playmat = PLAYMATS[input.TheirPlaymat];
+
   return result;
 }
diff --git a/src/features/options/cardBacks.ts b/src/features/options/cardBacks.ts
@@ -51,3 +51,14 @@ export const CARD_BACK = {
   '49': 'CBSecondCycle',
   '50': 'CBRavenousBabble'
 } as { [key: string]: string };
+
+export const PLAYMATS = {
+  '0': 'aria',
+  '1': 'demonastery',
+  '2': 'metrix',
+  '3': 'misteria',
+  '4': 'pits',
+  '5': 'savage',
+  '6': 'solana',
+  '7': 'volcor'
+} as { [key: string]: string };
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.module.css b/src/routes/game/components/elements/optionsMenu/OptionsSettings/OptionsSettings.module.css
@@ -87,6 +87,35 @@
   margin: 0.5em 0;
 }
 
+.cardBackListContainer {
+  width: 100%;
+  min-width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-items: baseline;
+  gap: 10px;
+  padding-left: 5px;
+}
+
 .cardBack {
+  border-radius: 10px;
   margin-top: 0.5em;
+  height: 120px;
+  width: 120px;
+  max-height: 120px;
+  filter: brightness(0.65);
+  transition: filter 0.25s, box-shadow 0.25s;
+}
+
+.selected {
+  box-shadow: 0 0 0 0.2em var(--primary);
+  filter: brightness(1);
+}
+
+.card {
+  height: 10dvh;
+  width: 10dvh;
 }
diff --git a/src/routes/game/components/elements/optionsMenu/OptionsSettings/OptionsSettings.tsx b/src/routes/game/components/elements/optionsMenu/OptionsSettings/OptionsSettings.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from 'app/Hooks';
-import styles from '../OptionsMenu.module.css';
+import styles from './OptionsSettings.module.css';
 import {
   fetchAllSettings,
   getSettingsEntity,
@@ -13,15 +13,19 @@ import { shallowEqual } from 'react-redux';
 import * as optConst from 'features/options/constants';
 import HeroZone from 'routes/game/components/zones/heroZone/HeroZone';
 import CardDisplay from '../../cardDisplay/CardDisplay';
-import { CARD_BACK } from 'features/options/cardBacks';
+import { CARD_BACK, PLAYMATS } 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(() => {
@@ -64,7 +68,8 @@ const OptionsSettings = () => {
     casterMode: settingsData['IsCasterMode']?.value === '1',
     streamerMode: settingsData['IsStreamerMode']?.value === '1',
     // Enum is BE: /Libraries/PlayerSettings.php - function GetCardBack($player)
-    cardBack: String(settingsData['CardBack']?.value ?? '0')
+    cardBack: String(settingsData['CardBack']?.value ?? '0'),
+    playMat: String(settingsData['Playmat']?.value ?? '0')
   };
 
   return (
@@ -340,15 +345,53 @@ const OptionsSettings = () => {
             Disable Chat
           </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
-            />
+        <label className={styles.cardBackTitle}>
+          <strong>Card Back</strong>
+          {!data?.cardBacks.length && (
+            <p>Link your patreon on your profile page to unlock card backs</p>
+          )}
+          <div className={styles.cardBackListContainer}>
+            {data?.cardBacks.map((cardBack) => {
+              const cardClass = classNames(styles.cardBack, {
+                [styles.selected]: initialValues.cardBack === cardBack.id
+              });
+              return (
+                <CardPopUp
+                  key={`cardBack${cardBack.id}`}
+                  onClick={() =>
+                    handleSettingsChange({
+                      name: optConst.CARD_BACK,
+                      value: cardBack.id
+                    })
+                  }
+                  cardNumber={CARD_BACK[cardBack.id]}
+                >
+                  <CardImage
+                    src={`/cardsquares/${CARD_BACK[cardBack.id]}.webp`}
+                    draggable={false}
+                    className={cardClass}
+                  />
+                </CardPopUp>
+              );
+            })}
           </div>
         </label>
+        <label className={styles.cardBackTitle}>
+          <strong>Playmat</strong>
+          <select
+            defaultValue={initialValues.playMat}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+              handleSettingsChange({
+                name: optConst.MY_PLAYMAT,
+                value: e.target.value
+              })
+            }
+          >
+            {Object.keys(PLAYMATS).map((playmatKey) => {
+              return <option value={playmatKey}>{PLAYMATS[playmatKey]}</option>;
+            })}
+          </select>
+        </label>
       </div>
       <p>
         Talishar is in no way affiliated with Legend Story Studios. Legend Story

diff --git a/src/routes/game/components/elements/playmat/Playmat.tsx b/src/routes/game/components/elements/playmat/Playmat.tsx
@@ -8,11 +8,11 @@ export const Playmat = ({ isPlayer }: { isPlayer: boolean }) => {
     isPlayer ? state.game.playerOne.Playmat : state.game.playerTwo.Playmat
   );
 
-  if (playmat === undefined) {
-    // playmat = DEFAULT_PLAYMAT;
-    playmat = isPlayer ? 'pits' : `volcor`;
-  }
-
+  // if (playmat === undefined) {
+  //   // playmat = DEFAULT_PLAYMAT;
+  //   playmat = isPlayer ? 'pits' : `volcor`;
+  // }
+  console.log('playmat', playmat);
   const styleToApply = {
     backgroundImage: `url(/playmats/${playmat}.webp)`
   };