feat: ui adjustments

This commit is contained in:
Zamitto 2024-12-22 12:38:31 -03:00
parent 58a8f6fd6e
commit 93bc7c690f
6 changed files with 35 additions and 28 deletions

View File

@ -168,7 +168,8 @@
"select_folder": "Select folder", "select_folder": "Select folder",
"backup_from": "Backup from {{date}}", "backup_from": "Backup from {{date}}",
"custom_backup_location_set": "Custom backup location set", "custom_backup_location_set": "Custom backup location set",
"no_directory_selected": "No directory selected" "no_directory_selected": "No directory selected",
"available_points": "Available points:"
}, },
"activation": { "activation": {
"title": "Activate Hydra", "title": "Activate Hydra",
@ -378,7 +379,8 @@
"new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games", "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games",
"achievement_progress": "{{unlockedCount}}/{{totalCount}} achievements", "achievement_progress": "{{unlockedCount}}/{{totalCount}} achievements",
"achievements_unlocked_for_game": "Unlocked {{achievementCount}} new achievements for {{gameTitle}}", "achievements_unlocked_for_game": "Unlocked {{achievementCount}} new achievements for {{gameTitle}}",
"hidden_achievement_tooltip": "This is a hidden achievement" "hidden_achievement_tooltip": "This is a hidden achievement",
"achievement_earn_points": "Earn {{points}} with this achievement"
}, },
"tour": { "tour": {
"subscription_tour_title": "Hydra Cloud Subscription", "subscription_tour_title": "Hydra Cloud Subscription",

View File

@ -164,7 +164,8 @@
"select_folder": "Selecione a pasta", "select_folder": "Selecione a pasta",
"manage_files_description": "Gerencie quais arquivos serão feitos backup", "manage_files_description": "Gerencie quais arquivos serão feitos backup",
"clear": "Limpar", "clear": "Limpar",
"no_directory_selected": "Nenhum diretório selecionado" "no_directory_selected": "Nenhum diretório selecionado",
"available_points": "Pontos disponíveis:"
}, },
"activation": { "activation": {
"title": "Ativação", "title": "Ativação",
@ -376,7 +377,8 @@
"new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos", "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos",
"achievement_progress": "{{unlockedCount}}/{{totalCount}} conquistas", "achievement_progress": "{{unlockedCount}}/{{totalCount}} conquistas",
"achievements_unlocked_for_game": "Desbloqueadas {{achievementCount}} novas conquistas em {{gameTitle}}", "achievements_unlocked_for_game": "Desbloqueadas {{achievementCount}} novas conquistas em {{gameTitle}}",
"hidden_achievement_tooltip": "Está é uma conquista oculta" "hidden_achievement_tooltip": "Está é uma conquista oculta",
"achievement_earn_points": "Ganhe {{points}} com essa conquista"
}, },
"tour": { "tour": {
"subscription_tour_title": "Assinatura Hydra Cloud", "subscription_tour_title": "Assinatura Hydra Cloud",

View File

@ -44,7 +44,9 @@ export function AchievementList({ achievements }: AchievementListProps) {
{achievement.points && ( {achievement.points && (
<div <div
style={{ display: "flex", alignItems: "center", gap: "4px" }} style={{ display: "flex", alignItems: "center", gap: "4px" }}
title="This achievement is worth 69 H-points" title={t("achievement_earn_points", {
points: achievement.points,
})}
> >
<HydraIcon width={20} height={20} /> <HydraIcon width={20} height={20} />
<p style={{ fontSize: "1.1em" }}>{achievement.points}</p> <p style={{ fontSize: "1.1em" }}>{achievement.points}</p>

View File

@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
export const panel = style({ export const panel = style({
width: "100%", width: "100%",
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`, padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
backgroundColor: vars.color.background, backgroundColor: vars.color.background,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",

View File

@ -19,31 +19,31 @@ export function ComparedAchievementPanel({
const {} = useContext(gameDetailsContext); const {} = useContext(gameDetailsContext);
return ( return (
<> <div
<div className={styles.panel}
className={styles.panel} style={{
style={{ display: "grid",
display: "grid", gridTemplateColumns:
gridTemplateColumns: achievements.owner.achievementsPointsEarnedSum !== undefined
achievements.owner.achievementsPointsEarnedSum !== undefined ? "3fr 1fr 1fr"
? "3fr 1fr 1fr" : "3fr 2fr",
: "3fr 2fr", gap: `${SPACING_UNIT * 2}px`,
}} }}
> >
<div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}> <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
Total de pontos: <HydraIcon width={20} height={20} /> 4200 {t("available_points")} <HydraIcon width={20} height={20} />{" "}
</div> {achievements.achievementsPointsTotal}
{achievements.owner.achievementsPointsEarnedSum !== undefined && ( </div>
<div className={styles.content}> {achievements.owner.achievementsPointsEarnedSum !== undefined && (
<HydraIcon width={20} height={20} />
{achievements.owner.achievementsPointsEarnedSum}
</div>
)}
<div className={styles.content}> <div className={styles.content}>
<HydraIcon width={20} height={20} /> <HydraIcon width={20} height={20} />
{achievements.target.achievementsPointsEarnedSum} {achievements.owner.achievementsPointsEarnedSum}
</div> </div>
)}
<div className={styles.content}>
<HydraIcon width={20} height={20} />
{achievements.target.achievementsPointsEarnedSum}
</div> </div>
</> </div>
); );
} }

View File

@ -368,6 +368,7 @@ export interface GameArtifact {
} }
export interface ComparedAchievements { export interface ComparedAchievements {
achievementsPointsTotal: number;
owner: { owner: {
totalAchievementCount: number; totalAchievementCount: number;
unlockedAchievementCount: number; unlockedAchievementCount: number;