commit 19c3372f7b4b74e3397e059144807256ff433e0f (patch)
parent 1fdb96c02657873f775da31e5867eefd0a5e13a7
Author: Chris Karle <chriskarle@hotmail.com>
Date: Thu, 14 May 2020 20:14:46 -0400
CardTable, MainHand, app.scss
CardTable: Revised Grid layout to accomodate a chat area in lower
right.
MainHand: overlapping cards in hand
app.scss: revamped styles to accomplish above
Diffstat:
3 files changed, 114 insertions(+), 64 deletions(-)
diff --git a/assets/app.scss b/assets/app.scss
@@ -37,10 +37,15 @@
.table__main {
margin-top: 2rem;
- min-width: 850px;
+ min-width: 950px;
min-height: 650px;
}
+.og {
+ padding-left: 0;
+ padding-right: 0;
+}
+
.score__holder{
font-size: 1.2rem;
font-weight: bold;
@@ -120,11 +125,28 @@
.my__tinfo {
font-size: 1.3rem;
}
+.mh__card__wrapper {
+ overflow: hidden;
+}
+
+.mh__card__wrapper:last-child, .mh__card__wrapper:hover {
+ overflow: visible;
+}
.mh__card {
- width: 100px;
+ width: 9vw;
+ min-width: 80px;
}
.mh__card__row {
display: flex;
+ align-content: center;
+ max-width: 35vw;
+}
+.my__hand {
+ // background-color: cadetblue;
+
+}
+.chat__tile {
+ width: 100%;
}
.hid__card {
width: 30px;
@@ -145,6 +167,17 @@
transform: rotate(90deg);
}
}
+.right__stack {
+ margin-left: 1.5vw;
+}
+.og__left, .inner__left {
+ padding-right: 0;
+ padding-left: 0;
+}
+.og__right, inner__right {
+ padding-left: 0;
+}
+
.tm__left {
// background-color: rgb(217, 249, 255);
.vert__stack {
@@ -157,12 +190,13 @@
text-align: center;
}
-// .tm__right {
-// background-color: rgb(217, 249, 255);
-// }
-// .tb__center {
-// background-color: rgb(217, 249, 255);
-// }
+.tm__right {
+ height: 35vh;
+ // background-color: rgb(217, 249, 255);
+}
+.tb__center {
+ // background-color: rgb(217, 249, 255);
+}
.trick__card {
width: 80px;
}
@@ -228,6 +262,7 @@
.table__header {
height: 10vh;
+ margin-left: 2rem;
}
.table__top {
height: 20vh;
@@ -238,14 +273,20 @@
.table__bot {
height: 20vh;
}
+.tt__right {
+ height: 20vh;
+ justify-content: flex-end;
+ // background-color: lightsalmon;
+}
+.tb__right {
+ height: 35vh;
+ // background-color: lightsalmon;
+}
// .tb__left {
// background-color: slategray;
// }
-// .tb__right {
-// background-color: lightsalmon;
-// }
// .hd__left {
// background-color: rosybrown;
// }
@@ -255,9 +296,6 @@
// .tt__left {
// background-color: slategray;
// }
-// .tt__right {
-// background-color: lightsalmon;
-// }
// .tm__center {
// background-color: lightpink;
// }
diff --git a/assets/components/CardTable.js b/assets/components/CardTable.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
-import {Button, Grid, Row, Column, OverflowMenu, OverflowMenuItem} from 'carbon-components-react';
+import {Button, Grid, Row, Column, OverflowMenu, OverflowMenuItem, Tile} from 'carbon-components-react';
import {Logout32, Redo32, Package32} from '@carbon/icons-react';
import SeatPicker from './SeatPicker';
import MainHand from './MainHand';
@@ -660,25 +660,17 @@ export default class CardTable extends React.Component {
const themLabel = amSpectator ? playerNames[0] + ' & ' + playerNames[2] + ': ' : 'Them: ';
return (
<div id="table" className="table__main">
- <Grid>
+ <Grid className="og">
+ <Row className="og__row">
+ <Column className="og__left" md={5}>
+ <Grid className="inner__left">
{(showSeatPicker || showGameOver) && (
<Row className="table__header">
- <Column className="hd__left" sm={3}>
- <h3>{bannerMsg}</h3>
- </Column>
- <Column className="hd__right" sm={1}>
- <div className="exit__row">
- <Button
- className="leave__button"
- kind="ghost"
- onClick={this.sendExit}
- renderIcon={Logout32}>Exit</Button>
- </div>
- </Column>
+ <h3>{bannerMsg}</h3>
</Row>
)}
<Row className="table__top">
- <Column className="tt__left" sm={1}>
+ <Column className="tt__left" md={3}>
{!showSeatPicker && (
<div className="menu__holder">
<OverflowMenu>
@@ -695,7 +687,7 @@ export default class CardTable extends React.Component {
</div>
)}
</Column>
- <Column className="tt__center" sm={2}>
+ <Column className="tt__center" md={5}>
{!showSeatPicker && (
<div className="partner__stack">
<div className="player__name">{this.genNameDisplay(partnerSeat)}</div>
@@ -707,17 +699,9 @@ export default class CardTable extends React.Component {
numCards={handLengths[partnerSeat]} />
</div>)}
</Column>
- <Column className="tt__right" sm={1}>
- {(phase != 'lobby') && (
- <div className="score__holder">
- <div className="us__score">{usLabel}{score[0]}</div>
- <div className="them__score">{themLabel}{score[1]}</div>
- <div className="trick__win">{trickWinner}</div>
- </div>)}
- </Column>
</Row>
<Row className="table__mid">
- <Column className="tm__left" sm={1}>
+ <Column className="tm__left" md={3}>
{!showSeatPicker && (
<div className="vert__stack">
<div className="player__name">{this.genNameDisplay(leftSeat)}</div>
@@ -727,7 +711,7 @@ export default class CardTable extends React.Component {
numCards={handLengths[leftSeat]} />
</div>)}
</Column>
- <Column className="tm__center" sm={2}>
+ <Column className="tm__center" md={5}>
{showSeatPicker && (
<SeatPicker
names={playerNames}
@@ -753,19 +737,9 @@ export default class CardTable extends React.Component {
</div>
)}
</Column>
- <Column className="tm__right" sm={1}>
- {!showSeatPicker && (
- <div className="vert__stack">
- <div className="player__name">{this.genNameDisplay(rightSeat)}</div>
- <div className="play__hinfo">{rightHandInfo}</div>
- <div className="play__tinfo">{rightTurnInfo}</div>
- <HiddenHand
- numCards={handLengths[rightSeat]} />
- </div>)}
- </Column>
</Row>
<Row className="table__bot">
- <Column className="tb__left" sm={1}>
+ <Column className="tb__left" md={3}>
{showBottomInfo && (
<div className="my__stack">
<div className="my__hinfo">{this.genNameDisplay(mySeat)}</div>
@@ -788,7 +762,7 @@ export default class CardTable extends React.Component {
</div>
)}
</Column>
- <Column className="tb__center" sm={3}>
+ <Column className="tb__center" md={5}>
{!showSeatPicker && !amSpectator && (
<MainHand
cards={myCards}
@@ -802,9 +776,44 @@ export default class CardTable extends React.Component {
</Column>
</Row>
</Grid>
-
-
- </div>
+ </Column>
+ <Column className="og__right" md={3}>
+ <Grid className="inner_right">
+ <Row className="tt__right" >
+ {phase == 'lobby' && (
+ <div className="exit__row">
+ <Button
+ className="leave__button"
+ kind="ghost"
+ onClick={this.sendExit}
+ renderIcon={Logout32}>Exit</Button>
+ </div>
+ )}
+ {(phase != 'lobby') && (
+ <div className="score__holder">
+ <div className="us__score">{usLabel}{score[0]}</div>
+ <div className="them__score">{themLabel}{score[1]}</div>
+ <div className="trick__win">{trickWinner}</div>
+ </div>)}
+ </Row>
+ <Row className="tm__right">
+ {!showSeatPicker && (
+ <div className="vert__stack right__stack">
+ <div className="player__name">{this.genNameDisplay(rightSeat)}</div>
+ <div className="play__hinfo">{rightHandInfo}</div>
+ <div className="play__tinfo">{rightTurnInfo}</div>
+ <HiddenHand
+ numCards={handLengths[rightSeat]} />
+ </div>)}
+ </Row>
+ <Row className="tb__right">
+ <Tile className="chat__tile">Coming Soon! future chat area here</Tile>
+ </Row>
+ </Grid>
+ </Column>
+ </Row>
+ </Grid>
+ </div>
);
};
}
diff --git a/assets/components/MainHand.js b/assets/components/MainHand.js
@@ -9,15 +9,18 @@ class MainHand extends React.Component {
cards.map((card, index) => {
const cardSrc = 'cards/' + card + '.svg';
buttons.push(
- <div
- key={index}
- className="mh__card__div">
- <Link
- className="mh__card__link"
- href="javascript:void(0)"
- onClick={()=> this.props.cardClick(index)}>
- <img className="mh__card" src={cardSrc} />
- </Link>
+ <div key={index+'cw'}
+ className="mh__card__wrapper">
+ <div
+ key={index}
+ className="mh__card__div">
+ <Link
+ className="mh__card__link"
+ href="javascript:void(0)"
+ onClick={()=> this.props.cardClick(index)}>
+ <img className="mh__card" src={cardSrc} />
+ </Link>
+ </div>
</div>
)
});
