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

Merge branch 'feature/game-achievements' into chore/test-preview

Browse source 
# Conflicts:
#	yarn.lock
This commit is contained in:
Zamitto 2024-10-02 22:59:32 -03:00
commit 8b5ed96e9b
11 changed files with 82 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/index.html
View file

@ -9,7 +9,7 @@
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: *; media-src 'self' local: data: *;"
/>
</head>
<body style="background-color: #1c1c1c">
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

1
src/renderer/src/app.css.ts
View file

@ -35,7 +35,6 @@ globalStyle("body", {
userSelect: "none",
fontFamily: "Noto Sans, sans-serif",
fontSize: vars.size.body,
background: vars.color.background,
color: vars.color.body,
margin: "0",
});

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

@ -28,7 +28,7 @@ import {
import { store } from "./store";
import resources from "@locales";
import { Achievemnt } from "./pages/achievement/achievement";
import { Achievement } from "./pages/achievement/achievement";
import "./workers";
import { RepacksContextProvider } from "./context";
@ -70,7 +70,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
<Route path="/settings" Component={Settings} />
<Route path="/profile/:userId" Component={Profile} />
</Route>
<Route path="/achievement-notification" Component={Achievemnt} />
<Route path="/achievement-notification" Component={Achievement} />
</Routes>
</HashRouter>
</RepacksContextProvider>

50
src/renderer/src/pages/achievement/achievement.tsx
View file

@ -1,14 +1,18 @@
import { useEffect, useMemo, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import achievementSound from "@renderer/assets/audio/achievement.wav";
import { useTranslation } from "react-i18next";
import { vars } from "@renderer/theme.css";
export function Achievemnt() {
interface AchievementInfo {
displayName: string;
iconUrl: string;
}
export function Achievement() {
const { t } = useTranslation("achievement");
const [achievementInfo, setAchievementInfo] = useState<{
displayName: string;
icon: string;
} | null>(null);
const [achievements, setAchievements] = useState<AchievementInfo[]>([]);
const achievementAnimation = useRef(-1);
const audio = useMemo(() => {
const audio = new Audio(achievementSound);
@ -23,11 +27,7 @@ export function Achievemnt() {
if (!achievements) return;
if (achievements.length) {
const achievement = achievements[0];
setAchievementInfo({
displayName: achievement.displayName,
icon: achievement.iconUrl,
});
setAchievements((ach) => ach.concat(achievements));
}
audio.play();
@ -39,7 +39,26 @@ export function Achievemnt() {
};
}, [audio]);
if (!achievementInfo) return <p>Nada</p>;
const hasAchievementsPending = achievements.length > 0;
useEffect(() => {
if (hasAchievementsPending) {
let zero = performance.now();
achievementAnimation.current = requestAnimationFrame(
function animateLock(time) {
if (time - zero > 3000) {
zero = performance.now();
setAchievements((ach) => ach.slice(1));
}
achievementAnimation.current = requestAnimationFrame(animateLock);
}
);
} else {
cancelAnimationFrame(achievementAnimation.current);
}
}, [hasAchievementsPending]);
if (!hasAchievementsPending) return null;
return (
<div
@ -48,16 +67,17 @@ export function Achievemnt() {
flexDirection: "row",
gap: "8px",
alignItems: "center",
background: vars.color.background,
}}
>
<img
src={achievementInfo.icon}
alt={achievementInfo.displayName}
src={achievements[0].iconUrl}
alt={achievements[0].displayName}
style={{ width: 60, height: 60 }}
/>
<div>
<p>{t("achievement_unlocked")}</p>
<p>{achievementInfo.displayName}</p>
<p>{achievements[0].displayName}</p>
</div>
</div>
);