From b37a28726ed6fa3d62264bd90606c9dbce9937e3 Mon Sep 17 00:00:00 2001
From: GreenAsJade <github@gregories.net>
Date: Fri, 22 Nov 2024 14:25:31 +1030
Subject: [PATCH] Put seek graph alongside create game on desktop screens

---
 src/views/Play/CustomGames.styl |  26 +++++-
 src/views/Play/CustomGames.tsx  | 148 +++++++++++++++++---------------
 2 files changed, 101 insertions(+), 73 deletions(-)

diff --git a/src/views/Play/CustomGames.styl b/src/views/Play/CustomGames.styl
index 7a143e7df0..9b8e9b8362 100644
--- a/src/views/Play/CustomGames.styl
+++ b/src/views/Play/CustomGames.styl
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
- 
+
  #CustomGames {
     display: flex;
     flex-direction: column;
@@ -23,13 +23,35 @@
     justify-content: center;
     box-sizing: border-box;
     
+    .top-stuff {
+        display: flex;
+        flex-direction: column;
+
+        @media screen and (min-width: 850px){
+            // On deskop, put the seek graph next to the CreateGame form
+            flex-direction: row;
+            width: max-content; // Causes seek graph to be as wide as possible
+
+            .Card {
+                flex: 1;
+            }
+        }
+        .seek-graph{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
     .Modal {
         border: none;
         box-shadow: none;
     }
-    
+
     .ChallengeModal {
         width: 100%;
         max-height: unset;
     }
+
+
  }
\ No newline at end of file
diff --git a/src/views/Play/CustomGames.tsx b/src/views/Play/CustomGames.tsx
index 4672aadb5d..6c43afb844 100644
--- a/src/views/Play/CustomGames.tsx
+++ b/src/views/Play/CustomGames.tsx
@@ -397,86 +397,92 @@ export function CustomGames(): JSX.Element {
             }}
         >
             <div id="CustomGames">
