+ { card && (
+
+
+);
+
+const ParsedMessage = ({ message }) => {
+ const [messageChunks, setMessageChunks] = useState(null);
+ const [name, setName] = useState(null);
+
+ useMemo(() => {
+ const name = message.match(MESSAGE_SENDER_REGEX);
+
+ if (name) {
+ setName(name[1]);
+ }
+
+ setMessageChunks(parseMessage(message));
+ }, [message]);
+
+ return (
+
+
+
+ { name && (
+ );
+};
+
+const PlayerLink = ({ name, label = name }) => (
+
+
+ );
+}
+
+export default TokenDetails;
diff --git a/webclient/src/components/VirtualList/VirtualList.tsx b/webclient/src/components/VirtualList/VirtualList.tsx
index 767da6a6..e40ef712 100644
--- a/webclient/src/components/VirtualList/VirtualList.tsx
+++ b/webclient/src/components/VirtualList/VirtualList.tsx
@@ -32,4 +32,4 @@ const Row = ({ data, index, style }) => (
);
-export default VirtualList;
\ No newline at end of file
+export default VirtualList;
diff --git a/webclient/src/components/index.ts b/webclient/src/components/index.ts
index 755e5bb2..4fcf62bb 100644
--- a/webclient/src/components/index.ts
+++ b/webclient/src/components/index.ts
@@ -1,7 +1,10 @@
// Common components
+export { default as Card } from './Card/Card';
+export { default as CardDetails } from './CardDetails/CardDetails';
export { default as Header } from './Header/Header';
export { default as InputField } from './InputField/InputField';
export { default as InputAction } from './InputAction/InputAction';
+export { default as Message } from './Message/Message';
export { default as VirtualList } from './VirtualList/VirtualList';
export { default as UserDisplay} from './UserDisplay/UserDisplay';
export { default as ThreePaneLayout } from './ThreePaneLayout/ThreePaneLayout';
@@ -13,3 +16,5 @@ export { default as ScrollToBottomOnChanges } from './ScrollToBottomOnChanges/Sc
export { default as AuthGuard } from './Guard/AuthGuard';
export { default as ModGuard} from './Guard/ModGuard';
+// Dialogs
+export { default as CardImportDialog} from './CardImportDialog/CardImportDialog';
diff --git a/webclient/src/containers/Room/Messages.css b/webclient/src/containers/Room/Messages.css
index f14cec6e..731002cb 100644
--- a/webclient/src/containers/Room/Messages.css
+++ b/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;
}
diff --git a/webclient/src/containers/Room/Messages.tsx b/webclient/src/containers/Room/Messages.tsx
index 47b6d2ea..546a0f91 100644
--- a/webclient/src/containers/Room/Messages.tsx
+++ b/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 }) => (
+
+
+ {
+ token && (
+
+
+ )
+ }
+
+
+
+
+ {
+ !token.text?.value ? null : (
+
+ Name:
+ {token.name?.value}
+
+
+ {
+ (!props.pt?.value) ? null : (
+
+ P/T:
+ {props.pt.value}
+
+ )
+ }
+
+ {
+ !props.colors?.value ? null : (
+
+ Color(s):
+ {props.colors.value}
+
+ )
+ }
+
+ {
+ !props.maintype?.value ? null : (
+
+ Main Type:
+ {props.maintype.value}
+
+ )
+ }
+
+ {
+ !props.type?.value ? null : (
+
+ Type:
+ {props.type.value}
+
+ )
+ }
+
+
+ )
+ }
+
+ {token.text.value}
+
+
{
- messages && messages.map(({ message, messageType, timeOf, timeReceived }) => (
- {
+ 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 (
+ {
top={(
-
)}
diff --git a/webclient/src/forms/CardImportForm/CardImportForm.css b/webclient/src/forms/CardImportForm/CardImportForm.css
new file mode 100644
index 00000000..56ac3e16
--- /dev/null
+++ b/webclient/src/forms/CardImportForm/CardImportForm.css
@@ -0,0 +1,35 @@
+.cardImportForm {
+ width: 550px;
+}
+
+.cardImportForm-content.done {
+ font-size: 32px;
+ height: 150px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.cardImportForm-actions {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+}
+
+.cardImportForm-error {
+ color: red;
+}
+
+.card-import-list {
+ height: 300px;
+ line-height: 1;
+ border: 1px solid lightgrey;
+ padding: 10px;
+}
+
+.loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/webclient/src/forms/CardImportForm/CardImportForm.tsx b/webclient/src/forms/CardImportForm/CardImportForm.tsx
new file mode 100644
index 00000000..08a59f3e
--- /dev/null
+++ b/webclient/src/forms/CardImportForm/CardImportForm.tsx
@@ -0,0 +1,225 @@
+// eslint-disable-next-line
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Form, Field, reduxForm} from 'redux-form'
+
+import Button from '@material-ui/core/Button';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { InputField, VirtualList } from 'components';
+import { cardImporterService, CardDTO, SetDTO, TokenDTO } from 'services';
+import { FormKey } from 'types';
+
+import './CardImportForm.css';
+
+const CardImportForm = (props) => {
+ const { handleSubmit, onSubmit:onClose } = props;
+
+ const [loading, setLoading] = useState(false);
+ const [activeStep, setActiveStep] = useState(0);
+ const [importedCards, setImportedCards] = useState([]);
+ const [importedSets, setImportedSets] = useState([]);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (loading) { setError(null); }
+ }, [loading])
+
+ const steps = ['Imports sets', 'Save sets', 'Import tokens', 'Finished'];
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const handleBack = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ };
+
+ const handleCardDownload = ({ cardDownloadUrl }) => {
+ setLoading(true);
+
+ cardImporterService.importCards(cardDownloadUrl)
+ .then(({ cards, sets }) => {
+ setImportedCards(cards);
+ setImportedSets(sets);
+
+ handleNext();
+ })
+ .catch(({ message }) => setError(message))
+ .finally(() => setLoading(false));
+ }
+
+ const handleCardSave = async () => {
+ setLoading(true);
+
+ try {
+ await CardDTO.bulkAdd(importedCards);
+ await SetDTO.bulkAdd(importedSets);
+
+ handleNext();
+ } catch(e) {
+ console.error(e);
+ setError('Failed to save cards');
+ }
+
+ setLoading(false);
+ }
+
+ const handleTokenDownload = ({ tokenDownloadUrl }) => {
+ setLoading(true);
+
+ cardImporterService.importTokens(tokenDownloadUrl)
+ .then(async tokens => {
+ await TokenDTO.bulkAdd(tokens);
+ handleNext();
+ })
+ .catch(({ message }) => setError(message))
+ .finally(() => setLoading(false));
+ }
+
+ const getStepContent = (stepIndex) => {
+ switch (stepIndex) {
+ case 0: return (
+
+ );
+
+ case 1: return (
+ {
+ const error = 'Card import must be in valid MTG JSON format';
+
+ return fetch(url)
+ .then(response => {
+ if (response.headers.get('Content-Type') !== 'application/json') {
+ throw new Error(error);
+ }
+
+ return response.json();
+ })
+ .then((json) => {
+ try {
+ const sortedSets = Object.keys(json.data)
+ .map(key => json.data[key])
+ .sort((a, b) => new Date(a.releaseDate).getTime() - new Date(b.releaseDate).getTime());
+
+ const sets = sortedSets.map(({ cards, tokens, ...set}) => ({
+ ...set,
+ cards: cards.map(({ name }) => name),
+ tokens: tokens.map(({ name }) => name),
+ }));
+
+ const unsortedCards = sortedSets.reduce((acc, set) => {
+ set.cards.forEach(card => acc[card.name] = card);
+ return acc;
+ }, {});
+
+ const cards = Object.keys(unsortedCards)
+ .sort((a, b) => a.localeCompare(b))
+ .map(key => unsortedCards[key]);
+
+ return { cards, sets };
+ } catch (e) {
+ throw new Error(error);
+ }
+ });
+ }
+
+ importTokens(url): Promise {
+ const error = 'Token import must be in valid MTG XML format';
+
+ return fetch(url)
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('Failed to fetch');
+ }
+
+ return response.text()
+ })
+ .then((xmlString) => {
+ try {
+ const parser = new DOMParser();
+ const dom = parser.parseFromString(xmlString, "application/xml");
+
+ const tokens = Array.from(dom.querySelectorAll('card')).map(
+ (tokenElement) => this.parseXmlAttributes(tokenElement)
+ );
+
+ return tokens;
+ } catch (e) {
+ throw new Error(error);
+ }
+ })
+ }
+
+ private parseXmlAttributes(dom: Element) {
+ return Array.from(dom.children).reduce((attributes, child) => {
+ const value = child.children.length ? this.parseXmlAttributes(child) : child.innerHTML;
+
+ let parsedAttributes = { value };
+
+ if (child.attributes.length) {
+ const childAttributes = Array.from(child.attributes).reduce((acc, { name, value }) => {
+ acc[name] = value;
+ return acc;
+ }, {});
+
+ parsedAttributes = {
+ ...parsedAttributes,
+ ...childAttributes,
+ };
+ }
+
+ // @TODO: clean this up and normalize what i'm returning
+ if (attributes[child.tagName]) {
+ if (Array.isArray(attributes[child.tagName])) {
+ attributes[child.tagName].push(parsedAttributes)
+ } else {
+ attributes[child.tagName] = [ parsedAttributes ];
+ }
+ } else {
+ attributes[child.tagName] = parsedAttributes;
+ }
+
+ return attributes;
+ }, {});
+ }
+}
+
+export const cardImporterService = new CardImporterService();
diff --git a/webclient/src/services/DexieDTOs/CardDTO.ts b/webclient/src/services/DexieDTOs/CardDTO.ts
new file mode 100644
index 00000000..a060aedb
--- /dev/null
+++ b/webclient/src/services/DexieDTOs/CardDTO.ts
@@ -0,0 +1,19 @@
+import { Card } from 'types';
+
+import { dexieService } from '../DexieService';
+
+export class CardDTO extends Card {
+ save() {
+ return dexieService.cards.put(this);
+ }
+
+ static get(name) {
+ return dexieService.cards.where('name').equalsIgnoreCase(name).first();
+ }
+
+ static bulkAdd(cards: CardDTO[]): Promise {
+ return dexieService.cards.bulkPut(cards);
+ }
+};
+
+dexieService.cards.mapToClass(CardDTO);
diff --git a/webclient/src/services/DexieDTOs/SetDTO.ts b/webclient/src/services/DexieDTOs/SetDTO.ts
new file mode 100644
index 00000000..616e8d56
--- /dev/null
+++ b/webclient/src/services/DexieDTOs/SetDTO.ts
@@ -0,0 +1,19 @@
+import { Set } from 'types';
+
+import { dexieService } from '../DexieService';
+
+export class SetDTO extends Set {
+ save() {
+ return dexieService.sets.put(this);
+ }
+
+ static get(name) {
+ return dexieService.sets.where('name').equalsIgnoreCase(name).first();
+ }
+
+ static bulkAdd(sets: SetDTO[]): Promise {
+ return dexieService.sets.bulkPut(sets);
+ }
+};
+
+dexieService.cards.mapToClass(SetDTO);
diff --git a/webclient/src/services/DexieDTOs/TokenDTO.ts b/webclient/src/services/DexieDTOs/TokenDTO.ts
new file mode 100644
index 00000000..35d53770
--- /dev/null
+++ b/webclient/src/services/DexieDTOs/TokenDTO.ts
@@ -0,0 +1,19 @@
+import { Token } from 'types';
+
+import { dexieService } from '../DexieService';
+
+export class TokenDTO extends Token {
+ save() {
+ return dexieService.tokens.put(this);
+ }
+
+ static get(name) {
+ return dexieService.tokens.where('name.value').equalsIgnoreCase(name).first();
+ }
+
+ static bulkAdd(tokens: TokenDTO[]): Promise {
+ return dexieService.tokens.bulkPut(tokens);
+ }
+};
+
+dexieService.tokens.mapToClass(TokenDTO);
diff --git a/webclient/src/services/DexieDTOs/index.ts b/webclient/src/services/DexieDTOs/index.ts
new file mode 100644
index 00000000..2ec93016
--- /dev/null
+++ b/webclient/src/services/DexieDTOs/index.ts
@@ -0,0 +1,3 @@
+export * from './CardDTO';
+export * from './SetDTO';
+export * from './TokenDTO';
diff --git a/webclient/src/services/DexieService.ts b/webclient/src/services/DexieService.ts
new file mode 100644
index 00000000..2429481b
--- /dev/null
+++ b/webclient/src/services/DexieService.ts
@@ -0,0 +1,35 @@
+import Dexie from 'dexie';
+
+enum Stores {
+ CARDS = 'cards',
+ SETS = 'sets',
+ TOKENS = 'tokens',
+}
+
+const StoreKeyIndexes = {
+ [Stores.CARDS]: "name",
+ [Stores.SETS]: "code",
+ [Stores.TOKENS]: "name.value",
+};
+
+class DexieService {
+ private db: Dexie = new Dexie('Webatrice');
+
+ constructor() {
+ this.db.version(1).stores(StoreKeyIndexes);
+ }
+
+ get cards() {
+ return this.db.table(Stores.CARDS);
+ }
+
+ get sets() {
+ return this.db.table(Stores.SETS);
+ }
+
+ get tokens() {
+ return this.db.table(Stores.TOKENS);
+ }
+}
+
+export const dexieService = new DexieService();
diff --git a/webclient/src/services/index.ts b/webclient/src/services/index.ts
new file mode 100644
index 00000000..e5e2a150
--- /dev/null
+++ b/webclient/src/services/index.ts
@@ -0,0 +1,2 @@
+export * from "./CardImporterService";
+export * from './DexieDTOs';
diff --git a/webclient/src/types/cards.ts b/webclient/src/types/cards.ts
new file mode 100644
index 00000000..4e103d97
--- /dev/null
+++ b/webclient/src/types/cards.ts
@@ -0,0 +1,93 @@
+export class Card {
+ artist: string;
+ availability: string[];
+ borderColor: string;
+ colorIdentity: string[];
+ colors: string[];
+ convertedManaCost: number;
+ edhrecRank: number;
+ flavorText: string;
+ identifiers: {
+ cardKingdomId: string;
+ mcmId: string;
+ mcmMetaId: string;
+ mtgjsonV4Id: string;
+ multiverseId: string;
+ scryfallId: string;
+ scryfallIllustrationId: string;
+ scryfallOracleId: string;
+ tcgplayerProductId: string;
+ };
+ isOnlineOnly: boolean;
+ layout: string;
+ legalities: {
+ brawl: string;
+ commander: string;
+ duel: string;
+ future: string;
+ gladiator: string;
+ historic: string;
+ legacy: string;
+ modern: string;
+ pauper: string;
+ penny: string;
+ pioneer: string;
+ premodern: string;
+ standard: string;
+ vintage: string;
+ };
+ manaCost: string;
+ name: string;
+ originalText: string;
+ originalType: string;
+ power: string;
+ printings: string[];
+ rarity: string;
+ rulings: {
+ date: string;
+ text: string;
+ }[];
+ side: string;
+ setCode: string;
+ subtypes: string[];
+ supertypes: string[];
+ text: string;
+ toughness: string;
+ type: string;
+ types: string[];
+ uuid: string;
+ variations: string[];
+}
+
+export class Set {
+ baseSetSize: number;
+ block: string;
+ cards: string[];
+ code: string;
+ isOnlineOnly: boolean;
+ name: string;
+ releaseDate: string;
+ totalSetSize: number;
+ type: string;
+}
+
+export class Token {
+ name: { value: string };
+ prop: {
+ value: {
+ cmc: { value: string; };
+ colors: { value: string; };
+ maintype: { value: string; };
+ pt: { value: string; };
+ type: { value: string; };
+ };
+ };
+ related: { value: string; }[];
+ 'reverse-related': { value: string; }[];
+ set: {
+ value: string;
+ picURL: string;
+ }[];
+ tablerow: { value: string; };
+ text: { value: string; };
+}
diff --git a/webclient/src/types/constants.spec.ts b/webclient/src/types/constants.spec.ts
new file mode 100644
index 00000000..f95a16ea
--- /dev/null
+++ b/webclient/src/types/constants.spec.ts
@@ -0,0 +1,84 @@
+import {
+ URL_REGEX,
+ MESSAGE_SENDER_REGEX,
+ MENTION_REGEX,
+ CARD_CALLOUT_REGEX,
+ CALLOUT_BOUNDARY_REGEX,
+} from './constants';
+
+describe('RegEx', () => {
+ describe('URL_REGEX', () => {
+ it('should match and capture whole url in main capture group', () => {
+ const test = [
+ 'http://example.com',
+ 'https://example.com',
+ 'https://www.example.com',
+ ];
+
+ test.forEach(str => {
+ const match = str.match(URL_REGEX);
+
+ expect(match).toBeDefined();
+ expect(match[0]).toBe(str);
+ });
+ });
+
+ it('should not match bad urls', () => {
+ const test = [
+ 'htt://example.com',
+ 'https:/example.com',
+ 'https//www.example.com',
+ 'www.example.com',
+ 'example.com',
+ ];
+
+ test.forEach(str =>
+ expect(str.match(URL_REGEX)).toBe(null)
+ );
+ });
+ });
+
+ describe('MESSAGE_SENDER_REGEX', () => {
+ it('should match and capture sender name in second capture group', () => {
+ const sender = 'sender';
+ const match = `${sender}: message`.match(MESSAGE_SENDER_REGEX);
+
+ expect(match).toBeDefined();
+ expect(match[1]).toBe(sender);
+ });
+
+ it('should not match if spaces before :', () => {
+ const test = [
+ ' sender: message',
+ 'sender : message',
+ ' sender : message',
+ ];
+
+ test.forEach(str =>
+ expect(str.match(URL_REGEX)).toBe(null)
+ );
+ });
+ });
+
+ describe('MENTION_REGEX', () => {
+ it('should match and capture user mentions in second capture group', () => {
+ expect('@mention'.match(MENTION_REGEX)[0]).toBe('@mention');
+ expect('@mention '.match(MENTION_REGEX)[0]).toBe('@mention');
+ expect(' @mention'.match(MENTION_REGEX)[0]).toBe(' @mention');
+ expect(' @mention '.match(MENTION_REGEX)[0]).toBe(' @mention');
+ expect('leading @mention'.match(MENTION_REGEX)[0]).toBe(' @mention');
+ expect('leading @mention trailing'.match(MENTION_REGEX)[0]).toBe(' @mention');
+ expect('@mention trailing'.match(MENTION_REGEX)[0]).toBe('@mention');
+ });
+
+ it('should not match preceded by character', () => {
+ const test = [
+ 'leading@mention',
+ ];
+
+ test.forEach(str =>
+ expect(str.match(MENTION_REGEX)).toBe(null)
+ );
+ });
+ });
+});
diff --git a/webclient/src/types/constants.ts b/webclient/src/types/constants.ts
new file mode 100644
index 00000000..7341a22b
--- /dev/null
+++ b/webclient/src/types/constants.ts
@@ -0,0 +1,6 @@
+// eslint-disable-next-line
+export const URL_REGEX = /(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b(?:[-a-zA-Z0-9@:%_\+.~#?&//=]*))/g;
+export const MESSAGE_SENDER_REGEX = /(^[^:\s]+):/;
+export const MENTION_REGEX = /(^|\s)(@\w+)/g;
+export const CARD_CALLOUT_REGEX = /(\[\[[^\]]+\]\])/g;
+export const CALLOUT_BOUNDARY_REGEX = /(\[\[|\]\])/g;
diff --git a/webclient/src/types/forms.ts b/webclient/src/types/forms.ts
index 3898b3e9..753885ea 100644
--- a/webclient/src/types/forms.ts
+++ b/webclient/src/types/forms.ts
@@ -1,6 +1,7 @@
export enum FormKey {
ADD_TO_BUDDIES = "ADD_TO_BUDDIES",
ADD_TO_IGNORE = "ADD_TO_IGNORE",
+ CARD_IMPORT = "CARD_IMPORT",
CONNECT = "CONNECT",
REGISTER = "REGISTER",
SEARCH_LOGS = "SEARCH_LOGS",
diff --git a/webclient/src/types/index.ts b/webclient/src/types/index.ts
index c4aee590..9403d6f8 100644
--- a/webclient/src/types/index.ts
+++ b/webclient/src/types/index.ts
@@ -1,3 +1,5 @@
+export * from "./cards";
+export * from "./constants";
export * from "./game";
export * from "./room";
export * from "./server";
diff --git a/webclient/src/types/server.tsx b/webclient/src/types/server.tsx
index ba8ebb30..91819737 100644
--- a/webclient/src/types/server.tsx
+++ b/webclient/src/types/server.tsx
@@ -22,7 +22,7 @@ export enum KnownHost {
}
export const KnownHosts = {
- [KnownHost.ROOSTER]: { port: 443, host: 'server.cockatrice.us', },
+ [KnownHost.ROOSTER]: { port: 4748, host: 'server.cockatrice.us', },
[KnownHost.TETRARCH]: { port: 443, host: 'mtg.tetrarch.co/servatrice'},
}
diff --git a/webclient/src/websocket/persistence/RoomService.tsx b/webclient/src/websocket/persistence/RoomService.tsx
index 1f2a33eb..b464b59b 100644
--- a/webclient/src/websocket/persistence/RoomService.tsx
+++ b/webclient/src/websocket/persistence/RoomService.tsx
@@ -31,8 +31,12 @@ export default class RoomService {
const game = gameList[0];
if (!game.gameType) {
- const { gametypeMap } = RoomsSelectors.getRoom(store.getState(), roomId);
- NormalizeService.normalizeGameObject(game, gametypeMap);
+ const room = RoomsSelectors.getRoom(store.getState(), roomId);
+
+ if (room) {
+ const { gametypeMap } = room;
+ NormalizeService.normalizeGameObject(game, gametypeMap);
+ }
}
RoomsDispatch.updateGames(roomId, gameList);
-
);
-const ParsedMessage = (message) => {
- const name = message.match("^[^:]+:");
-
- if (name && name.length) {
- message = message.slice(name[0].length, message.length);
- }
-
- return {ParsedMessage(message)}
+ messages && messages.map((message, index) => (
+
+
) )
}
- {name}
- {message}
-
-};
-
-export default Messages;
\ No newline at end of file
+export default Messages;
diff --git a/webclient/src/containers/Room/OpenGames.css b/webclient/src/containers/Room/OpenGames.css
new file mode 100644
index 00000000..623ab47f
--- /dev/null
+++ b/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%;
+}
diff --git a/webclient/src/containers/Room/OpenGames.tsx b/webclient/src/containers/Room/OpenGames.tsx
new file mode 100644
index 00000000..cb72c753
--- /dev/null
+++ b/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
+
+
+
+ );
+ }
+}
+
+interface OpenGamesProps {
+ room: any;
+ sortBy: any;
+}
+
+const mapStateToProps = state => ({
+ sortBy: RoomsSelectors.getSortGamesBy(state)
+});
+
+export default connect(mapStateToProps)(OpenGames);
diff --git a/webclient/src/containers/Room/Room.tsx b/webclient/src/containers/Room/Room.tsx
index f37b7dad..0e026627 100644
--- a/webclient/src/containers/Room/Room.tsx
+++ b/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
+
+ );
+
+ case 2: return (
+
+ );
+
+ case 3: return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ };
+
+ return (
+ Finished!
+
+
+
+
+
+ {steps.map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+ );
+}
+
+const BackButton = ({ click, disabled }) => (
+
+);
+
+const ErrorMessage = ({ error }) => {
+ return error && (
+
+ { getStepContent(activeStep) }
+
+
+ { loading && (
+
+
+ ) }
+ {error}
+ );
+}
+
+const CardsImported = ({ cards, sets }) => {
+ const items = [
+ (
+
+ Import finished: {cards.length} cards.
+
+ ),
+
+ ( ),
+
+ ...sets.map(set => (
+ {set.name}: {set.cards.length} cards imported
+ ) )
+ ];
+
+ return (
+
+ index }
+ items={items}
+ size={15}
+ />
+
+ );
+};
+
+const propsMap = {
+ form: FormKey.CARD_IMPORT,
+ onClose: Function
+};
+
+const mapStateToProps = () => ({
+ initialValues: {
+ cardDownloadUrl: 'https://www.mtgjson.com/api/v5/AllPrintings.json',
+ tokenDownloadUrl: 'https://raw.githubusercontent.com/Cockatrice/Magic-Token/master/tokens.xml'
+ },
+});
+
+export default connect(mapStateToProps)(reduxForm(propsMap)(CardImportForm));
diff --git a/webclient/src/forms/index.ts b/webclient/src/forms/index.ts
index d01ceca0..72fa688e 100644
--- a/webclient/src/forms/index.ts
+++ b/webclient/src/forms/index.ts
@@ -1,3 +1,4 @@
+export { default as CardImportForm } from './CardImportForm/CardImportForm';
export { default as ConnectForm } from './ConnectForm/ConnectForm';
export { default as RegisterForm } from './RegisterForm/RegisterForm';
export { default as SearchForm } from './SearchForm/SearchForm';
diff --git a/webclient/src/services/CardImporterService.ts b/webclient/src/services/CardImporterService.ts
new file mode 100644
index 00000000..e456c8ba
--- /dev/null
+++ b/webclient/src/services/CardImporterService.ts
@@ -0,0 +1,104 @@
+// Fetch and parse card sets
+
+class CardImporterService {
+ importCards(url): Promise