Make active Layers more presentable

Talishar · Apr 11, 2023 · b3f189a · b3f189a
1 parent de25187
commit b3f189a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 35 deletions.
diff --git a/src/routes/game/components/elements/cardDisplay/CardDisplay.module.css b/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; */

diff --git a/src/routes/game/components/zones/activeLayersZone/ActiveLayersZone.module.css b/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%;
   }
 }
diff --git a/src/routes/game/components/zones/activeLayersZone/ActiveLayersZone.tsx b/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 &&