Skip to content

Commit bf67357

Browse files
eltodereltoder
authored
Change lobby layout (#49)
Make the chat bigger on bigger screens.
1 parent b2ffcf0 commit bf67357

File tree

3 files changed

+115
-125
lines changed

3 files changed

+115
-125
lines changed

‎src/components/Chat.js‎

Lines changed: 70 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,15 @@ import { UserContext } from "../context";
2424

2525
const useStyles = makeStyles((theme) => ({
2626
chatPanel: {
27+
height: "var(--chat-height, auto)",
2728
display: "flex",
2829
flexDirection: "column",
2930
},
31+
chatHidden: {
32+
[theme.breakpoints.down("sm")]: {
33+
height: "auto !important",
34+
},
35+
},
3036
chatHeader: {
3137
transition: "text-shadow 0.5s",
3238
"&:hover": {
@@ -94,6 +100,7 @@ function Chat({
94100
const [input, setInput] = useState("");
95101
const [menuOpenIdx, setMenuOpenIdx] = useState(null);
96102
const [chatHidden, setChatHidden] = useStorage("chat-hidden", "no");
103+
const isHidden = chatHidden === "yes";
97104

98105
const databasePath = gameId ? `chats/${gameId}` : "lobbyChat";
99106
const messagesQuery = useMemo(
@@ -105,7 +112,7 @@ function Chat({
105112
.limitToLast(messageLimit),
106113
[databasePath, messageLimit]
107114
);
108-
const messages = useFirebaseQuery(messagesQuery);
115+
const messages = useFirebaseQuery(isHidden ? null : messagesQuery);
109116
const mentionRE = useMemo(() => makeMentionRE(user.name), [user.name]);
110117

111118
const addMentioned = (cls, message) => {
@@ -128,7 +135,7 @@ function Chat({
128135
}
129136

130137
function toggleChat() {
131-
setChatHidden(chatHidden === "yes" ? "no" : "yes");
138+
setChatHidden(isHidden ? "no" : "yes");
132139
}
133140

134141
const [anchorEl, setAnchorEl] = useState(null);
@@ -194,11 +201,11 @@ function Chat({
194201

195202
return (
196203
<section
197-
className={classes.chatPanel}
204+
className={`${classes.chatPanel} ${isHidden ? classes.chatHidden : ""}`}
198205
style={{ flexGrow: 1, overflowY: "hidden" }}
199206
>
200207
<Subheading className={classes.chatHeader} onClick={toggleChat}>
201-
{title} {chatHidden === "yes" && "(Hidden)"}
208+
{title} {isHidden && "(Hidden)"}
202209
</Subheading>
203210
<Scrollbox className={classes.chat} ref={chatEl}>
204211
{Object.entries(items)
@@ -212,70 +219,70 @@ function Chat({
212219
startedAt={startedAt}
213220
/>
214221
) : (
215-
chatHidden !== "yes" && (
216-
<div
217-
key={key}
218-
style={{ display: "flex", flexDirection: "row" }}
219-
className={addMentioned(classes.message, item.message)}
220-
>
221-
{timeTooltip(
222-
item.time,
223-
<Typography variant="body2" gutterBottom>
224-
{formatTime(item.time)}
225-
<User
226-
id={item.user}
227-
component={InternalLink}
228-
to={`/profile/${item.user}`}
229-
underline="none"
230-
/>
231-
: {item.message}
232-
</Typography>
233-
)}
234-
{user.admin && (
235-
<MoreVertIcon
236-
aria-controls="admin-menu"
237-
color="inherit"
238-
className={classes.vertIcon}
239-
onClick={(e) => handleClickVertIcon(e, key)}
222+
<div
223+
key={key}
224+
style={{ display: "flex", flexDirection: "row" }}
225+
className={addMentioned(classes.message, item.message)}
226+
>
227+
{timeTooltip(
228+
item.time,
229+
<Typography variant="body2" gutterBottom>
230+
{formatTime(item.time)}
231+
<User
232+
id={item.user}
233+
component={InternalLink}
234+
to={`/profile/${item.user}`}
235+
underline="none"
240236
/>
241-
)}
237+
: {item.message}
238+
</Typography>
239+
)}
240+
{user.admin && (
241+
<MoreVertIcon
242+
aria-controls="admin-menu"
243+
color="inherit"
244+
className={classes.vertIcon}
245+
onClick={(e) => handleClickVertIcon(e, key)}
246+
/>
247+
)}
242248

243-
<Menu
244-
id="admin-menu"
245-
anchorEl={anchorEl}
246-
open={Boolean(anchorEl) && key === menuOpenIdx}
247-
onClose={handleClose}
248-
>
249-
<MenuItem onClick={() => handleDelete(key)}>
250-
Delete message
251-
</MenuItem>
252-
<MenuItem onClick={() => handleDeleteAll(item.user)}>
253-
Delete all from user
254-
</MenuItem>
255-
</Menu>
256-
</div>
257-
)
249+
<Menu
250+
id="admin-menu"
251+
anchorEl={anchorEl}
252+
open={Boolean(anchorEl) && key === menuOpenIdx}
253+
onClose={handleClose}
254+
>
255+
<MenuItem onClick={() => handleDelete(key)}>
256+
Delete message
257+
</MenuItem>
258+
<MenuItem onClick={() => handleDeleteAll(item.user)}>
259+
Delete all from user
260+
</MenuItem>
261+
</Menu>
262+
</div>
258263
)
259264
)}
260265
</Scrollbox>
261-
<form onSubmit={handleSubmit}>
262-
<Tooltip
263-
arrow
264-
title={
265-
chatDisabled
266-
? "New users cannot chat. Play a couple games first!"
267-
: ""
268-
}
269-
>
270-
<SimpleInput
271-
value={input}
272-
onChange={(e) => setInput(e.target.value)}
273-
placeholder="Type a message..."
274-
maxLength={250}
275-
disabled={chatDisabled}
276-
/>
277-
</Tooltip>
278-
</form>
266+
{!isHidden && (
267+
<form onSubmit={handleSubmit}>
268+
<Tooltip
269+
arrow
270+
title={
271+
chatDisabled
272+
? "New users cannot chat. Play a couple games first!"
273+
: ""
274+
}
275+
>
276+
<SimpleInput
277+
value={input}
278+
onChange={(e) => setInput(e.target.value)}
279+
placeholder="Type a message..."
280+
maxLength={250}
281+
disabled={chatDisabled}
282+
/>
283+
</Tooltip>
284+
</form>
285+
)}
279286
</section>
280287
);
281288
}

‎src/hooks/useFirebaseQuery.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ function useFirebaseQuery(query) {
88
const state = useRef({});
99

1010
useEffect(() => {
11+
if (!query) return;
12+
1113
function update() {
1214
clearInterval(timer.current);
1315
timer.current = setTimeout(() => {

‎src/pages/LobbyPage.js‎

Lines changed: 43 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => ({
3535
"--table-height": "480px",
3636
},
3737
[theme.breakpoints.up("md")]: {
38-
"--table-height": "calc(min(100vh - 140px, 720px))",
38+
"--table-height": "calc(min(100vh - 200px, 720px))",
3939
},
4040
},
4141
gamesTable: {
@@ -64,37 +64,30 @@ const useStyles = makeStyles((theme) => ({
6464
},
6565
},
6666
gameCounters: {
67-
"& > p": {
68-
marginBottom: "0.2em",
69-
},
70-
[theme.breakpoints.up("sm")]: {
71-
position: "absolute",
72-
bottom: 4,
73-
},
74-
[theme.breakpoints.down("xs")]: {
75-
marginTop: 4,
76-
display: "flex",
77-
justifyContent: "space-between",
67+
margin: "1.2em 0.2em 0.2em 0.2em",
68+
display: "flex",
69+
justifyContent: "space-between",
70+
[theme.breakpoints.down("sm")]: {
71+
order: -1,
72+
margin: "0 0.2em 1em 0.2em",
7873
},
7974
},
8075
actionButtons: {
81-
[theme.breakpoints.up("sm")]: {
82-
height: "100%",
83-
display: "flex",
84-
flexDirection: "column",
85-
justifyContent: "center",
86-
"& button": {
87-
margin: "12px 0",
88-
},
76+
display: "flex",
77+
margin: "1em 0 1em 0",
78+
"& button:first-of-type": {
79+
marginRight: "0.5em",
8980
},
90-
[theme.breakpoints.down("xs")]: {
91-
"& button": {
92-
marginBottom: theme.spacing(1),
93-
},
81+
"& button:last-of-type": {
82+
marginLeft: "0.5em",
83+
},
84+
[theme.breakpoints.down("sm")]: {
85+
marginBottom: "0.2em",
9486
},
9587
},
9688
chatColumn: {
97-
maxHeight: "calc(var(--table-height) + 16px)",
89+
display: "flex",
90+
flexDirection: "column",
9891
[theme.breakpoints.up("md")]: {
9992
marginTop: 36,
10093
},
@@ -103,18 +96,10 @@ const useStyles = makeStyles((theme) => ({
10396
padding: 8,
10497
display: "flex",
10598
flexDirection: "column",
106-
height: "100%",
107-
},
108-
chatPanel: {
109-
display: "flex",
110-
flexDirection: "column",
99+
"--chat-height": "calc(var(--table-height) - 16px)",
111100
},
112-
buttonColumn: {
113-
position: "relative",
114-
maxHeight: "calc(var(--table-height) + 16px)",
115-
[theme.breakpoints.up("sm")]: {
116-
marginTop: 36,
117-
},
101+
gamesColumn: {
102+
paddingBottom: "0 !important",
118103
},
119104
}));
120105

@@ -195,15 +180,33 @@ function LobbyPage() {
195180
return (
196181
<Container>
197182
<Grid container spacing={2} className={classes.mainGrid}>
198-
<Box clone order={{ xs: 3, md: 1 }} className={classes.chatColumn}>
199-
<Grid item xs={12} sm={12} md={3}>
183+
<Box clone order={{ xs: 2, md: 1 }} className={classes.chatColumn}>
184+
<Grid item xs={12} sm={12} md={6}>
200185
<Paper className={classes.chatColumnPaper}>
201186
<Chat title="Lobby Chat" messageLimit={50} showMessageTimes />
202187
</Paper>
188+
<div className={classes.gameCounters}>
189+
<Typography variant="body2">
190+
<strong>
191+
{loadingStats
192+
? "---"
193+
: humanize((stats && stats.onlineUsers) || 0)}
194+
</strong>{" "}
195+
users online
196+
</Typography>
197+
<Typography variant="body2">
198+
<strong>
199+
{loadingStats
200+
? "---,---"
201+
: humanize((stats && stats.gameCount) || 0)}
202+
</strong>{" "}
203+
games played
204+
</Typography>
205+
</div>
203206
</Grid>
204207
</Box>
205-
<Box clone order={{ xs: 1, md: 2 }}>
206-
<Grid item xs={12} sm={8} md={6}>
208+
<Box clone order={{ xs: 1, md: 2 }} className={classes.gamesColumn}>
209+
<Grid item xs={12} sm={12} md={6}>
207210
<Tabs
208211
className={classes.lobbyTabs}
209212
indicatorColor="secondary"
@@ -241,10 +244,6 @@ function LobbyPage() {
241244
</TableBody>
242245
</Table>
243246
</TableContainer>
244-
</Grid>
245-
</Box>
246-
<Box clone order={{ xs: 2, md: 3 }} className={classes.buttonColumn}>
247-
<Grid item xs={12} sm={4} md={3}>
248247
<div className={classes.actionButtons}>
249248
<Tooltip
250249
arrow
@@ -276,24 +275,6 @@ function LobbyPage() {
276275
</Button>
277276
</Tooltip>
278277
</div>
279-
<div className={classes.gameCounters}>
280-
<Typography variant="body2">
281-
<strong>
282-
{loadingStats
283-
? "---"
284-
: humanize((stats && stats.onlineUsers) || 0)}
285-
</strong>{" "}
286-
users online
287-
</Typography>
288-
<Typography variant="body2">
289-
<strong>
290-
{loadingStats
291-
? "---,---"
292-
: humanize((stats && stats.gameCount) || 0)}
293-
</strong>{" "}
294-
games played
295-
</Typography>
296-
</div>
297278
</Grid>
298279
</Box>
299280
</Grid>

0 commit comments

Comments
 (0)