Flares

.eslintrc

@@ -45,9 +45,12 @@
 				"ignoreVoid": true
 			}
 		],
-		"@typescript-eslint/no-explicit-any": "warn",
 		"@typescript-eslint/no-unused-vars": "warn",
-		"@typescript-eslint/explicit-function-return-type": "warn",
+		"@typescript-eslint/explicit-function-return-type": [
+			"warn", {
+				"allowExpressions": true
+			}
+		],
 		"@typescript-eslint/interface-name-prefix": "off",
 		"@typescript-eslint/no-empty-function": "off",
 		"@typescript-eslint/no-empty-interface": "off",
@@ -85,11 +88,18 @@
 				"allowEmptyCatch": true
 			}
 		],
-		"no-void": "off",
 		"no-extra-boolean-cast": "off",
 		"no-undef-init": "error",
 		"prefer-const": "off",
 		"simple-import-sort/exports": "warn",
 		"simple-import-sort/imports": "warn"
-	}
-}
+	},
+	"overrides": [
+		{
+			"files": ["*.tsx"],
+			"rules": {
+				"@typescript-eslint/no-unused-vars": "off"
+			}
+		}
+	]
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rbxts/tina",
+  "name": "tina",
   "version": "1.0.0",
   "description": "",
   "main": "out/init.lua",
@@ -45,7 +45,12 @@
   },
   "dependencies": {
     "@eslint/github-action": "^0.1.0",
+    "@rbxts/roact": "^1.4.4-ts.0",
+    "@rbxts/roact-hooked": "^2.1.3",
+    "@rbxts/roact-rodux-hooked": "^1.1.3",
+    "@rbxts/rodux": "^3.0.0-ts.3",
+    "@rbxts/rowind-mini": "^1.0.0",
     "@rbxts/services": "^1.5.1",
     "roblox-ts": "^2.0.4"
   }
-}
+}

src/index.ts

@@ -14,6 +14,10 @@ import Scheduler from "./lib/process/scheduler";
 import { Users } from "./lib/user";
 import { AbstractUser } from "./lib/user/default";
 import { UserType } from "./lib/user/default/types";
+/* User abstraction class */
+import { ConsoleActionName } from "./lib/user-interface/console/console-actions";
+import { ClientStore } from "./lib/user-interface/store";
+import { formatFlareTraceback } from "./lib/utilities/string-utils";
 
 export enum Protocol {
 	/** Create/Load Online User Data */
@@ -48,8 +52,6 @@ namespace Tina {
 			Identifiers._init();
 		}
 
-		Logger.setName(name);
-
 		// TODO: Auto-Detect `manifest.tina.yml` and load it.
 		return new TinaGame();
 	}
