Refactor part 8

.eslintignore

@@ -3,3 +3,6 @@
 
 # Lua/u files
 **/*.lua
+
+# Other files
+**/.gitkeep

.prettierignore

@@ -3,3 +3,6 @@
 
 # Lua/u files
 **/*.lua
+
+# Other files
+**/.gitkeep

config/assets.json

@@ -0,0 +1,8 @@
+{
+  "interface": {
+    "shadow": 6486382942
+  },
+  "sounds": {
+    "button_click": 7848185199
+  }
+}

flamework.build

@@ -3,6 +3,10 @@
 	"flameworkVersion": "1.0.0-beta.7",
 	"identifiers": {
 		"softwaretycoon:out/client/controllers/AppController@AppController": "client/controllers/AppController@AppController",
+		"softwaretycoon:out/shared/flamework/AssetManager@AssetManager": "shared/flamework/AssetManager@AssetManager",
+		"softwaretycoon:out/shared/flamework/SoundManager@SoundFile": "shared/flamework/SoundManager@SoundFile",
+		"softwaretycoon:out/shared/flamework/SoundManager@SoundManager": "shared/flamework/SoundManager@SoundManager",
+		"softwaretycoon:out/interface/button/base@BaseButton": "interface/button/base@BaseButton",
 		"softwaretycoon:out/client/apps/Main@MainApp": "client/apps/Main@MainApp",
 		"softwaretycoon:out/client/controllers/AppController@ClientApp": "client/controllers/AppController@ClientApp",
 		"softwaretycoon:out/shared/components/game/SharedLot@SharedLot": "shared/components/game/SharedLot@SharedLot",
@@ -13,6 +17,9 @@
 		"softwaretycoon:out/client/controllers/DataController@DataController": "client/controllers/DataController@DataController",
 		"softwaretycoon:out/shared/errors/lotRequest@LotRequestError": "shared/errors/lotRequest@LotRequestError",
 		"softwaretycoon:out/client/controllers/LotController@LotController": "client/controllers/LotController@LotController",
+		"softwaretycoon:out/interface/frame/background/fade@FadeBackgroundFrame": "interface/frame/background/fade@FadeBackgroundFrame",
+		"softwaretycoon:out/interface/frame/spring/base@BaseSpringFrame": "interface/frame/spring/base@BaseSpringFrame",
+		"softwaretycoon:out/interface/frame/spring/transition@TransitionSpringFrame": "interface/frame/spring/transition@TransitionSpringFrame",
 		"softwaretycoon:out/server/components/game/ServerLot@ServerLot": "server/components/game/ServerLot@ServerLot",
 		"softwaretycoon:out/server/services/DataService@DataService": "server/services/DataService@DataService",
 		"softwaretycoon:out/server/services/LotService@LotService": "server/services/LotService@LotService",

package.json

@@ -46,8 +46,10 @@
     "@rbxts/bin": "^1.0.1",
     "@rbxts/flipper": "^2.0.1",
     "@rbxts/goodsignal": "^0.2.0",
+    "@rbxts/llama": "^1.1.0-ts2",
     "@rbxts/log": "^0.5.0-beta.1",
     "@rbxts/net": "^2.1.4",
+    "@rbxts/object-utils": "^1.0.4",
     "@rbxts/profileservice": "^1.4.1",
     "@rbxts/roact": "^1.4.0-ts.2",
     "@rbxts/roact-hooks": "^0.3.0-ts.2",

src/client/apps/Main.tsx

@@ -1,9 +1,10 @@
 import Roact, { Component } from "@rbxts/roact";
 import { ClientApp } from "client/controllers/AppController";
+import BaseButton from "interface/button/base";
 
 @ClientApp({})
 export default class MainApp extends Component {
 	public render() {
-		return <textlabel Size={UDim2.fromOffset(200, 50)} Text="Hello Roact!" />;
+		return <BaseButton Size={UDim2.fromOffset(200, 50)} />;
 	}
 }

src/interface/button/base.story.tsx

@@ -0,0 +1,18 @@
+import Roact, { mount, unmount } from "@rbxts/roact";
+import { cleanupAssets } from "interface/util/asset";
+import { BundleProvider } from "interface/util/bundle";
+import { HoarcekatStory } from "types/roact/hoarcekat";
+import BaseButton from "./base";
+
+export = identity<HoarcekatStory>(parent => {
+	const tree = mount(
+		<BundleProvider>
+			<BaseButton Size={UDim2.fromOffset(200, 50)} SoundsEnabled={false} />
+		</BundleProvider>,
+		parent,
+	);
+	return () => {
+		unmount(tree);
+		cleanupAssets();
+	};
+});

src/interface/button/base.tsx

@@ -0,0 +1,80 @@
+import { SingleMotor, Spring } from "@rbxts/flipper";
+import Roact, { Binding, Component, JsxInstance } from "@rbxts/roact";
+import { withSettings } from "interface/context/settings";
+import { getAssetServices } from "interface/util/asset";
+import { BindingUtil } from "shared/util/binding";
+
+export interface BaseButtonProps
+	extends Omit<JsxInstance<TextButton>, "BackgroundColor3" | "AutoButtonColor" | "Text"> {
+	BaseColor?: Color3;
+	HoveredColor3?: Color3;
+	SoundsEnabled?: boolean;
+	OnClick?: (rbx: TextButton, inputObject: InputObject, clickCount: number) => void;
+}
+
+/** BaseButton */
+export default class BaseButton extends Component<BaseButtonProps> {
+	private hoverMotor: SingleMotor;
+	private hoverBinding: Binding<number>;
+
+	public constructor(props: BaseButtonProps) {
+		super(props);
+
+		this.hoverMotor = new SingleMotor(0);
+		this.hoverBinding = BindingUtil.makeBindingFromMotor(this.hoverMotor);
+	}
+
+	private setMotor(float: number) {
+		this.hoverMotor.setGoal(
+			new Spring(float, {
+				frequency: 5,
+				dampingRatio: 1,
+			}),
+		);
+	}
+
+	private playClickSound() {
+		const { SoundManager, AssetManager } = getAssetServices();
+		const click_asset_id = "button_click";
+		AssetManager.getAssetIdFromSoundName(click_asset_id).match(
+			id => SoundManager.createSoundFile(click_asset_id, id).play(),
+			() => warn(`Unable to play because '${click_asset_id}' does not exists`),
+		);
+	}
+
+	public render() {
+		return withSettings(settings => {
+			const spread_props = { ...this.props };
+			spread_props[Roact.Children] = undefined;
+			spread_props.SoundsEnabled = undefined;
+			spread_props.OnClick = undefined;
+			spread_props.BaseColor = undefined;
+			spread_props.HoveredColor3 = undefined;
+			return (
+				<textbutton
+					AutoButtonColor={false}
+					BackgroundColor3={this.hoverBinding.map(alpha => {
+						return (
+							this.props.BaseColor?.Lerp(this.props.HoveredColor3 ?? new Color3(), alpha) ?? new Color3()
+						);
+					})}
+					Event={{
+						Activated: (rbx, input, count) => {
+							// click sound
+							if (settings.SoundsEnabled && (this.props.SoundsEnabled ?? true)) {
+								this.playClickSound();
+							}
+							this.props.OnClick?.(rbx, input, count);
+						},
+						MouseEnter: () => this.setMotor(1),
+						MouseLeave: () => this.setMotor(0),
+					}}
+					Text=""
+					{...spread_props}
+				>
+					{this.props[Roact.Children]}
+				</textbutton>
+			);
+		});
+	}
+}

src/interface/context/settings.tsx

@@ -0,0 +1,15 @@
+import { createContext, PropsWithChildren } from "@rbxts/roact";
+import Roact from "@rbxts/roact";
+import { DEFAULT_PLAYER_SETTINGS } from "shared/util/playersettings";
+import { PlayerSettings } from "types/player/settings";
+
+const SettingsContext = createContext(DEFAULT_PLAYER_SETTINGS);
+
+export function SettingsProvider(props: PropsWithChildren) {
+	// TODO: Support for player settings
+	return <SettingsContext.Provider value={DEFAULT_PLAYER_SETTINGS}>{props[Roact.Children]}</SettingsContext.Provider>;
+}
+
+export function withSettings(callback: (settings: PlayerSettings) => Roact.Element) {
+	return <SettingsContext.Consumer render={callback} />;
+}

src/interface/context/style.tsx

@@ -0,0 +1,17 @@
+import Roact, { createContext, PropsWithChildren } from "@rbxts/roact";
+import { GameConfigStyles, GameStyle, StyleThemes } from "interface/util/style";
+
+const StyleContext = createContext(GameConfigStyles[StyleThemes.Default]);
+
+export function StyleProvider(props: PropsWithChildren) {
+	// TODO: Support for dark mode in settings?
+	return (
+		<StyleContext.Provider value={GameConfigStyles[StyleThemes.Default]}>
+			{props[Roact.Children]}
+		</StyleContext.Provider>
+	);
+}
+
+export function withStyle(callback: (style: GameStyle) => Roact.Element) {
+	return <StyleContext.Consumer render={callback} />;
+}

src/interface/util/asset.ts

@@ -0,0 +1,25 @@
+import { Dependency } from "@flamework/core";
+import { RunService } from "@rbxts/services";
+import { AssetManager } from "shared/flamework/AssetManager";
+import { SoundManager } from "shared/flamework/SoundManager";
+
+/**
+ * Gets required asset services such: `AssetManager` and `SoundManager`
+ */
+export function getAssetServices() {
+	if (RunService.IsRunning()) {
+		return {
+			SoundManager: Dependency<SoundManager>(),
+			AssetManager: Dependency<AssetManager>(),
+		};
+	}
+	return {
+		SoundManager: new SoundManager(),
+		AssetManager: new AssetManager(),
+	};
+}
+
+/** Cleans up assets */
+export function cleanupAssets() {
+	getAssetServices().SoundManager.cleanupFiles();
+}

src/interface/util/bundle.tsx

@@ -0,0 +1,46 @@
+import Roact, { PropsWithChildren } from "@rbxts/roact";
+import { StoreProvider } from "@rbxts/roact-rodux";
+import type ClientStore from "client/store/store";
+import { SettingsProvider, withSettings } from "interface/context/settings";
+import { StyleProvider, withStyle } from "interface/context/style";
+import { withTransparency } from "interface/context/transparency";
+import { GameStyle } from "interface/util/style";
+import { PlayerSettings } from "types/player/settings";
+import { RoactBindable } from "types/roact/value";
+
+/**
+ * Straight forward inserting required components such as:
+ * - StoreProvider (if store property does exists)
+ * - StyleProvider
+ * - SettingsProvider
+ */
+export function BundleProvider(props: PropsWithChildren<{ store?: typeof ClientStore }>) {
+	const bundle_wrapper = (
+		<SettingsProvider>
+			<StyleProvider>{props[Roact.Children]}</StyleProvider>
+		</SettingsProvider>
+	);
+	return props.store !== undefined ? (
+		<StoreProvider store={props.store}>{bundle_wrapper}</StoreProvider>
+	) : (
+		bundle_wrapper
+	);
+}
+
+/**
+ * Straight forward providing required components such as:
+ * - StyleProvider
+ * - SettingsProvider
+ * - TransparencyProvider
+ */
+export function withBundle(
+	callback: (style: GameStyle, settings: PlayerSettings, transparency: RoactBindable<number>) => Roact.Element,
+) {
+	return withStyle(style => {
+		return withSettings(settings => {
+			return withTransparency(transparency => {
+				return callback(style, settings, transparency);
+			});
+		});
+	});
+}

src/interface/util/style.ts

@@ -0,0 +1,70 @@
+/**
+ * CSS like structure, this will get easier
+ * if we want dark theme to the game
+ */
+export namespace Style {
+	export interface PaddingXY {
+		PaddingX: number;
+		PaddingY: number;
+	}
+
+	export interface Frame {
+		Background: Color3;
+	}
+
+	export interface TextLabel extends Style.Frame {
+		Font: Enum.Font;
+		TextColor: Color3;
+		TextSize: number;
+	}
+
+	export interface TextButton extends Style.TextLabel, Style.PaddingXY {
+		HoverColor: Color3;
+	}
+}
+
+/** Default game style type structure */
+export interface GameStyle {
+	Tooltip: Style.PaddingXY & Style.TextLabel;
+	Buttons: {
+		Main: Style.TextButton;
+	};
+	Frame: {
+		Main: Style.Frame;
+	};
+}
+
+/** Game style themes */
+export enum StyleThemes {
+	Default = "DEFAULT",
+}
+
+/** Game style configuration */
+export const GameConfigStyles: { [key in StyleThemes]: GameStyle } = {
+	[StyleThemes.Default]: {
+		Tooltip: {
+			Background: Color3.fromRGB(240, 240, 240),
+			TextColor: Color3.fromRGB(89, 89, 89),
+			PaddingX: 12,
+			PaddingY: 6,
+			TextSize: 18,
+			Font: Enum.Font.GothamBlack,
+		},
+		Buttons: {
+			Main: {
+				Background: Color3.fromRGB(240, 240, 240),
+				HoverColor: Color3.fromRGB(212, 212, 212),
+				PaddingX: 12,
+				PaddingY: 6,
+				TextColor: Color3.fromRGB(28, 28, 28),
+				TextSize: 18,
+				Font: Enum.Font.SourceSansBold,
+			},
+		},
+		Frame: {
+			Main: {
+				Background: Color3.fromRGB(227, 227, 227),
+			},
+		},
+	},
+};