Merge pull request #169 from hydralauncher/feat/adding-installation-i…

…nstructions

Feat/adding installation instructions

README.md

@@ -112,35 +112,21 @@ yarn make
             <sub><b>Null</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/Magrid0">
-            <img src="https://avatars.githubusercontent.com/u/73496008?v=4" width="100;" alt="Magrid0"/>
-            <br />
-            <sub><b>Magrid</b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/fhilipecrash">
             <img src="https://avatars.githubusercontent.com/u/36455575?v=4" width="100;" alt="fhilipecrash"/>
             <br />
             <sub><b>Fhilipe Coelho</b></sub>
         </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/jps14">
-            <img src="https://avatars.githubusercontent.com/u/168477146?v=4" width="100;" alt="jps14"/>
-            <br />
-            <sub><b>José Luís</b></sub>
-        </a>
     </td>
     <td align="center">
-        <a href="https://github.com/shadowtosser">
-            <img src="https://avatars.githubusercontent.com/u/168544958?v=4" width="100;" alt="shadowtosser"/>
+        <a href="https://github.com/Magrid0">
+            <img src="https://avatars.githubusercontent.com/u/73496008?v=4" width="100;" alt="Magrid0"/>
             <br />
-            <sub><b>Null</b></sub>
+            <sub><b>Magrid</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/ferivoq">
             <img src="https://avatars.githubusercontent.com/u/36544651?v=4" width="100;" alt="ferivoq"/>
@@ -168,8 +154,7 @@ yarn make
             <br />
             <sub><b>Ikko Eltociear Ashimine</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/Netflixyapp">
             <img src="https://avatars.githubusercontent.com/u/91623880?v=4" width="100;" alt="Netflixyapp"/>

src/locales/en/translation.json

@@ -17,7 +17,10 @@
     "downloading": "{{title}} ({{percentage}} - Downloading…)",
     "filter": "Filter library",
     "follow_us": "Follow us",
-    "home": "Home"
+    "home": "Home",
+    "discord": "Join our Discord",
+    "x": "Follow on X",
+    "github": "Contribute on GitHub"
   },
   "header": {
     "search": "Search",
@@ -82,8 +85,16 @@
     "repacks_modal_description": "Choose the repack you want to download",
     "downloads_path": "Downloads path",
     "select_folder_hint": "To change the default folder, access the",
-    "settings": "Hydra settings",
-    "download_now": "Download now"
+    "settings": "Settings",
+    "download_now": "Download now",
+    "installation_instructions": "Installation Instructions",
+    "installation_instructions_description": "Additional steps are required to install this game",
+    "online_fix_instruction": "OnlineFix games requires a password to be extracted. When required, use the following password:",
+    "dodi_installation_instruction": "When you open DODI installer, press your keyboard up key <0 /> to start the installation process:",
+    "dont_show_it_again": "Don't show it again",
+    "copy_to_clipboard": "Copy",
+    "copied_to_clipboard": "Copied",
+    "got_it": "Got it"
   },
   "activation": {
     "title": "Activate Hydra",
@@ -143,5 +154,8 @@
     "title": "Programs not installed",
     "description": "Wine or Lutris executables were not found on your system",
     "instructions": "Check the correct way to install any of them on your Linux distro so that the game can run normally"
+  },
+  "modal": {
+    "close": "Close button"
   }
 }

src/locales/pt/translation.json

@@ -17,7 +17,10 @@
     "downloading": "{{title}} ({{percentage}} - Baixando…)",
     "filter": "Filtrar biblioteca",
     "home": "Início",