@@ -81,8 +83,6 @@ namespace Tina {
 	 */
 	export function setUserClass(userClass: new (ref: Player | number) => UserType): void {
 		Users.changeUserClass(userClass); // Changes internally the way user is defined and constructed
-
-		Logger.warn("The User Class has been changed to:", userClass); // Not sure why this is being warned at all.
 	}
 
 	/**
@@ -106,7 +106,18 @@ namespace Tina {
 		return new Process(name, Scheduler);
 	}
 
-	export const Logger = new Scope("unnamed");
+	export function flare(eventName: string): void {
+		ClientStore.dispatch({ type: ConsoleActionName.AddFlare, eventName });
+	}
+
+	export function oops(eventName: string): void {
+		const message = formatFlareTraceback(debug.traceback(undefined, 1));
+		ClientStore.dispatch({ type: ConsoleActionName.FireFlare, eventName, message });
+	}
+
+	export function getLogger(): void {
+		return;
+	}
 
 	/**
 	 * Used to connect to Tina's internal events, such as when a user is registed, etc.

src/lib/types/common.d.ts

@@ -0,0 +1,2 @@
+export type IFlare = { eventName: string; amount: number; message?: string };
+export type EnumOrName<T extends EnumItem> = T | T["Name"];

src/lib/ui/console/console.story.tsx

@@ -0,0 +1,16 @@
+import Roact from "@rbxts/roact";
+import { Div } from "@rbxts/rowind-mini";
+
+export = function (parent: Instance) {
+	const UI = (
+		<Div className="bg-gray-800 w-100% h-100%">
+			<Div className="bg-gray-700 w-100% h-12% flex-left"></Div>
+		</Div>
+	);
+
+	const MountedUI = Roact.mount(UI, parent);
+
+	return function () {
+		Roact.unmount(MountedUI);
+	};
+};

src/lib/user-interface/common/padding.tsx

@@ -0,0 +1,32 @@
+import Roact from "@rbxts/roact";
+
+interface Props {
+	All?: number;
+	Horizontal?: number;
+	Vertical?: number;
+	Top?: number;
+	Bottom?: number;
+	Left?: number;
+	Right?: number;
+}
+
+const Padding: Roact.FunctionComponent<Props> = ({
+	All = 0,
+	Horizontal = 0,
+	Vertical = 0,
+	Top = 0,
+	Bottom = 0,
+	Right = 0,
+	Left = 0,
+}: Props) => {
+	return (
+		<uipadding
+			PaddingBottom={new UDim(0, Bottom + Vertical + All)}
+			PaddingTop={new UDim(0, Top + Vertical + All)}
+			PaddingLeft={new UDim(0, Left + Horizontal + All)}
+			PaddingRight={new UDim(0, Right + Horizontal + All)}
+		/>
+	);
+};
+
+export default Padding;

src/lib/user-interface/console/components/circle.tsx

@@ -0,0 +1,15 @@
+import Roact, { JsxInstanceProperties } from "@rbxts/roact";
+import { withHooks } from "@rbxts/roact-hooked";
+
+type CircleProps = JsxInstanceProperties<Frame>;
+
+const Circle = withHooks((props: CircleProps) => {
+	return (
+		<frame {...props}>
+			<uicorner CornerRadius={new UDim(1, 0)} />
+			<uiaspectratioconstraint AspectRatio={1} />
+		</frame>
+	);
+});
+
+export default Circle;

src/lib/user-interface/console/components/console.tsx

@@ -0,0 +1,14 @@
+import Roact from "@rbxts/roact";
+import { withHooks } from "@rbxts/roact-hooked";
+
+import Header from "./header";
+
+const Console = withHooks(() => {
+	return (
+		<frame Size={new UDim2(1, 0, 1, 0)} Transparency={1}>
+			<Header />
+		</frame>
+	);
+});
+
+export default Console;

src/lib/user-interface/console/components/flare-bar.tsx

@@ -0,0 +1,47 @@
+import Roact, { JsxInstanceProperties } from "@rbxts/roact";
+import { useCallback, useState, withHooks } from "@rbxts/roact-hooked";
+import { useSelector } from "@rbxts/roact-rodux-hooked";
+
+import { IFlare } from "../../../types/common";
+import Padding from "../../common/padding";
+import { StoreState } from "../../store";
+import Flare from "./flare";
+
+type FlareBarProps = Partial<Pick<JsxInstanceProperties<Frame>, "Position" | "AnchorPoint" | "Size">>;
+
+export const FlareBar = withHooks((props: FlareBarProps) => {
+	const { Size = new UDim2(1, 0, 0, 36) } = props;
+	const flares = useSelector((state: StoreState) => state.flares);
+	const [selected, setSelected] = useState<IFlare | undefined>();
+
+	const handleClick = useCallback((flare: IFlare) => {
+		setSelected(selected => {
+			if (flare.amount === 0) return;
+			return flare === selected ? undefined : flare;
+		});
+	}, []);
+
+	return (
+		<scrollingframe
+			Size={Size}
+			Position={props.Position}
+			AnchorPoint={props.AnchorPoint}
+			BackgroundTransparency={1}
+			CanvasSize={new UDim2(1, 0, 0, 36)}
+			AutomaticCanvasSize={"X"}
+			ScrollingDirection={"X"}
+			ScrollBarThickness={0}
+		>
+			<uilistlayout
+				FillDirection={"Horizontal"}
+				HorizontalAlignment={"Left"}
+				VerticalAlignment={"Center"}
+				Padding={new UDim(0, 4)}
+			/>
+			<Padding Horizontal={3} />
+			{flares.map((flare, i) => (
+				<Flare Key={i} Info={flare} Selected={flare === selected} OnClick={handleClick} />
+			))}
+		</scrollingframe>
+	);
+});

src/lib/user-interface/console/components/flare.tsx

@@ -0,0 +1,65 @@
+import Roact, { Element } from "@rbxts/roact";
+import { useRef, withHooksPure } from "@rbxts/roact-hooked";
+import { TextService } from "@rbxts/services";
+
+import { IFlare } from "../../../types/common";
+import { getAbsolutePosition } from "../../../utilities/hoarcekat";
+import Padding from "../../common/padding";
+import { useTheme } from "../../theme/theme";
+import Circle from "./circle";
+import Tooltip from "./tooltip";
+
+interface Props {
+	Info: IFlare;
+	Selected: boolean;
+	OnClick: (flare: IFlare) => void;
+}
+
+const Flare = withHooksPure(({ Info, Selected, OnClick }: Props) => {
+	const { eventName, amount, message } = Info;
+	const theme = useTheme();
+	const buttonRef = useRef<TextButton>();
+
+	const text = `${eventName} ${amount}x`;
+	const textSize = TextService.GetTextSize(text, theme.FontSize, theme.Font, new Vector2(math.huge, math.huge));
+	const circleColour = amount > 0 ? Color3.fromRGB(255, 18, 18) : Color3.fromRGB(18, 18, 255);
+
+	let tooltip: Element | undefined;
+	if (Selected) {
+		const button = buttonRef.getValue()!;
+		const { X: positionX, Y: positionY } = getAbsolutePosition(button);
+		const { Y: sizeY } = button.AbsoluteSize;
+		const tooltipPosition = UDim2.fromOffset(positionX - 3, positionY + sizeY + 8);
+		tooltip = <Tooltip Message={message} Position={tooltipPosition} />;
+	}
+
+	return (
+		<textbutton
+			Ref={buttonRef}
+			Size={UDim2.fromOffset(textSize.X, 30)}
+			AutomaticSize={"X"}
+			Text=""
+			BackgroundColor3={theme.SecondaryBackgroundColor3}
+			Event={{
+				Activated: () => OnClick(Info),
+			}}
+		>
+			<Padding Horizontal={7} />
+			<uicorner CornerRadius={new UDim(0.4, 0)} />
+			<uilistlayout FillDirection={"Horizontal"} VerticalAlignment={"Center"} Padding={new UDim(0, 4)} />
+			<Circle Size={UDim2.fromOffset(10, 10)} BackgroundColor3={circleColour} />
+			<textlabel
+				TextColor3={new Color3(0.9, 0.9, 0.9)}
+				Text={text}
+				Font={theme.Font}
+				TextSize={theme.FontSize}
+				Size={UDim2.fromOffset(textSize.X, 32)}
+				BackgroundTransparency={1}
+			/>
+			<uistroke Color={theme.PrimaryTextColor3} Thickness={Selected ? 1 : 0} ApplyStrokeMode={"Border"} />
+			{tooltip}
+		</textbutton>
+	);
+});
+
+export default Flare;

src/lib/user-interface/console/components/header.tsx

@@ -0,0 +1,21 @@
+import Roact from "@rbxts/roact";
+import { withHooksPure } from "@rbxts/roact-hooked";
+
+import { useTheme } from "../../theme/theme";
+import { FlareBar } from "./flare-bar";
+
+const Header = withHooksPure(() => {
+	const theme = useTheme();
+
+	return (
+		<frame
+			Size={new UDim2(1, 0, 0, 72)}
+			BackgroundColor3={theme.PrimaryBackgroundColor3}
+			BorderColor3={theme.SecondaryBackgroundColor3}
+		>
+			<FlareBar Position={UDim2.fromScale(0, 1)} AnchorPoint={new Vector2(0, 1)} />
+		</frame>
+	);
+});
+
+export default Header;

src/lib/user-interface/console/components/modal.tsx

@@ -0,0 +1,57 @@
+/// <reference types="@rbxts/types/plugin" />
+
+import Roact, { Children, Portal } from "@rbxts/roact";
+import { withHooks } from "@rbxts/roact-hooked";
+import { Players, RunService } from "@rbxts/services";
+
+import { hoarcekatFrame } from "../../../utilities/hoarcekat";
+
+const isGameRunning = RunService.IsRunning();
+
+/**
+ * Modal which can be used with .story scripts. Generally a modal will be added directly to the PlayerGui, but
+ * since .story scripts are ran inside studio PlayerGui won't exists. Instead, we'll parent the modal directly
+ * to Hoarcekat's preview window, simulating a modal without running the game.
+ *
+ * This is not perfect as the AbsolutePosition of the preview window is about (154, 5) rather than (0, 0), so
+ * the position may be skewed when positioning components absolutely. But it's better than the component erroring.
+ */
+const HoarcekatModal = withHooks(props => {
+	const parent = hoarcekatFrame;
+	if (!parent) {
+		warn("Unable to find Hoarcekat preview window");
+		return <frame />;
+	}
+
+	const made = (
+		<Portal target={parent}>
+			<frame Size={UDim2.fromScale(1, 1)} Transparency={1} ZIndex={10000}>
+				{props[Children]}
+			</frame>
+		</Portal>
+	);
+
+	return made;
+});
+
+/**
+ * Modal which parents itself to the PlayerGui and renders children in a separate ScreenGui
+ */
+const GameRunningModal = withHooks(props => {
+	const playerGui = Players.LocalPlayer.FindFirstChildOfClass("PlayerGui")!;
+	return (
+		<Portal target={playerGui}>
+			<screengui DisplayOrder={10000}>{props[Children]}</screengui>
+		</Portal>
+	);
+});
+
+const Modal = withHooks(props => {
+	return isGameRunning ? (
+		<GameRunningModal>{props[Children]}</GameRunningModal>
+	) : (
+		<HoarcekatModal>{props[Children]}</HoarcekatModal>
+	);
+});
+
+export default Modal;