🌀 Fixed major bugs, QOL Improvements, Optimized stat checking

whatsaxis · Aug 24, 2021 · 62d30ac · 62d30ac
1 parent 8b61d39
commit 62d30ac
Show file tree

Hide file tree

Showing 20 changed files with 487 additions and 309 deletions.
diff --git a/electron/main.ts b/electron/main.ts
@@ -54,19 +54,33 @@ let logFileReadline: readline.Interface | null = null
 
 // Initialize Electron Window
 
-let mainWindow: BrowserWindow | null
+let mainWindow: BrowserWindow | null = null
 
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string
 
+
+const gotTheLock = app.requestSingleInstanceLock()
+
+if (!gotTheLock) {
+  app.quit()
+} else {
+  app.on('second-instance', (event, commandLine, workingDirectory) => {
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) mainWindow.restore()
+      mainWindow.focus()
+    }
+  })
+}
+
 function createWindow() {
   mainWindow = new BrowserWindow({
     icon: path.join(__dirname, '../assets', 'icon.png'),
     title: 'No Lye Overlay',
     width: 1250,
     height: 700,
-    minWidth: 1250,
-    minHeight: 400,
+    minWidth: 600,
+    minHeight: 600,
     backgroundColor: '#03030F',
     frame: false,
     show: false,
@@ -119,7 +133,7 @@ async function startLogging() {
       console.log(log)
       setImmediate(() => {
         if (/\[[^]*\] \[Client thread\/INFO\]: \[CHAT\] [^]*/.test(log)) {
-          console.log(log)
+          // console.log(log)
 
           const message = log.split('[CHAT] ')[1].trim()
 
@@ -133,7 +147,7 @@ async function startLogging() {
             mainWindow?.webContents.send('server_change')
           }
 
-          if (/^ONLINE: ((?:(?:\[[A-Z+]+\] )?[A-Za-z0-9_]{1,16}(?:, )?)+)$/.test(log)) {
+          if (/^ONLINE: ((?:(?:\[[A-Z+]+\] )?[A-Za-z0-9_]{1,16}(?:, )?)+)$/.test(message)) {
             console.log('Used /who!')
             const list = message.split(': ')[1]
             const users = list.split(', ')

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "no-lye-overlay",
   "author": "WhatsAxis",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A Hypixel stats overlay for the No Lye Guild.",
   "main": "./.webpack/main/index.js",
   "scripts": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -16,14 +16,22 @@ export const CacheContext = React.createContext<any>([])
 export function App() {
   const [currentOverlay, setCurrentOverlay] = useState(routes[routes.length - 1]);
 
-  const [getFromCache, addToCache, cacheIncludes] = useCache()
+  const [
+    UUIDCacheGet, UUIDCacheAdd, UUIDCacheIncludes,
+    SkinCacheGet, SkinCacheAdd, SkinCacheIncludes,
+    NickCacheAdd, NickCacheIncludes
+  ] = useCache()
 
   return (
     <>
       <GlobalStyle />
 
       <OverlayContext.Provider value={ [currentOverlay, setCurrentOverlay] }>
-        <CacheContext.Provider value={ [getFromCache, addToCache, cacheIncludes] }>
+        <CacheContext.Provider value={ [
+            UUIDCacheGet, UUIDCacheAdd, UUIDCacheIncludes,
+            SkinCacheGet, SkinCacheAdd, SkinCacheIncludes,
+            NickCacheAdd, NickCacheIncludes
+        ] }>
           <Wrapper>
             <Sidebar />
             <div>

diff --git a/src/api.tsx b/src/api.tsx
@@ -8,18 +8,6 @@ export class API {
     this.key = key
   }
 
-  set setKey(key: string) {
-    this.key = key
-  }
-
-  async getUUID(username: string) {
-    const res = await fetch(`https://api.ashcon.app/mojang/v2/user/${username}`)
-    .then(data => data.json())
-    .then(data => data.uuid)
-
-    return res
-  }
-
   async checkAPIKey(key: string) {
     const res = await fetch(`https://api.hypixel.net/key?key=${key}`)
     .then(data => data.json())
@@ -28,19 +16,22 @@ export class API {
     return res
   }
 
-  async checkNick(username: string) {
+  async checkNickOrUUID(username: string) {
     const res = await fetch(`https://api.ashcon.app/mojang/v2/user/${username}`)
       .then(data => data.json())
 
-    if (res.code === 404 && res.code === 400) return true
-    return false
+    console.log(`Called checkNickOrUUID [${ res.code === 404 || res.code === 400 ? true : res.uuid }]`)
+
+    if (res.code === 404 || res.code === 400) return true
+    return res.uuid
   }
 
-  async getSkinImage(username: string, size: number) {
-    if (await this.checkNick(username)) return <img src={ UnknownFace } height={ size } />
-    const uuid = await this.getUUID(username)
+  async getSkinImage(uuid: string | null, size: number) {
+    if (uuid === null) return <img src={ UnknownFace } height={ size } />
     const face = await fetch(`https://crafatar.com/avatars/${ uuid }`)
 
+    console.log(`https://crafatar.com/avatars/${ uuid }`)
+
     if (face.ok === true && face.status === 200) {
       return <img src={ face.url } height={ size } />
     }
@@ -49,8 +40,8 @@ export class API {
   }
 
   async getStats(uuid: string) {
-    const url = `https://api.hypixel.net/player?uuid=${uuid}&key=${this.key}`
-
+    const url = `https://api.hypixel.net/player?uuid=${ uuid }&key=${ this.key }`
+    console.log(url)
     let stats = await fetch(url).then(data => data.json())
 
     return stats

diff --git a/src/columns.tsx b/src/columns.tsx
@@ -1,5 +1,6 @@
 import { ThreatLevels, threatLevelList } from './tags'
 import { commaify, roundTo2Digits } from './helpers'
+import { Player } from './useUsers'
 
 
 export type ColumnImplemenetation = {
@@ -21,32 +22,27 @@ export function generateFirstRow(columns: { [c: string]: ColumnImplemenetation }
     return (
         <tr>
             {
-                Object.values(columns).map(column => <td>{ column.displayName }</td>)
+                Object.values(columns).map(column => <td key={ column.displayName }>{ column.displayName }</td>)
             }
         </tr>
     )
 }
 
-export function parseColumns(stats: any, columns: Record<string, ColumnImplemenetation>) {
+export function parseColumns(player: Player, columns: Record<string, ColumnImplemenetation>) {
     const dataValues = Object.values(columns).map(column => {
         let bracket: string = ThreatLevels.NONE
         let className: string | null = null
 
-        const value = column.getValue(stats)
+        const value = column.getValue(player)
 
         if (column.getClassName !== undefined) {
-            className = column.getClassName(stats)
+            className = column.getClassName(player)
         }
 
         if (column.thresholds !== undefined) {
             const thresholdMap = column.thresholds.map((threshold, i) => [threshold, i + 1])
 
-            // console.log(thresholdMap)
-
             for (const [threshold, i] of thresholdMap.reverse()) {
-                // console.log(threshold)
-                // console.log(i)
-                // console.log(threatLevelList)
                 if (value >= threshold) {
                     bracket = threatLevelList[i as number]
                     break
@@ -55,7 +51,7 @@ export function parseColumns(stats: any, columns: Record<string, ColumnImplemene
         }
 
         return (
-            <td className={ [bracket, className].join(" ") }>
+            <td className={ [bracket, className].join(" ") } key={ column.displayName }>
                 {
                     column.format === true ?
                     commaify(roundTo2Digits(value))

diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx
@@ -1,18 +1,19 @@
 import { useContext } from 'react'
 
-import { OverlayContext } from "../../App"
+import { OverlayContext } from '../../App'
 
+import { OverlayStyles } from './styles'
 
 const Overlay: React.FC = () => {
     const context = useContext(OverlayContext);
 
     return (
-        <div style={{ color: '#fff' }}>
+        <OverlayStyles>
 
             { context[0].component }
 
-        </div>
+        </OverlayStyles>
     );
 }
 
-export default Overlay;
+export default Overlay
diff --git a/src/components/Overlay/styles.tsx b/src/components/Overlay/styles.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+
+export const OverlayStyles = styled.div`
+  & {
+    margin-left: 1rem;
+    overflow-y: auto;
+    color: #fff;
+  }
+`
diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx
@@ -89,8 +89,8 @@ const Settings: React.FC = () => {
         <label>API Key</label>
         <Validity ref={apiValidityRef} />
         <input
-          type="text"
           name="api-key"
+          type="text"
           spellCheck="false"
           className="blur"
           defaultValue={ window.Main.getSetting('api-key') }
@@ -161,13 +161,11 @@ const Settings: React.FC = () => {
         </select>
       </Setting>
 
-      <h2>Info</h2>
-
       <Credits>
         <p>Made by WhatsAxis</p>
         <div>
           <svg height="23" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true">
-              <path fill-rule="evenodd" fill="#fff" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+              <path fillRule="evenodd" fill="#fff" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
           </svg>
           <a href="https://github.com/whatsaxis">github.com/whatsaxis</a>
         </div>

diff --git a/src/components/Settings/styles.tsx b/src/components/Settings/styles.tsx
@@ -1,8 +1,6 @@
 import styled from 'styled-components'
 
 
-// TODO
-
 export const SettingsStyles = styled.div`
   & {
     margin-left: 1rem;
@@ -69,11 +67,13 @@ export const Setting = styled.div`
 
 export const Credits = styled.div`
   & {
+    position: absolute;
     font-family: Minecraft;
     display: flex;
     justify-content: center;
     align-items: center;
     bottom: 0;
+    right: 0;
   }
 
   & div, & p {

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -21,7 +21,7 @@ const Sidebar: React.FC = () => {
                     <SidebarRoute key={ route.name } className={ route.name === selected ? 'selected' : '' } onClick={ () => {
                         context[1](route)
                         setSelected(route.name)
-                    } }><img src={ route.icon } height="18px" /></SidebarRoute>)
+                    } }><img src={ route.icon } height="24px" width="24px" /></SidebarRoute>)
                 }
             </ul>
         </SidebarStyles>  

diff --git a/src/components/Sidebar/styles.ts b/src/components/Sidebar/styles.ts
@@ -5,14 +5,20 @@ export const SidebarStyles = styled.nav`
     & {
         display: inline-block;
         background-color: #171717;
-        height: 100vw;
+        height: 100%;
         padding: 0.4rem;
 
         margin-right: 0.25rem;
 
         float: left;
     }
 
+    ul {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
     li {
         color: #fff;
         font-size: 1.1rem;
@@ -30,22 +36,23 @@ export const SidebarStyles = styled.nav`
 
 export const Icon = styled.img`
     & {
-        height: 30px;
-        width: 30px;
+        height: 35px;
+        width: 35px;
 
-        margin-bottom: 0.5rem;
+        margin-bottom: 1rem;
     }
 `
 
 // https://stackoverflow.com/questions/13596821/css-align-images-and-text-on-same-line
 export const SidebarRoute = styled.li`
     & {
-        width: 100%;
-        padding: 0.15rem;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 30px;
+        width: 30px;
+
+        margin-bottom: 0.5rem;
     }
 
     & > * {