Merge pull request #309 from Talishar/delete-decks

Delete decks

src/appConstants.ts

@@ -140,7 +140,8 @@ export const URL_END_POINT = {
   SIGNUP: `AccountFiles/SignupAPI.php`,
   FORGOT_PASSWORD: `AccountFiles/PasswordResetRequestAPI.php`,
   RESET_PASSWORD: `AccountFiles/ResetPassword.php`,
-  GET_COSMETICS: `APIs/GetCosmetics.php`
+  GET_COSMETICS: `APIs/GetCosmetics.php`,
+  DELETE_DECK: `APIs/DeleteDeckAPI.php`
 };
 
 export const GAME_VISIBILITY = {

src/features/api/apiSlice.ts

@@ -5,7 +5,7 @@ import {
   FetchArgs,
   FetchBaseQueryError
 } from '@reduxjs/toolkit/query/react';
-import { isRejected, isRejectedWithValue } from '@reduxjs/toolkit';
+import { isRejectedWithValue } from '@reduxjs/toolkit';
 import type { MiddlewareAPI, Middleware } from '@reduxjs/toolkit';
 import { RootState } from 'app/Store';
 import {
@@ -30,18 +30,23 @@ import { ChooseFirstPlayer } from 'interface/API/ChooseFirstPlayer.php';
 import { SubmitSideboardAPI } from 'interface/API/SubmitSideboard.php';
 import { GetFavoriteDecksResponse } from 'interface/API/GetFavoriteDecks.php';
 import { GameListResponse } from 'routes/index/components/gameList/GameList';
-import { ProcessInputAPI } from 'interface/API/ProcessInputAPI';
 import { GetCosmeticsResponse } from 'interface/API/GetCosmeticsResponse.php';
+import {
+  DeleteDeckAPIRequest,
+  DeleteDeckAPIResponse
+} from 'interface/API/DeleteDeckAPI.php';
 
 // catch warnings and show a toast if we get one.
 export const rtkQueryErrorToaster: Middleware =
   (api: MiddlewareAPI) => (next) => (action) => {
-    // if (isRejectedWithValue(action)) {
-    //   console.warn('Rejected action:', action);
-    //   const errorMessage = action.error?.message ?? 'an error happened';
-    //   const errorStatus = action.payload?.status ?? 0;
-    //   toast.error(`Error: ${errorStatus} - ${errorMessage}`);
-    // }
+    if (isRejectedWithValue(action)) {
+      console.warn('Rejected action:', action);
+      const errorMessage = action.error?.message ?? 'an error happened';
+      const errorStatus = action.payload?.status ?? 0;
+      toast.error(
+        `A network error happened, please try again. Error:\n${errorStatus}\n${errorMessage}`
+      );
+    }
     return next(action);
   };
 
@@ -203,8 +208,17 @@ export const apiSlice = createApi({
         return response;
       }
     }),
+    deleteDeck: builder.mutation<DeleteDeckAPIResponse, DeleteDeckAPIRequest>({
+      query: (body: DeleteDeckAPIRequest) => {
+        return {
+          url: URL_END_POINT.DELETE_DECK,
+          method: 'post',
+          body: body
+        };
+      }
+    }),
     createGame: builder.mutation<CreateGameResponse, CreateGameAPI>({
-      query: ({ ...body }: CreateGameAPI) => {
+      query: (body: CreateGameAPI) => {
         return {
           url: URL_END_POINT.CREATE_GAME,
           method: 'POST',
@@ -216,7 +230,7 @@ export const apiSlice = createApi({
         response.status
     }),
     joinGame: builder.mutation<JoinGameResponse, JoinGameAPI>({
-      query: ({ ...body }: JoinGameAPI) => {
+      query: (body: JoinGameAPI) => {
         return {
           url: URL_END_POINT.JOIN_GAME,
           method: 'POST',
@@ -269,6 +283,7 @@ export const {
   useGetGameListQuery,
   useGetCosmeticsQuery,
   useGetFavoriteDecksQuery,
+  useDeleteDeckMutation,
   useLoginMutation,
   useLoginWithCookieQuery,
   useLogOutMutation,

src/interface/API/DeleteDeckAPI.php.ts

@@ -0,0 +1,7 @@
+export interface DeleteDeckAPIRequest {
+  deckLink: string;
+}
+
+export interface DeleteDeckAPIResponse {
+  message?: string;
+}

src/interface/API/GetFavoriteDecks.php.ts

@@ -13,4 +13,5 @@ export interface FavoriteDeck {
   format: string;
   cardBack: string;
   playmat: string;
+  link: string;
 }

src/routes/game/components/elements/cardDisplay/CardDisplay.module.css

@@ -1,7 +1,5 @@
 .card {
-  position: absolute;
-  border-radius: 0.5em;
-  border-radius: 2em;
+  border-radius: 20px;
   object-fit: cover;
   position: relative;
   user-select: none;
@@ -138,10 +136,6 @@
 }
 
 @media (orientation: portrait) {
-  .card {
-    border-radius: 2em;
-  }
-
   .normalSize {
     /* height: 12vw;
     height: 12dvw; */

src/routes/game/components/zones/activeLayersZone/ActiveLayersZone.module.css

@@ -1,60 +1,55 @@
 .activeLayersBox {
   position: fixed;
-  display: grid;
+  display: flex;
   flex-direction: column;
   min-width: 10%;
   top: 10vh;
   left: 20%;
   background-color: var(--near-black);
   padding: 2vh;
-  border: 1px solid gold;
+  border: 1px solid var(--primary);
   border-radius: 20px;
-  max-width: 900px;
+  max-width: 90vh;
   min-height: 200px;
-  max-height: 40vh;
-  max-height: 40dvh;
+  max-height: 50vh;
+  max-height: 60dvh;
   z-index: 99;
-}
-
-.activeLayersTitleContainer {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-grow: 0;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
+  overflow-y: auto;
 }
 
 .activeLayersTitle {
   font-size: 0.75em;
   padding-left: 0.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .title {
   font-size: 1.5em;
-  padding: 0px 0px 0px 0.25em;
   margin: 0px;
 }
 
 .activeLayersContents {
-  padding-top: 0.5em;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: flex-start;
   justify-items: flex-start;
   align-content: flex-start;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  overflow-y: auto;
-  height: auto;
-  width: 100%;
+  gap: 5px;
+  min-width: fit-content;
+  max-width: 1920px;
+}
+
+.activeLayersContents > div {
+  width: 14dvh;
 }
 
 .orderingExplanation {
   font-size: 0.75em;
-  padding-left: 0.5em;
   margin-bottom: 0;
 }
 
@@ -78,6 +73,5 @@
     left: 0px;
     right: 0px;
     width: 100%;
-    max-width: 100%;
   }
 }

src/routes/game/components/zones/activeLayersZone/ActiveLayersZone.tsx

@@ -1,25 +1,31 @@
 import React from 'react';
-import { useAppSelector } from 'app/Hooks';
+import { useAppDispatch, useAppSelector } from 'app/Hooks';
 import { RootState } from 'app/Store';
 import CardDisplay from '../../elements/cardDisplay/CardDisplay';
 import styles from './ActiveLayersZone.module.css';
 import { motion, AnimatePresence } from 'framer-motion';
 import ReorderLayers from './ReorderLayers';
 import useShowModal from 'hooks/useShowModals';
+import { submitButton } from 'features/game/GameSlice';
+import { PROCESS_INPUT } from 'appConstants';
 
 export default function ActiveLayersZone() {
   const showModal = useShowModal();
   const activeLayer = useAppSelector(
     (state: RootState) => state.game.activeLayers
   );
-
+  const dispatch = useAppDispatch();
   const staticCards = activeLayer?.cardList?.filter(
     (card) => card.reorderable === false
   );
   const reorderableCards = activeLayer?.cardList?.filter(
     (card) => card.reorderable
   );
 
+  const handlePassTurn = () => {
+    dispatch(submitButton({ button: { mode: PROCESS_INPUT.PASS } }));
+  };
+
   return (
     <AnimatePresence>
       {activeLayer?.active && showModal && (
@@ -30,8 +36,8 @@ export default function ActiveLayersZone() {
           exit={{ opacity: 0, scale: 0.8 }}
           key="activeLayersBox"
         >
-          <div className={styles.activeLayersTitleContainer}>
-            <div className={styles.activeLayersTitle}>
+          <div className={styles.activeLayersTitle}>
+            <div className={styles.titlesColumn}>
               <h3 className={styles.title}>
                 Active Layers
                 {activeLayer.isReorderable
@@ -47,6 +53,11 @@ export default function ActiveLayersZone() {
                 comprehensive rulebook.
               </p>
             </div>
+            <div className={styles.passTurnBox}>
+              <button onClick={handlePassTurn}>
+                <small>Pass</small>
+              </button>
+            </div>
           </div>
           <div className={styles.activeLayersContents}>
             {staticCards &&