Alot of improvements to visuals

src/renderer/App.css

@@ -6,66 +6,72 @@ body {
   position: relative;
   color: white;
   height: 100vh;
-  background: linear-gradient(
-    200.96deg,
-    #fedc2a -29.09%,
-    #dd5789 51.77%,
-    #7a2c9e 129.35%
-  );
   background-image: url('../../assets/wow-lich-bg.jpeg');
   background-size: auto 100%;
   /* background-repeat: no-repeat; */
   /* font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif; */
   font-family: 'Roboto', sans-serif;
-  font-weight: 00;
   overflow-y: hidden;
-  display: flex;
   justify-content: center;
   align-items: center;
-  animation: moveBackground 75s linear infinite alternate;
+  filter: brightness(1.05);
+  animation: moveBackground 20s linear infinite alternate;
 }
 
-/* .eyes {
-  position: absolute;
-  top: 18.5%;
-  left: 20%;
-  transform: translate(-50%, -50%);
-  width: 10px;
-  height: 5px;
-  border-radius: 70%;
-  background-color: rgba(32, 224, 247, 1);
-  box-shadow: 0 0 20px 10px rgba(32, 224, 247, 0.8);
-  animation: eyesAnimation 75s linear infinite, glowAnimation 2.0s ease-in-out infinite alternate;
-} */
+body::before {
+  content: "";
+  position: fixed;
+  opacity: 0.85;
+  background-color:rgb(5, 83, 156);
+  background-image: url('../../assets/wow-lich-bg.jpeg');
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: -1;
+  filter: brightness(1.30);
+  animation: moveBackground 20s linear infinite alternate;
+}
 
 @keyframes moveBackground {
-0% {
-  background-position: 0% 0;
-}
-100% {
-  background-position: 70% 0;
-}
-}
-
-/* @keyframes eyesAnimation {
   0% {
-    left: 10%;
-  }
-  50% {
-    left: 50%;
+    background-position: 0% 0;
   }
   100% {
-    left: 65%;
+    background-position: 70% 0;
+  }
   }
-} */
 
