diff --git a/src/main.tsx b/src/main.tsx index a6fef90..8b7674e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,3 +1,5 @@ +import welcome from '@/utils/welcome'; + // Root contains the main dependencies and providers of the base app // - React, ReactDom, RecoilRoot, HelmetProvider, ThemeProvider, MUI-core) // App contains the main structure of the base app @@ -10,5 +12,8 @@ Promise.all([import('@/Root'), import('@/App')]).then(([{ default: render }, { d render(App); }); +// welcome message for users in the console +welcome(); + // ts(1208) export {}; diff --git a/src/utils/welcome.ts b/src/utils/welcome.ts new file mode 100644 index 0000000..bd3241f --- /dev/null +++ b/src/utils/welcome.ts @@ -0,0 +1,31 @@ +import { title } from '@/config'; + +// this utility is used to welcome users in the console +function getRandomRGBNumber() { + return Math.floor(Math.random() * 256); +} + +function getRandomColor() { + const r = getRandomRGBNumber(); + const g = getRandomRGBNumber(); + const b = getRandomRGBNumber(); + + return [`rgb(${r}, ${g}, ${b})`, `rgb(${255 - r}, ${255 - g}, ${255 - b})`]; +} + +function welcome() { + const [color, invertedColor] = getRandomColor(); + + const styles = [ + 'font-size: 40px', + `color: ${color}`, + `border: 1px solid ${invertedColor}`, + `background-color: ${invertedColor}`, + 'border-radius: 5px', + 'padding: 10px', + ].join(';'); + + console.log(`%c=== ${title} ===`, styles); +} + +export default welcome;