unusual behavior with sass

src/components/Card/CardRow.scss

@@ -5,7 +5,7 @@
     display: flex;
     flex-flow: column nowrap;
     margin: 1rem 0;
-    width: 45vw;
+    width: 75vw;
 
     .card-row-top-bar {
         display: flex;

src/components/Gameboard/Gameboard.scss

@@ -33,5 +33,15 @@
             justify-content: flex-end;
             width: 50%;
         }
+
+        .gameboard-left-expanded {
+            align-items: flex-start;
+            width: 90%;
+        }
+
+        .gameboard-right-compact {
+            justify-content: flex-end;
+            width: 10%;
+        }
     }
 }

src/components/Gameboard/Gameboard.tsx

@@ -14,6 +14,7 @@ import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
 import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
 import usePreviousPlayer from '../../hooks/usePreviousPlayer';
+import { shouldRightSideCollapse } from '../../util/mechanics/shouldRightSideCollapse';
 const { validateChips } = getChipsActions;
 
 export default function Gameboard({ state, setState }: StateProps) {
@@ -115,13 +116,13 @@ export default function Gameboard({ state, setState }: StateProps) {
                 <div className="gameboard">
                     <h2 id="round-marker">Round: {state.round}</h2>
                     <div className="gameboard-columns">
-                        <section className="gameboard-left">
+                        <section className={shouldRightSideCollapse(UICollapse) ? "gameboard-left-expanded" : "gameboard-left"}>
                             <Nobles state={state} setState={setState} liftCollapsed={liftCollapsed} />
                             <CardRow tier={3} state={state} setState={setState} liftCollapsed={liftCollapsed} />
                             <CardRow tier={2} state={state} setState={setState} liftCollapsed={liftCollapsed} />
                             <CardRow tier={1} state={state} setState={setState} liftCollapsed={liftCollapsed} />
                         </section>
-                        <section className="gameboard-right">
+                        <section className={shouldRightSideCollapse(UICollapse) ? "gameboard-right-compact" : "gameboard-right"}>
                             <AllPlayers state={state} setState={setState} liftSelection={liftSelection} UICollapse={UICollapse} />
                         </section>
                     </div>

src/components/Player/AllPlayers.scss

@@ -3,12 +3,21 @@
 @import '../../sass/helper/placeholders';
 
 .all-players {
-    display: flex;
+    @extend %all-players-base;
-    flex-flow: column nowrap;
+    .selection-view {
-    justify-content: space-around;
+        .current-selections {
-    align-items: center;
+            display: flex;
-    background-color: rgb(188, 176, 146);
+            align-items: center;
-    color: black;
+            justify-content: center;
+            @include map-gem-values(".selection-value");
+            
+            p {
+                margin: 1rem;
+                padding: 1rem;
+                border-radius: 50%;
+            }
+        }
+    }
 
     .player-ui {
         .subheader {
@@ -41,41 +50,9 @@
                 @include map-gem-values(".reserve-cost");
             }
         }
-
-        .card {
-            width: 100%;
-
-            img {
-                display: none;
-            }
-
-            @each $gem in $gemlist {
-                @include map-gem-values('.foreground');
-                .foreground-#{$gem} {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 8px;
-
-                    p {
-                        display: inline;
-                        padding: 8px;
-                    }
-                    
-                    .total-card-cost {
-                        display: flex;
-                        flex-flow: row wrap;
-                        justify-content: center;
-                        @include map-gem-values(".card-cost");
-                    }
-                }
-            }
-        }
     }
 }
 
