innocuous-symmetry/splendor-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

in progress: enable collapse for gameboard components

Browse Source
This commit is contained in:
Mikayla Dobson
2022-08-27 16:13:54 -05:00
parent cd187bf595
commit 7505c3316d
6 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Card/CardRow.scss
View File

@@ -7,6 +7,10 @@
margin: 1rem 0; margin: 1rem 0;
width: 55vw; width: 55vw;
&.collapsed {
width: 15vw;
}
.card-row-top-bar { .card-row-top-bar {
display: flex; display: flex;
align-items: center; align-items: center;

2
src/components/Card/CardRow.tsx
View File

@@ -27,7 +27,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
} }
return ( return (
<div className={`card-row tier-${tier}`}> <div className={`card-row tier-${tier} ${collapsed && 'collapsed'}`}>
<div className="card-row-top-bar"> <div className="card-row-top-bar">
<p>Tier: {tier}</p> <p>Tier: {tier}</p>
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button> <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>

12
src/components/Gameboard/Gameboard.scss
View File

@@ -1,7 +1,7 @@
.gameboard { .gameboard {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
background-color: rgb(57, 57, 65); background-color: rgb(57, 57, 65);
@@ -11,18 +11,18 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: center;
margin: 1rem; margin: 1rem;
padding: 1rem;
} }
.gameboard-left { .gameboard-left {
min-width: 50vw; align-items: flex-start;
padding: 1rem;
} }
.gameboard-right { .gameboard-right {
min-width: 35vw; max-width: 30vw;
padding: 1rem; align-items: flex-end;
} }
.round-marker { .round-marker {

2
src/components/Gameboard/Gameboard.tsx
View File

@@ -88,7 +88,7 @@ export default function Gameboard({ state, setState }: StateProps) {
setView( setView(
<div className="gameboard"> <div className="gameboard">
<section className="gameboard-left"> <section className="gameboard-left">
<h1 className="round-marker">Round: {state.round}</h1> <h2>Round: {state.round}</h2>
<Nobles state={state} setState={setState} /> <Nobles state={state} setState={setState} />
<CardRow tier={3} state={state} setState={setState} /> <CardRow tier={3} state={state} setState={setState} />
<CardRow tier={2} state={state} setState={setState} /> <CardRow tier={2} state={state} setState={setState} />

6
src/components/Nobles/Nobles.scss
View File

@@ -6,7 +6,11 @@
background-color: rgb(212, 196, 152); background-color: rgb(212, 196, 152);
color: black; color: black;
padding: 1rem 0; padding: 1rem 0;
min-width: 55vw; width: 55vw;
&.collapsed {
width: 15vw;
}
.nobles-topbar { .nobles-topbar {
display: flex; display: flex;

2
src/components/Nobles/Nobles.tsx
View File

@@ -17,7 +17,7 @@ export default function Nobles({ state }: StateProps) {
} }
return ( return (
<div className="nobles-panel"> <div className={`nobles-panel ${collapsed && 'collapsed'}`}>
<div className="nobles-topbar"> <div className="nobles-topbar">
<strong className="nobles-header">NOBLES</strong> <strong className="nobles-header">NOBLES</strong>
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button> <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>