Update theme

README.md

@@ -4,6 +4,10 @@
 
 Minecraft analytics and anti/PieRay helper.
 
+## Launcher
+
+![Launcher](images/launcher.png?raw=true "Launcher")
+
 ## Analytics
 
 ![Analytics](images/analytics.png?raw=true "Analytics")

src/components/App.tsx

@@ -9,45 +9,71 @@ import {
   TabPanel,
   TabPanels,
   Box,
-  useColorModeValue,
   Avatar,
   Spacer,
   Tooltip,
+  ColorModeProvider,
+  ThemeProvider,
+  extendTheme,
 } from '@chakra-ui/react'
 import React from 'react'
 import { Analytics } from './Analytics'
 import { Launcher } from './Launcher'
 import { PieRayHelper } from './PieRayHelper'
 import { Waypoints } from './Waypoints'
 
-function App() {
+const theme = extendTheme({})
+
+export function ThemedApp(props: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <ColorModeProvider value="dark">
+        <Box
+          color="chakra-body-text"
+          style={{
+            backgroundImage: 'url(app-file://images/icons/deepslate.png)',
+            backgroundSize: '64px',
+            height: '100%',
+          }}
+        >
+          {props.children}
+        </Box>
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+}
+
+export function App() {
   const [selectedTab, setSelectedTab] = React.useState(2)
   return (
     <Tabs
       variant="soft-rounded"
-      colorScheme="green"
+      colorScheme="yellow"
       index={selectedTab}
       onChange={(index) => setSelectedTab(index)}
+      style={{ backgroundColor: 'rgba(0, 0, 0, 0.4)' }}
     >
-      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
+      <Box bgImage="app-file://images/icons/blackstone.png" bgSize={64} px={4}>
         <Flex alignItems="center" height="6rem">
           <IconButton
             aria-label="logo"
             width="5rem"
-            icon={
-              <Image src="https://github.com/GreenAppers/EmpireUtils/blob/389e3594b37a48f48d01fd8b8b48fa09fe9987fa/images/1024.png?raw=true" />
-            }
+            variant="ghost"
+            icon={<Image src="app-file://images/1024fg.png" />}
           />
           &nbsp;
           <TabList>
-            <Tab>Analytics</Tab>
-            <Tab>Anti/PieRay</Tab>
-            <Tab>Launcher</Tab>
-            <Tab>Strongholds</Tab>
-            <Tab>Waypoints</Tab>
+            <Tab color="yellow.100">Analytics</Tab>
+            <Tab color="yellow.100">Anti/PieRay</Tab>
+            <Tab color="yellow.100">Launcher</Tab>
+            <Tab color="yellow.100">Strongholds</Tab>
+            <Tab color="yellow.100">Waypoints</Tab>
           </TabList>
           <Spacer />
-          <Button onClick={() => window.api.loginToMicrosoftAccount()}>
+          <Button
+            variant="ghost"
+            onClick={() => window.api.loginToMicrosoftAccount()}
+          >
             <Tooltip label="Sign in">
               <Avatar />
             </Tooltip>
@@ -64,5 +90,3 @@ function App() {
     </Tabs>
   )
 }
-
-export default App

src/components/Launcher.tsx

@@ -21,6 +21,7 @@ import {
   Select,
   Spacer,
   Spinner,
+  Text,
   Tooltip,
 } from '@chakra-ui/react'
 import { AddIcon, EditIcon } from '@chakra-ui/icons'
@@ -32,6 +33,7 @@ import { v4 as uuidv4 } from 'uuid'
 import {
   findVersionManifest,
   GameInstall,
+  getGameInstallIsHacked,
   getGameInstalModLoaderName,
   ModLoaderName,
   MojangVersionManifests,
@@ -386,8 +388,8 @@ export function Launcher() {
                     <Image
                       src={
                         i % 2 === 0
-                          ? 'https://github.com/GreenAppers/EmpireUtils/blob/dd24bcbefda54039d8882b41e16cf455403d3aa9/images/icons/grassblock.png?raw=true'
-                          : 'https://github.com/GreenAppers/EmpireUtils/blob/dd24bcbefda54039d8882b41e16cf455403d3aa9/images/icons/creeper.png?raw=true'
+                          ? 'app-file://images/icons/grassblock.png'
+                          : 'app-file://images/icons/creeper.png'
                       }
                     />
                   }
@@ -400,10 +402,26 @@ export function Launcher() {
                 />
                 <Box>
                   <Heading as="h5" size="sm">
-                    {install.name +
-                      (install.versionManifest.id !== install.name
-                        ? `: ${install.versionManifest.id}`
-                        : '')}
+                    <Flex>
+                      <Text>
+                        {install.name +
+                          (install.versionManifest.id !== install.name
+                            ? `: ${install.versionManifest.id}`
+                            : '')}
+                        &nbsp;
+                      </Text>
+
+                      {getGameInstalModLoaderName(install) ===
+                      ModLoaderName.Fabric ? (
+                        getGameInstallIsHacked(install) ? (
+                          <Text color="red.500">[Hacked]</Text>
+                        ) : (
+                          <Text color="orange.200">[Fabric, Allowed mods]</Text>
+                        )
+                      ) : (
+                        <Text color="yellow.100">[Vanilla]</Text>
+                      )}
+                    </Flex>
                   </Heading>
                   {install.uuid}
                 </Box>

src/constants.ts

@@ -270,6 +270,9 @@ export const getGameInstalModLoaderName = (
   return ModLoaderName.None
 }
 
+export const getGameInstallIsHacked = (gameInstall: Partial<GameInstall>) =>
+  gameInstall?.mods?.some((x) => x.includes('meteor-client'))
+
 export const setGameInstallModLoaderName = (
   gameInstall: Partial<GameInstall>,
   modLoaderName: string

src/index.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html style="height: 100%;">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>🏰 Empire Utils</title>
   </head>
-  <body>
-    <div id="root"></div>
+  <body style="height: 100%;">
+    <div style="height: 100%;" id="root"></div>
   </body>
 </html>

src/index.tsx

@@ -1,8 +1,8 @@
-import { ChakraProvider } from '@chakra-ui/react'
+import { ChakraProvider, extendTheme } from '@chakra-ui/react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import App from './components/App'
+import { App, ThemedApp } from './components/App'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const docRoot = document.getElementById('root')
@@ -15,7 +15,9 @@ root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ChakraProvider>
-        <App />
+        <ThemedApp>
+          <App />
+        </ThemedApp>
       </ChakraProvider>
     </QueryClientProvider>
   </React.StrictMode>

src/main.ts

@@ -4,6 +4,8 @@ import {
   clipboard,
   dialog,
   ipcMain,
+  net,
+  protocol,
   session,
   shell,
 } from 'electron'
@@ -12,7 +14,7 @@ import isDev from 'electron-is-dev'
 import log from 'electron-log/main'
 
 import './index.css'
-import { CHANNELS, GameInstall, LAUNCH_CHANNEL, STORE_KEYS } from './constants'
+import { CHANNELS, GameInstall, LAUNCH_CHANNEL } from './constants'
 import { AuthProvider } from './msal/AuthProvider'
 import { newStore, removeGameInstall, updateGameInstall } from './store'
 import {
@@ -82,11 +84,14 @@ app.on('ready', () => {
       responseHeaders: {
         ...details.responseHeaders,
         'Content-Security-Policy': [
-          "default-src 'self' 'unsafe-eval'; connect-src 'self' https://launchermeta.mojang.com https://meta.fabricmc.net; img-src 'self' https:; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
+          "default-src 'self' 'unsafe-eval'; connect-src 'self' https://launchermeta.mojang.com https://meta.fabricmc.net; img-src 'self' https: app-file:; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
         ],
       },
     })
   })
+  protocol.handle('app-file', async (request) =>
+    net.fetch(request.url.replace(`app-file://`, `file://${app.getAppPath()}/`))
+  )
   ipcMain.handle(CHANNELS.electronStoreGet, (_event, key: string) =>
     store.get(key)
   )