@rbxts/centurion-ui 1.0.8 → 2.0.0-rc.1

package/src/components/padding.luau

@@ -0,0 +1,59 @@
+local vide = require("../../vide")
+
+local create = vide.create
+local read = vide.read
+
+type Can<T> = T | () -> T
+type Padding = {
+	read padding: Can<number>?,
+	read x: Can<number>?,
+	read y: Can<number>?,
+	read left: Can<number>?,
+	read right: Can<number>?,
+	read top: Can<number>?,
+	read bottom: Can<number>?,
+}
+
+local function padding(props: number | () -> number | Padding)
+	if typeof(props) == "number" or typeof(props) == "function" then
+		return create "UIPadding" {
+			PaddingLeft = function()
+				return UDim.new(0, read(props))
+			end,
+			PaddingRight = function()
+				return UDim.new(0, read(props))
+			end,
+			PaddingTop = function()
+				return UDim.new(0, read(props))
+			end,
+			PaddingBottom = function()
+				return UDim.new(0, read(props))
+			end,
+		}
+	end
+
+	local pad = props.padding or 0
+	local x = props.x or pad
+	local y = props.y or pad
+	local left = props.left or x
+	local right = props.right or x
+	local top = props.top or y
+	local bottom = props.bottom or y
+
+	return create "UIPadding" {
+		PaddingLeft = function()
+			return UDim.new(0, read(left))
+		end,
+		PaddingRight = function()
+			return UDim.new(0, read(right))
+		end,
+		PaddingTop = function()
+			return UDim.new(0, read(top))
+		end,
+		PaddingBottom = function()
+			return UDim.new(0, read(bottom))
+		end,
+	}
+end
+
+return padding

package/src/components/stroke.luau

@@ -0,0 +1,20 @@
+local fade = require("../fade")
+local vide = require("../../vide")
+
+local create = vide.create
+
+type Can<T> = T | () -> T
+type Stroke = {
+	read color: Can<Color3>?,
+	read thickness: Can<number>?,
+	read transparency: Can<number>?,
+}
+
+return function(props: Stroke)
+	return create "UIStroke" {
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		Color = props.color,
+		Thickness = props.thickness or 1,
+		Transparency = fade.fade(props.transparency),
+	}
+end

package/src/components/text.luau

@@ -0,0 +1,57 @@
+local fade = require("../fade")
+local px = require("../px")
+local state = require("../state")
+local theme = require("../theme")
+local types = require("../types")
+local vide = require("../../vide")
+
+local create = vide.create
+local read = vide.read :: (<T>(() -> T) -> T) & (<T>(T) -> T)
+
+type Can<T> = T | () -> T
+type Text = {
+	read size: Can<UDim2>?,
+	read auto: Can<Enum.AutomaticSize | "X" | "Y" | "XY">?,
+	read order: Can<number>?,
+
+	read text: Can<string>,
+	read weight: Can<Enum.FontWeight>?,
+	read text_size: Can<number>?,
+	read text_style: Can<types.TextStyle>?,
+	read xalignment: Can<Enum.TextXAlignment>?,
+	read wrapped: Can<boolean>?,
+	read rich_text: Can<boolean>?,
+	read zindex: Can<number>?,
+	read transparency: Can<number>?,
+
+	[number]: unknown,
+}
+
+return function(props: Text)
+	return create "TextLabel" {
+		Size = props.size,
+		AutomaticSize = props.auto,
+		LayoutOrder = props.order,
+
+		Text = props.text,
+		TextSize = props.text_size or px(state.text_size),
+		TextTransparency = fade.fade(props.transparency),
+		TextColor3 = function()
+			return theme.text_color(state.theme(), props.text_style and read(props.text_style) or "normal")
+		end,
+		FontFace = function()
+			local f: Font = state.font()
+			local weight = read(props.weight) or Enum.FontWeight.Regular
+			return Font.new(f.Family, weight)
+		end,
+		TextWrapped = props.wrapped,
+		TextXAlignment = props.xalignment,
+		RichText = props.rich_text,
+		ZIndex = props.zindex,
+
+		AutoLocalize = false,
+		BackgroundTransparency = 1,
+
+		unpack(props),
+	}
+end

package/src/components/textbox.luau

