From 6023eacd248539d18179caa1cc5af85e31610b2f Mon Sep 17 00:00:00 2001
From: insraq <ruoysun@gmail.com>
Date: Wed, 17 Jan 2024 18:38:07 +0200
Subject: [PATCH] [release] 0.1.112

---
 src/scripts/languages/en.ts              |  1 +
 src/scripts/ui/PlayerHandleComponent.tsx | 40 +++++++++++++-----------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/scripts/languages/en.ts b/src/scripts/languages/en.ts
index 572a1415..48fa996b 100644
--- a/src/scripts/languages/en.ts
+++ b/src/scripts/languages/en.ts
@@ -893,6 +893,7 @@ export const EN = {
    FirstTimeGuideNext: "Next",
    FirstTimeGuideFinish: "Finish",
    AccountTypeShowDetails: "Show Account Details",
+   PlayerHandleOffline: "You are currently offline",
    AccountType: "Account Type",
    AccountTypeOnline: "Online",
    AccountTypeDesc:
diff --git a/src/scripts/ui/PlayerHandleComponent.tsx b/src/scripts/ui/PlayerHandleComponent.tsx
index f1050d8b..4bc7aa60 100644
--- a/src/scripts/ui/PlayerHandleComponent.tsx
+++ b/src/scripts/ui/PlayerHandleComponent.tsx
@@ -16,32 +16,34 @@ export function PlayerHandleComponent() {
    return (
       <fieldset>
          <legend>{t(L.PlayerHandle)}</legend>
-         <div className="row mv5">
-            <div className="text-strong">{user?.handle}</div>
-            <div>
+         {user == null ? (
+            <div className="text-strong">{t(L.PlayerHandleOffline)}</div>
+         ) : (
+            <div className="row">
+               <div className="text-strong">{user?.handle}</div>
                <img
                   className="ml5 player-flag"
                   src={getFlagUrl(user?.flag)}
                   title={getCountryName(user?.flag)}
                />
+               <div className="f1" />
+               <div
+                  className={classNames("text-link text-strong", { disabled: !user })}
+                  onClick={() => {
+                     if (user) {
+                        showModal(<ChangePlayerHandleModal />);
+                     } else {
+                        playError();
+                     }
+                  }}
+               >
+                  {t(L.ChangePlayerHandle)}
+               </div>
             </div>
-            <div className="f1" />
-            <div
-               className={classNames("text-link text-strong", { disabled: !user })}
-               onClick={() => {
-                  if (user) {
-                     showModal(<ChangePlayerHandleModal />);
-                  } else {
-                     playError();
-                  }
-               }}
-            >
-               {t(L.ChangePlayerHandle)}
-            </div>
-         </div>
+         )}
          {showDetails ? (
             <>
-               <div className="separator"></div>
+               <div className="separator" />
                <div className="row text-strong">
                   <div className="f1">{t(L.AccountType)}</div>
                   {opt.isOffline ? null : <div className="m-icon small mr5 text-green">wifi</div>}
@@ -57,7 +59,7 @@ export function PlayerHandleComponent() {
                <div className="text-desc text-small text-justify">{t(L.ThisRunTypeDesc)}</div>
             </>
          ) : (
-            <div className="text-small text-link" onClick={() => setShowDetails(true)}>
+            <div className="text-small text-link mt5" onClick={() => setShowDetails(true)}>
                {t(L.AccountTypeShowDetails)}
             </div>
          )}