external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

WIP: showing splash screen

Browse source
This commit is contained in:
Zamitto 2024-05-18 22:29:11 -03:00
parent 7eee942dcb
commit 484e79dba3
10 changed files with 79 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/renderer/splash.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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; media-src 'self' data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com;"
/>
</head>
<body style="background-color: #1c1c1c">
<div id="root"></div>
<script type="module" src="/src/splash.tsx"></script>
</body>
</html>

BIN
src/renderer/src/assets/icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 188 KiB

1
src/renderer/src/main.tsx
View file

@ -54,7 +54,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
<Route path="/game/:shop/:objectID" Component={GameDetails} />
<Route path="/search" Component={SearchResults} />
<Route path="/settings" Component={Settings} />
<Route path="/splash" Component={Settings} />
</Routes>
</App>
</HashRouter>

18
src/renderer/src/pages/splash/splash.css.ts Normal file
View file

@ -0,0 +1,18 @@
import { style } from "@vanilla-extract/css";
import { SPACING_UNIT, vars } from "../../theme.css";
export const main = style({
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT * 3}px`,
padding: `${SPACING_UNIT * 3}px`,
flex: "1",
overflowY: "auto",
alignItems: "center",
});
export const splashIcon = style({
width: "300px",
});

16
src/renderer/src/pages/splash/splash.tsx Normal file
View file

@ -0,0 +1,16 @@
import icon from "@renderer/assets/icon.png";
import * as styles from "./splash.css";
import { themeClass } from "../../theme.css";
import "../../app.css";
document.body.classList.add(themeClass);
export default function Splash() {
return (
<main className={styles.main}>
<img src={icon} className={styles.splashIcon} alt="" />
<p>Procurando atualizaçoes</p>
</main>
);
}

9
src/renderer/src/splash.tsx Normal file
View file

@ -0,0 +1,9 @@
import React from "react";
import ReactDOM from "react-dom/client";
import Splash from "./pages/splash/splash";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Splash />
</React.StrictMode>
);