@@ -0,0 +1,186 @@
+local GuiService = game:GetService("GuiService")
+local UserInputService = game:GetService("UserInputService")
+
+local fade = require("../fade")
+local px = require("../px")
+local state = require("../state")
+local theme = require("../theme")
+local types = require("../types")
+local vide = require("../../vide")
+
+local create = vide.create
+local changed = vide.changed
+local source = vide.source
+local effect = vide.effect
+local read = vide.read :: (<T>(() -> T) -> T) & (<T>(T) -> T)
+
+type Can<T> = T | () -> T
+type TextBoxProps = {
+	read width: Can<number>?,
+	read height: Can<number>?,
+
+	read text: Can<string>,
+	read text_size: Can<number>?,
+	read text_style: Can<types.TextStyle>?,
+	read wrapped: Can<boolean>?,
+	read weight: Can<Enum.FontWeight>?,
+	read rich_text: Can<boolean>?,
+	read background_color: Can<Color3>?,
+	read background_transparency: Can<number>?,
+	read placeholder: Can<string>?,
+	read focused: Can<boolean>?,
+	read xalignment: Can<Enum.TextXAlignment>?,
+	read multiline: Can<boolean>?,
+	read editable: Can<boolean>?,
+	read transparency: Can<number>?,
+	-- whether confirming the console keyboard submits, rather than only committing the text
+	read submit_on_keyboard_return: boolean?,
+	-- receives a function that opens the keyboard, even if the textbox is already focused without it
+	read bind_open_keyboard: ((open: () -> ()) -> ())?,
+
+	read update_text: ((string) -> ())?,
+	read update_focused: ((boolean) -> ())?,
+	read enter: (string) -> (),
+
+	[number]: unknown,
+}
+
+return function(props: TextBoxProps)
+	local raw_text = source ""
+	-- set while focus is briefly released to reopen the touch keyboard
+	local reattaching = false
+
+	local function submit()
+		if not props.focused then
+			return
+		end
+		props.enter(raw_text())
+	end
+
+	local textbox: TextBox
+	textbox = create "TextBox" {
+		Size = function()
+			return UDim2.fromOffset(read(props.width) or 0, read(props.height) or 0)
+		end,
+		AutomaticSize = Enum.AutomaticSize.XY,
+
+		Text = props.text,
+		PlaceholderText = props.placeholder,
+		TextSize = props.text_size or px(state.text_size),
+		TextTransparency = fade.fade(props.transparency),
+		TextColor3 = function()
+			return theme.text_color(state.theme(), props.text_style and read(props.text_style) or "normal")
+		end,
+		TextXAlignment = props.xalignment,
+		TextEditable = props.editable,
+		TextWrapped = props.wrapped,
+		MultiLine = props.multiline,
+		FontFace = function()
+			local f: Font = state.font()
+			local weight = read(props.weight) or Enum.FontWeight.Regular
+			return Font.new(f.Family, weight)
+		end,
+		RichText = props.rich_text,
+		PlaceholderColor3 = function()
+			return state.theme().subtext
+		end,
+
+		BackgroundColor3 = props.background_color,
+		BackgroundTransparency = props.background_transparency or 1,
+		AutoLocalize = false,
+
+		if props.update_text then changed("Text", props.update_text) else nil,
+		changed("Text", raw_text),
+
+		Focused = function()
+			if not props.update_focused then
+				return
+			end
+			props.update_focused(true)
+		end,
+
+		FocusLost = function(enter)
+			if reattaching then
+				return
+			end
+			if props.update_focused then
+				props.update_focused(false)
+			end
+			if not enter then
+				return
+			end
+			submit()
+		end,
+
+		-- consoles don't fire enter through FocusLost, so this workaround is required
+		-- Roblox have shown some interest in fixing this, so it should be removed in that case to prevent duplicate submissions
+		ReturnPressedFromOnScreenKeyboard = if GuiService:IsTenFootInterface()
+			then function()
+				if props.submit_on_keyboard_return ~= false then
+					submit()
+				else
+					-- the textbox can stay focused once the keyboard closes, so release it explicitly
+					textbox:ReleaseFocus(false)
+				end
+			end
+			else nil,
+
+		unpack(props),
+	}
+
+	-- releases focus without reporting it, so that it can be captured again
+	local function detach()
+		reattaching = true
+		textbox:ReleaseFocus(false)
+		task.wait()
+		reattaching = false
+	end
+
+	local function capture()
+		if textbox:IsFocused() then
+			-- tapping a button on touch devices can leave the textbox focused
+			-- without the keyboard open, so release it and capture it again
+			if
+				UserInputService.OnScreenKeyboardVisible
+				or UserInputService.PreferredInput ~= Enum.PreferredInput.Touch
+			then
+				return
+			end
+
+			detach()
+		end
+
+		if read(props.focused) then
+			textbox:CaptureFocus()
+		end
+	end
+
+	if props.bind_open_keyboard then
+		props.bind_open_keyboard(function()
+			task.defer(function()
+				if textbox:IsFocused() then
+					detach()
+				end
+				textbox:CaptureFocus()
+			end)
+		end)
+	end
+
+	if props.focused ~= nil then
+		effect(function()
+			local value = read(props.focused)
+			if textbox:IsFocused() == value then
+				return
+			end
+			task.defer(function()
+				if value then
+					capture()
+				else
+					textbox:ReleaseFocus(false)
+				end
+			end)
+		end)
+	end
+
+	return textbox
+end

