From ee2423941d972ace7f057887f6db35b5094028c8 Mon Sep 17 00:00:00 2001
From: samuelmaddock <samuel.maddock@gmail.com>
Date: Sun, 30 Sep 2018 21:56:56 -0400
Subject: [PATCH] Add link to network troubleshooting guide for timeouts.

---
 app/renderer/components/lobby/Disconnect.css |  4 ++++
 app/renderer/components/lobby/Disconnect.tsx | 12 +++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/renderer/components/lobby/Disconnect.css b/app/renderer/components/lobby/Disconnect.css
index 02b95ae8..c5920263 100644
--- a/app/renderer/components/lobby/Disconnect.css
+++ b/app/renderer/components/lobby/Disconnect.css
@@ -17,6 +17,10 @@
   margin-right: 0.5rem;
 }
 
+.info a {
+  text-decoration: underline;
+}
+
 .titlebar {
   composes: titlebar from '../GameLobby.css';
 }
diff --git a/app/renderer/components/lobby/Disconnect.tsx b/app/renderer/components/lobby/Disconnect.tsx
index 0e59a3bc..8aab5315 100644
--- a/app/renderer/components/lobby/Disconnect.tsx
+++ b/app/renderer/components/lobby/Disconnect.tsx
@@ -18,6 +18,7 @@ export class Disconnect extends Component<IProps> {
     const reasonKey: any = NetworkDisconnectMessages[reason]
     const msg = t(reasonKey) || reasonKey
 
+    // prettier-ignore
     return (
       <div className={styles.container}>
         <TitleBar className={styles.titlebar} />
@@ -25,7 +26,16 @@ export class Disconnect extends Component<IProps> {
         <h1 className={styles.header}>{t('disconnected')}</h1>
         <p className={styles.info}>
           <Icon name="info" />
-          {msg}
+          <span>
+            {msg}
+
+            {/* Temporary message for linking to guide until l10n supports links. */}
+            {reason === NetworkDisconnectReason.Timeout && (
+              <>
+                . See <ExternalLink href="https://github.com/samuelmaddock/metastream/wiki/Network-Troubleshooting">Network Troubleshooting guide</ExternalLink> for help.
+              </>
+            )}
+          </span>
         </p>
         <Link to="/">
           <MenuButton size="medium">{t('ok')}</MenuButton>