Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.6 kB · 58 lines
TSX
at develop
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import type { AppRouter } from "@thorium/.server/init/router";import { rotateCharacters } from "@thorium/cards/LongRangeComm/shared";import type { inferProcedureInput } from "@thorium/utils/live-query/.server/types";
export function RotationDecoder({ rotation, updateMessageDecoding,}: { rotation: number; updateMessageDecoding: ( decoding: Extract< inferProcedureInput<AppRouter["longRangeComm"]["updateMessageDecoding"]>["decoding"], { type: "rotation" } >, ) => Promise<void>;}) { return ( <div className="flex h-full flex-col justify-center gap-8"> <div className="grid text-xl" style={{ gridTemplateColumns: `repeat(${rotateCharacters.length}, minmax(0, 1fr))`, }} > <div className="contents"> {rotateCharacters.split("").map((l) => ( <span key={l} className="border-white/50 text-center not-last:border-r"> {l} </span> ))} </div> <div className="contents"> {(rotateCharacters.slice(rotation) + rotateCharacters.slice(0, rotation)) .split("") .map((l) => ( <span key={l} className="border-white/50 text-center not-last:border-r"> {l} </span> ))} </div> </div> <input type="range" className="range range-primary range-xl w-full" min={0} max={rotateCharacters.length - 1} step={1} value={rotateCharacters.length - rotation} onInput={async (event) => updateMessageDecoding({ type: "rotation", rotation: rotateCharacters.length - Number(event.currentTarget.value), }) } /> </div> );}