-.mini-player-ui {
+.all-players-mini {
-    background-color: red;
+    @extend %all-players-base;
-    width: 10vw;
-    align-items: flex-end;
 }

src/components/Player/AllPlayers.tsx

@@ -19,12 +19,12 @@ export default function AllPlayers({ state, setState, liftSelection, UICollapse
     }, [state]);
 
     useEffect(() => {
-        setCollapseClass( shouldRightSideCollapse(UICollapse) ? "mini-player-ui" : "all-players" );
+        setCollapseClass( shouldRightSideCollapse(UICollapse) ? "all-players-mini" : "all-players" );
     }, [UICollapse]);
 
     return (
         <div className={collapseClass}>
-            <SelectionView state={state} setState={setState} />
+            <SelectionView state={state} setState={setState} UICollapse={UICollapse} />
             <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
             { playerView }
         </div>

src/components/Resources/SelectionView.scss

@@ -1,16 +0,0 @@
-@import "../../sass/helper/mixins";
-
-.selection-view {
-    .current-selections {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        @include map-gem-values(".selection-value");
-        
-        p {
-            margin: 1rem;
-            padding: 1rem;
-            border-radius: 50%;
-        }
-    }
-}

src/components/Resources/SelectionView.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { StateProps } from "../../util/propTypes";
+import { SelectionProps } from "../../util/propTypes";
 import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
 import { GetChipsHTML, ReserveCardHTML } from "./ViewHTML";
-import './SelectionView.scss';
+import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
 
-export default function SelectionView({ state, setState }: StateProps) {
+export default function SelectionView({ state, setState, UICollapse }: SelectionProps) {
     const [currentPlayer, setCurrentPlayer] = useState(useCurrentPlayer(state));
     const actionTypes = [
         state.actions.getChips,
@@ -16,20 +16,19 @@ export default function SelectionView({ state, setState }: StateProps) {
 
     useEffect(() => {
         setCurrentPlayer(useCurrentPlayer(state));
-
         setView(() => {
             switch (true) {
                 case (actionTypes[0].active):
-                    return <GetChipsHTML state={state} setState={setState} />
+                    return <GetChipsHTML state={state} setState={setState} UICollapse={UICollapse} />
                 case (actionTypes[1].active):
                     return (
-                        <div className="selection-view">
+                        <div className={shouldRightSideCollapse(UICollapse) ? "selection-view-mini" : "selection-view"}>
                             <h2>{currentPlayer?.name} has elected to purchase a card!</h2>
                             <strong>Choose a card above to purchase.</strong>
                         </div>
                     )
                 case (actionTypes[2].active):
-                    return <ReserveCardHTML state={state} setState={setState} />;
+                    return <ReserveCardHTML state={state} setState={setState} UICollapse={UICollapse} />;
                 default:
                     return (
                         <div className="selection-view">

src/components/Resources/ViewHTML.tsx

@@ -2,16 +2,22 @@ import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import { setStateGetChips, setStateReserveCard, setStateReservePlusGold } from "../../hooks/stateSetters";
 import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
-import { StateProps } from "../../util/propTypes";
+import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
+import { SelectionProps } from "../../util/propTypes";
 import { ResourceCost } from "../../util/types";
 import { getChipsActions } from "../Player/ActionMethods";
 import { hasMaxChips } from "../Player/ActionMethods/getChipsActions";
 const { getChips } = getChipsActions;
 
-export const GetChipsHTML = ({ state, setState }: StateProps) => {
+export const GetChipsHTML = ({ state, setState, UICollapse }: SelectionProps) => {
     const [prompt, setPrompt] = useState("");
+    const [style, setStyle] = useState("");
     const currentPlayer = useCurrentPlayer(state);
 
+    useEffect(() => {
+        setStyle(shouldRightSideCollapse(UICollapse) ? "selection-view-mini" : "selection-view");
+    }, [UICollapse]);
+
     useEffect(() => {
         if (!state.actions.getChips.active) setPrompt("");
         if (state.actions.getChips.selection?.length === 0) {
@@ -22,7 +28,7 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
     }, [state])
 
     return (
-        <div className="selection-view">
+        <div className={style}>
             <h2>{currentPlayer?.name} has elected to collect resources!</h2> 
             <strong>{prompt}</strong>
             <div className="current-selections">
@@ -41,10 +47,15 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
     )
 }
 
-export const ReserveCardHTML = ({ state, setState }: StateProps) => {
+export const ReserveCardHTML = ({ state, setState, UICollapse }: SelectionProps) => {
     const [takeGold, setTakeGold] = useState(false);
+    const [style, setStyle] = useState("");
     const currentPlayer = useCurrentPlayer(state);
 
+    useEffect(() => {
+        setStyle(shouldRightSideCollapse(UICollapse) ? "selection-view-mini" : "selection-view");
+    }, [UICollapse]);
+
     useEffect(() => {
         switch (takeGold) {
             case true:
@@ -59,7 +70,7 @@ export const ReserveCardHTML = ({ state, setState }: StateProps) => {
     }, [takeGold]);
 
     return (
-        <div className="selection-view">
+        <div className={style}>
             <h2>{currentPlayer?.name} has elected to reserve a card!</h2>
             <strong>Please make your selection above.</strong>
             { !hasMaxChips(currentPlayer) && (

src/sass/App.scss

@@ -1,8 +1,6 @@
-@import './helper/placeholders';
-
 #root {
     .hidden {
-        @extend %hidden;
+        display: none;
     }
 
     .collapsed {

src/sass/helper/_placeholders.scss

@@ -1,6 +1,5 @@
-%hidden {
+@import "./mixins";
-    display: none;
+@import "./variables";
-}
 
 // designed to extend a "p" element
 %chip-design {
@@ -13,3 +12,52 @@
     height: 1rem;
     border-radius: 50%;
 }
+
+%all-players-base {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-around;
+    align-items: center;
+    background-color: rgb(188, 176, 146);
+    color: black;
+
+    .player-ui {
+        .subheader {
+            font-weight: bold;
+        }
+
+        background-color:rgb(172, 149, 94);
+        margin: 1rem 0;
+        padding: 0 2rem;
+    }
+
+    .card {
+        width: 100%;
+
+        img {
+            display: none;
+        }
+
+        @each $gem in $gemlist {
+            @include map-gem-values('.foreground');
+            .foreground-#{$gem} {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 8px;
+
+                p {
+                    display: inline;
+                    padding: 8px;
+                }
+                
+                .total-card-cost {
+                    display: flex;
+                    flex-flow: row wrap;
+                    justify-content: center;
+                    @include map-gem-values(".card-cost");
+                }
+            }
+        }
+    }
+}

src/util/propTypes.ts

@@ -1,4 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
 import { AppState, CardData, PlayerData, ResourceCost, setStateType, UIState } from "./types";
 
 export interface StateProps {
@@ -32,3 +31,7 @@ export interface ResourceProps extends StateProps {
 export interface AllPlayersProps extends ResourceProps {
     UICollapse: UIState
 }
+
+export interface SelectionProps extends StateProps {
+    UICollapse: UIState
+}