introducing logic for color sorting of chips

src/components/Resources/AvailableChips.tsx

@@ -5,22 +5,22 @@ import "./AvailableChips.scss"
 
 export default function AvailableChips({ state, liftSelection }: ResourceProps) {
     return (
-        <div className="available-chips">
+        <div className={state.actions.getChips.active ? 'available-chips' : 'hidden'}>
             {
                 Object.keys(state.gameboard.tradingResources).map((key: string) => {
                     const typedKey = key as keyof ResourceCost;
+
                     return (
-                        <div key={v4()} className={`chips-${key}`}>
-                            <button
-                                key={v4()}
-                                value={key}
-                                // @ts-ignore
-                                disabled={state.gameboard.tradingResources[typedKey] <= 0}
-                                onClick={() => liftSelection(typedKey)}
-                                >
-                                {key}: {state.gameboard.tradingResources[typedKey]}
-                            </button>
-                        </div>
+                        <button
+                            key={v4()}
+                            value={key}
+                            className={`chips-${key}`}
+                            // @ts-ignore
+                            disabled={state.gameboard.tradingResources[typedKey] <= 0}
+                            onClick={() => liftSelection(typedKey)}
+                            >
+                            {key}: {state.gameboard.tradingResources[typedKey]}
+                        </button>
                     )
                 })
             }