From 1390ff170174f435df1a2abbd99ca16cf791c4c1 Mon Sep 17 00:00:00 2001 From: Jonathan Date: Tue, 6 Jul 2021 11:48:38 +1200 Subject: [PATCH] UI updates --- README.md | 6 +-- example/client/index.client.tsx | 25 ++--------- example/server/index.server.ts | 34 +++++++-------- package-lock.json | 16 +++++-- package.json | 5 ++- src/Client/Components/Dropdown.tsx | 8 ++-- src/Client/Components/Icon.tsx | 2 + src/Client/Components/MultiSelectDropdown.tsx | 6 +-- src/Client/Components/OutputMessage.tsx | 2 +- .../ZirconStructuredMessageTemplate.tsx | 11 +++-- src/Client/Format/index.ts | 28 ++++++------ src/Client/UIKit/ThemeContext.ts | 43 +++++++++++++++++-- src/Client/index.tsx | 23 ++++++---- src/Log.ts | 10 +---- src/Server/index.ts | 2 +- src/Services/ClientRegistryService.ts | 2 +- src/Services/RegistryService.ts | 11 +---- src/index.ts | 22 +++------- tsconfig.json | 3 ++ 19 files changed, 137 insertions(+), 122 deletions(-) diff --git a/README.md b/README.md index 635c958..d4d4cc2 100644 --- a/README.md +++ b/README.md @@ -45,10 +45,10 @@ This will install both Zircon, as well as the logging support. It is recommended Below is an example of how to register a command in Zircon: ```ts -import Zircon from "@rbxts/zircon"; +import { ZirconServer, ZirconFunctionBuilder } from "@rbxts/zircon"; import Log from "@rbxts/log"; -Zircon.Server.Registry.RegisterFunction( +ZirconServer.Registry.RegisterFunction( new ZirconFunctionBuilder("print_message") .AddArguments("string") .Bind((context, message) => Log.Info( @@ -56,7 +56,7 @@ Zircon.Server.Registry.RegisterFunction( message, context.GetExecutor() )), - [Zircon.Server.Registry.User] + [ZirconServer.Registry.User] ) ``` diff --git a/example/client/index.client.tsx b/example/client/index.client.tsx index 11c0f38..d281236 100644 --- a/example/client/index.client.tsx +++ b/example/client/index.client.tsx @@ -1,34 +1,15 @@ import Roact from "@rbxts/roact"; -import Zircon from "@zircon"; -import ZirconClient from "./Client"; +import Zircon, { ZirconClient } from "@zircon"; import delayAsync from "./Client/BuiltInConsole/DelayAsync"; import ZirconDockedConsole from "./Client/BuiltInConsole/UI/DockedConsole"; -import { BaseTheme, makeTheme } from "./Client/UIKit/ThemeContext"; +import ThemeContext, { ZirconDarkPlastic, makeTheme, ZirconFrost } from "./Client/UIKit/ThemeContext"; import { Players } from "@rbxts/services"; import Log, { Logger } from "@rbxts/log"; Log.SetLogger(Logger.configure().WriteTo(Zircon.Log.Console()).EnrichWithProperty("Version", PKG_VERSION).Create()); -const LightTheme = makeTheme({ - PrimaryBackgroundColor3: Color3.fromRGB(220, 220, 220), - SecondaryBackgroundColor3: Color3.fromRGB(200, 200, 200), - PrimaryTextColor3: Color3.fromRGB(40, 40, 40), - ConsoleColors: { - ...BaseTheme.ConsoleColors, - White: Color3.fromRGB(40, 40, 40), - }, -}); - -function CustomConsole() { - return ( - // - - // - ); -} - ZirconClient.BindConsole({ - ConsoleComponent: CustomConsole, + Theme: "Plastic", EnableTags: true, Keys: [Enum.KeyCode.Backquote], }); diff --git a/example/server/index.server.ts b/example/server/index.server.ts index 59d0249..5ffcf69 100644 --- a/example/server/index.server.ts +++ b/example/server/index.server.ts @@ -1,9 +1,5 @@ import Log, { Logger } from "@rbxts/log"; -import { LogConfiguration } from "@rbxts/log/out/Configuration"; -import { ZrValue } from "@rbxts/zirconium/out/Data/Locals"; -import ZrLuauFunction from "@rbxts/zirconium/out/Data/LuauFunction"; -import { ZrInstanceUserdata } from "@rbxts/zirconium/out/Data/Userdata"; -import Zircon from "@zircon"; +import Zircon, { ZirconServer } from "@zircon"; import ZirconPrint from "BuiltIn/Print"; import { ZirconFunctionBuilder } from "Class/ZirconFunctionBuilder"; import { ZirconNamespaceBuilder } from "Class/ZirconNamespaceBuilder"; @@ -17,23 +13,23 @@ Log.SetLogger( .Create(), ); -Zircon.Server.Registry.RegisterFunction( +ZirconServer.Registry.RegisterFunction( new ZirconFunctionBuilder("kill").AddArguments("player?").Bind((context, player) => { const target = player ?? context.GetExecutor(); target.Character?.BreakJoints(); Log.Info("Killed {target}", target); }), - [Zircon.Server.Registry.User], + [ZirconServer.Registry.User], ); -Zircon.Server.Registry.RegisterFunction( +ZirconServer.Registry.RegisterFunction( new ZirconFunctionBuilder("print_message") .AddArguments("string") .Bind((context, message) => Log.Info("Zircon says {Message} from {Player}", message, context.GetExecutor())), - [Zircon.Server.Registry.User], + [ZirconServer.Registry.User], ); -Zircon.Server.Registry.RegisterNamespace( +ZirconServer.Registry.RegisterNamespace( new ZirconNamespaceBuilder("example") .AddFunction( new ZirconFunctionBuilder("print").Bind((context, ...args) => { @@ -47,14 +43,14 @@ Zircon.Server.Registry.RegisterNamespace( ) .AddFunction(ZirconPrint) .Build(), - [Zircon.Server.Registry.User], + [ZirconServer.Registry.User], ); -Zircon.Server.Registry.RegisterFunction( +ZirconServer.Registry.RegisterFunction( new ZirconFunctionBuilder("print").Bind((context, ...args) => { Log.Info(args.map((a) => tostring(a)).join(" ")); }), - [Zircon.Server.Registry.User], + [ZirconServer.Registry.User], ); delayAsync(5).then(() => { @@ -66,10 +62,10 @@ delayAsync(5).then(() => { Log.Fatal("Fatal message here"); }); -game.GetService("Players").PlayerAdded.Connect((player) => { - Zircon.Server.Registry.AddPlayerToGroups(player, ["creator"]); -}); +// game.GetService("Players").PlayerAdded.Connect((player) => { +// ZirconServer.Registry.AddPlayerToGroups(player, ["creator"]); +// }); -for (const player of game.GetService("Players").GetPlayers()) { - Zircon.Server.Registry.AddPlayerToGroups(player, ["creator"]); -} +// for (const player of game.GetService("Players").GetPlayers()) { +// Zircon.Server.Registry.AddPlayerToGroups(player, ["creator"]); +// } diff --git a/package-lock.json b/package-lock.json index 937e65d..91164c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -150,9 +150,9 @@ "integrity": "sha512-U2YhOLG9dDwVOmMTgjzGcoM2yk0mcJ/Y6Fmu6RUVM2y9XHGly6bWsjK7o3uaI4CDMfYZNKF2MkELIBeyFyEJ2Q==" }, "@rbxts/services": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@rbxts/services/-/services-1.1.1.tgz", - "integrity": "sha512-81isCMtHKuNKzCcDx4+6bW8xQqAESpFicC4plATOzhn4x68XOjoeEZsVkmka1l3Tvwjs6QLQuvP28ZuKROLPzA==" + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rbxts/services/-/services-1.1.5.tgz", + "integrity": "sha512-5/SGYCVcdvxIM19ZFf4k9Hq5jCNLW0c/1G804yr9+KuPteVyfag4YiBgkXE3QmGx1ITixIQJJYIKv1LoueWPww==" }, "@rbxts/signal": { "version": "1.0.3", @@ -1540,6 +1540,16 @@ } } }, + "rbxts-transformer-services": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/rbxts-transformer-services/-/rbxts-transformer-services-1.0.0.tgz", + "integrity": "sha512-7+8dGVFOobMMlbIwpIPXb9rasi3FJq0PbNyDBIhlqkhrr0whYti8tGlRD4l95bUOORvkWmfU5ziE8bu04JpLmw==", + "dev": true, + "requires": { + "byots": "4.1.0-dev.20201102.16.32", + "typescript": "^4.1.3" + } + }, "read-pkg": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz", diff --git a/package.json b/package.json index 79aa7cb..81c1a35 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rbxts/zircon", - "version": "0.8.0-alpha.0", + "version": "0.8.0-beta.0", "description": "", "main": "out/init.lua", "scripts": { @@ -33,6 +33,7 @@ "prettier": "^2.1.2", "rbxts-transform-debug": "^0.2.0", "rbxts-transform-env": "^0.3.0", + "rbxts-transformer-services": "^1.0.0", "roblox-ts": "^1.1.1", "typescript": "^4.1.3" }, @@ -45,7 +46,7 @@ "@rbxts/roact": "^1.3.0-ts.14", "@rbxts/roact-rodux": "^0.2.2-ts.2", "@rbxts/rodux": "^3.0.0-ts.2", - "@rbxts/services": "^1.1.1", + "@rbxts/services": "^1.1.5", "@rbxts/signal": "^1.0.3", "@rbxts/snapdragon": "^2.0.0-beta.0", "@rbxts/string-utils": "^1.0.2", diff --git a/src/Client/Components/Dropdown.tsx b/src/Client/Components/Dropdown.tsx index e4a1d3b..5cff893 100644 --- a/src/Client/Components/Dropdown.tsx +++ b/src/Client/Components/Dropdown.tsx @@ -202,12 +202,12 @@ export default class Dropdown extends Roact.Component !Disabled && this.setState({ active: !this.state.active }), @@ -216,7 +216,7 @@ export default class Dropdown extends Roact.Component { Size={new UDim2(0, 16, 0, 16)} BackgroundTransparency={1} Image={theme.IconAssetUri} + ImageColor3={theme.IconColor3} ImageRectOffset={icon.Offset} Position={this.props.Position} ImageRectSize={new Vector2(16, 16)} diff --git a/src/Client/Components/MultiSelectDropdown.tsx b/src/Client/Components/MultiSelectDropdown.tsx index 8e74797..4a8a8aa 100644 --- a/src/Client/Components/MultiSelectDropdown.tsx +++ b/src/Client/Components/MultiSelectDropdown.tsx @@ -246,8 +246,8 @@ export default class MultiSelectDropdown extends Roact.Component !Disabled && this.setState({ active: !this.state.active }), @@ -256,7 +256,7 @@ export default class MultiSelectDropdown extends Roact.Component 1) { - return getRichTextColor3(ZirconTheme, "Grey", `[...]`); + return getRichTextColor3(theme, "Grey", `[...]`); } else { return getRichTextColor3( ZirconTheme, "Grey", - `[${value.map((v) => formatRichText(v, level + 1)).join(", ")}]`, + `[${value.map((v) => formatRichText(v, level + 1, theme)).join(", ")}]`, ); } } else if (isMap(value)) { if (level > 1) { - return getRichTextColor3(ZirconTheme, "Grey", `{...}`); + return getRichTextColor3(theme, "Grey", `{...}`); } else { const arr = new Array(); for (const [k, v] of value) { - arr.push(`${getRichTextColor3(ZirconTheme, "White", k)}: ${formatRichText(v, level + 1)}`); + arr.push(`${getRichTextColor3(theme, "White", k)}: ${formatRichText(v, level + 1, theme)}`); } - return getRichTextColor3(ZirconTheme, "Grey", `{${arr.join(", ")}}`); + return getRichTextColor3(theme, "Grey", `{${arr.join(", ")}}`); } } else if (typeIs(value, "Instance")) { - return getRichTextColor3(ZirconTheme, "Orange", `${value.GetFullName()}`); + return getRichTextColor3(theme, "Orange", `${value.GetFullName()}`); } else if (value === undefined) { - return getRichTextColor3(ZirconTheme, "Cyan", "undefined"); + return getRichTextColor3(theme, "Cyan", "undefined"); } else { - return getRichTextColor3(ZirconTheme, "Yellow", `<${tostring(value)}>`); + return getRichTextColor3(theme, "Yellow", `<${tostring(value)}>`); } } @@ -153,7 +153,7 @@ export function formatMessageTemplate(template: string, values: Record, vars: unknown[] if (idxOffset > vars.size()) { resultingStr += getRichTextColor3(ZirconTheme, "Red", `{${token.Value}}`); } else { - resultingStr += formatRichText(vars[idxOffset]); + resultingStr += formatRichText(vars[idxOffset], undefined, ZirconTheme); idxOffset += 1; } } diff --git a/src/Client/UIKit/ThemeContext.ts b/src/Client/UIKit/ThemeContext.ts index bfab1f1..e78c870 100644 --- a/src/Client/UIKit/ThemeContext.ts +++ b/src/Client/UIKit/ThemeContext.ts @@ -33,20 +33,23 @@ export interface ZirconThemeDefinition { readonly SecondaryBackgroundColor3: Color3; readonly PrimarySelectColor3: Color3; readonly PrimaryTextColor3: Color3; + readonly PrimaryDisabledColor3: Color3; readonly SecondaryTextColor3: Color3; readonly ErrorTextColor3: Color3; readonly ServerContextColor: Color3; + readonly IconColor3?: Color3; readonly ClientContextColor: Color3; readonly ConsoleColors: ConsoleColors; readonly Dock: DockOptions; readonly SyntaxHighlighter?: ThemeSyntaxColors; } -export const BaseTheme = identity({ +export const ZirconDarkPlastic = identity({ IconAssetUri: "rbxassetid://6413958171", Font: "Ubuntu", ConsoleFont: "RobotoMono", PrimaryBackgroundColor3: Color3.fromRGB(33, 37, 43), + PrimaryDisabledColor3: Color3.fromRGB(100, 100, 100), PrimaryTextColor3: Color3.fromRGB(255, 255, 255), SecondaryTextColor3: Color3.fromRGB(170, 170, 170), SecondaryBackgroundColor3: Color3.fromRGB(24, 26, 31), @@ -67,6 +70,39 @@ export const BaseTheme = identity({ }, }); +export const ZirconFrost = identity({ + IconAssetUri: "rbxassetid://6413958171", + Font: "Ubuntu", + ConsoleFont: "RobotoMono", + PrimaryBackgroundColor3: Color3.fromRGB(212, 218, 212), + PrimaryDisabledColor3: Color3.fromRGB(100, 100, 100), + SecondaryBackgroundColor3: Color3.fromRGB(231, 229, 224), + PrimaryTextColor3: Color3.fromRGB(33, 33, 33), + IconColor3: Color3.fromRGB(33, 33, 33), + SecondaryTextColor3: Color3.fromRGB(46, 46, 46), + PrimarySelectColor3: new Color3(0.68, 0.73, 0.82), + ErrorTextColor3: Color3.fromRGB(224, 108, 117), + ServerContextColor: Color3.fromRGB(0, 255, 144), + ClientContextColor: Color3.fromRGB(0, 148, 255), + Dock: {}, + + ConsoleColors: { + Red: Color3.fromRGB(224, 108, 117), + Yellow: Color3.fromRGB(232, 179, 77), + Cyan: new Color3(0.19, 0.51, 0.55), + Grey: Color3.fromRGB(90, 99, 116), + White: Color3.fromRGB(41, 43, 43), + Green: Color3.fromRGB(102, 148, 69), + Orange: Color3.fromRGB(255, 135, 0), + }, +}); + +export const BuiltInThemes = { + Frost: ZirconFrost, + Plastic: ZirconDarkPlastic, +}; +export type BuiltInThemes = typeof BuiltInThemes; + type Color3Keys = { [P in keyof T]: T[P] extends Color3 ? P & string : never }[keyof T]; type Color3ToHex = { [P in keyof T]: T[P] extends Color3 | string @@ -108,9 +144,10 @@ export function italicize(text: string) { } export function makeTheme(theme: Partial) { - return identity({ ...BaseTheme, ...theme }); + return identity({ ...ZirconDarkPlastic, ...theme }); } +/** @deprecated */ export const ZirconTheme = makeTheme({ Font: "Sarpanch", ConsoleFont: "Code", @@ -118,6 +155,6 @@ export const ZirconTheme = makeTheme({ SecondaryBackgroundColor3: Color3.fromRGB(24, 26, 31), }); -const ThemeContext = Roact.createContext(BaseTheme); +const ThemeContext = Roact.createContext(ZirconDarkPlastic); export default ThemeContext; diff --git a/src/Client/index.tsx b/src/Client/index.tsx index 858e710..7395884 100644 --- a/src/Client/index.tsx +++ b/src/Client/index.tsx @@ -1,7 +1,7 @@ import Roact from "@rbxts/roact"; import { ComponentInstanceHandle } from "@rbxts/roact"; import RoactRodux from "@rbxts/roact-rodux"; -import { ContextActionService, GuiService, LogService, Players, RunService, StarterGui } from "@rbxts/services"; +import { ContextActionService, Players, RunService, StarterGui } from "@rbxts/services"; import ZirconClientStore from "./BuiltInConsole/Store"; import { ConsoleActionName } from "./BuiltInConsole/Store/_reducers/ConsoleReducer"; import ZirconDockedConsole, { DockedConsoleProps } from "./BuiltInConsole/UI/DockedConsole"; @@ -13,7 +13,8 @@ import Remotes, { ZirconNetworkMessageType } from "../Shared/Remotes"; import { RemoteId } from "../RemoteId"; import { ZirconContext, ZirconLogData, ZirconLogLevel, ZirconMessageType } from "./Types"; import ZirconTopBar from "./BuiltInConsole/UI/TopbarMenu"; -import { LogEvent, LogLevel } from "@rbxts/log"; +import { LogEvent } from "@rbxts/log"; +import ThemeContext, { BuiltInThemes } from "./UIKit/ThemeContext"; const IsClient = RunService.IsClient(); @@ -120,6 +121,8 @@ namespace ZirconClient { Keys?: Array; EnableTags?: boolean; ConsoleComponent?: typeof Roact.Component | ((props: defined) => Roact.Element); + /** @internal */ + Theme?: keyof BuiltInThemes; } let consoleBound = false; @@ -136,19 +139,21 @@ namespace ZirconClient { if (consoleBound) return; consoleBound = true; - const { Keys = [Enum.KeyCode.F10], ConsoleComponent = ZirconDockedConsole } = options; + const { Keys = [Enum.KeyCode.F10], ConsoleComponent = ZirconDockedConsole, Theme = "Plastic" } = options; $ifEnv("NODE_ENV", "development", () => { print("[zircon-debug] bindConsole called with", ...Keys); }); BindActivationKeys(Keys); handle = Roact.mount( - - - - - - , + + + + + + + + , Players.LocalPlayer.FindFirstChildOfClass("PlayerGui"), ); diff --git a/src/Log.ts b/src/Log.ts index 3c2d8c9..742e637 100644 --- a/src/Log.ts +++ b/src/Log.ts @@ -1,14 +1,8 @@ import { RunService } from "@rbxts/services"; -import Signal from "@rbxts/signal"; -import Client from "Client"; -import { ZirconLogLevel, ZirconLogData, ZirconTag } from "Client/Types"; -import Server from "Server"; +import Client from "./Client"; import { LogEvent } from "@rbxts/log"; import { ILogEventSink } from "@rbxts/log/out/Core"; - -const logMessageSignal = new Signal< - (level: ZirconLogLevel, tag: ZirconTag, message: string, data: ZirconLogData) => void ->(); +import Server from "./Server"; export namespace Logging { class LogEventConsoleSink implements ILogEventSink { diff --git a/src/Server/index.ts b/src/Server/index.ts index ea725bf..e12c8d7 100644 --- a/src/Server/index.ts +++ b/src/Server/index.ts @@ -186,4 +186,4 @@ namespace Zircon { }); } } -export = Zircon; +export default Zircon; diff --git a/src/Services/ClientRegistryService.ts b/src/Services/ClientRegistryService.ts index 728018f..22d446e 100644 --- a/src/Services/ClientRegistryService.ts +++ b/src/Services/ClientRegistryService.ts @@ -1,4 +1,4 @@ export namespace ZirconClientRegistryService { - export const dud = 1; + const dud = 1; } export type ZirconClientRegistryService = typeof ZirconClientRegistryService; diff --git a/src/Services/RegistryService.ts b/src/Services/RegistryService.ts index 80da2f4..896a65e 100644 --- a/src/Services/RegistryService.ts +++ b/src/Services/RegistryService.ts @@ -1,14 +1,8 @@ import { Players, RunService } from "@rbxts/services"; -import ZrContext from "@rbxts/zirconium/out/Data/Context"; -import { ZrValue } from "@rbxts/zirconium/out/Data/Locals"; -import ZrLuauFunction from "@rbxts/zirconium/out/Data/LuauFunction"; import ZrScriptContext from "@rbxts/zirconium/out/Runtime/ScriptContext"; import { toArray } from "../Shared/Collections"; import ZirconUserGroup, { ZirconPermissions } from "../Server/Class/ZirconGroup"; import { $ifEnv } from "rbxts-transform-env"; -import { $dbg } from "rbxts-transform-debug"; -import Zircon from "index"; -import { ZirconFunctionDeclaration } from "Shared/Types"; import ZrPlayerScriptContext from "@rbxts/zirconium/out/Runtime/PlayerScriptContext"; import { ZirconFunction } from "Class/ZirconFunction"; import { ZirconNamespace } from "Class/ZirconNamespace"; @@ -246,10 +240,7 @@ export namespace ZirconRegistryService { if (player.GetRankInGroup(game.CreatorId) >= 255) { groups.push(Creator); } - } else if ( - (game.CreatorType === Enum.CreatorType.User && game.CreatorId === player.UserId) || - game.GameId === 0 - ) { + } else if (game.CreatorType === Enum.CreatorType.User && game.CreatorId === player.UserId) { groups.push(Creator); } diff --git a/src/index.ts b/src/index.ts index 4d9e81b..291407e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,10 @@ -/** - * Zircon Server Namespace - */ - import ZrSiO4Client from "./Client"; import ZrSiO4Server from "./Server"; -import { ZrValue } from "@rbxts/zirconium/out/Data/Locals"; import { Logging } from "Log"; -import ZrUndefined from "@rbxts/zirconium/out/Data/Undefined"; -import { ZirconLogLevel } from "Client/Types"; +export { ZirconNamespaceBuilder } from "Class/ZirconNamespaceBuilder"; +export { ZirconFunctionBuilder } from "Class/ZirconFunctionBuilder"; +export { default as ZirconServer } from "./Server"; +export { default as ZirconClient } from "./Client"; /** * The Zircon console framework @@ -15,23 +12,16 @@ import { ZirconLogLevel } from "Client/Types"; namespace Zircon { /** * The client side functionalities for Zircon + * @deprecated Use `ZirconClient` @internal */ export const Client = ZrSiO4Client; /** * The server side functionalities for Zircon + * @deprecated Use `ZirconServer` @internal */ export const Server = ZrSiO4Server; export const Log = Logging; - - /** - * A function argument for Zircon functions - */ - export type Argument = ZrValue | ZrUndefined; - /** - * A value type for Zircon functions - */ - export type Value = ZrValue; } export default Zircon; diff --git a/tsconfig.json b/tsconfig.json index 8fb9085..51940e9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,6 +28,9 @@ "environmentRequires": { "NODE_ENV": "development" } + }, + { + "transform": "rbxts-transformer-services" } ] },