port help element

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>

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">

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%;
 }

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>
     )
   }