package/src/fade.luau

@@ -0,0 +1,23 @@
+local vide = require("../vide")
+
+local read = vide.read
+
+-- how visible the current subtree is, from 0 (hidden) to 1 (shown). Lets the
+-- console fade as a whole without a CanvasGroup, which would soften text
+local opacity = vide.context(function()
+	return 1
+end :: () -> number)
+
+-- combines a transparency with the surrounding opacity
+local function fade(transparency: (number | () -> number)?): () -> number
+	local current = opacity()
+	return function()
+		local value = read(transparency) or 0
+		return 1 - (1 - value) * current()
+	end
+end
+
+return {
+	opacity = opacity,
+	fade = fade,
+}

package/src/init.luau

@@ -0,0 +1,142 @@
+local Players = game:GetService("Players")
+
+local app = require("@self/app")
+local centurion = require("./centurion")
+local px = require("@self/px")
+local state = require("@self/state")
+local theme = require("@self/theme")
+local types = require("@self/types")
+local vide = require("./vide")
+
+local mounted = false
+
+local function mount(keys: { Enum.KeyCode }?)
+	if mounted then
+		return
+	end
+	mounted = true
+
+	state.activation_keys(keys or { Enum.KeyCode.F2 })
+
+	vide.mount(function()
+		px.mount()
+		return vide.create "ScreenGui" {
+			Name = "Centurion",
+			ResetOnSpawn = false,
+			ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+			app(),
+		}
+	end, Players.LocalPlayer:WaitForChild("PlayerGui"))
+end
+
+local function set_opt<T>(source: () -> T, value: T?)
+	if value == nil then
+		return
+	end
+	source(value)
+end
+
+local function configure(options: types.OptionsPartial)
+	set_opt(state.hide_on_lost_focus, options.hide_on_lost_focus)
+	set_opt(state.activation_keys, options.activation_keys)
+	set_opt(state.theme, options.theme)
+	set_opt(state.icon, options.icon)
+	set_opt(state.font, options.font)
+	set_opt(state.transparency, options.transparency)
+
+	set_opt(state.text_size, options.text_size)
+	set_opt(state.subtext_size, options.subtext_size)
+
+	set_opt(state.anchor, options.anchor)
+	set_opt(state.position, options.position)
+	set_opt(state.width, options.width)
+
+	set_opt(state.max_suggestions, options.max_suggestions)
+	set_opt(state.format_date, options.format_date)
+end
+
+local function clear()
+	state.logs({})
+end
+
+local function open()
+	state.opened(true)
+	state.focused(true)
+end
+
+local function close()
+	state.opened(false)
+	state.focused(false)
+end
+
+local function toggle()
+	if state.opened() then
+		close()
+	else
+		open()
+	end
+end
+
+local function is_open(): boolean
+	return state.opened()
+end
+
+local function register_commands(options: { exclude: { string }?, prefix: string? }?)
+	options = options or {}
+
+	local cmd = function<T...>(name: string, cmd_data: centurion.Command<T...>)
+		if options.exclude and table.find(options.exclude, name) then
+			return
+		end
+
+		local cmd_name = name
+		if options.prefix then
+			cmd_name = options.prefix .. " " .. cmd_name
+		end
+		centurion.register_command(cmd_name, cmd_data)
+	end
+
+	cmd("clear", {
+		description = "Clear the command history",
+		callback = function()
+			clear()
+			return ""
+		end,
+	})
+
+	local theme_names: { types.Theme } = {}
+	for name in pairs(theme.themes) do
+		table.insert(theme_names, name)
+	end
+
+	local centurion_theme = centurion.register_type("centurion-theme", centurion.create_enum(theme_names))
+	cmd("theme", {
+		description = "Change the terminal theme",
+		arguments = function()
+			return centurion_theme("theme", "The name of the theme to switch to")
+		end,
+		callback = function(ctx, theme_name)
+			local data = theme.themes[theme_name]
+			if not data then
+				ctx.error("Theme '" .. theme_name .. "' does not exist.")
+				return
+			end
+
+			state.theme(data)
+			return `Theme changed to {theme_name}`
+		end,
+	})
+end
+
+return {
+	mount = mount,
+	configure = configure,
+	register_commands = register_commands,
+	clear = clear,
+	open = open,
+	close = close,
+	toggle = toggle,
+	is_open = is_open,
+	themes = theme.themes,
+}

