Merge pull request #32 from Ipmake/v1.0.0

[1.0.0] Major update
kocxyz · Jun 20, 2023 · e7bd8c5 · e7bd8c5
2 parents fd247fd + 3f8c55c
commit e7bd8c5
Show file tree

Hide file tree

Showing 14 changed files with 321 additions and 157 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "knockoutcitylauncher",
   "description": "Unofficial Knockout City Launcher",
-  "version": "0.4.5",
+  "version": "1.0.0",
   "private": true,
   "homepage": "./",
   "main": "public/electron.js",

diff --git a/public/config.json b/public/config.json
@@ -1,3 +1,7 @@
 {
-    "authServer": "https://api.kocity.xyz"
+    "authServer": "https://api.kocity.xyz",
+    "validGameVersions": [
+        "highRes",
+        "lowRes"
+    ]
 }
diff --git a/public/electron.js b/public/electron.js
diff --git a/public/preload.js b/public/preload.js
@@ -35,6 +35,7 @@ if(localStorage.getItem("servers") === null) localStorage.setItem("servers", '[{
 
 if(localStorage.getItem("discordRPC:enabled") === null) localStorage.setItem("discordRPC:enabled", "true")
 if(localStorage.getItem("discordRPC:displayName") === null) localStorage.setItem("discordRPC:displayName", "true")
+if(localStorage.getItem("discordRPC:allowJoining") === null) localStorage.setItem("discordRPC:allowJoining", "true")
 
 // catch a STRG + R 
 document.addEventListener("keydown", (e) => {
@@ -51,6 +52,7 @@ window.updateRPC = async () => {
   ipcRenderer.sendSync('set-RPCstate', { 
     enabled: localStorage.getItem("discordRPC:enabled") === "true",
     displayName: localStorage.getItem("discordRPC:displayName") === "true",
+    allowJoining: localStorage.getItem("discordRPC:allowJoining") === "true",
   })
 }
 
@@ -81,8 +83,13 @@ window.addEventListener("DOMContentLoaded", () => {
     return Promise.resolve(result)
   }
 
-  window.installGame = async (props) => {
-    const result = await ipcRenderer.sendSync('download-game', { path: localStorage.getItem("gameDirectory"), version: localStorage.getItem("gameVersion") })
+  window.getGameInstalls = () => {
+    const result = ipcRenderer.sendSync('get-game-installs', { path: localStorage.getItem("gameDirectory")})
+    return result
+  }
+
+  window.installGame = (props) => {
+    const result = ipcRenderer.sendSync('download-game', { path: localStorage.getItem("gameDirectory"), version: localStorage.getItem("gameVersion") })
     props.setGameState("installing")
     window.addEventListener('message', evt => {
       if (evt.data.type === 'download-progress') {
@@ -174,4 +181,9 @@ window.addEventListener("DOMContentLoaded", () => {
   window.launchURL = (url) => {
     ipcRenderer.send('launch-url', { url })
   }
+
+  window.removeFiles = async (files) => {
+    await ipcRenderer.sendSync('remove-files', { files, path: localStorage.getItem("gameDirectory") })
+    return Promise.resolve()
+  }
 });
diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,7 @@ import NewsMenu from './components/NewsMenu';
 import ServersMenu from './components/ServersMenu';
 import SettingsMenu from './components/SettingsMenu';
 import LaunchSection from './components/LaunchSection';
-import PopUp from './components/popUp';
+import PopUp from './components/popUp/index';
 
 // Images
 import logoImg from './images/logo.png';
@@ -32,6 +32,7 @@ const links = {
   width: 'fit-content',
   fontFamily: 'Azbuka',
   fontWeight: 'bold',
+  cursor: 'pointer',
 }
 
 let backgrounds = [
@@ -153,13 +154,13 @@ function App() {
             <MenuItem value="2">Low Res</MenuItem>
           </Select>
 
-          <a style={links} className="hoverLink" href='https://www.knockoutcity.com/' target='_blank'>OFFICIAL SITE</a> {/* eslint-disable-line */}
-          <a style={links} className="hoverLink" href='https://www.knockoutcity.com/private-server-edition' target='_blank'>ABOUT</a> {/* eslint-disable-line */}
-          <a style={links} className="hoverLink" href='https://discord.gg/knockoutcity' target='_blank'>DISCORD</a> {/* eslint-disable-line */}
-          <a style={links} className="hoverLink" href='https://thekoyostore.com/collections/knockout-city' target='_blank'>STORE</a> {/* eslint-disable-line */}
+          <a style={links} className="hoverLink" onClick={() => {window.launchURL('https://www.knockoutcity.com/')}}>OFFICIAL SITE</a> {/* eslint-disable-line */}
+          <a style={links} className="hoverLink" onClick={() => {window.launchURL('https://www.knockoutcity.com/private-server-edition')}}>ABOUT</a> {/* eslint-disable-line */}
+          <a style={links} className="hoverLink" onClick={() => {window.launchURL('https://discord.gg/knockoutcity')}}>DISCORD</a> {/* eslint-disable-line */}
+          <a style={links} className="hoverLink" onClick={() => {window.launchURL('https://thekoyostore.com/collections/knockout-city')}}>STORE</a>
         </Box>
 
-        <LaunchSection version={version} gameState={[gameState, setGameState]} currServer={currServer} currServerName={currServerName} currServerType={currServerType} setPopUpState={setPopUpState} />
+        <LaunchSection version={version} gameState={[gameState, setGameState]} currServer={[currServer, setCurrServer]} currServerName={[currServerName, setCurrServerName]} currServerType={[currServerType, setCurrServerType]} setPopUpState={setPopUpState} />
       </Box>
 
       <Box style={{ background: 'rgba(50, 8, 83, 0.75)', padding: '20px', marginTop:'-3vh', paddingBottom: '0px'}}>

diff --git a/src/components/HostingSection.jsx b/src/components/HostingSection.jsx
@@ -30,7 +30,7 @@ function HostingSection(props) {
 
         <Stack spacing={1}>
             <label>Secret</label>
-            <TextField disabled={running} variant="outlined" defaultValue={serverSettings.secret} onChange={(e) => {
+            <TextField disabled={true} variant="outlined" defaultValue={"disabled"} onChange={(e) => {
                 setServerSettings({
                     ...serverSettings,
                     secret: e.target.value
@@ -102,7 +102,7 @@ function HostingSection(props) {
                             }} onClick={async () => {
                                 window.startServer({
                                     port: serverSettings.port,
-                                    secret: serverSettings.secret,
+                                    secret: "", //serverSettings.secret
                                     maxUsers: serverSettings.maxUsers,
                                     showTerminal: serverSettings.showTerminal,
                                     serverState,

diff --git a/src/components/LaunchSection.jsx b/src/components/LaunchSection.jsx
@@ -7,6 +7,9 @@ import axios from 'axios';
 function LaunchSection(props) {
 
     const [gameState, setGameState] = props.gameState
+    const [currServer, setCurrServer] = props.currServer
+    const [currServerName, setCurrServerName] = props.currServerName
+    const [currServerType, setCurrServerType] = props.currServerType
     const [installData, setInstallData] = useState() // eslint-disable-line
 
     return (
@@ -18,9 +21,15 @@ function LaunchSection(props) {
                             window.installGame({setInstallData, setGameState})
                         }} />)
                     case 'installed':
-                        return (<FancyButton text="LAUNCH" onClick={async () => {
+                        return (<FancyButton id="LaunchButton" text="LAUNCH" onClick={async () => {
                             console.log('launching')
-                            if(props.currServerType === "public") {
+
+                            setCurrServer(localStorage.getItem("currServer") || "127.0.0.1")
+                            setCurrServerName(localStorage.getItem("currServerName") || "localhost")
+                            setCurrServerType(localStorage.getItem("currServerType") || "private")
+
+
+                            if(localStorage.getItem("currServerType") === "public") {
                                 props.setPopUpState("authenticating")
                                 if(localStorage.getItem("authState") !== "true" || !localStorage.getItem("authToken")) {
                                     props.setPopUpState(false)
@@ -30,7 +39,7 @@ function LaunchSection(props) {
                                 const res = await axios.post(`${window.config.authServer}/auth/getkey`, {
                                     username: localStorage.getItem("username"),
                                     authToken: localStorage.getItem("authToken"),
-                                    server: props.currServer,
+                                    server: localStorage.getItem("currServer"),
                                 }).catch((err) => {
                                     props.setPopUpState(false)
                                     alert(err.response.data.message)
@@ -92,7 +101,7 @@ function LaunchSection(props) {
             {/* <p style={{ fontFamily: 'monospace', marginTop: '5px', fontSize: '15px' }}>VERSION 10.0-264847</p> */}
             <Stack direction="row" style={{ marginTop: '2px', opacity: gameState === 'installing' ? 0 : 1}}>
                 <Typography style={{ fontFamily: 'monospace' }}>Server: </Typography>
-                <Typography title={props.currServer} style={{ marginLeft: '5px', fontFamily: 'monospace'  }}> {props.currServerName} </Typography>
+                <Typography title={currServer} style={{ marginLeft: '5px', fontFamily: 'monospace'  }}> {currServerName} </Typography>
             </Stack>
         </Box>
     )

diff --git a/src/components/SettingsMenu.jsx b/src/components/SettingsMenu.jsx
@@ -81,14 +81,22 @@ function SettingsMenu({ gameState, setGameState, setPopUpState, authState, usern
             <Stack spacing={1}>
                 <label>Game Directory</label>
                 <TextField variant="outlined" disabled={true} value={gameDirectory} />
-                <Button variant="contained" className='hoverButton' disabled={!['installed', 'notInstalled', 'deprecated', 'installing'].includes(gameState)} onClick={async () => {
-                    const result = await window.selectGameDir()
-                    if (result) {
-                        setGameDirectory(result)
-                        localStorage.setItem('gameDirectory', result)
-                        setGameState(await window.getGameState())
-                    }
-                }}>Change</Button>
+                <Stack direction="row" spacing={1}>
+                    <Button variant="contained" className='hoverButton' disabled={!['installed', 'notInstalled', 'deprecated', 'installing'].includes(gameState)} style={{width: '100%'}} onClick={async () => {
+                        const result = await window.selectGameDir()
+                        if (result) {
+                            setGameDirectory(result)
+                            localStorage.setItem('gameDirectory', result)
+                            setGameState(await window.getGameState())
+                        }
+                    }}>Change</Button>
+                    <Button variant="contained" className='hoverButton' style={{width: '100%'}} onClick={() => {
+                        window.launchURL(`"" "${gameDirectory}"`)
+                    }}>Open</Button>
+                    <Button variant="contained" className='hoverButton' disabled={!['installed', 'notInstalled', 'deprecated', 'installing'].includes(gameState)} style={{width: '100%'}} onClick={() => {
+                        setPopUpState('selectUninstall')
+                    }}>Uninstall</Button>
+                </Stack>
             </Stack>
 
             <Divider />
@@ -113,8 +121,8 @@ function SettingsMenu({ gameState, setGameState, setPopUpState, authState, usern
                 </Stack>
 
                 <Stack direction="row" spacing={1} style={{ display: 'flex', alignItems: 'center'}}>
-                    <Switch color='secondary' defaultChecked={false} disabled onChange={(e) => {
-                        // localStorage.setItem('discordRPC', e.target.checked)
+                    <Switch color='secondary' defaultChecked={localStorage.getItem('discordRPC:allowJoining') === 'true'} onChange={(e) => {
+                        localStorage.setItem('discordRPC:allowJoining', e.target.checked)
                     }} />
 
                     <Typography fontWeight='light'>Allow Joining</Typography>

diff --git a/src/components/fancyButton.jsx b/src/components/fancyButton.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 function fancyButton(props) {
   return (
-    <button className="cta" href={props.href} onClick={props.onClick} style={{
+    <button className="cta" href={props.href} onClick={props.onClick} id={props.id} key={props.id} style={{
         width: '250px', 
         height: '55px', 
         fontSize: '30px',

diff --git a/src/components/popUp.jsx → src/components/popUp/index.jsx b/src/components/popUp.jsx → src/components/popUp/index.jsx
@@ -1,7 +1,12 @@
-import { Backdrop, Box, Button, Input, LinearProgress, Stack, Typography } from '@mui/material'
+import { Backdrop, Box, Button, Input, LinearProgress, MenuItem, Select, Stack, Typography } from '@mui/material'
 import axios from 'axios'
 import { useState } from 'react'
 
+// Views
+import Authenticating from './views/Authenticating'
+import ConfirmLogout from './views/ConfirmLogout'
+import SelectUninstall from './views/SelectUninstall'
+
 function PopUp({ popUpState, setPopUpState, setAuthState, setUsername }) {
     const [popUpLoading, setPopUpLoading] = useState(false)
     const [wrongInputs, setWrongInputs] = useState(0)
@@ -138,45 +143,11 @@ function PopUp({ popUpState, setPopUpState, setAuthState, setUsername }) {
                 </Backdrop>
             )
         case 'confirmLogout':
-            return (
-                <Backdrop open={true} style={{ zIndex: 1000 }}>
-                    <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#1a1a1a', width: '600px', height: '200px', borderRadius: '5px', padding: '10px', textAlign: 'center' }}>
-                        <Typography variant="h4" style={{ color: 'white', textAlign: 'center', marginTop: '20px', fontFamily: 'Brda', fontStyle: 'italic', letterSpacing: '2px'}}>Logout</Typography>
-                        <p>Are you sure you want to logout?</p>
-
-                        <Stack direction='row' spacing={2}>
-                            <Button variant="contained" className='hoverButton' onClick={() => {
-                                setPopUpState(false)
-                                setInputIncorrect(false)
-                                setPopUpLoading(false)
-                                setWrongInputs(0)
-
-                                setAuthState(false)
-                                localStorage.setItem('authState', false)
-                                localStorage.removeItem('authToken')
-                            } } style={{ marginTop: '10px' }}>Confirm</Button>
-                            <Button variant="contained" className='hoverButton' onClick={() => {
-                                setPopUpState(false)
-                                setInputIncorrect(false)
-                                setPopUpLoading(false)
-                                setWrongInputs(0)
-
-                            } } style={{ marginTop: '10px' }}>Cancel</Button>
-                        </Stack>
-
-                    </Box>
-                </Backdrop>
-            )
+            return <ConfirmLogout setPopUpState={setPopUpState} setAuthState={setAuthState} />
         case 'authenticating':
-            return (
-                <Backdrop open={true} style={{ zIndex: 1000 }}>
-                    <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#1a1a1a', width: '600px', height: '200px', borderRadius: '5px', padding: '10px', textAlign: 'center' }}>
-                        <Typography variant="h4" style={{ color: 'white', textAlign: 'center', marginTop: '20px', fontFamily: 'Brda', fontStyle: 'italic', letterSpacing: '2px'}}>Authenticating</Typography>
-                        <p>Hang on while we are trying to authenticate you</p>
-                        <LinearProgress color="secondary" style={{ opacity: 1, width: '200px' }} />
-                    </Box>
-                </Backdrop>
-            )
+            return <Authenticating />
+        case 'selectUninstall':
+            return <SelectUninstall setPopUpState={setPopUpState} />
         default:
             return (
                 <></>

diff --git a/src/components/popUp/views/Authenticating.jsx b/src/components/popUp/views/Authenticating.jsx
@@ -0,0 +1,13 @@
+import { Backdrop, Box, LinearProgress, Typography } from "@mui/material";
+
+export default function authenticating() {
+  return (
+    <Backdrop open={true} style={{ zIndex: 1000 }}>
+        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#1a1a1a', width: '600px', height: '200px', borderRadius: '5px', padding: '10px', textAlign: 'center' }}>
+            <Typography variant="h4" style={{ color: 'white', textAlign: 'center', marginTop: '20px', fontFamily: 'Brda', fontStyle: 'italic', letterSpacing: '2px'}}>Authenticating</Typography>
+            <p>Hang on while we are trying to authenticate you</p>
+            <LinearProgress color="secondary" style={{ opacity: 1, width: '200px' }} />
+        </Box>
+    </Backdrop>
+  )
+}
diff --git a/src/components/popUp/views/ConfirmLogout.jsx b/src/components/popUp/views/ConfirmLogout.jsx
@@ -0,0 +1,27 @@
+import { Backdrop, Box, Typography, Stack, Button } from "@mui/material";
+
+export default function ConfirmLogout({ setPopUpState, setAuthState }) {
+  return (
+    <Backdrop open={true} style={{ zIndex: 1000 }}>
+        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#1a1a1a', width: '600px', height: '200px', borderRadius: '5px', padding: '10px', textAlign: 'center' }}>
+            <Typography variant="h4" style={{ color: 'white', textAlign: 'center', marginTop: '20px', fontFamily: 'Brda', fontStyle: 'italic', letterSpacing: '2px'}}>Logout</Typography>
+            <p>Are you sure you want to logout?</p>
+
+            <Stack direction='row' spacing={2}>
+                <Button variant="contained" className='hoverButton' onClick={() => {
+                    setPopUpState(false)
+
+                    setAuthState(false)
+                    localStorage.setItem('authState', false)
+                    localStorage.removeItem('authToken')
+                } } style={{ marginTop: '10px' }}>Confirm</Button>
+                <Button variant="contained" className='hoverButton' onClick={() => {
+                    setPopUpState(false)
+
+                } } style={{ marginTop: '10px' }}>Cancel</Button>
+            </Stack>
+
+        </Box>
+    </Backdrop>
+  )
+}