diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 8b9ff73e..79b78393 100755 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -223,6 +223,7 @@ "show_more": "Show more", "show_less": "Show less", "reviews": "Reviews", + "review_played_for": "Played for", "leave_a_review": "Leave a Review", "write_review_placeholder": "Share your thoughts about this game...", "sort_newest": "Newest", diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json index adf25e33..29d1c702 100644 --- a/src/locales/es/translation.json +++ b/src/locales/es/translation.json @@ -359,6 +359,7 @@ "write_review_placeholder": "Compartí tus pensamientos sobre este juego...", "yes": "Si", "you_seemed_to_enjoy_this_game": "Parece que has disfrutado de este juego", + "review_played_for": "Jugado por", "language": "Idioma", "caption": "Subtítulo", "audio": "Audio", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 42743a64..f4d02552 100755 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -309,6 +309,7 @@ "show_more": "Mostrar mais", "show_less": "Mostrar menos", "reviews": "Avaliações", + "review_played_for": "Jogou por", "leave_a_review": "Deixar uma Avaliação", "write_review_placeholder": "Compartilhe seus pensamentos sobre este jogo...", "sort_newest": "Mais Recentes", diff --git a/src/locales/pt-PT/translation.json b/src/locales/pt-PT/translation.json index 6c1963cc..bce47d59 100644 --- a/src/locales/pt-PT/translation.json +++ b/src/locales/pt-PT/translation.json @@ -182,6 +182,7 @@ "game_added_to_favorites": "Jogo adicionado aos favoritos", "create_start_menu_shortcut": "Criar atalho no Menu Iniciar", "review_from_blocked_user": "Avaliação de utilizador bloqueado", + "review_played_for": "Jogaste por", "show": "Mostrar", "hide": "Ocultar" }, diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index 6f4d4b92..f5f5f6a1 100644 --- a/src/locales/ru/translation.json +++ b/src/locales/ru/translation.json @@ -223,6 +223,7 @@ "show_more": "Показать больше", "show_less": "Показать меньше", "reviews": "Отзывы", + "review_played_for": "Играно", "leave_a_review": "Оставить отзыв", "write_review_placeholder": "Поделитесь своими мыслями об этой игре...", "sort_newest": "Сначала новые", diff --git a/src/renderer/src/pages/game-details/review-item.scss b/src/renderer/src/pages/game-details/review-item.scss index d4f2d38c..56ffaa36 100644 --- a/src/renderer/src/pages/game-details/review-item.scss +++ b/src/renderer/src/pages/game-details/review-item.scss @@ -22,7 +22,13 @@ &__review-user-info { display: flex; flex-direction: column; - gap: calc(globals.$spacing-unit * 0.25); + gap: calc(globals.$spacing-unit * 0.45); + } + + &__review-meta-row { + display: flex; + align-items: center; + gap: calc(globals.$spacing-unit * 0.75); } &__review-display-name { @@ -157,28 +163,29 @@ &__review-score-stars { display: flex; align-items: center; - gap: 2px; + gap: 6px; + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; + padding: 2px 6px; + border: 1px solid rgba(255, 255, 255, 0.1); + font-size: 11px; + font-weight: 500; + } + + &__review-right { + display: flex; + flex-direction: column; + align-items: flex-end; + align-self: flex-start; } &__review-star { - color: #666666; + color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease; cursor: default; &--filled { - color: #ffffff; - - &.game-details__review-score--red { - color: #fca5a5; - } - - &.game-details__review-score--yellow { - color: #fcd34d; - } - - &.game-details__review-score--green { - color: #86efac; - } + color: rgba(255, 255, 255, 0.7); } &--empty { @@ -198,6 +205,24 @@ font-size: globals.$small-font-size; } + &__review-playtime { + display: flex; + align-items: center; + gap: 6px; + color: rgba(255, 255, 255, 0.7); + font-size: 11px; + font-weight: 500; + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; + padding: 2px 6px; + border: 1px solid rgba(255, 255, 255, 0.1); + margin-top: 0; + + svg { + color: rgba(255, 255, 255, 0.6); + } + } + &__review-content { color: globals.$body-color; line-height: 1.5; diff --git a/src/renderer/src/pages/game-details/review-item.tsx b/src/renderer/src/pages/game-details/review-item.tsx index e2582f04..34b6d7aa 100644 --- a/src/renderer/src/pages/game-details/review-item.tsx +++ b/src/renderer/src/pages/game-details/review-item.tsx @@ -7,9 +7,10 @@ import { useState } from "react"; import type { GameReview } from "@types"; import { sanitizeHtml } from "@shared"; -import { useDate } from "@renderer/hooks"; +import { useDate, useFormat } from "@renderer/hooks"; import { formatNumber } from "@renderer/helpers"; import { Avatar } from "@renderer/components"; +import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants"; import "./review-item.scss"; @@ -29,13 +30,6 @@ interface ReviewItemProps { ) => void; } -const getScoreColorClass = (score: number): string => { - if (score >= 1 && score <= 2) return "game-details__review-score--red"; - if (score >= 3 && score <= 3) return "game-details__review-score--yellow"; - if (score >= 4 && score <= 5) return "game-details__review-score--green"; - return ""; -}; - const getRatingText = (score: number, t: (key: string) => string): string => { switch (score) { case 1: @@ -68,6 +62,7 @@ export function ReviewItem({ const navigate = useNavigate(); const { t, i18n } = useTranslation("game_details"); const { formatDistance } = useDate(); + const { numberFormatter } = useFormat(); const [showOriginal, setShowOriginal] = useState(false); @@ -95,6 +90,19 @@ export function ReviewItem({ } }; + const formatPlayTime = (playTimeInSeconds: number) => { + const minutes = playTimeInSeconds / 60; + + if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) { + return t("amount_minutes", { + amount: minutes.toFixed(0), + }); + } + + const hours = minutes / 60; + return t("amount_hours", { amount: numberFormatter.format(hours) }); + }; + const displayContent = needsTranslation ? review.translations[userLanguage] : review.reviewHtml; @@ -115,6 +123,8 @@ export function ReviewItem({ ); } + console.log(review); + return (
@@ -138,34 +148,39 @@ export function ReviewItem({ > {review.user.displayName || "Anonymous"} -
- - {formatDistance(new Date(review.createdAt), new Date(), { - addSuffix: true, - })} +
+
+ + + {review.score}/5 + +
+ {Boolean( + review.playTimeInSeconds && review.playTimeInSeconds > 0 + ) && ( +
+ + + {t("review_played_for")}{" "} + {formatPlayTime(review.playTimeInSeconds || 0)} + +
+ )}
-
- {[1, 2, 3, 4, 5].map((starValue) => ( - - ))} +
+
+ {formatDistance(new Date(review.createdAt), new Date(), { + addSuffix: true, + })} +
diff --git a/src/types/index.ts b/src/types/index.ts index c04b6232..18331210 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -244,6 +244,7 @@ export interface GameReview { isBlocked: boolean; hasUpvoted: boolean; hasDownvoted: boolean; + playTimeInSeconds?: number; user: { id: string; displayName: string;