Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.6 kB · 48 lines
TSX
at develop
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import type { AppRouter } from "@thorium/.server/init/router";import { replaceCharacters } from "@thorium/cards/LongRangeComm/shared";import { cn } from "@thorium/utils/cn";import type { inferProcedureInput } from "@thorium/utils/live-query/.server/types";
export function ReplacementDecoder({ letterMap, updateMessageDecoding,}: { letterMap: string; updateMessageDecoding: ( decoding: Extract< inferProcedureInput<AppRouter["longRangeComm"]["updateMessageDecoding"]>["decoding"], { type: "replacement" } >, ) => Promise<void>;}) { return ( <div className="grid h-full grid-flow-col-dense grid-cols-9 grid-rows-4 items-center gap-8 py-4"> {replaceCharacters.split("").map((l, i) => ( <div key={l} className="flex gap-2"> <div className="panel w-[3ch] p-2 text-center">{l}</div> <input className={cn("input w-[3ch] p-2 h-full text-center text-base", { "input-error": letterMap.indexOf(letterMap[i]) !== letterMap.lastIndexOf(letterMap[i]), "input-alert": letterMap.indexOf(letterMap[i]) === letterMap.lastIndexOf(letterMap[i]), })} defaultValue={letterMap[i]} maxLength={1} onChange={(event) => { const newLetterMap = letterMap.split(""); const newChar = event.currentTarget.value.slice(0, 1).toLowerCase().trim(); if (newChar) { newLetterMap[i] = newChar; updateMessageDecoding({ type: "replacement", letterMap: newLetterMap.slice(0, replaceCharacters.length).join(""), }); } }} /> </div> ))} </div> );}