-                <Card>
-                    {liveOwnChallengePending() ? (
-                        <>
-                            <div className="automatch-header">{_("Waiting for opponent...")}</div>
-                            <div className="automatch-row-container">
-                                <div className="spinner">
-                                    <div className="double-bounce1"></div>
-                                    <div className="double-bounce2"></div>
+                <div className="top-stuff">
+                    <Card>
+                        {liveOwnChallengePending() ? (
+                            <>
+                                <div className="automatch-header">
+                                    {_("Waiting for opponent...")}
                                 </div>
-                            </div>
-                            <div className="automatch-settings">
-                                <button className="danger sm" onClick={cancelOwnChallenges}>
-                                    {pgettext("Cancel challenge", "Cancel")}
-                                </button>
-                            </div>
-                        </>
-                    ) : live_rengo_challenge_to_show ? (
-                        <>
-                            <RengoManagementPane
-                                challenge_id={live_rengo_challenge_to_show.challenge_id}
-                                rengo_challenge_list={rengo_list}
-                                startRengoChallenge={rengo_utils.startOwnRengoChallenge}
-                                cancelChallenge={cancelOpenRengoChallenge}
-                                withdrawFromRengoChallenge={unNominateForRengoChallenge}
-                                joinRengoChallenge={rengo_utils.nominateForRengoChallenge}
-                                lock={
-                                    rengo_manage_pane_lock[
-                                        live_rengo_challenge_to_show?.challenge_id
-                                    ]
-                                }
-                            >
-                                <RengoTeamManagementPane
+                                <div className="automatch-row-container">
+                                    <div className="spinner">
+                                        <div className="double-bounce1"></div>
+                                        <div className="double-bounce2"></div>
+                                    </div>
+                                </div>
+                                <div className="automatch-settings">
+                                    <button className="danger sm" onClick={cancelOwnChallenges}>
+                                        {pgettext("Cancel challenge", "Cancel")}
+                                    </button>
+                                </div>
+                            </>
+                        ) : live_rengo_challenge_to_show ? (
+                            <>
+                                <RengoManagementPane
                                     challenge_id={live_rengo_challenge_to_show.challenge_id}
-                                    challenge_list={rengo_list}
-                                    moderator={user.is_moderator}
-                                    show_chat={false}
-                                    assignToTeam={rengo_utils.assignToTeam}
-                                    kickRengoUser={rengo_utils.kickRengoUser}
-                                    locked={
+                                    rengo_challenge_list={rengo_list}
+                                    startRengoChallenge={rengo_utils.startOwnRengoChallenge}
+                                    cancelChallenge={cancelOpenRengoChallenge}
+                                    withdrawFromRengoChallenge={unNominateForRengoChallenge}
+                                    joinRengoChallenge={rengo_utils.nominateForRengoChallenge}
+                                    lock={
                                         rengo_manage_pane_lock[
-                                            live_rengo_challenge_to_show.challenge_id
+                                            live_rengo_challenge_to_show?.challenge_id
                                         ]
                                     }
-                                    lock={(lock: boolean) =>
-                                        setPaneLock(live_rengo_challenge_to_show.challenge_id, lock)
-                                    }
+                                >
+                                    <RengoTeamManagementPane
+                                        challenge_id={live_rengo_challenge_to_show.challenge_id}
+                                        challenge_list={rengo_list}
+                                        moderator={user.is_moderator}
+                                        show_chat={false}
+                                        assignToTeam={rengo_utils.assignToTeam}
+                                        kickRengoUser={rengo_utils.kickRengoUser}
+                                        locked={
+                                            rengo_manage_pane_lock[
+                                                live_rengo_challenge_to_show.challenge_id
+                                            ]
+                                        }
+                                        lock={(lock: boolean) =>
+                                            setPaneLock(
+                                                live_rengo_challenge_to_show.challenge_id,
+                                                lock,
+                                            )
+                                        }
+                                    />
+                                </RengoManagementPane>
+                            </>
+                        ) : (
+                            <div>
+                                <ChallengeModalBody
+                                    mode="open"
+                                    modal={{
+                                        on: (event: "open" | "close", callback: () => void) => {
+                                            console.log("on", event, callback);
+                                        },
+                                        off: (event: "open" | "close", callback: () => void) => {
+                                            console.log("off", event, callback);
+                                        },
+                                    }}
                                 />
-                            </RengoManagementPane>
-                        </>
-                    ) : (
-                        <div>
-                            <ChallengeModalBody
-                                mode="open"
-                                modal={{
-                                    on: (event: "open" | "close", callback: () => void) => {
-                                        console.log("on", event, callback);
-                                    },
-                                    off: (event: "open" | "close", callback: () => void) => {
-                                        console.log("off", event, callback);
-                                    },
-                                }}
-                            />
+                            </div>
+                        )}
+                    </Card>
+                    <div className="seek-graph">
+                        <h2>{pgettext("Games available to accept", "Available Games")}</h2>
+
+                        <div ref={ref_container} className="seek-graph-container">
+                            <OgsResizeDetector onResize={onResize} targetRef={ref_container} />
+                            <PersistentElement elt={canvas} />
                         </div>
-                    )}
-                </Card>
-                <div className="row">
-                    <h2>{pgettext("Games available to accept", "Available Games")}</h2>
-
-                    <div ref={ref_container} className="seek-graph-container">
-                        <OgsResizeDetector onResize={onResize} targetRef={ref_container} />
-                        <PersistentElement elt={canvas} />
-                    </div>
 
-                    <SeekGraphLegend
-                        filter={filter}
-                        showIcons={true}
-                        toggleHandler={toggleFilterHandler}
-                    ></SeekGraphLegend>
+                        <SeekGraphLegend
+                            filter={filter}
+                            showIcons={true}
+                            toggleHandler={toggleFilterHandler}
+                        ></SeekGraphLegend>
+                    </div>
                 </div>
-
                 <div id="challenge-list-container">
                     <div id="challenge-list-inner-container">
                         <div id="challenge-list" onMouseMove={freezeChallenges}>