package/src/input.luau

@@ -0,0 +1,16 @@
+local UserInputService = game:GetService("UserInputService")
+
+local vide = require("../vide")
+
+local cleanup = vide.cleanup
+local source = vide.source
+
+local function preferred_input(): () -> Enum.PreferredInput
+	local preferred = source(UserInputService.PreferredInput)
+	cleanup(UserInputService:GetPropertyChangedSignal("PreferredInput"):Connect(function()
+		preferred(UserInputService.PreferredInput)
+	end))
+	return preferred
+end
+
+return preferred_input

package/src/px.luau

@@ -0,0 +1,68 @@
+local vide = require("../vide")
+
+local source = vide.source
+local read = vide.read
+local cleanup = vide.cleanup
+
+export type Mode = "normal" | "even" | "scale" | "floor" | "ceil"
+
+local BASE_RESOLUTION = Vector2.new(1920, 1080)
+local MIN_SCALE = 0.5
+local DOMINANT_AXIS = 0.5
+
+local scale = source(1)
+
+local function convert(value: number, mode: Mode?): number
+	return if mode == "even"
+		then math.round(value * scale() * 0.5) * 2
+		elseif mode == "scale" then value * scale()
+		elseif mode == "floor" then math.floor(value * scale())
+		elseif mode == "ceil" then math.ceil(value * scale())
+		else math.round(value * scale())
+end
+
+local function px_raw<T>(value: T | () -> T, mode: Mode? | () -> Mode?): T
+	local value_raw, mode_raw = read(value), read(mode)
+
+	if typeof(value_raw) == "number" then
+		return convert(value_raw, mode_raw) :: any
+	elseif typeof(value_raw) == "UDim" then
+		return UDim.new(value_raw.Scale, convert(value_raw.Offset, mode_raw)) :: any
+	elseif typeof(value_raw) == "UDim2" then
+		return UDim2.new(
+			value_raw.X.Scale,
+			convert(value_raw.X.Offset, mode_raw),
+			value_raw.Y.Scale,
+			convert(value_raw.Y.Offset, mode_raw)
+		) :: any
+	else
+		error("px: unsupported type")
+	end
+end
+
+local function px<T>(value: T | () -> T, mode: Mode? | () -> Mode?): () -> T
+	return function()
+		return px_raw(value, mode)
+	end
+end
+
+local function mount()
+	local camera = workspace.CurrentCamera
+
+	local function update()
+		local width = math.log(camera.ViewportSize.X / BASE_RESOLUTION.X, 2)
+		local height = math.log(camera.ViewportSize.Y / BASE_RESOLUTION.Y, 2)
+		local centered = width + (height - width) * DOMINANT_AXIS
+		scale(math.max(2 ^ centered, MIN_SCALE))
+	end
+
+	update()
+
+	cleanup(camera:GetPropertyChangedSignal("ViewportSize"):Connect(update))
+end
+
+return setmetatable({ mount = mount, convert = convert, get = px_raw }, {
+	__call = function<T>(_, value: T | () -> T, mode: Mode? | () -> Mode?): () -> T
+		return px(value, mode)
+	end,
+})

package/src/rich.luau

@@ -0,0 +1,14 @@
+-- helpers for building RichText strings
+
+local function escape(text: string): string
+	return (text:gsub("&", "&amp;"):gsub("<", "&lt;"):gsub(">", "&gt;"):gsub('"', "&quot;"):gsub("'", "&apos;"))
+end
+
+local function color(text: string, value: Color3): string
+	return `<font color="#{value:ToHex()}">{text}</font>`
+end
+
+return {
+	escape = escape,
+	color = color,
+}

