👀 Added transparency slider

assets/@types/fonts.d.ts

@@ -1,2 +1,3 @@
 declare module '*.woff';
-declare module '*.woff2';
+declare module '*.woff2';
+declare module '*.otf';

electron/bridge.ts

@@ -72,6 +72,12 @@ export const api = {
       return response
   },
 
+  // Appearance
+
+  setTransparency: (transparency: number) => {
+    ipcRenderer.send('set-transparency', transparency)
+  },
+
   /**
    * Provide an easier way to listen to events
    */

electron/main.ts

@@ -36,6 +36,12 @@ const schema = {
     type: 'string',
     default: '',
   },
+  'transparency': {
+    type: 'number',
+    maximum: 1,
+		minimum: 0,
+		default: 0.9
+  }
 }
 
 /*
@@ -93,7 +99,7 @@ function createWindow() {
   })
 
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY)
-  mainWindow.setOpacity(0.9)
+  mainWindow.setOpacity(storage.get('transparency'))
 
   mainWindow.once('ready-to-show', () => {
     mainWindow?.show()
@@ -251,7 +257,7 @@ async function registerListeners() {
         break
       case 'pvplounge':
         exists = await checkIfExists(path.join(logsPath, '../../.pvplounge/logs'))
-        event.reply('check-game-dir-reply', exists)
+        event.reply('check-game-dir-reply', exists) 
         break
     }
   })
@@ -260,6 +266,12 @@ async function registerListeners() {
     event.reply('get-game-dir-reply', getGameDirectory(installation))
   })
 
+  // Appearance
+
+  ipcMain.on('set-transparency', (event, transparency: number) => {
+    mainWindow?.setOpacity(transparency)
+  })
+
   // Logs API
 
   const client = storage.get('client') 

electron/settings.ts

@@ -10,9 +10,10 @@ export const storageKeys = <const>[
   'username',
   'client',
   'api-key',
+  'transparency'
 ]
 
 export type StorageKey = {
   name: typeof storageKeys[number],
-  value: string
+  value: any
 }

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "start": "electron-forge start",
     "package": "electron-forge package",
+
     "make": "electron-forge make",
     "dist": "electron-builder --win=portable",
     "release": "electron-forge publish",

src/components/Settings/index.tsx

@@ -115,8 +115,26 @@ const Settings: React.FC = () => {
         />
       </Setting>
 
+      <h2>Appearance</h2>
+      <Setting>
+        <label>Transparency</label>
+        <input
+          name="transparency"
+          type="range"
+          defaultValue={ Number(window.Main.getSetting('transparency')) * 100 }
+          min={ 30 }
+          max={ 100 }
+          onChange={ async e => {
+            const transparency = Number(e.target.value) / 100
+
+            console.log(transparency)
+            window.Main.setTransparency(transparency)
+            window.Main.setSetting({ name: 'transparency', value: transparency })
+          } }
+        />
+      </Setting>
+
       <h2>Log File</h2>
-      <br />
 
       <Setting className="inline-children">
         <label>Client</label>

src/components/Settings/styles.tsx

@@ -32,6 +32,37 @@ export const SettingsStyles = styled.div`
       background-color: #666;
   }
 
+  input[type=range] {
+    width: 45vw;
+    margin: 7.3px 0;
+    background-color: transparent;
+    -webkit-appearance: none;
+  }
+
+  input[type=range]:focus {
+    outline: none;
+  }
+
+  input[type=range]::-webkit-slider-runnable-track {
+    background: #c3c3c3;
+    border: 0.2px solid #010101;
+    border-radius: 1.3px;
+    width: 100%;
+    height: 6px;
+    cursor: pointer;
+  }
+
+  input[type=range]::-webkit-slider-thumb {
+    margin-top: -7.5px;
+    width: 12px;
+    height: 20px;
+    background: #ffffff;
+    border: 1.8px solid #00001e;
+    border-radius: 4px;
+    cursor: pointer;
+    -webkit-appearance: none;
+  }
+
   input.blur:not(:focus) {
     filter: blur(4px);
     -webkit-filter: blur(4px);

src/components/Sidebar/styles.ts

@@ -31,6 +31,7 @@ export const SidebarStyles = styled.nav`
 
     .selected {
         background-color: #3e424b;
+        border-radius: 6px;
     }
 `
 
@@ -67,5 +68,6 @@ export const SidebarRoute = styled.li`
     &:hover {
         cursor: pointer;
         background-color: #3e424b;
+        border-radius: 6px;
     }
 `

src/styles/GlobalStyle.ts

@@ -1,17 +1,38 @@
 import styled, { createGlobalStyle } from 'styled-components'
 
-import MinecraftWoff from '../../assets/fonts/Minecraft.woff'
-import MinecraftWoff2 from '../../assets/fonts/Minecraft.woff2'
+import MinecraftRegular from '../../assets/fonts/MinecraftRegular.otf'
+import MinecraftItalic from '../../assets/fonts/MinecraftItalic.otf'
+import MinecraftBold from '../../assets/fonts/MinecraftBold.otf'
+import MinecraftBoldItalic from '../../assets/fonts/MinecraftBoldItalic.otf'
 
-// For future use
-// #353535
-// #191621
 
 export const GlobalStyle = createGlobalStyle`
   @font-face {
-    font-family: Minecraft;
-    src: url(${MinecraftWoff2}) format('woff2'),
-    url(${MinecraftWoff}) format('woff');
+    font-family: 'Minecraft';
+    font-weight: normal;
+    font-style: normal;
+    src: url(${ MinecraftRegular }) format("opentype");
+  }
+
+  @font-face {
+    font-family: 'Minecraft';
+    font-weight: normal;
+    font-style: italic;
+    src: url(${ MinecraftItalic }) format("opentype");
+  }
+
+  @font-face {
+    font-family: 'Minecraft';
+    font-weight: bold;
+    font-style: normal;
+    src: url(${ MinecraftBold }) format("opentype");
+  }
+
+  @font-face {
+    font-family: 'Minecraft';
+    font-weight: bold;
+    font-style: italic;
+    src: url(${ MinecraftBoldItalic }) format("opentype");
   }
 
   :root {

webpack/rules.webpack.js

@@ -28,7 +28,7 @@ module.exports = [
     }
   },
   {
-    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+    test: /\.(png|woff|woff2|eot|ttf|svg|otf)$/,
     use: ['url-loader']
   }
 ]