From f14bfcaed6381dda1179f02a51ad54adea762b16 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Sat, 21 May 2022 21:58:04 -0700
Subject: [PATCH] port help element

---
 src/ui/components/MiniDialog.tsx          | 13 +++++++----
 src/ui/components/ServerLaunchSection.tsx |  2 +-
 src/ui/components/common/HelpButton.css   | 15 +++++++++++++
 src/ui/components/common/HelpButton.tsx   | 27 ++++++++++++++++++++++-
 4 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/ui/components/MiniDialog.tsx b/src/ui/components/MiniDialog.tsx
index c3ca912..a6881f5 100644
--- a/src/ui/components/MiniDialog.tsx
+++ b/src/ui/components/MiniDialog.tsx
@@ -6,6 +6,7 @@ import './MiniDialog.css'
 interface IProps {
   children: React.ReactNode[] | React.ReactNode;
   title?: string;
+  closeable?: boolean;
   closeFn: () => void;
 }
 
@@ -17,10 +18,14 @@ export default class MiniDialog extends React.Component<IProps, never> {
   render() {
     return (
       <div className="MiniDialog">
-        <div className="MiniDialogTop" onClick={this.props.closeFn}>
-          <span>{this.props?.title}</span>
-          <img src={Close} className="MiniDialogClose" />
-        </div>
+        {
+          this.props.closeable !== undefined && this.props.closeable ?
+            <div className="MiniDialogTop" onClick={this.props.closeFn}>
+              <span>{this.props?.title}</span>
+              <img src={Close} className="MiniDialogClose" />
+            </div> : null
+        }
+
         <div className="MiniDialogInner">
           {this.props.children}
         </div>
diff --git a/src/ui/components/ServerLaunchSection.tsx b/src/ui/components/ServerLaunchSection.tsx
index ae5f394..9014f58 100644
--- a/src/ui/components/ServerLaunchSection.tsx
+++ b/src/ui/components/ServerLaunchSection.tsx
@@ -150,7 +150,7 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
           <TextInput style={{
             width: '10%',
           }} id="port" key="port" placeholder={this.state.portPlaceholder} onChange={this.setPort}/>
-          <HelpButton />
+          <HelpButton contents="Ensure this is the Dispatch server port, not the Game server port. This is almost always '443'." />
         </div>
 
         <div className="ServerLaunchButtons">
diff --git a/src/ui/components/common/HelpButton.css b/src/ui/components/common/HelpButton.css
index 94cec92..0b23e3e 100644
--- a/src/ui/components/common/HelpButton.css
+++ b/src/ui/components/common/HelpButton.css
@@ -9,7 +9,22 @@
   filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 20%));
 }
 
+.HelpButton:hover {
+  cursor: pointer;
+}
+
 .HelpButton img {
   height: 100%;
   filter: invert(100%) sepia(2%) saturate(201%) hue-rotate(47deg) brightness(117%) contrast(100%);
+}
+
+.HelpContents {
+  text-align: center;
+}
+
+.HelpContents .MiniDialog {
+  bottom: 80%;
+  left: 35%;
+  width: 60%;
+  height: 60%;
 }
\ No newline at end of file
diff --git a/src/ui/components/common/HelpButton.tsx b/src/ui/components/common/HelpButton.tsx
index cad14c5..f357be0 100644
--- a/src/ui/components/common/HelpButton.tsx
+++ b/src/ui/components/common/HelpButton.tsx
@@ -2,8 +2,10 @@ import React from 'react'
 
 import './HelpButton.css'
 import Help from '../../../resources/icons/help.svg'
+import MiniDialog from '../MiniDialog'
 
 interface IProps {
+  contents: string
   id?: string
 }
 
@@ -14,14 +16,37 @@ interface IState {
 export default class HelpButton extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
+
+    this.state = {
+      opened: false
+    }
+
+    this.setOpen = this.setOpen.bind(this)
+    this.setClosed = this.setClosed.bind(this)
+  }
+
+  setOpen() {
+    this.setState({ opened: true })
+  }
+
+  setClosed() {
+    this.setState({ opened: false })
   }
 
   render() {
     return (
       <div className="HelpSection">
-        <div className="HelpButton">
+        <div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
           <img src={Help} />
         </div>
+
+        <div className="HelpContents" style={{
+          display: this.state.opened ? 'block' : 'none'
+        }}>
+          <MiniDialog closeFn={this.setClosed}>
+            {this.props.contents}
+          </MiniDialog>
+        </div>
       </div>
     )
   }