-    "follow_us": "Acompanhe-nos"
+    "follow_us": "Acompanhe-nos",
+    "discord": "Entre no nosso Discord",
+    "x": "Siga-nos no X",
+    "github": "Contribua no GitHub"
   },
   "header": {
     "search": "Buscar",
@@ -79,7 +82,15 @@
     "downloads_path": "Diretório do download",
     "select_folder_hint": "Para trocar a pasta padrão, acesse as ",
     "settings": "Configurações do Hydra",
-    "download_now": "Baixe agora"
+    "download_now": "Baixe agora",
+    "installation_instructions": "Instruções de Instalação",
+    "installation_instructions_description": "Passos adicionais são necessários para instalar esse jogos",
+    "online_fix_instruction": "Jogos OnlineFix precisam de uma senha para serem extraídos. Quando solicitado, utilize a seguinte senha:",
+    "dodi_installation_instruction": "Quando o instalador do DODI for aberto, pressione a seta para cima <0 /> do teclado para iniciar o processo de instalação:",
+    "dont_show_it_again": "Não mostrar novamente",
+    "copy_to_clipboard": "Copiar",
+    "copied_to_clipboard": "Copiado",
+    "got_it": "Entendi"
   },
   "activation": {
     "title": "Ativação",
@@ -143,5 +154,8 @@
   "catalogue": {
     "next_page": "Próxima página",
     "previous_page": "Página anterior"
+  },
+  "modal": {
+    "close": "Botão de fechar"
   }
 }

src/main/constants.ts

@@ -1,5 +1,4 @@
 import { app } from "electron";