package/src/state.luau

@@ -0,0 +1,33 @@
+local theme = require("./theme")
+local types = require("./types")
+local vide = require("../vide")
+
+local source = vide.source
+
+return {
+	opened = source(false),
+	focused = source(false),
+	logs = source({} :: { types.Log }),
+
+	-- options
+	activation_keys = source({}),
+	hide_on_lost_focus = source(true),
+	theme = source(theme.themes.mocha),
+	font = source(Font.fromId(16658246179)),
+	title = source("Centurion"),
+	icon = source("rbxassetid://115292290730914"),
+	transparency = source(0.2),
+	format_date = source(function(log: types.Log): string
+		local dateTime = DateTime.fromUnixTimestamp(log.response.timestamp):FormatLocalTime("LT", "en-us")
+		local dateParts = dateTime:split(" ")
+		return `<b>{dateParts[1]}</b> {dateParts[2]}`
+	end),
+	max_suggestions = source(5),
+
+	text_size = source(28),
+	subtext_size = source(24),
+
+	anchor = source(Vector2.zero),
+	position = source(UDim2.new()),
+	width = source(UDim.new(1, 0)),
+}

package/src/theme.luau

@@ -0,0 +1,70 @@
+local types = require("./types")
+
+local function text_color(theme: types.Theme, style: types.TextStyle)
+	return if style == "normal"
+		then theme.text
+		elseif style == "error" then theme.error
+		elseif style == "subtext" then theme.subtext
+		elseif style == "bg" then theme.background
+		elseif style == "highlight" then theme.highlight
+		else theme.text
+end
+
+-- subtle outline color derived from the theme, so custom themes don't need an extra field
+local function border(theme: types.Theme)
+	return theme.surface:Lerp(theme.text, 0.15)
+end
+
+local themes = {
+	mocha = {
+		background = Color3.fromRGB(30, 30, 46),
+		surface = Color3.fromRGB(49, 50, 68),
+		text = Color3.fromRGB(205, 214, 244),
+		subtext = Color3.fromRGB(166, 173, 200),
+		highlight = Color3.fromRGB(137, 180, 250),
+		success = Color3.fromRGB(166, 227, 161),
+		error = Color3.fromRGB(243, 139, 168),
+	} :: types.Theme,
+	macchiato = {
+		background = Color3.fromRGB(36, 39, 58),
+		surface = Color3.fromRGB(54, 58, 79),
+		text = Color3.fromRGB(202, 211, 245),
+		subtext = Color3.fromRGB(165, 173, 203),
+		highlight = Color3.fromRGB(138, 173, 244),
+		success = Color3.fromRGB(166, 218, 149),
+		error = Color3.fromRGB(237, 135, 150),
+	} :: types.Theme,
+	frappe = {
+		background = Color3.fromRGB(48, 52, 70),
+		surface = Color3.fromRGB(65, 69, 89),
+		text = Color3.fromRGB(198, 208, 245),
+		subtext = Color3.fromRGB(165, 173, 206),
+		highlight = Color3.fromRGB(140, 170, 238),
+		success = Color3.fromRGB(166, 209, 137),
+		error = Color3.fromRGB(231, 130, 132),
+	} :: types.Theme,
+	latte = {
+		background = Color3.fromRGB(230, 233, 239),
+		surface = Color3.fromRGB(220, 224, 232),
+		text = Color3.fromRGB(76, 79, 105),
+		subtext = Color3.fromRGB(92, 95, 119),
+		highlight = Color3.fromRGB(30, 102, 245),
+		success = Color3.fromRGB(64, 160, 43),
+		error = Color3.fromRGB(210, 15, 57),
+	} :: types.Theme,
+	roblox = {
+		background = Color3.fromRGB(17, 18, 22),
+		surface = Color3.fromRGB(31, 32, 36),
+		text = Color3.fromRGB(255, 255, 255),
+		subtext = Color3.fromRGB(187, 188, 190),
+		highlight = Color3.fromRGB(51, 95, 255),
+		success = Color3.fromRGB(57, 197, 130),
+		error = Color3.fromRGB(240, 68, 51),
+	} :: types.Theme,
+}
+
+return {
+	text_color = text_color,
+	border = border,
+	themes = themes,
+}