chore: Update Platform Selector in Start Script Generator (#379)

PaperMC · May 6, 2024 · 53c47c3 · 53c47c3
1 parent d37aab8
commit 53c47c3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/src/components/StartScriptGenerator.tsx b/src/components/StartScriptGenerator.tsx
@@ -10,6 +10,14 @@ const WINDOWS_AUTO_RESTART =
 const LINUX_AUTO_RESTART =
   "while [ true ]; do\n    %%CONTENT%%\n    echo Server restarting...\n    echo Press CTRL + C to stop.\ndone";
 
+const PLATFORMS: Option[] = [
+  { label: "Linux/Mac", value: "linux" },
+  { label: "Windows", value: "windows" },
+];
+
+const LINUX = PLATFORMS[0];
+const WINDOWS = PLATFORMS[1];
+
 const FLAGS: Option[] = [
   {
     label: "Aikar's",
@@ -67,20 +75,20 @@ const generateStartCommand = (
   filename: string,
   guiEnabled: boolean,
   autoRestartEnabled: boolean,
-  platform: string
+  platform: Option
 ) => {
   setTimeout(resizeOutput, 0);
   let content = "";
   const command = `java -Xmx${memory * 1024}M -Xms${memory * 1024}M ${selectedFlag.value}${selectedFlag === NONE ? "" : " "}-jar ${filename === "" ? "server.jar" : filename} ${guiEnabled || selectedFlag === VELOCITY ? "" : "nogui"}`;
 
   if (autoRestartEnabled)
-    content = (platform === "windows" ? WINDOWS_AUTO_RESTART : LINUX_AUTO_RESTART).replace(
+    content = (platform === WINDOWS ? WINDOWS_AUTO_RESTART : LINUX_AUTO_RESTART).replace(
       "%%CONTENT%%",
       command
     );
-  else content = platform === "windows" ? command + "\n\npause" : command;
+  else content = platform === WINDOWS ? command + "\n\npause" : command;
 
-  content = (platform === "linux" ? "#!/bin/bash\n\n" : "@echo off\n\n") + content;
+  content = (platform === LINUX ? "#!/bin/bash\n\n" : "@echo off\n\n") + content;
 
   return content;
 };
@@ -104,7 +112,7 @@ const StartScriptGenerator: React.FC = () => {
   const [selectedFlag, setSelectedFlag] = useState(AIKARS);
   const [guiEnabled, setGuiEnabled] = useState(false);
   const [autoRestart, setAutoRestart] = useState(false);
-  const [platform, setPlatform] = useState("linux");
+  const [platform, setPlatform] = useState(LINUX);
   const [copySuccess, setCopySuccess] = useState(false);
   const [downloadSuccess, setDownloadSuccess] = useState(false);
 
@@ -132,7 +140,7 @@ const StartScriptGenerator: React.FC = () => {
     );
     const link = document.createElement("a");
     link.href = URL.createObjectURL(blob);
-    link.download = "start." + (platform === "windows" ? "bat" : "sh");
+    link.download = "start." + (platform === WINDOWS ? "bat" : "sh");
     link.click();
     link.remove();
   };
@@ -143,7 +151,7 @@ const StartScriptGenerator: React.FC = () => {
 
   return (
     <div className="server-config-container">
-      <h2>Server Configuration</h2>
+      <h4>Server Configuration</h4>
       <div className="config-section">
         <label id="memory-slider-label" className="sr-only">
           Memory Usage: {memory}GB
@@ -181,12 +189,16 @@ const StartScriptGenerator: React.FC = () => {
             className={"filename-input"}
           />
         </div>
+        <div className={"config-section"}>
+          <label htmlFor="platform-dropdown">Platform:</label>
+          <Select options={PLATFORMS} value={platform} onSelect={setPlatform} />
+        </div>
         <div className="config-section">
           <label htmlFor="flags-dropdown">Flags:</label>
           <Select options={FLAGS} value={selectedFlag} onSelect={setSelectedFlag} />
         </div>
       </div>
-      <div className="config-section">
+      <div className="config-section toggles">
         {selectedFlag != VELOCITY && (
           <div className={"gui-container"}>
             <label className={"margin-right--sm"}>GUI:</label>
@@ -209,20 +221,9 @@ const StartScriptGenerator: React.FC = () => {
           />
           <label htmlFor="restart-toggle" className="switch"></label>
         </div>
-
-        <div className={"platform-selector"}>
-          <label>Platform:</label>
-          <select id={"platform-select"} onChange={(event) => setPlatform(event.target.value)}>
-            <option value="linux">Linux/Mac</option>
-            <option value="windows">Windows</option>
-          </select>
-          {platform === "windows" && (
-            <p className={"windows-warning"}>For optimal performance, we recommend running Linux</p>
-          )}
-        </div>
       </div>
       <div className="config-section">
-        <label>Generated Command:</label>
+        <h4>Generated Command</h4>
         <textarea
           className={"output-command"}
           value={generateStartCommand(

diff --git a/src/css/start-script-generator.css b/src/css/start-script-generator.css
@@ -15,7 +15,8 @@ html[data-theme="dark"] {
 .server-config-container {
   background-color: var(--background-gen-color);
   border-radius: 10px;
-  padding: 20px;
+  padding-inline: 20px;
+  padding-block: 20px 10px;
   color: var(--gen-text-color);
   width: 100%;
 }
@@ -27,6 +28,11 @@ html[data-theme="dark"] {
   margin-bottom: 10px;
 }
 
+.toggles {
+  flex-direction: row;
+  gap: 1rem;
+}
+
 .filename-input {
   display: flex;
   flex-direction: row;
@@ -146,6 +152,7 @@ input[type="range"]:focus::-webkit-slider-thumb {
   border-radius: 5px;
   min-height: 40px;
   max-height: 150px;
+  margin-bottom: 1rem;
 }
 
 .platform-selector {