-import os from "node:os";
 import path from "node:path";
 
 export const repackersOn1337x = [
@@ -43,7 +42,7 @@ export enum GameStatus {
   Cancelled = "cancelled",
 }
 
-export const defaultDownloadsPath = path.join(os.homedir(), "downloads");
+export const defaultDownloadsPath = app.getPath("downloads");
 
 export const databasePath = path.join(
   app.getPath("appData"),

src/main/events/helpers/search-games.ts

@@ -8,7 +8,7 @@ import { stateManager } from "@main/state-manager";
 
 const { Index } = flexSearch;
 const repacksIndex = new Index();
-const steamGamesIndex = new Index({ tokenize: "reverse" });
+const steamGamesIndex = new Index();
 
 const repacks = stateManager.getValue("repacks");
 const steamGames = stateManager.getValue("steamGames");

src/renderer/index.html

@@ -6,10 +6,10 @@
     <title>Hydra</title>
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com;"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com; media-src 'self' data: https://cdn2.steamgriddb.com;"
     />
   </head>
-  <body style="background-color: #1c1c1">
+  <body style="background-color: #1c1c1c">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

src/renderer/src/app.css.ts

@@ -26,6 +26,7 @@ globalStyle("body", {
   overflow: "hidden",
   userSelect: "none",
   fontFamily: "'Fira Mono', monospace",
+  fontSize: vars.size.bodyFontSize,
   background: vars.color.background,
   color: vars.color.bodyText,
   margin: "0",
@@ -36,13 +37,16 @@ globalStyle("button", {
   backgroundColor: "transparent",
   border: "none",
   fontFamily: "inherit",
-  fontSize: vars.size.bodyFontSize,
 });
 
 globalStyle("h1, h2, h3, h4, h5, h6, p", {
   margin: 0,
 });
 
+globalStyle("p", {
+  lineHeight: "20px",
+});
+
 globalStyle("#root, main", {
   display: "flex",
 });
@@ -103,5 +107,5 @@ export const titleBar = style({
   padding: `0 ${SPACING_UNIT * 2}px`,
   WebkitAppRegion: "drag",
   zIndex: "2",
-  borderBottom: `1px solid ${vars.color.borderColor}`,
+  borderBottom: `1px solid ${vars.color.border}`,
 } as ComplexStyleRule);

src/renderer/src/app.tsx

@@ -18,11 +18,16 @@ import {
   clearSearch,
   setUserPreferences,
   setRepackersFriendlyNames,
+  toggleDraggingDisabled,
 } from "@renderer/features";
 
 document.body.classList.add(themeClass);
 
-export function App({ children }: any) {
+export interface AppProps {
+  children: React.ReactNode;
+}
+
+export function App({ children }: AppProps) {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary } = useLibrary();
 
@@ -34,6 +39,9 @@ export function App({ children }: any) {
   const location = useLocation();
 
   const search = useAppSelector((state) => state.search.value);
+  const draggingDisabled = useAppSelector(
+    (state) => state.window.draggingDisabled
+  );
 
   useEffect(() => {
     Promise.all([
@@ -93,6 +101,17 @@ export function App({ children }: any) {
     if (contentRef.current) contentRef.current.scrollTop = 0;
   }, [location.pathname, location.search]);
 
+  useEffect(() => {
+    new MutationObserver(() => {
+      const modal = document.body.querySelector("[role=modal]");
+
+      dispatch(toggleDraggingDisabled(Boolean(modal)));
+    }).observe(document.body, {
+      attributes: false,
+      childList: true,
+    });
+  }, [dispatch, draggingDisabled]);
+
   return (
     <>
       {window.electron.platform === "win32" && (

src/renderer/src/components/backdrop/backdrop.css.ts

@@ -0,0 +1,47 @@
+import { keyframes } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { SPACING_UNIT } from "../../theme.css";
+
+export const backdropFadeIn = keyframes({
+  "0%": { backdropFilter: "blur(0px)", backgroundColor: "rgba(0, 0, 0, 0.5)" },
+  "100%": {
+    backdropFilter: "blur(2px)",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+});
+
+export const backdropFadeOut = keyframes({
+  "0%": { backdropFilter: "blur(2px)", backgroundColor: "rgba(0, 0, 0, 0.7)" },
+  "100%": {
+    backdropFilter: "blur(0px)",
+    backgroundColor: "rgba(0, 0, 0, 0)",
+  },
+});
+
+export const backdrop = recipe({
+  base: {
+    animationName: backdropFadeIn,
+    animationDuration: "0.4s",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1,
+    top: 0,
+    padding: `${SPACING_UNIT * 3}px`,
+    backdropFilter: "blur(2px)",
+    transition: "all ease 0.2s",
+  },
+  variants: {
+    closing: {
+      true: {
+        animationName: backdropFadeOut,
+        backdropFilter: "blur(0px)",
+        backgroundColor: "rgba(0, 0, 0, 0)",
+      },
+    },
+  },
+});

src/renderer/src/components/backdrop/backdrop.tsx

@@ -0,0 +1,12 @@
+import * as styles from "./backdrop.css";
+
+export interface BackdropProps {
+  isClosing?: boolean;
+  children: React.ReactNode;
+}
+
+export function Backdrop({ isClosing = false, children }: BackdropProps) {
+  return (
+    <div className={styles.backdrop({ closing: isClosing })}>{children}</div>
+  );
+}

src/renderer/src/components/bottom-panel/bottom-panel.css.ts

@@ -3,13 +3,12 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const bottomPanel = style({
   width: "100%",
-  borderTop: `solid 1px ${vars.color.borderColor}`,
+  borderTop: `solid 1px ${vars.color.border}`,
   padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT * 2}px`,
   display: "flex",
   alignItems: "center",
   transition: "all ease 0.2s",
   justifyContent: "space-between",
-  fontSize: vars.size.bodyFontSize,
   zIndex: "1",
 });
 

src/renderer/src/components/button/button.css.ts

@@ -3,7 +3,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 const base = style({
   padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`,
-  backgroundColor: "#c0c1c7",
+  backgroundColor: vars.color.muted,
   borderRadius: "8px",
   border: "solid 1px transparent",
   transition: "all ease 0.2s",
@@ -35,8 +35,8 @@ export const button = styleVariants({
     base,
     {
       backgroundColor: "transparent",
-      border: "solid 1px #c0c1c7",
-      color: "#c0c1c7",
+      border: `solid 1px ${vars.color.border}`,
+      color: vars.color.muted,
       ":hover": {
         backgroundColor: "rgba(255, 255, 255, 0.1)",
       },

src/renderer/src/components/checkbox-field/checkbox-field.css.ts

@@ -19,7 +19,7 @@ export const checkbox = style({
   alignItems: "center",
   position: "relative",
   transition: "all ease 0.2s",
-  border: `solid 1px ${vars.color.borderColor}`,
+  border: `solid 1px ${vars.color.border}`,
   ":hover": {
     borderColor: "rgba(255, 255, 255, 0.5)",
   },