fix: fixing game hero

2026-01-20 09:43:57 +00:00 · 2025-10-24 17:13:36 +01:00
parent 0d60ec8801
commit 881564daa7
8 changed files with 92 additions and 194 deletions
--- a/src/main/services/hydra-api.ts
+++ b/src/main/services/hydra-api.ts
@@ -29,7 +29,7 @@ export class HydraApi {
  private static instance: AxiosInstance;

  private static readonly EXPIRATION_OFFSET_IN_MS = 1000 * 60 * 5; // 5 minutes
-  private static readonly ADD_LOG_INTERCEPTOR = true;
+  private static readonly ADD_LOG_INTERCEPTOR = false;

  private static secondsToMilliseconds(seconds: number) {
    return seconds * 1000;
--- a/src/main/services/python-rpc.ts
+++ b/src/main/services/python-rpc.ts
@@ -106,7 +106,7 @@ export class PythonRPC {
        "main.py"
      );

-      const childProcess = cp.spawn("python3", [scriptPath, ...commonArgs], {
+      const childProcess = cp.spawn("python", [scriptPath, ...commonArgs], {
        stdio: ["inherit", "inherit"],
      });

--- a/src/renderer/src/pages/game-details/description-header/description-header.scss
+++ b/src/renderer/src/pages/game-details/description-header/description-header.scss
@@ -11,7 +11,6 @@
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  margin-bottom: calc(globals.$spacing-unit * 1.5);

  &__info {
    display: flex;
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
+++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
@@ -2,7 +2,7 @@

 .gallery-slider {
  &__container {
-    padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 1);
+    padding: calc(globals.$spacing-unit * 1.5) 0;
    width: 100%;
    display: flex;
    flex-direction: column;
--- a/src/renderer/src/pages/game-details/game-details-content.tsx
+++ b/src/renderer/src/pages/game-details/game-details-content.tsx
@@ -53,8 +53,6 @@ const getImageWithCustomPriority = (
 };

 export function GameDetailsContent() {
-  const heroRef = useRef<HTMLDivElement | null>(null);
-
  const { t } = useTranslation("game_details");

  const {
@@ -152,18 +150,12 @@ export function GameDetailsContent() {
      className={`game-details__wrapper ${hasNSFWContentBlocked ? "game-details__wrapper--blurred" : ""}`}
    >
      <section className="game-details__container">
-        <div ref={heroRef} className="game-details__hero">
+        <div className="game-details__hero">
          <img
            src={heroImage}
            className="game-details__hero-image"
            alt={game?.title}
          />
-          <div
-            className="game-details__hero-backdrop"
-            style={{
-              flex: 1,
-            }}
-          />

          <div
            className="game-details__hero-logo-backdrop"
@@ -202,11 +194,13 @@ export function GameDetailsContent() {
                )}
              </div>
            </div>
+
+            <div className="game-details__hero-panel">
+              <HeroPanel />
+            </div>
          </div>
        </div>

-        <HeroPanel />
-
        <div className="game-details__description-container">
          <div className="game-details__description-content">
            <DescriptionHeader />
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/src/renderer/src/pages/game-details/game-details.scss
@@ -1,6 +1,6 @@
@use "../../scss/globals.scss";

-$hero-height: 300px;
+$hero-height: 350px;

@keyframes slide-in {
  0% {
@@ -27,6 +27,10 @@ $hero-height: 300px;
    }
  }

+  &__hero-panel {
+    padding: globals.$spacing-unit;
+  }
+
  &__review-form {
    display: flex;
    flex-direction: column;
@@ -34,19 +38,6 @@ $hero-height: 300px;
    margin-bottom: 24px;
  }

-  &__review-form-controls {
-    display: flex;
-    gap: calc(globals.$spacing-unit * 2);
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    @media (max-width: 768px) {
-      flex-direction: column;
-      align-items: stretch;
-      gap: calc(globals.$spacing-unit * 1.5);
-    }
-  }
-
  &__review-form-bottom {
    display: flex;
    justify-content: space-between;
@@ -55,39 +46,12 @@ $hero-height: 300px;
    flex-wrap: wrap;
  }

-  &__review-message {
-    padding: calc(globals.$spacing-unit * 1);
-    border-radius: 4px;
-    font-size: globals.$small-font-size;
-    font-weight: 500;
-    margin-top: calc(globals.$spacing-unit * 1);
-    border: 1px solid;
-
-    &--success {
-      background: rgba(34, 197, 94, 0.1);
-      color: #86efac;
-      border-color: rgba(34, 197, 94, 0.3);
-    }
-
-    &--error {
-      background: rgba(239, 68, 68, 0.1);
-      color: #fca5a5;
-      border-color: rgba(239, 68, 68, 0.3);
-    }
-  }
-
  &__review-score-container {
    display: flex;
    align-items: center;
    gap: 4px;
  }

-  &__review-score-label {
-    font-size: 14px;
-    color: #ffffff;
-    font-weight: 500;
-  }
-
  &__review-score-select {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
@@ -220,10 +184,6 @@ $hero-height: 300px;
    }
  }

-  &__reviews-list {
-    margin-top: calc(globals.$spacing-unit * 3);
-  }
-
  &__reviews-container {
    display: flex;
    flex-direction: column;
@@ -578,8 +538,8 @@ $hero-height: 300px;

  &__hero-image {
    width: 100%;
-    height: calc($hero-height + 72px);
-    min-height: calc($hero-height + 72px);
+    height: $hero-height;
+    min-height: $hero-height;
    object-fit: cover;
    object-position: top;
    transition: all ease 0.2s;
@@ -588,8 +548,8 @@ $hero-height: 300px;

    @media (min-width: 1250px) {
      object-position: center;
-      height: calc(350px + 72px);
-      min-height: calc(350px + 72px);
+      height: $hero-height;
+      min-height: $hero-height;
    }
  }

@@ -630,14 +590,6 @@ $hero-height: 300px;
    }
  }

-  &__hero-image-skeleton {
-    height: 300px;
-
-    @media (min-width: 1250px) {
-      height: 350px;
-    }
-  }
-
  &__container {
    width: 100%;
    height: 100%;
@@ -782,34 +734,6 @@ $hero-height: 300px;
    }
  }

-  &__randomizer-button {
-    animation: slide-in 0.2s;
-    position: fixed;
-    bottom: calc(globals.$spacing-unit * 3);
-    right: calc(9px + globals.$spacing-unit * 2);
-    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px 1px;
-    border: solid 2px globals.$border-color;
-    z-index: 1;
-    background-color: globals.$background-color;
-
-    &:hover {
-      background-color: globals.$background-color;
-      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px;
-      opacity: 1;
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-
-    &:disabled {
-      box-shadow: none;
-      transform: none;
-      opacity: 0.8;
-      background-color: globals.$background-color;
-    }
-  }
-
  &__hero-panel-skeleton {
    width: 100%;
    padding: calc(globals.$spacing-unit * 2);
@@ -852,19 +776,6 @@ $hero-height: 300px;
    }
  }

-  &__stars-icon-container {
-    width: 16px;
-    height: 16px;
-    position: relative;
-  }
-
-  &__stars-icon {
-    width: 70px;
-    position: absolute;
-    top: -28px;
-    left: -27px;
-  }
-
  &__cloud-icon-container {
    width: 20px;
    height: 16px;
@@ -880,11 +791,6 @@ $hero-height: 300px;
    top: -3px;
  }

-  &__hero-backdrop {
-    flex: 1;
-    transition: opacity 0.2s ease;
-  }
-
  &__reviews-section {
    margin-top: calc(globals.$spacing-unit * 3);
    padding-top: calc(globals.$spacing-unit * 3);
--- a/src/renderer/src/pages/game-details/game-reviews.tsx
+++ b/src/renderer/src/pages/game-details/game-reviews.tsx
@@ -469,84 +469,82 @@ export function GameReviews({
        </>
      )}

-      <div className="game-details__reviews-list">
-        <div className="game-details__reviews-list-header">
-          <div className="game-details__reviews-title-group">
-            <h3 className="game-details__reviews-title">{t("reviews")}</h3>
-            <span className="game-details__reviews-badge">
-              {totalReviewCount}
-            </span>
-          </div>
+      <div className="game-details__reviews-list-header">
+        <div className="game-details__reviews-title-group">
+          <h3 className="game-details__reviews-title">{t("reviews")}</h3>
+          <span className="game-details__reviews-badge">
+            {totalReviewCount}
+          </span>
        </div>
-        <ReviewSortOptions
-          sortBy={reviewsSortBy}
-          onSortChange={handleSortChange}
-        />
-
-        {reviewsLoading && reviews.length === 0 && (
-          <div className="game-details__reviews-loading">
-            {t("loading_reviews")}
-          </div>
-        )}
-
-        {!reviewsLoading && reviews.length === 0 && (
-          <div className="game-details__reviews-empty">
-            <div className="game-details__reviews-empty-icon">
-              <NoteIcon size={48} />
-            </div>
-            <h4 className="game-details__reviews-empty-title">
-              {t("no_reviews_yet")}
-            </h4>
-            <p className="game-details__reviews-empty-message">
-              {t("be_first_to_review")}
-            </p>
-          </div>
-        )}
-
-        <div
-          className="game-details__reviews-container"
-          style={{
-            opacity: reviewsLoading && reviews.length > 0 ? 0.5 : 1,
-            transition: "opacity 0.2s ease",
-          }}
-        >
-          {reviews.map((review) => (
-            <ReviewItem
-              key={review.id}
-              review={review}
-              userDetailsId={userDetailsId}
-              isBlocked={review.isBlocked}
-              isVisible={visibleBlockedReviews.has(review.id)}
-              isVoting={votingReviews.has(review.id)}
-              previousVotes={
-                previousVotesRef.current.get(review.id) || {
-                  upvotes: 0,
-                  downvotes: 0,
-                }
-              }
-              onVote={handleVoteReview}
-              onDelete={handleDeleteReview}
-              onToggleVisibility={toggleBlockedReview}
-              onAnimationComplete={handleVoteAnimationComplete}
-            />
-          ))}
-        </div>
-
-        {hasMoreReviews && !reviewsLoading && (
-          <button
-            className="game-details__load-more-reviews"
-            onClick={loadMoreReviews}
-          >
-            {t("load_more_reviews")}
-          </button>
-        )}
-
-        {reviewsLoading && reviews.length > 0 && (
-          <div className="game-details__reviews-loading">
-            {t("loading_more_reviews")}
-          </div>
-        )}
      </div>
+      <ReviewSortOptions
+        sortBy={reviewsSortBy}
+        onSortChange={handleSortChange}
+      />
+
+      {reviewsLoading && reviews.length === 0 && (
+        <div className="game-details__reviews-loading">
+          {t("loading_reviews")}
+        </div>
+      )}
+
+      {!reviewsLoading && reviews.length === 0 && (
+        <div className="game-details__reviews-empty">
+          <div className="game-details__reviews-empty-icon">
+            <NoteIcon size={48} />
+          </div>
+          <h4 className="game-details__reviews-empty-title">
+            {t("no_reviews_yet")}
+          </h4>
+          <p className="game-details__reviews-empty-message">
+            {t("be_first_to_review")}
+          </p>
+        </div>
+      )}
+
+      <div
+        className="game-details__reviews-container"
+        style={{
+          opacity: reviewsLoading && reviews.length > 0 ? 0.5 : 1,
+          transition: "opacity 0.2s ease",
+        }}
+      >
+        {reviews.map((review) => (
+          <ReviewItem
+            key={review.id}
+            review={review}
+            userDetailsId={userDetailsId}
+            isBlocked={review.isBlocked}
+            isVisible={visibleBlockedReviews.has(review.id)}
+            isVoting={votingReviews.has(review.id)}
+            previousVotes={
+              previousVotesRef.current.get(review.id) || {
+                upvotes: 0,
+                downvotes: 0,
+              }
+            }
+            onVote={handleVoteReview}
+            onDelete={handleDeleteReview}
+            onToggleVisibility={toggleBlockedReview}
+            onAnimationComplete={handleVoteAnimationComplete}
+          />
+        ))}
+      </div>
+
+      {hasMoreReviews && !reviewsLoading && (
+        <button
+          className="game-details__load-more-reviews"
+          onClick={loadMoreReviews}
+        >
+          {t("load_more_reviews")}
+        </button>
+      )}
+
+      {reviewsLoading && reviews.length > 0 && (
+        <div className="game-details__reviews-loading">
+          {t("loading_more_reviews")}
+        </div>
+      )}
    </div>
  );
 }
--- a/src/renderer/src/pages/game-details/hero/hero-panel.scss
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.scss
@@ -18,6 +18,7 @@
  top: 0;
  z-index: 2;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;

  &--stuck {
    background: rgba(0, 0, 0, 0.7);