-@keyframes glow {
-  0% {
-    box-shadow: 0 0 120px 5px rgba(32, 224, 247, 0.3);
-  }
-  100% {
-    box-shadow: 0 0 90px 40px rgba(32, 224, 247, 1); /* Increased glow effect */
+  @keyframes glow {
+    0% {
+      box-shadow: 0 0 120px 5px rgba(32, 224, 247, 0.3);
+    }
+    100% {
+      box-shadow: 0 0 90px 40px rgba(32, 224, 247, 1); /* Increased glow effect */
+    }
   }
+
+
+p {
+  padding-bottom: 5px;
+  margin-top: 2px;
+}
+
+em {
+  font-size: 14px;
+}
+
+li {
+  list-style:disc;
+}
+
+h3 {
+  margin: 0;
+  font-size: '12px';
+  color: rgb(254,223,164, 1.2);
 }
 
 button {
@@ -93,10 +99,6 @@ button:hover {
 
 }
 
-li {
-  list-style: none;
-}
-
 a {
   text-decoration: none;
   height: fit-content;
@@ -109,6 +111,14 @@ a:hover {
   text-decoration: none;
 }
 
+.wowlogo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 65px 0 20px 0px;
+  filter: brightness(10000%) invert(100%) sepia(0%) saturate(0%);
+}
+
 .flexbox {
   display: flex;
   justify-content: center;
@@ -118,14 +128,6 @@ a:hover {
   left:80%;
 }
 
-.wowlogo {
-  margin-top: -100px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 20px 0;
-  filter: brightness(10000%) invert(100%) sepia(0%) saturate(0%);
-}
 
 .snowfall {
   position: 'absolute';
@@ -133,7 +135,7 @@ a:hover {
   left: 0;
   width: '100vw';
   height: '100vh';
-  background: 'rgba(0, 0, 0, 0.10)';
+  background: 'rgba(0, 0, 0, 0.40)';
 }
 
 .versionText h3 {
@@ -147,25 +149,76 @@ a:hover {
   /* letter-spacing: 1px; */
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
-h3 {
-  margin:4px;
-}
 
 .latest {
   color: rgba(30,250,80,100);
 }
 
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  /* background: #BB2020; */
+  background: rgba(87, 120, 196, 0.587);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  /* background: #BB2020; */
+  background: rgba(87, 120, 196, 0.987);
+}
+
 .overlay {
   position: relative;
-  /* top: 0; */
-  /* left: 0; */
   width: 100%;
-  /* height: 100%; */
   background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
   border-radius: 0.5em;
   padding: 0.1em 10px 5px 10px;
-  /* opacity: 0.5; Adjust the opacity as needed */
-  pointer-events: none; /* Allows clicks to pass through the overlay */
+  pointer-events: none;
+  transition: box-shadow 0.3s, background-color 0.3s;
+}
+
+.overlay:hover {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); /* Glow shadow on hover */
+  background-color: rgba(0, 0, 0, 0.7); /* Darken the background on hover */
+}
+
+.overlayContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.overlay.error {
+  color: red;
+  width: 80%;
+  background-color: rgba(25,25, 40, 0.85);
+  padding: 20px;
+  text-align: center;
+}
+
+.error h3 {
+  margin: 0;
+  font-size: 1.5em;
+  padding-bottom: 10px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 600;
+}
+
+.errorDetails {
+  width: 100%;
+
+  color: aliceblue;
+  font-size: large;
 }
 
 .action-install {
@@ -174,9 +227,9 @@ h3 {
 
 
 .container {
-  margin-top: 10px;
+  /* margin-top: 10px; */
   display: flex;
-  padding: 10px;
+  padding: 20px 5px 20px 5px;
   height: 35px;
 }
 
@@ -194,3 +247,16 @@ h3 {
   color: #fedc2a;
   font-weight: 600;
 }
+
+.warning {
+  color: #eeff00;
+  font-weight: 600;
+  font-size: inherit;
+}
+
+.updatebtn {
+  background-color: #FF8000;
+}
+.updatebtn:hover {
+  background-color: #FFA500;
+}

src/renderer/App.tsx

@@ -4,21 +4,65 @@ import React, { useEffect, useState } from 'react';
 /* eslint-disable */
 import Snowfall from 'react-snowfall';
 
+// Assets
 import './App.css';
 import icon from '../../assets/warcraft-logo.png';
-import { LauncherServer, WowLauncher } from '../typings';
-import BadgeList from './BadgeList';
+import wowInstalled from '../../assets/wow-icon.png';
+import hdIcon from '../../assets/hd-icon.png';
+import moneyIcon from '../../assets/money2-icon.png';
+import musicIcon from '../../assets/music-icon.png';
+
+// Common Types
+import { LauncherServer, WowLauncher, DownloadCallbacks } from '../typings';
+
+// MUI Components
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Unstable_Grid2';
+import Typography from '@mui/material/Typography';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardActions from '@mui/material/CardActions';
+import Button from '@mui/material/Button';
+import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
+
+// App Components
+import VersionText from './VersionText';
+import LaunchButton from './LaunchButton';
+
+// Configuration variables
+import  config from '../main/config.json';
+
+export type VersionStamp = {
+  status: 'update' | 'current' | 'unknown',
+  newVersion: string,
+  oldVersion: string
+};
 
 declare const window: Window;
 
 function WoWClientPatcher() {
 
   const [appInfo, setAppInfo] = useState<WowLauncher.AppInfo | null>();
+  const [downloadProgress, setDownloadProgress] = useState<number>(0);
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
+  const [versionStamp, setVersionStamp] = useState<VersionStamp>({
+    status: 'unknown',
+    newVersion: '',
+    oldVersion: ''
+  });
+
+  const updateAppInfo = async () => {
+    const data = await window.api.GetAppInfo();
+    setAppInfo(data);
+  }
 
   useEffect(() => {
-
     const getAppInfo = async () => {
       const data = await window.api.GetAppInfo();
+
       setAppInfo(data);
     };
 
@@ -29,9 +73,104 @@ function WoWClientPatcher() {
     window.api.Launch();
   };
 
+  // Install WoW Client
+  const installWow = () => {
+    if(appInfo?.WoWPatched) {
+      return;
+    }
+
+    window.api.PatchWoW();
+    setTimeout(() => {
+      updateAppInfo();
+    }, 150);
+  }
+
+  const installStore = async () => {
+    if(appInfo?.AIOInstalled) {
+      return;
+    }
+
+    window.api.InstallStore({
+      data: (data) => {
+        setIsDownloading(true);
+        setDownloadProgress(Math.floor(data.percentage));
+      },
+      end: async ({totalBytes, file}) => {
+        setIsDownloading(false);
+        setDownloadProgress(0);
+
+        setTimeout(() => {
+          updateAppInfo();
+        }, 300);
+      },
+    } as DownloadCallbacks);
+  }
+
+  const batchCallbacks: DownloadCallbacks = {
+      batchStart: (data) => {
+        setIsDownloading(true);
+      },
+      batchData: (data) => {
+        setIsDownloading(true);
+        setDownloadProgress(Math.floor(data.percentage));
+      },
+      batchEnd: (data) => {
+        setIsDownloading(false);
+        setDownloadProgress(0);
+        setTimeout(() => {
+          updateAppInfo();
+        }, 300);
+      }
+  };
+
+  const installHD = async () => {
+    if(appInfo?.HD || isDownloading) {
+      return;
+    }
+
+    window.api.InstallHD(batchCallbacks);
+  }
+
+  const installMisc = async () => {
+    if(appInfo?.Misc || isDownloading) {
+      return;
+    }
+
+    window.api.InstallMisc(batchCallbacks);
+  }
+
+  const installUpdates = async () => {
+    if(appInfo?.Version === appInfo?.RemoteVersion) {
+      return;
+    }
+    if(isDownloading) {
+      return;
+    }
+
+    window.api.InstallUpdates(batchCallbacks);
+  }
+
+
+  useEffect(() => {
+
+    if(appInfo?.Version && appInfo?.Version !== appInfo?.RemoteVersion) {
+      setVersionStamp({
+        status: 'update',
+        newVersion: appInfo?.RemoteVersion || '',
+        oldVersion: appInfo?.Version || '',
+      });
+    } else {
+      setVersionStamp({
+        status: 'current',
+        newVersion: appInfo?.RemoteVersion || '',
+        oldVersion: appInfo?.Version || '',
+      });
+    }
+
+  }, [appInfo]);
+
   return (
-    <div style={{height:"480px"}}>
-      <div className="eyes"></div>
+    <Container maxWidth="md" sx={{ border: 0 }}>
       <div className="snowfall">
         <Snowfall
           changeFrequency={150}
@@ -43,42 +182,307 @@ function WoWClientPatcher() {
       <div className="wowlogo">
         <img width="300px" alt="icon" src={icon} />
       </div>
-      <div className="overlay">
-        <div className="versionText">
-          <h2>Installed</h2>
-          <BadgeList appInfo={appInfo} />
+      { appInfo?.WoWInstalled ? (
+        <Box
+          sx={{
+            bgcolor: 'rgba(0,40,60,0.55)',
+            padding: '0px 10px 5px 10px',
+            boxShadow: '0px 0px 20px 0px rgba(0,0,0,0.55)',
+          }}
+        >
+          {/* WoW Client component */}
+          <Grid
+            container
+            direction="row"
+            height="100%"
+            alignItems="center"
+            padding={1}
+          >
+            <Grid xs={4}>
+              <Paper
+                onClick={installWow}
+                elevation={6}
+                sx={{
+                  padding: '3px',
+                  height: '65px',
+                  transition: !appInfo?.WoWPatched
+                    ? 'all 0.3s ease-out'
+                    : 'none',
+                  ':hover': !appInfo?.WoWPatched
+                    ? {
+                        cursor: 'pointer',
+                        backgroundColor: 'rgba(235,0,0,0.7)',
+                        transition: 'all 0.3s ease-out',
+                      }
+                    : 'none',
+                  backgroundColor: appInfo?.WoWPatched
+                    ? 'rgba(30,30,40,0.8)'
+                    : 'rgba(250,0,19,0.5)',
+                  border: '1px solid rgba(254,223,164,0.6)',
+                }}
+              >
+                <Grid
+                  container
+                  direction="row"
+                  height="100%"
+                  alignItems="center"
+                  padding={1}
+                >
+                  <Grid xs={3}>
+                    <img src={wowInstalled} alt="wow" width="49px" />
+                  </Grid>
+                  <Grid xs={9} padding={1}>
+                    <Typography variant="body2" sx={{ color: 'white' }}>
+                      {appInfo?.WoWPatched
+                        ? 'Wow.exe is optimized '
+                        : 'Install patched Wow.exe'}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </Paper>
 
-          <div className="container">
-            <div className="left-content">
-              <span className="new">Version v4 released:</span> Click upgrade to download and review patch notes.
-            </div>
-            <div className="right-content">
-              {appInfo?.version}
+              {/* Store menu component */}
+
+              <Paper
+                onClick={installStore}
+                elevation={6}
+                sx={{
+                  padding: '3px',
+                  height: '65px',
+                  transition: !appInfo?.AIOInstalled
+                    ? 'all 0.3s ease-out'
+                    : 'none',
+                  ':hover': !appInfo?.AIOInstalled
+                    ? {
+                        cursor: 'pointer',
+                        backgroundColor: 'rgba(235,0,0,0.7)',
+                        transition: 'all 0.3s ease-out',
+                      }
+                    : 'none',
+                  backgroundColor: appInfo?.AIOInstalled
+                    ? 'rgba(30,30,40,0.8)'
+                    : 'rgba(250,0,19,0.5)',
+                  border: '1px solid rgba(254,223,164,0.6)',
+                }}
+              >
+                <Grid
+                  container
+                  direction="row"
+                  height="100%"
+                  alignItems="center"
+                  padding={1}
+                >
+                  <Grid xs={3}>
+                    <img src={moneyIcon} alt="wow" width="50px" />
+                  </Grid>
+                  <Grid xs={9} padding={1}>
+                    <Typography variant="body2" sx={{ color: 'white' }}>
+                      {appInfo?.AIOInstalled
+                        ? 'Araxia Store Installed'
+                        : 'Install Araxia Store'}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </Paper>
+
+              {/* HD patches component */}
+              <Paper
+                onClick={installHD}
+                elevation={6}
+                sx={{
+                  padding: '3px',
+                  height: '65px',
+                  transition: !appInfo?.HD ? 'all 0.3s ease-out' : 'none',
+                  ':hover': !appInfo?.HD
+                    ? {
+                        cursor: 'pointer',
+                        backgroundColor: 'rgba(235,0,0,0.7)',
+                        transition: 'all 0.3s ease-out',
+                      }
+                    : 'none',
+                  backgroundColor: appInfo?.HD
+                    ? 'rgba(30,30,40,0.8)'
+                    : 'rgba(250,0,19,0.5)',
+                  border: '1px solid rgba(254,223,164,0.6)',
+                }}
+              >
+                <Grid
+                  container
+                  direction="row"
+                  height="100%"
+                  alignItems="center"
+                  padding={1}
+                >
+                  <Grid xs={3}>
+                    <img src={hdIcon} alt="wow" width="50px" />
+                  </Grid>
+                  <Grid xs={9} padding={1}>
+                    <Typography variant="body2" sx={{ color: 'white' }}>
+                      {appInfo?.HD
+                        ? 'HD Client Installed'
+                        : 'Install HD Client'}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </Paper>
+
+              {/* Music & Optional patches component */}
+              <Paper
+                onClick={installMisc}
+                elevation={6}
+                sx={{
+                  padding: '3px',
+                  height: '65px',
+                  transition: !appInfo?.Misc ? 'all 0.3s ease-out' : 'none',
+                  ':hover': !appInfo?.Misc
+                    ? {
+                        cursor: 'pointer',
+                        backgroundColor: 'rgba(235,0,0,0.7)',
+                        transition: 'all 0.3s ease-out',
+                      }
+                    : 'none',
+                  backgroundColor: appInfo?.Misc
+                    ? 'rgba(30,30,40,0.8)'
+                    : 'rgba(250,0,19,0.5)',
+                  border: '1px solid rgba(254,223,164,0.6)',
+                }}
+              >
+                <Grid
+                  container
+                  direction="row"
+                  height="100%"
+                  alignItems="center"
+                  padding={1}
+                >
+                  <Grid xs={3}>
+                    <img src={musicIcon} alt="wow" width="50px" />
+                  </Grid>
+                  <Grid xs={9} padding={1}>
+                    <Typography variant="body2" sx={{ color: 'white' }}>
+                      {appInfo?.Misc
+                        ? 'Music & Optional patches installed'
+                        : 'Install HD Music & Login Screen '}
+                    </Typography>
+                  </Grid>
+                </Grid>
+                {/* WoW Client: {appInfo?.WoWPatched ? <span className="success">Patched</span> : <span className="error">Not Patched</span>} */}
+              </Paper>
+            </Grid>
+            <Grid xs={8} paddingLeft={2}>
+              <Card
+                sx={{
+                  maxWidth: '105%',
+                  backgroundColor: 'rgba(30,30,40,0.8)',
+                  color: 'white',
+                  border: '1px solid rgba(254,223,164,0.6)',
+                }}
+              >
+                <CardActionArea
+                  sx={{
+                    '&:hover': {
+                      width: 'inherit',
+                      height: 'inherit',
+                      border: 'none',
+                      // Remove the hover effect by specifying the same styles as the default state
+                      backgroundColor: 'transparent', // Or any other desired styles
+                      boxShadow: 'none', // Or any other desired styles
+                      animation: 'none',
+                      transform: 'none',
+                      opacity: 'inherit',
+                    },
+                  }}
+                >
+                  <CardContent
+                    className="news"
+                    sx={{ minHeight: '210px', width: '95%' }}
+                  >
+                    <Typography
+                      gutterBottom
+                      variant="h6"
+                      component="div"
+                    >
+                      {config.clientText.newsTitle}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        maxHeight: '180px',
+                        overflowY: 'scroll',
+                        textOverflow: 'ellipsis',
+                      }}
+                      component='div'
+                    >
+                      <div
+                        dangerouslySetInnerHTML={{
+                          __html: appInfo?.LatestNews,
+                        }}
+                      ></div>
+                    </Typography>
+                  </CardContent>
+                </CardActionArea>
+                <CardActions sx={{ justifyContent: 'right' }}>
+                  <Button size="medium" color="inherit">
+                    Past News
+                  </Button>
+                </CardActions>
+              </Card>
+            </Grid>
+          </Grid>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              paddingLeft: '20px',
+              visibility: isDownloading ? 'visible' : 'hidden',
+            }}
+          >
+            <Box sx={{ width: '100%', mr: 1, justifyItems: 'center' }}>
+              <LinearProgress
+                sx={{
+                  height: '10px',
+                  borderRadius: '3px',
+                  backgroundColor: 'rgba(0,0,0,0.6)',
+                }}
+                variant="determinate"
+                value={downloadProgress}
+              />
+            </Box>
+            <Box sx={{ minWidth: 35 }}>
+              <Typography
+                variant="body1"
+                color="white"
+                component='div'
+              >{`${downloadProgress}%`}</Typography>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'right',
+            }}
+          >
+            <VersionText {...versionStamp} />
+          </Box>
+        </Box>
+      ) : (
+        <div className="overlayContainer">
+          <div className="overlay error">
+            <h3> ERROR: Client Patcher is not installed correctly</h3>
+            <div className="errorDetails">
+              You must install it in the same directory of the Wow.exe used to
+              lanch World of Warcraft.
             </div>
           </div>
-          {/* <div className="flexbox">
-            <h3>v{appInfo?.version}</h3>
-          </div> */}
-
-
-          {/* <h3>
-            New Version: &nbsp;
-            <span className="latest">3.3.5-v11</span>
-          </h3> */}
         </div>
-      </div>
+      )}
 
-      <div className="flexbox">
-        <button type="button" onClick={launch}>
-          {/* <span role="img" aria-label="books">
-            </span> */}
-          Launch
-        </button>
-        {/* <button className="action-install" type="button" onClick={launch}>
-          Install
-        </button> */}
-      </div>
-    </div>
+      <LaunchButton
+        isDownloading={isDownloading}
+        launch={launch}
+        versionStamp={versionStamp}
+        updater={installUpdates}
+        />
+    </Container>
   );
 }
 

src/renderer/BadgeList/BadgeList.css

@@ -1,56 +0,0 @@
-/* BadgeList.css */
-
-.badge-list {
-  display: flex;
-  /* flex-direction: column; */
-  gap: 5px;
-  margin-top: -9px;
-}
-
-.badge-row {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  justify-content: space-between;
-  gap: 5px;
-}
-
-.badge-item {
-  display: flex;
-  align-items: center;
-  width: 145px; /* Fixed width */
-  height: 40px; /* Fixed height */
-  background-color: rgba(233, 233, 235, 0.2);
-  border-radius: 5px;
-  margin-left: 5px;
-
-  /* padding: 5px 10px; */
-}
-
-.badge-item .badge {
-  width: 24%;
-  height: 100%;
-  border-radius: 0;
-  margin-right: 10px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 18px;
-  line-height: 40px;
-}
-
-.badge-item .badge-text {
-  /* background-color: rgba(255, 255, 255, 0.8); */
-  padding: -4px;
-  font-size: 16px;
-  /* border-radius: 15px; */
-}
-
-.green {
-  background-color: rgb(22, 120, 22);
-  color: rgb(255, 255, 255);
-}
-
-.red {
-  background-color: rgba(166, 3, 3, 0.65);
-  color: white;
-}

src/renderer/BadgeList/index.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { WowLauncher } from '../../typings';
-import './BadgeList.css';
-
-function BadgeList({ appInfo }: { appInfo: WowLauncher.AppInfo | null | undefined}) {
-  return (
-    <div className="badge-list">
-      <ul className="badge-row">
-        <li className={`badge-item ${appInfo?.HD ? 'green' : 'red'}`}>
-          <div className="badge">{appInfo?.HD ? '✓' : '✕'}</div>
-          <div className="badge-text">HD Models</div>
-        </li>
-        <li className={`badge-item ${appInfo?.HDExtra ? 'green' : 'red'}`}>
-          <div className="badge">{appInfo?.HDExtra ? '✓' : '✕'}</div>
-          <div className="badge-text">HD Textures</div>
-        </li>
-      </ul>
-      <ul className="badge-row">
-        <li className={`badge-item ${appInfo?.Features ? 'green' : 'red'}`}>
-          <div className="badge">{appInfo?.Features ? '✓' : '✕'}</div>
-          <div className="badge-text">Features</div>
-        </li>
-        <li className={`badge-item ${appInfo?.Araxia ? 'green' : 'red'}`}>
-          <div className="badge">{appInfo?.Araxia ? '✓' : '✕'}</div>
-          <div className="badge-text">Araxia</div>
-        </li>
-      </ul>
-    </div>
-  );
-}
-
-export default BadgeList;

src/renderer/LaunchButton.tsx

@@ -0,0 +1,21 @@
+import type { VersionStamp } from './App';
+
+type ButtonProps = {
+  versionStamp: VersionStamp;
+  isDownloading: boolean;
+  updater: () => void;
+  launch: () => void;
+}
+
+export default function LaunchButton( { versionStamp, isDownloading, updater, launch } : ButtonProps) {
+
+  const { status, oldVersion, newVersion } = versionStamp;
+  return (
+    <div className="flexbox">
+      { !isDownloading && status === 'current' && <button type="button" onClick={launch}>Launch</button> }
+      { isDownloading && <button type="button" disabled style={{ background: '#191919' }}>Updating</button> }
+      { !isDownloading && status === 'update' && <button type="button" className='updatebtn' onClick={updater}>Update</button> }
+  </div>
+  );
+}
+

src/renderer/Updater/index.ts

@@ -1,19 +0,0 @@
-import axios from 'axios';
-import conf from '../conf.json';
-
-// export default class Updater {
-//   private latest: UpdateInfo | null = null;
-
-//   // Loads the lastest version of client data from the remote server.
-//   public async fetchLatest(): Promise<UpdateInfo> {
-//     const response = await axios.get<UpdateInfo>(`${conf.fileUrl}/latest.json`);
-//     if (!response.data) {
-//       throw new Error(
-//         'Failed to determine the latest version from update server.'
-//       );
-//     }
-
-//     this.latest = response.data;
-//     return this.latest;
-//   }
-// }

src/renderer/VersionText.tsx

@@ -0,0 +1,26 @@
+import { Typography } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import type { VersionStamp } from './App';
+
+
+const theme = createTheme();
+theme.typography.caption = {
+  fontFamily: 'consolas',
+  fontSize: '12px',
+  fontWeight: 400,
+
+};
+
+
+export default function VersionText( versionStamp : VersionStamp) {
+
+  const { status, oldVersion, newVersion } = versionStamp;
+  return (
+    <ThemeProvider theme={theme}>
+      {status === 'unknown' && <Typography variant="caption">3.3.5a</Typography>}
+      {status === 'update' && <Typography variant="caption">3.3.5a-{oldVersion} <span className='new'>latest({newVersion})</span></Typography>}
+      {status === 'current' && <Typography variant="caption">3.3.5a-{oldVersion}</Typography>}
+    </ThemeProvider>
+  );
+}
+

src/renderer/conf.json

@@ -1,3 +0,0 @@
-{
-  "fileUrl": "https://storage.googleapis.com/araxia-client-patches/"
-}

src/renderer/index.tsx

@@ -24,10 +24,4 @@ sound.play();
  */
 window.api.OnExitApp(() => {
   sound.stop();
-  console.log('The wow client was closed.');
-});
-
-window.api.OnLaunchError((event, error) => {
-  // eslint-disable-next-line no-template-curly-in-string
-  console.log('The wow client failed to launch. ${error.message}');
 });

src/renderer/preload.d.ts

@@ -1,10 +0,0 @@
-// import { ElectronHandler } from 'main/preload';
-
-// declare global {
-//   // eslint-disable-next-line no-unused-vars
-//   interface Window {
-//     electron: ElectronHandler;
-//   }
-// }
-
-// export {};