Add direct links for joining as a host/guest

src/components/draft/Draft.tsx

@@ -84,18 +84,24 @@ class Draft extends React.Component<IProps, IState> {
                 this.setState({joined: true});
             }
         } else if (this.props.whoAmI !== Player.SPEC && !this.state.joined) {
-            let username: string | null = NameGenerator.getNameFromLocalStorage(this.props.ownName);
-            console.log("componentDidMount", this.props.triggerSetRole, username);
-            if (username !== null) {
-                this.props.triggerSetRole(username, this.props.whoAmI);
-                this.setState({joined: true});
-            } else {
-                this.props.showNameModal();
-            }
+            this.updateRole(this.props.whoAmI);
+        } else if (prevProps.whoAmI !== undefined && prevProps.whoAmI !== this.props.whoAmI && !this.state.joined) {
+            // Role was already set before we connected, must have been set via direct link, inform the server
+            this.updateRole(prevProps.whoAmI);
         }
         this.updateTitle();
     }
 
+    private updateRole(player: Player) {
+        let username: string | null = NameGenerator.getNameFromLocalStorage(this.props.ownName);
+        if (username !== null) {
+            this.props.triggerSetRole(username, player);
+            this.setState({joined: true});
+        } else {
+            this.props.showNameModal();
+        }
+    }
+
     private updateTitle() {
         const title = this.getTitle();
         if (document.title !== title) {

src/components/draft/GuestDraft.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Player from "../../constants/Player";
+import "../../types/DraftEvent";
+import {WithTranslation, withTranslation} from "react-i18next";
+import {Redirect} from "react-router";
+import {Util} from "../../util/Util";
+
+interface IProps extends WithTranslation {
+    setOwnRole: (role: Player) => void;
+}
+
+
+class GuestDraft extends React.Component<IProps, object> {
+
+    componentDidMount(): void {
+        this.props.setOwnRole(Player.GUEST);
+    }
+
+    public render() {
+        const draftId = Util.getIdFromUrl();
+        return (
+            <Redirect to={`/draft/${draftId}`}/>
+        );
+    }
+}
+
+export default withTranslation()(GuestDraft);

src/components/draft/HostDraft.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Player from "../../constants/Player";
+import "../../types/DraftEvent";
+import {WithTranslation, withTranslation} from "react-i18next";
+import {Redirect} from "react-router";
+import {Util} from "../../util/Util";
+
+interface IProps extends WithTranslation {
+    setOwnRole: (role: Player) => void;
+}
+
+
+class HostDraft extends React.Component<IProps, object> {
+
+    componentDidMount(): void {
+        this.props.setOwnRole(Player.HOST);
+    }
+
+    public render() {
+        const draftId = Util.getIdFromUrl();
+        return (
+            <Redirect to={`/draft/${draftId}`}/>
+        );
+    }
+}
+
+export default withTranslation()(HostDraft);

src/components/draft/SpectateDraft.tsx

@@ -24,4 +24,4 @@ class SpectateDraft extends React.Component<IProps, object> {
     }
 }
 
-export default withTranslation()(SpectateDraft);
+export default withTranslation()(SpectateDraft);

src/containers/GuestDraft.tsx

@@ -0,0 +1,20 @@
+import * as actions from '../actions/';
+import {ApplicationState} from '../types';
+import {connect} from 'react-redux';
+import {Dispatch} from 'redux';
+import Player from "../constants/Player";
+import DraftGuest from "../components/draft/GuestDraft";
+
+export function mapStateToProps(state: ApplicationState) {
+    return {}
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<actions.Action>) {
+    return {
+        setOwnRole: (role: Player) => dispatch(actions.setOwnRole(role)),
+        triggerConnect: () => dispatch(actions.connect()),
+        triggerSetRole: (name: string, role: Player) => dispatch(actions.setRole(name, role)),
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DraftGuest);

src/containers/HostDraft.tsx

@@ -0,0 +1,20 @@
+import * as actions from '../actions/';
+import {ApplicationState} from '../types';
+import {connect} from 'react-redux';
+import {Dispatch} from 'redux';
+import Player from "../constants/Player";
+import DraftHost from "../components/draft/HostDraft";
+
+export function mapStateToProps(state: ApplicationState) {
+    return {}
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<actions.Action>) {
+    return {
+        setOwnRole: (role: Player) => dispatch(actions.setOwnRole(role)),
+        triggerConnect: () => dispatch(actions.connect()),
+        triggerSetRole: (name: string, role: Player) => dispatch(actions.setRole(name, role)),
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DraftHost);

src/index.tsx

@@ -22,6 +22,8 @@ import {initialLanguageState} from "./reducers/language";
 import {initialModalState} from "./reducers/modal";
 import {initialPresetEditorState} from "./reducers/presetEditor";
 import SpectateDraft from "./containers/SpectateDraft";
+import HostDraft from "./containers/HostDraft";
+import GuestDraft from "./containers/GuestDraft";
 import {initialColorSchemeState} from "./reducers/colorScheme";
 import {initialReplayState} from "./reducers/replay";
 import {initialIconStyleState} from "./reducers/iconStyle";
@@ -158,6 +160,8 @@ ReactDOM.render(
                     <Route path="/preset/:id" component={Menu}/>
                     <Route path="/preset/:id/new" component={Menu}/>
                     <Route path="/spectate/:id" component={SpectateDraft}/>
+                    <Route path="/host/:id" component={HostDraft}/>
+                    <Route path="/guest/:id" component={GuestDraft}/>
                     <Route path="/spectate" component={Menu}/>
                     <Route path="/practice" component={Menu}/>
                     <Route path="/api" component={Menu}/>

src/util/Util.ts

@@ -29,7 +29,7 @@ export const Util = {
     },
 
     getIdFromUrl(): string {
-        const match: RegExpMatchArray | null = window.location.pathname.match(/\/(?:draft|spectate)\/([A-Za-z]+)\/?.*/);
+        const match: RegExpMatchArray | null = window.location.pathname.match(/\/(?:draft|spectate|guest|host)\/([A-Za-z]+)\/?.*/);
         if (match !== null) {
             return match[1];
         }