+
+ )
+}
+
+export default App
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..cbac7ae
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,52 @@
+const backendUrl = 'http://localhost:8080/api/'; // proxy
+// const backendUrl = 'http://localhost:8000/'; // original
+
+async function fetchMasterbase
+
+ {ConnectionMonitor(online, setOnline)}
+ {renderPage()}
+
+
+
+
;
+};
+
+export default ContentPageContainer;
diff --git a/src/components/Divider/Divider.css b/src/components/Divider/Divider.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
new file mode 100644
index 0000000..3886237
--- /dev/null
+++ b/src/components/Divider/Divider.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './Divider.css';
+
+interface DividerProps {
+ size?: number;
+ padding?: number;
+ className?: string;
+}
+
+const Divider = ({ size = 1, padding = 0, className = '' }: DividerProps) => {
+ return (
+
+ );
+};
+
+export default Divider;
diff --git a/src/components/Flex/Flex.css b/src/components/Flex/Flex.css
new file mode 100644
index 0000000..4a0203a
--- /dev/null
+++ b/src/components/Flex/Flex.css
@@ -0,0 +1,3 @@
+.flex {
+ display: flex;
+}
diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
new file mode 100644
index 0000000..225501b
--- /dev/null
+++ b/src/components/Flex/Flex.tsx
@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import './Flex.css';
+
+interface FlexProps {
+ children: ReactNode;
+ className?: string;
+ onClick?: () => void;
+ style?: object;
+}
+
+const Flex = ({ children, className = '', onClick, style }: FlexProps) => {
+ const handleClick = () => {
+ if (typeof onClick === 'function') onClick();
+ };
+ return (
+
+ {online ? 'online' : 'offline'}
+
+ {children}
+
+ {
+ }}
+ hideIcon={true}
+ />
+ Masterbase
+
+
+ {children}
+
+ );
+};
+
+export default Flex;
diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css
new file mode 100644
index 0000000..dcf4d6d
--- /dev/null
+++ b/src/components/Modal/Modal.css
@@ -0,0 +1,24 @@
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.301);
+}
+
+.modal {
+ position: fixed;
+ padding: 20px;
+ width: auto;
+ height: auto;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 99999;
+ background-color: #161617eb;
+ outline: 1px solid var(--dark-highlight-color);
+ backdrop-filter: blur(5px);
+ border-radius: 5px;
+}
\ No newline at end of file
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000..6430e0c
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Modal from 'react-modal';
+import './Modal.css';
+import ReactModal from 'react-modal';
+import { useModal } from '../../context/ModalContext';
+
+interface ModalOptions {
+ dismissable?: boolean;
+}
+
+interface ModalProps {
+ title?: string | React.ReactNode;
+ footer?: React.ReactNode;
+ show?: boolean;
+ children?: React.ReactNode;
+ className?: string;
+ onClose?: () => void;
+ modalOptions?: ModalOptions;
+}
+
+Modal.setAppElement('#root');
+
+const ModalWrapper = ({ className, onClose }: ModalProps) => {
+ const ModalRef = React.useRef{modalContent}
+ 
+
+ );
+
+ return (
+
+ {collapsed && menuIcon}
+
+ {!collapsed && menuIcon}
+ {!collapsed && (
+
+ MegaAntiCheat
+
+ )}
+
+ {!hideIcon && (collapsed ? (
+
+
+
+ );
+};
+
+export default MenuHeader;
diff --git a/src/components/SideMenu/SideMenu.css b/src/components/SideMenu/SideMenu.css
new file mode 100644
index 0000000..ad0ddcc
--- /dev/null
+++ b/src/components/SideMenu/SideMenu.css
@@ -0,0 +1,15 @@
+.side-menu.collapsed {
+ @apply max-w-[50px];
+}
+
+.menu-toggle.collapsed {
+ @apply relative top-2 left-2 bottom-[unset] transform-none;
+}
+
+.menu-icon.collapsed {
+ @apply ml-1 left-1 relative -top-0.5;
+}
+
+.side-menu:not(.collapsed) {
+ @apply shadow-2xl shadow-black
+}
\ No newline at end of file
diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx
new file mode 100644
index 0000000..9f8b1ce
--- /dev/null
+++ b/src/components/SideMenu/SideMenu.tsx
@@ -0,0 +1,86 @@
+import {Dispatch, SetStateAction, useEffect, useRef, useState, MouseEvent as ReactMouseEvent} from 'react';
+
+import MenuHeader from './MenuHeader';
+
+
+import './SideMenu.css';
+import {t} from "../../../i18n";
+import SideMenuItem from "../SideMenuItem/SideMenuItem.tsx";
+import Divider from '../Divider/Divider.tsx';
+import {MENU_ITEMS, PAGES} from "../../constants/menuConstants.tsx";
+
+interface SideMenuProps {
+ setCurrentPage: Dispatch
+
+
+
+ );
+};
+
+export default SideMenu;
diff --git a/src/components/SideMenuItem/SideMenuItem.css b/src/components/SideMenuItem/SideMenuItem.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/SideMenuItem/SideMenuItem.tsx b/src/components/SideMenuItem/SideMenuItem.tsx
new file mode 100644
index 0000000..f2d485c
--- /dev/null
+++ b/src/components/SideMenuItem/SideMenuItem.tsx
@@ -0,0 +1,55 @@
+import {ReactElement} from 'react';
+import {Book} from 'lucide-react';
+import './SideMenuItem.css';
+import Flex from "../Flex/Flex.tsx";
+import Tooltip from "../Tooltip/Tooltip.tsx";
+
+interface SideMenuItemProps {
+ title: string;
+ Icon?: ReactElement;
+ onClick?: () => void;
+ collapsed?: boolean;
+ selected?: boolean;
+}
+
+const SideMenuItem = ({
+ title,
+ Icon =
+
+ {MENU_ITEMS.map(({titleKey, icon, page}) => (
+ setCurrentPage(page)}
+ selected={currentPage === page}
+ />
+ ))}
+
+ {Icon}
+
+ {title}
+
+
+ {collapsed ? (
+
+
+ ) : (
+
+ );
+};
+
+export default SideMenuItem as typeof SideMenuItem;
diff --git a/src/components/Text/TextItem.tsx b/src/components/Text/TextItem.tsx
new file mode 100644
index 0000000..c5ad5d9
--- /dev/null
+++ b/src/components/Text/TextItem.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface TextProps {
+ children?: string;
+ fontSize?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+ className?: string;
+}
+
+const tags: Record{str}
); + + return ( +
+
+ );
+};
+
+export default Tooltip;
diff --git a/src/components/online.tsx b/src/components/online.tsx
new file mode 100644
index 0000000..6725c77
--- /dev/null
+++ b/src/components/online.tsx
@@ -0,0 +1,59 @@
+import {status} from "../api";
+import {SetStateAction, useEffect} from "react";
+import {useModal} from "../context/ModalContext.tsx";
+
+function Online(online: boolean, setOnline: { (value: SetStateAction
+ {children}
+
+
+ {newLineHandledText}
+
+ Death grips is {online && 'online'} {!online && 'offline'}
+
+}
+
+export default Online;
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..fdfa165
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,5 @@
+export class Constants {
+ static verificationInterval = 5000;
+ static miniModeWidth = 482;
+ static miniModeHeight = 300;
+}
diff --git a/src/constants/menuConstants.tsx b/src/constants/menuConstants.tsx
new file mode 100644
index 0000000..7015a3d
--- /dev/null
+++ b/src/constants/menuConstants.tsx
@@ -0,0 +1,20 @@
+import {Settings2} from 'lucide-react';
+import {ReactElement} from 'react';
+
+export const enum PAGES {
+ PREFERENCES,
+}
+
+interface MenuItem {
+ titleKey: string;
+ icon: ReactElement;
+ page: PAGES;
+}
+
+export const MENU_ITEMS: MenuItem[] = [
+ {
+ titleKey: 'PREFERENCES',
+ icon:
+
+ );
+}
+
+export default Dashboard
diff --git a/src/pages/provision.tsx b/src/pages/provision.tsx
new file mode 100644
index 0000000..a1939d4
--- /dev/null
+++ b/src/pages/provision.tsx
@@ -0,0 +1,12 @@
+import Button from "../components/Button/Button.tsx";
+import {provisionUrl} from "../api";
+
+function Provision() {
+ return
+}
+
+export default Provision;
diff --git a/src/preferences.ts b/src/preferences.ts
new file mode 100644
index 0000000..3bf4dd3
--- /dev/null
+++ b/src/preferences.ts
@@ -0,0 +1,137 @@
+async function setSettingKey(
+ key: string,
+ value: unknown,
+ type: 'internal' | 'external' = 'external',
+) {
+ try {
+ const formBody = {
+ [type]: {
+ [key]: value,
+ },
+ };
+
+ const options = {
+ method: 'PUT',
+ body: JSON.stringify(formBody),
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ };
+ // headers: {
+// TODO endpoint or something
+ // const response = await fetch(PREF_ENDPOINT, options);
+ // console.log(response);
+ //
+ // if (!response.ok) throw new Error('Failed to set setting.');
+
+ //return response.json();
+ } catch (e) {
+ console.error(e);
+ }
+}
+
+async function setSettings(newSettings: PreferenceResponse) {
+ try {
+ const options = {
+ method: 'PUT',
+ body: JSON.stringify(newSettings),
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ };
+// TODO endpoint or something
+ // const response = await fetch(PREF_ENDPOINT, options);
+ // console.log(response);
+ //
+ // if (!response.ok) throw new Error('Failed to set setting.');
+
+ //return response.json();
+ } catch (e) {
+ console.error(e);
+ }
+}
+
+interface PreferenceResponse {
+ internal: {
+ tf2Directory: string;
+ rconPassword: string;
+ steamApiKey: string;
+ friendsApiUsage: string;
+ };
+ external: Settings;
+}
+
+interface Settings {
+ language: string;
+ openInApp: boolean;
+ colors: {
+ You: string;
+ Player: string;
+ Friend: string;
+ Trusted: string;
+ Suspicious: string;
+ FriendOfCheater: string;
+ Cheater: string;
+ Convict: string;
+ Bot: string;
+ };
+}
+
+export const defaultSettings: PreferenceResponse = {
+ external: {
+ language: 'English',
+ openInApp: false,
+ colors: {
+ You: '#00aaaa',
+ Player: 'none',
+ Friend: '#007700',
+ Trusted: '#00ee00',
+ Suspicious: '#aaaa00',
+ FriendOfCheater: '#888888',
+ Cheater: '#ee0000',
+ Convict: '#ee0066',
+ Bot: '#880000',
+ },
+ },
+ internal: {
+ friendsApiUsage: '',
+ tf2Directory: '',
+ steamApiKey: '',
+ rconPassword: '',
+ },
+};
+
+// Merge settings with default settings
+function mergeWithDefaults(
+ settings: Partial