-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
241 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| import { useMUD } from "../../../useMUD"; | ||
| import { Button } from "../Theme/SkyStrife/Button"; | ||
| import { Input } from "../Theme/SkyStrife/Input"; | ||
| import { Body } from "../Theme/SkyStrife/Typography"; | ||
| import { ChainIcon } from "./ChainIcon"; | ||
| import { PLUGIN_DOCS_URL, convertTsPluginToJs } from "./PluginManager"; | ||
| import { TerminalIcon } from "./TerminalIcon"; | ||
| import { PluginData } from "./types"; | ||
| import { useState } from "react"; | ||
| import { twMerge } from "tailwind-merge"; | ||
|
|
||
| function ImportPluginForm({ | ||
| setPlugin, | ||
| setManagerState, | ||
| }: { | ||
| setPlugin: (pluginKey: string, data: Partial<PluginData>) => void; | ||
| setManagerState: (state: "open" | "adding") => void; | ||
| }) { | ||
| const { | ||
| networkLayer: { | ||
| utils: { sendAnalyticsEvent }, | ||
| }, | ||
| } = useMUD(); | ||
|
|
||
| const [newPluginName, setNewPluginName] = useState(""); | ||
| const [pluginUrl, setPluginUrl] = useState(""); | ||
| const [newPluginError, setNewPluginError] = useState<string | null>(null); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-y-2"> | ||
| <Input label="Plugin Name" value={newPluginName} setValue={setNewPluginName} /> | ||
|
|
||
| <Input label="Plugin URL" value={pluginUrl} setValue={setPluginUrl} /> | ||
|
|
||
| <div className="h-0" /> | ||
|
|
||
| <Button | ||
| buttonType="primary" | ||
| className="w-full" | ||
| disabled={!newPluginName || !pluginUrl} | ||
| onClick={() => { | ||
| if (!newPluginName) { | ||
| setNewPluginError("Plugin name is required"); | ||
| return; | ||
| } | ||
|
|
||
| if (!pluginUrl) { | ||
| setNewPluginError("Plugin URL is required"); | ||
| return; | ||
| } | ||
|
|
||
| fetch(pluginUrl) | ||
| .then((res) => res.text()) | ||
| .then((code) => { | ||
| try { | ||
| const jsCode = convertTsPluginToJs(code); | ||
| setPlugin(newPluginName, { code: jsCode, source: "remote" }); | ||
| setNewPluginName(""); | ||
| setPluginUrl(""); | ||
| setNewPluginError(null); | ||
| setManagerState("open"); | ||
|
|
||
| sendAnalyticsEvent("plugin-add", { | ||
| name: newPluginName, | ||
| source: "remote", | ||
| }); | ||
| } catch (e) { | ||
| setNewPluginError((e as any).error?.message); | ||
| } | ||
| }) | ||
| .catch((e) => { | ||
| setNewPluginError(e.message); | ||
| }); | ||
| }} | ||
| > | ||
| Add | ||
| </Button> | ||
|
|
||
| {newPluginError && <div className="text-red-600 w-full text-center">{newPluginError}</div>} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function AddPlugin({ | ||
| setPlugin, | ||
| setManagerState, | ||
| }: { | ||
| setPlugin: (pluginKey: string, data: Partial<PluginData>) => void; | ||
| setManagerState: (state: "open" | "adding") => void; | ||
| }) { | ||
| const [addMethod, setAddMethod] = useState<"dev" | "remote">("remote"); | ||
| const [chosenAddMethod, setChosenAddMethod] = useState<"dev" | "remote" | null>(null); | ||
|
|
||
| const chooseAddMethodForm = ( | ||
| <> | ||
| <div | ||
| onClick={() => { | ||
| setAddMethod("remote"); | ||
| }} | ||
| className={twMerge( | ||
| "flex flex-col grow items-center justify-around w-full h-[128px] rounded-md", | ||
| "border border-[#DDDAD0] bg-white hover:border-[#1A6CBC] hover:bg-blue-300/30 cursor-pointer", | ||
| addMethod === "remote" && "border-[#1A6CBC] bg-blue-300/30" | ||
| )} | ||
| > | ||
| <div className="flex flex-col text-center items-center p-6"> | ||
| <div className="flex items-center gap-x-1"> | ||
| <ChainIcon /> | ||
| <span>Import a plugin</span> | ||
| </div> | ||
| <div className="h-2" /> | ||
| <Body style={{ fontSize: "12px" }}>Import a plugin from an external URL.</Body> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| onClick={() => { | ||
| setAddMethod("dev"); | ||
| }} | ||
| className={twMerge( | ||
| "flex flex-col grow items-center justify-around w-full h-[128px] rounded-md", | ||
| "border border-[#DDDAD0] bg-white hover:border-[#1A6CBC] hover:bg-blue-300/30 cursor-pointer", | ||
| addMethod === "dev" && "border-[#1A6CBC] bg-blue-300/30" | ||
| )} | ||
| > | ||
| <div className="flex flex-col text-center items-center p-6"> | ||
| <div className="flex items-center gap-x-1"> | ||
| <TerminalIcon /> | ||
| <span>Create plugins locally</span> | ||
| </div> | ||
| <div className="h-2" /> | ||
| <Body style={{ fontSize: "12px" }}>Run the Sky Strife plugin dev server on your local machine.</Body> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="h-0" /> | ||
|
|
||
| <Button | ||
| buttonType="primary" | ||
| disabled={!addMethod} | ||
| onClick={() => { | ||
| if (addMethod === "dev") { | ||
| window.open(PLUGIN_DOCS_URL, "_blank"); | ||
| return; | ||
| } | ||
|
|
||
| setChosenAddMethod(addMethod); | ||
| }} | ||
| > | ||
| {addMethod === "dev" ? "Visit docs" : "Import"} | ||
| </Button> | ||
| </> | ||
| ); | ||
|
|
||
| const addRemoteForm = <ImportPluginForm setPlugin={setPlugin} setManagerState={setManagerState} />; | ||
| const addDevForm = <div>Not implemented</div>; | ||
| const addForm = addMethod === "remote" ? addRemoteForm : addDevForm; | ||
|
|
||
| return <div className="flex flex-col gap-y-3 grow pb-4">{chosenAddMethod ? addForm : chooseAddMethodForm}</div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export function ChainIcon() { | ||
| return ( | ||
| <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| d="M9.29335 5.79202C9.72657 5.99886 10.1038 6.30664 10.3934 6.68951C10.683 7.07238 10.8765 7.51916 10.9576 7.99232C11.0388 8.46548 11.0052 8.9512 10.8596 9.40867C10.7141 9.86614 10.4609 10.282 10.1214 10.6214L7.12135 13.6213C6.55874 14.184 5.79567 14.5 5.00002 14.5C4.20436 14.5 3.4413 14.184 2.87869 13.6213C2.31607 13.0587 2 12.2957 2 11.5C2 10.7044 2.31607 9.9413 2.87869 9.37868L4.05002 8.20735M12.95 7.79268L14.1213 6.62135C14.684 6.05874 15 5.29567 15 4.50002C15 3.70436 14.684 2.9413 14.1213 2.37869C13.5587 1.81607 12.7957 1.5 12 1.5C11.2044 1.5 10.4413 1.81607 9.87868 2.37869L6.87868 5.37868C6.53911 5.71802 6.28593 6.13389 6.14041 6.59137C5.99488 7.04884 5.96127 7.53456 6.0424 8.00772C6.12352 8.48087 6.31701 8.92765 6.60661 9.31053C6.89621 9.6934 7.27347 10.0012 7.70669 10.208" | ||
| stroke="#25241D" | ||
| strokeWidth="1.5" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.