Webatrice: card import wizard (#4397)

webclient/src/containers/Room/Messages.css

@@ -6,12 +6,12 @@
   line-height: 1.3;
 }
 
-.message {
+.message-wrapper {
   padding: 5px 0;
   margin: 2px 0;
   border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
 }
 
-.message:last-of-type {
+.message-wrapper:last-of-type {
   border: 0;
 }

webclient/src/containers/Room/Messages.tsx

@@ -1,31 +1,20 @@
 // eslint-disable-next-line
 import React from "react";
 
+import { Message } from 'components';
+
 import "./Messages.css";
 
 const Messages = ({ messages }) => (
   <div className="messages">
     {
-      messages && messages.map(({ message, messageType, timeOf, timeReceived }) => (
-        <div className="message" key={timeReceived}>
-          <div className="message__detail">{ParsedMessage(message)}</div>
+      messages && messages.map((message, index) => (
+        <div className="message-wrapper" key={message.timeReceived}>
+          <Message message={message} />
         </div>
       ) )
     }
   </div>
 );
 
-const ParsedMessage = (message) => {
-  const name = message.match("^[^:]+:");
-
-  if (name && name.length) {
-    message = message.slice(name[0].length, message.length);
-  }
-
-  return <div>
-    <strong>{name}</strong>
-    {message}
-  </div>
-};
-
-export default Messages;
+export default Messages;

webclient/src/containers/Room/OpenGames.css

@@ -0,0 +1,30 @@
+.games {
+}
+
+.games-header,
+.game {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid black;
+}
+
+.games-header__cell {
+  max-width: 200px;
+}
+
+.games-header__label,
+.game__detail {
+  width: 10%;
+  flex-grow: 0;
+}
+
+.games-header__label.description,
+.game__detail.description {
+  width: 20%;
+  flex-grow: 1;
+}
+
+.games-header__label.creator,
+.game__detail.creator {
+  width: 20%;
+}

webclient/src/containers/Room/OpenGames.tsx

@@ -0,0 +1,143 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import * as _ from "lodash";
+
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import Tooltip from "@material-ui/core/Tooltip";
+
+// import { RoomsService } from "AppShell/common/services";
+
+import { SortUtil, RoomsDispatch, RoomsSelectors } from "store";
+import { UserDisplay } from "components";
+
+import "./OpenGames.css";
+
+// @TODO run interval to update timeSinceCreated
+class OpenGames extends Component<OpenGamesProps> {
+  private headerCells = [
+    {
+      label: "Age",
+      field: "startTime"
+    },
+    {
+      label: "Description",
+      field: "description"
+    },
+    {
+      label: "Creator",
+      field: "creatorInfo.name"
+    },
+    {
+      label: "Type",
+      field: "gameType"
+    },
+    {
+      label: "Restrictions",
+      // field: "?"
+    },
+    {
+      label: "Players",
+      // field: ["maxPlayers", "playerCount"]
+    },
+    {
+      label: "Spectators",
+      field: "spectatorsCount"
+    },
+  ];
+
+  handleSort(sortByField) {
+    const { room: { roomId }, sortBy } = this.props;
+    const { field, order } = SortUtil.toggleSortBy(sortByField, sortBy);
+    RoomsDispatch.sortGames(roomId, field, order);
+  }
+
+  private isUnavailableGame({ started, maxPlayers, playerCount }) {
+    return !started && playerCount < maxPlayers;
+  }
+
+  private isPasswordProtectedGame({ withPassword }) {
+    return !withPassword;
+  }
+
+  private isBuddiesOnlyGame({ onlyBuddies }) {
+    return !onlyBuddies;
+  }
+
+  render() {
+    const { room, sortBy } = this.props;
+
+    const games = room.gameList.filter(game => (
+      this.isUnavailableGame(game) &&
+      this.isPasswordProtectedGame(game) &&
+      this.isBuddiesOnlyGame(game)
+    ));
+
+    return (
+      <div className="games">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              { _.map(this.headerCells, ({ label, field }) => {
+                const active = field === sortBy.field;
+                const order = sortBy.order.toLowerCase();
+                const sortDirection = active ? order : false;
+
+                return (
+                  <TableCell sortDirection={sortDirection} key={label}>
+                    {!field ? label : (
+                      <TableSortLabel
+                        active={active}
+                        direction={order}
+                        onClick={() => this.handleSort(field)}
+                      >
+                        {label}
+                      </TableSortLabel>
+                    )}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            { _.map(games, ({ description, gameId, gameType, creatorInfo, maxPlayers, playerCount, spectatorsCount, startTime }) => (
+              <TableRow key={gameId}>
+                <TableCell className="games-header__cell single-line-ellipsis">{startTime}</TableCell>
+                <TableCell className="games-header__cell">
+                  <Tooltip title={description} placement="bottom-start" enterDelay={500}>
+                    <div className="single-line-ellipsis">
+                      {description}
+                    </div>
+                  </Tooltip>
+                </TableCell>
+                <TableCell className="games-header__cell">
+                  <UserDisplay user={ creatorInfo } />
+                </TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">{gameType}</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">?</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">{`${playerCount}/${maxPlayers}`}</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">{spectatorsCount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
+}
+
+interface OpenGamesProps {
+  room: any;
+  sortBy: any;
+}
+
+const mapStateToProps = state => ({
+  sortBy: RoomsSelectors.getSortGamesBy(state)
+});
+
+export default connect(mapStateToProps)(OpenGames);

webclient/src/containers/Room/Room.tsx

@@ -11,7 +11,7 @@ import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, Aut
 import { RoomsStateMessages, RoomsStateRooms, JoinedRooms, RoomsSelectors } from "store";
 import { RouteEnum } from "types";
 
-import Games from "./Games";
+import OpenGames from "./OpenGames";
 import Messages from "./Messages";
 import SayMessage from "./SayMessage";
 
@@ -60,7 +60,7 @@ class Room extends Component<any> {
 
             top={(
               <Paper className="room-view__games overflow-scroll">
-                <Games room={room} />
+                <OpenGames room={room} />
               </Paper>    
             )}