feat: refactor start script select into its own component, add scss, …

…use custom select for command converter
PaperMC · May 3, 2024 · e4248d8 · e4248d8
1 parent 9eb5760
commit e4248d8
Show file tree

Hide file tree

Showing 10 changed files with 267 additions and 170 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -40,7 +40,7 @@ const config: Config = {
   baseUrlIssueBanner: false,
   clientModules: [
     require.resolve("./src/css/custom.css"),
-    require.resolve("./src/css/ui.css"),
+    require.resolve("./src/css/ui.scss"),
     require.resolve("@fontsource/jetbrains-mono/index.css"),
   ],
 
@@ -216,6 +216,7 @@ const config: Config = {
     ],
     "@docusaurus/plugin-debug",
     "@docusaurus/plugin-vercel-analytics",
+    "docusaurus-plugin-sass",
   ],
 
   themeConfig: {

diff --git a/package.json b/package.json
@@ -32,12 +32,14 @@
     "@mdx-js/react": "3.0.1",
     "axios": "1.6.8",
     "clsx": "2.1.0",
+    "docusaurus-plugin-sass": "^0.2.5",
     "js-yaml": "4.1.0",
     "prism-react-renderer": "^2.3.1",
     "raw-loader": "4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown": "8.0.7"
+    "react-markdown": "8.0.7",
+    "sass": "^1.76.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.2.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ItemCommandConverter.tsx b/src/components/ItemCommandConverter.tsx
@@ -1,14 +1,21 @@
 import React, { useState } from "react";
 import Button from "@site/src/components/ui/Button";
+import Select, { Option } from "@site/src/components/ui/Select";
 import "@site/src/css/item-command-converter.css";
 
+const MODES: Option[] = [
+  { label: "Command", value: "command" },
+  { label: "Item Argument", value: "item-argument" },
+  { label: "Component Argument", value: "component-argument" },
+];
+
 const ItemCommandConverter: React.FC = () => {
   const [convertSuccess, setConvertSuccess] = useState(false);
   const [convertError, setConvertError] = useState(false);
   const [copySuccess, setCopySuccess] = useState(false);
   const [input, setInput] = useState("");
   const [output, setOutput] = useState("");
-  const [mode, setMode] = useState("command");
+  const [mode, setMode] = useState(MODES[0]);
   const [loading, setLoading] = useState(false);
 
   const toggleState = (setState: React.Dispatch<React.SetStateAction<boolean>>) => {
@@ -22,7 +29,7 @@ const ItemCommandConverter: React.FC = () => {
     setOutput("");
     setLoading(true);
     try {
-      const response = await fetch("https://item-converter.papermc.io/convert-" + mode, {
+      const response = await fetch("https://item-converter.papermc.io/convert-" + mode.value, {
         method: "POST",
         body: input,
       });
@@ -67,11 +74,7 @@ const ItemCommandConverter: React.FC = () => {
         />
         <label>
           Mode:
-          <select value={mode} onChange={(event) => setMode(event.target.value)}>
-            <option value="command">Command</option>
-            <option value="item-argument">Item Argument</option>
-            <option value="component-argument">Component Argument</option>
-          </select>
+          <Select options={MODES} value={mode} onSelect={setMode} />
         </label>
       </div>
       <label>

diff --git a/src/components/StartScriptGenerator.tsx b/src/components/StartScriptGenerator.tsx
@@ -1,23 +1,17 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import "@site/src/css/start-script-generator.css";
-import clsx from "clsx";
 import Button from "@site/src/components/ui/Button";
+import Select, { Option } from "@site/src/components/ui/Select";
 
 const markerPoints = [4, 8, 12, 16, 20];
 
-type FlagType = {
-  label: string;
-  value: string;
-  description: string;
-};
-
 const WINDOWS_AUTO_RESTART =
   ":start\n%%CONTENT%%\n\necho Server restarting...\necho Press CTRL + C to stop.\ngoto :start";
 const LINUX_AUTO_RESTART =
   "while [ true ]; do\n    %%CONTENT%%\n    echo Server restarting...\n    echo Press CTRL + C to stop.\ndone";
 
-const FLAGS: { [key: string]: FlagType } = {
-  AIKARS: {
+const FLAGS: Option[] = [
+  {
     label: "Aikar's",
     value: [
       "-XX:+AlwaysPreTouch",
@@ -43,12 +37,12 @@ const FLAGS: { [key: string]: FlagType } = {
     ].join(" "),
     description: "Optimized Minecraft flags by Aikar for better server performance.",
   },
-  NONE: {
+  {
     label: "None",
     value: "",
     description: "No additional flags.",
   },
-  VELOCITY: {
+  {
     label: "Velocity",
     value: [
       "-XX:+AlwaysPreTouch",
@@ -60,21 +54,24 @@ const FLAGS: { [key: string]: FlagType } = {
     ].join(" "),
     description: "Flags recommended for use with the Velocity proxy server.",
   },
-};
+];
+const AIKARS = FLAGS[0];
+const NONE = FLAGS[1];
+const VELOCITY = FLAGS[2];
 
 const isServerSide = typeof document === "undefined";
 
 const generateStartCommand = (
   memory: number,
-  selectedFlag: FlagType,
+  selectedFlag: Option,
   filename: string,
   guiEnabled: boolean,
   autoRestartEnabled: boolean,
   platform: string
 ) => {
   setTimeout(resizeOutput, 0);
   let content = "";
-  const command = `java -Xmx${memory * 1024}M -Xms${memory * 1024}M ${selectedFlag.value}${selectedFlag === FLAGS.NONE ? "" : " "}-jar ${filename === "" ? "server.jar" : filename} ${guiEnabled || selectedFlag === FLAGS.VELOCITY ? "" : "nogui"}`;
+  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(
@@ -104,21 +101,13 @@ const resizeOutput = () => {
 const StartScriptGenerator: React.FC = () => {
   const [memory, setMemory] = useState(4.0);
   const [filename, setFilename] = useState("server.jar");
-  const [selectedFlag, setSelectedFlag] = useState(FLAGS.AIKARS);
-  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [selectedFlag, setSelectedFlag] = useState(AIKARS);
   const [guiEnabled, setGuiEnabled] = useState(false);
   const [autoRestart, setAutoRestart] = useState(false);
   const [platform, setPlatform] = useState("linux");
-  const dropdownRef = useRef(null);
   const [copySuccess, setCopySuccess] = useState(false);
   const [downloadSuccess, setDownloadSuccess] = useState(false);
 
-  const handleClickOutside = (event: { target: EventTarget | null }) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setDropdownVisible(false);
-    }
-  };
-
   const handleGreenButtonHighlight = (setState: React.Dispatch<React.SetStateAction<boolean>>) => {
     setState(true);
     setTimeout(function () {
@@ -150,12 +139,6 @@ const StartScriptGenerator: React.FC = () => {
 
   useEffect(() => {
     resizeOutput();
-    if (isServerSide) return;
-    document.addEventListener("mousedown", handleClickOutside);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
   }, [memory, filename, selectedFlag, guiEnabled, autoRestart]);
 
   return (
@@ -200,44 +183,22 @@ const StartScriptGenerator: React.FC = () => {
         </div>
         <div className="config-section">
           <label htmlFor="flags-dropdown">Flags:</label>
-          <div className="custom-dropdown" ref={dropdownRef}>
-            <div className="selected-flag" onClick={() => setDropdownVisible(!dropdownVisible)}>
-              {selectedFlag.label}
-            </div>
-            {dropdownVisible && (
-              <div className="dropdown-content">
-                {Object.values(FLAGS).map((flag) => (
-                  <div
-                    key={flag.label}
-                    className={clsx(
-                      "dropdown-item",
-                      flag === selectedFlag && "dropdown-item-selected"
-                    )}
-                    onClick={() => {
-                      setSelectedFlag(flag);
-                      setDropdownVisible(false);
-                    }}
-                  >
-                    <div className="flag-label">{flag.label}</div>
-                    <div className="flag-description">{flag.description}</div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+          <Select options={FLAGS} value={selectedFlag} onSelect={setSelectedFlag} />
         </div>
       </div>
       <div className="config-section">
-        <div className={"gui-container"}>
-          <label className={"margin-right--sm"}>GUI:</label>
-          <input
-            type="checkbox"
-            id="gui-toggle"
-            className="checkbox"
-            onChange={() => setGuiEnabled(!guiEnabled)}
-          />
-          <label htmlFor="gui-toggle" className="switch"></label>
-        </div>
+        {selectedFlag != VELOCITY && (
+          <div className={"gui-container"}>
+            <label className={"margin-right--sm"}>GUI:</label>
+            <input
+              type="checkbox"
+              id="gui-toggle"
+              className="checkbox"
+              onChange={() => setGuiEnabled(!guiEnabled)}
+            />
+            <label htmlFor="gui-toggle" className="switch"></label>
+          </div>
+        )}
         <div className={"gui-container"}>
           <label className={"margin-right--sm"}>Auto-Restart:</label>
           <input