defined helper for evaluating ui collapse state, working to implement alternate styles

src/components/Player/AllPlayers.scss

@@ -10,10 +10,6 @@
     background-color: rgb(188, 176, 146);
     color: black;
 
-    &.collapsed {
-        background-color: red;
-    }
-
     .player-ui {
         .subheader {
             font-weight: bold;
@@ -76,4 +72,10 @@
             }
         }
     }
+}
+
+.mini-player-ui {
+    background-color: red;
+    width: 10vw;
+    align-items: flex-end;
 }

src/components/Player/AllPlayers.tsx

@@ -6,9 +6,11 @@ import { AllPlayersProps } from "../../util/propTypes";
 import AvailableChips from "../Resources/AvailableChips";
 import SelectionView from "../Resources/SelectionView";
 import "./AllPlayers.scss"
+import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
 
 export default function AllPlayers({ state, setState, liftSelection, UICollapse }: AllPlayersProps) {
     const [playerView, setPlayerView] = useState<JSX.Element>();
+    const [collapseClass, setCollapseClass] = useState("all-players");
 
     useEffect(() => {
         const currentPlayer = useCurrentPlayer(state);
@@ -16,8 +18,12 @@ export default function AllPlayers({ state, setState, liftSelection, UICollapse
         setPlayerView(<Player key={v4()} player={currentPlayer} state={state} setState={setState} />);
     }, [state]);
 
+    useEffect(() => {
+        setCollapseClass( shouldRightSideCollapse(UICollapse) ? "mini-player-ui" : "all-players" );
+    }, [UICollapse]);
+
     return (
-        <div className={UICollapse.playerUICollapsed ? "all-players collapsed" : "all-players"}>
+        <div className={collapseClass}>
             <SelectionView state={state} setState={setState} />
             <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
             { playerView }