Skip to content

Instantly share code, notes, and snippets.

View littensy's full-sized avatar
:atom:

richard littensy

:atom:
View GitHub Profile
@littensy
littensy / atoms.ts
Last active February 22, 2024 05:48
Incomplete state manager test inspired by Jotai
interface Atom<State> {
listeners: Set<(value: State) => void>;
get<_Result>(selector?: undefined): State;
get<Result>(selector: (state: State) => Result): Result;
set(state: State): void;
set(updater: (previous: State) => State): void;
memoize(equality: (previous: State, current: State) => boolean): Atom<State>;
}
interface DerivedAtom<State> extends Atom<State> {
@littensy
littensy / use-px.ts
Last active March 18, 2024 16:29
Roblox-TS React hook for responsive sizes
import { useCamera, useDebounceState, useEventListener } from "@rbxts/pretty-react-hooks";
import { useMemo } from "@rbxts/roact";
interface ScaleFunction {
/**
* Scales `pixels` based on the current viewport size and rounds the result.
*/
(pixels: number): number;
/**
* Scales `pixels` and rounds the result to the nearest even number.
@littensy
littensy / background-blur.tsx
Last active February 15, 2024 05:18
Roblox-TS React background blur component
import { useCamera, useEventListener } from "@rbxts/pretty-react-hooks";
import Roact, { Portal, useRef, useState } from "@rbxts/roact";
import { GuiService, RunService } from "@rbxts/services";
import { useParentRadius } from "client/hooks/use-parent-radius";
import { usePx } from "client/hooks/use-px";
import { useQualityLevel } from "client/hooks/use-quality-level";
const DISTANCE = 0.005;
const BLUR_QUALITY_LEVEL = 8;
const CYLINDER_ANGLE = CFrame.Angles(math.rad(90), 0, 0);
@littensy
littensy / rem-provider.tsx
Created August 5, 2023 04:52
🔥 Mock rem units in React-TS
import { map, useDebounceState, useViewport } from "@rbxts/pretty-react-hooks";
import Roact, { createContext } from "@rbxts/roact";
export interface RemProviderProps extends Roact.PropsWithChildren {
baseRem?: number;
remOverride?: number;
minimumRem?: number;
maximumRem?: number;
}
@littensy
littensy / profiler.ts
Created July 31, 2023 00:48
Roblox React component profiler hack
import Roact, { FunctionComponent, createElement } from "@rbxts/roact";
export function profiler<P extends object>(name: string, render: FunctionComponent<P>): FunctionComponent<P> {
return (props: P) => {
debug.profilebegin(name);
const result = render(props);
debug.profileend();
return result;
};
}
@littensy
littensy / background-blur.tsx
Created June 29, 2023 03:38
A bunch of components I like to use often
import { useBindingListener, useCamera } from "@rbxts/pretty-roact-hooks";
import Roact from "@rbxts/roact";
import { useState } from "@rbxts/roact-hooked";
interface BackgroundBlurProps {
blurSize?: number | Roact.Binding<number>;
}
/**
* Wraps a BlurEffect
@littensy
littensy / Border.tsx
Created June 28, 2023 21:49
Border component for Roact Hooked
import { joinAnyBindings, mapBinding } from "@rbxts/pretty-roact-hooks";
import Roact from "@rbxts/roact";
import { useMemo } from "@rbxts/roact-hooked";
import { roundEven } from "client/utils/number-utils";
import { Frame } from "./frame";
interface BorderProps extends Roact.PropsWithChildren {
borderMode?: BorderMode;
borderColor?: Color3 | Roact.Binding<Color3>;
borderThickness?: number | Roact.Binding<number>;