Add flipped query parameter

src/components/draft/Draft.tsx

@@ -50,15 +50,18 @@ interface IProps extends WithTranslation, RouteComponentProps<any> {
 
 interface IState {
     joined: boolean;
+    flipped: boolean;
 }
 
 class Draft extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
         this.disconnectAndGoBack = this.disconnectAndGoBack.bind(this);
+        let query = new URLSearchParams(this.props.location.search);
+        const flipped = query.get('flipped') === 'true' || false;
+        this.state = {joined: false, flipped};
     }
 
-    state = {joined: false};
 
     componentDidMount(): void {
         this.props.triggerConnect();
@@ -101,10 +104,12 @@ class Draft extends React.Component<IProps, IState> {
         const presetName: string = this.props.preset.name;
         const turns = this.props.preset.turns;
 
+        let className = 'section';
+        className += this.state.flipped ? ' flipped' : '';
 
         return (
             <>
-            <section className="section">
+            <section className={className}>
                 <Modal inDraft={true}/>
                 <RoleModal/>
                 <div id="container" className="container is-fluid">

src/sass/bulma.scss

@@ -503,6 +503,14 @@ div.stretchy-wrapper > div.stretchy-text {
   text-align: left;
 }
 
+.flipped #player-host {
+  text-align: left;
+}
+
+.flipped #player-guest {
+  text-align: right;
+}
+
 #player-host h4.player-name {
   color: $host-cyan;
 }
@@ -527,6 +535,28 @@ div.stretchy-wrapper > div.stretchy-text {
   flex-direction: row-reverse;
 }
 
+.flipped #player-host .picks,
+.flipped #player-host .bans,
+.flipped #player-host .captains-line {
+  flex-direction: row;
+}
+
+#player-guest .picks,
+#player-guest .bans,
+#player-guest .captains-line {
+  flex-direction: row;
+}
+
+.flipped #player-guest .picks,
+.flipped #player-guest .bans,
+.flipped #player-guest .captains-line {
+  flex-direction: row-reverse;
+}
+
+.flipped .columns {
+  flex-direction: row-reverse;
+}
+
 .back-icon.header-navigation {
   display: inline-block;
   width: 48px;