Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.5 kB · 173 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174import { q } from "@thorium/context/AppContext";import { toast } from "@thorium/context/ToastContext";import { InterpolateInfo } from "@thorium/routes/config/reports/InterpolateInfo";import { useConfirm } from "@thorium/ui/AlertDialog";import Button from "@thorium/ui/Button";import { Icon } from "@thorium/ui/Icon";import Input from "@thorium/ui/Input";import throttle from "lodash.throttle";import { startTransition, Suspense, useCallback, useState } from "react";import { useNavigate, Navigate, href } from "react-router";
import type { Route } from "./+types/textPattern";
export default function TextPatternDetail({ params: { textPatternId, pluginId },}: Route.ComponentProps) { const navigate = useNavigate(); const confirm = useConfirm(); const [item] = q.plugin.textPattern.get.useNetRequest({ pluginId, textPatternId, }); const [error, setError] = useState(false);
const setTextPattern = useCallback( throttle((textPattern: string) => { q.plugin.textPattern.update.netSend({ pluginId, textPatternId, textPattern, }); }, 100), [], );
if (!textPatternId || !item) return <Navigate to={href("/config/:pluginId/textPatterns", { pluginId })} />;
return ( <fieldset key={textPatternId} className="flex flex-1 flex-col gap-4 overflow-y-auto"> <div className="flex gap-4"> <div className="flex min-w-1/3 flex-col gap-4"> <Input labelHidden={false} isInvalid={error} invalidMessage="Name is required" label="Name" placeholder="Nouns" defaultValue={item.name} onChange={() => setError(false)} onBlur={async (e: any) => { if (!e.target.value) return setError(true); try { const result = await q.plugin.textPattern.update.netSend({ pluginId, textPatternId, name: e.target.value, }); void navigate( href("/config/:pluginId/textPatterns/:textPatternId", { pluginId, textPatternId: result.textPatternId, }), ); } catch (err) { if (err instanceof Error) { toast({ title: "Error renaming text pattern", body: err.message, color: "error", }); } } }} /> <Input labelHidden={false} label="Category" placeholder="Parts" defaultValue={item.category} onChange={() => setError(false)} onBlur={async (e: any) => { await q.plugin.textPattern.update.netSend({ pluginId, textPatternId, category: e.target.value, }); }} /> </div> <Input as="textarea" className="!h-32 flex-auto" labelHidden={false} label="Description" defaultValue={item.description} onBlur={(e: any) => q.plugin.textPattern.update.netSend({ pluginId, textPatternId, description: e.target.value, }) } /> </div> <Input as="textarea" className="!h-32" labelHidden={false} label={ <span className="relative"> Text Pattern <InterpolateInfo className="top-0" basic /> </span> } defaultValue={item.textPattern} onChange={(e) => setTextPattern(e.target.value)} /> <Suspense> <TextPatternOutputField textPatternId={textPatternId} pluginId={pluginId} /> </Suspense> <div> <Button className="btn-outline btn-error btn-sm w-full" disabled={!textPatternId} onClick={async () => { if ( !textPatternId || !(await confirm({ header: "Are you sure you want to delete this text pattern?", })) ) return; await q.plugin.textPattern.delete.netSend({ pluginId, textPatternId, }); await navigate(`/config/${pluginId}/textPatterns`); }} > Delete Text Pattern </Button> </div> </fieldset> );}
function TextPatternOutputField({ textPatternId, pluginId,}: { textPatternId: string; pluginId: string;}) { const [randomSeed, setRandomSeed] = useState("thorium");
const [stringOutput] = q.textPattern.evaluate.useNetRequest({ textPatternId, pluginId, randomSeed, });
return ( <div className="flex items-end gap-2"> <Input label="Output" readOnly value={stringOutput.output} /> <Button className="btn-outline btn-warning" onClick={() => startTransition(() => setRandomSeed(Math.random().toString()))} > <Icon name="shuffle" /> </Button> </div> );}