Fixes (#1980)

* Content fixes

* Fix spacing

* Fix achievements

src/pages/advent-calendar-2024/components/quizzes/guess-what.jsx

@@ -424,7 +424,7 @@ export const GuessWhat = ({ quizType, questions }) => {
       {/* Show final result */}
       {finalResult && (
         <div style={{ textAlign: "center" }}>
-          <Stack space={8}>
+          <Stack space={16}>
             <Text5>Your {quizType} is</Text5>
             {quizType === "icon" && (
               <DecorationPatty size={128} stroke="0.75">

src/pages/advent-calendar-2024/components/static-content/advent-calendar-history.jsx

@@ -4,7 +4,7 @@ import ContentWrapper from "../content-wrapper";
 const AdventCalendarHistory = () => {
   return (
     <ContentWrapper>
-      <Stack space={32}>
+      <Stack space={48}>
         <Stack space={16}>
           <Text3 color={skinVars.colors.textPrimary}>
             The Advent calendar was born in Germany in the 19th century as a way
@@ -27,18 +27,17 @@ const AdventCalendarHistory = () => {
           </Text3>
 
           <Text3 color={skinVars.colors.textPrimary}>
-            This digital calendar is a tribute to this tradition.
+            Mística advent calendar is our tribute to this tradition.
           </Text3>
-
-          <img
-            src={require("../../assets/images/advent-calendar.png")}
-            alt="Advent Calendar"
-            style={{
-              width: "100%",
-              borderRadius: "24px",
-            }}
-          />
         </Stack>
+        <img
+          src={require("../../assets/images/advent-calendar.png")}
+          alt="Advent Calendar"
+          style={{
+            width: "100%",
+            borderRadius: 24,
+          }}
+        />
       </Stack>
     </ContentWrapper>
   );

src/pages/advent-calendar-2024/components/static-content/music-list.jsx

@@ -38,7 +38,7 @@ import {
                 buttonLink={
                   <ButtonLink
                     small
-                    href="https://open.spotify.com/playlist/37i9dQZF1DX2zhLcnFr1qI?si=c3bc02b6443441ee"
+                    href="https://open.spotify.com/playlist/0iQHZpckYQeEHluLqmGHRc?si=Ej-QL4_YQhVWlUlEMbuFA"
                   >
                     Listen
                   </ButtonLink>
@@ -94,7 +94,7 @@ import {
                 buttonLink={
                   <ButtonLink
                     small
-                    href="https://open.spotify.com/playlist/0iQHZpckYQeEHluLqmGHRc?si=Ej-QL4_YQhVWlUlEMbuFA"
+                    href="https://open.spotify.com/playlist/37i9dQZF1DX2zhLcnFr1qI?si=c3bc02b6443441ee"
                   >
                     Listen
                   </ButtonLink>

src/pages/advent-calendar-2024/pages/progress-view.jsx

@@ -27,6 +27,7 @@ import Snow from "../components/snow.tsx";
 import {
   ACHIEVEMENT_PREFIX,
   achievementsConfig,
+  getAchievementFromLocalStorage,
 } from "../utils/achievement-config";
 import { TOTAL_CALENDAR_DAYS } from "../utils/constants";
 
@@ -38,20 +39,27 @@ const ProgressView = () => {
   const { isTabletOrSmaller } = useScreenSize();
 
   useEffect(() => {
+    // Retrieve and parse completed days
     const storedDays = localStorage.getItem("completedDays");
-    const parsedDays = JSON.parse(storedDays);
+    const parsedDays = storedDays ? JSON.parse(storedDays) : [];
     setCompletedDays(parsedDays);
 
-    const storedAchievements = localStorage.getItem("achievements");
-    const parsedAchievements = JSON.parse(storedAchievements);
-    const achievementsState = parsedAchievements.reduce((acc, id) => {
-      acc[id] = { isCompleted: true, isSecret: false };
-      return acc;
-    }, {});
-    setAchievements(achievementsState);
-
-    const scores = JSON.parse(localStorage.getItem("gameScores")) || {};
+    // Retrieve and parse game scores
+    const storedScores = localStorage.getItem("gameScores");
+    const scores = storedScores ? JSON.parse(storedScores) : {};
     setGameScores(scores);
+
+    // Dynamically build the achievements state based on localStorage values
+    const achievementsState = {};
+    achievementsConfig.forEach(({ id, isSecret }) => {
+      // If an achievement is stored in localStorage and is completed, set it to true
+      const isCompleted = getAchievementFromLocalStorage(id); // If the achievement is in localStorage, it's considered completed
+      achievementsState[id] = {
+        isCompleted, // true if completed, false if not
+        isSecret,
+      };
+    });
+    setAchievements(achievementsState);
   }, []);
 
   const handleClearData = () => {

src/pages/advent-calendar-2024/utils/achievement-config.jsx

@@ -121,7 +121,7 @@ const isChristmasDay = (date) => {
 export const ACHIEVEMENT_PREFIX = "achievement_"; // Prefix for localStorage keys
 
 // Function to get achievement status from localStorage
-const getAchievementFromLocalStorage = (id) => {
+export const getAchievementFromLocalStorage = (id) => {
   return JSON.parse(localStorage.getItem(ACHIEVEMENT_PREFIX + id)) || false;
 };
 

src/pages/advent-calendar-2024/utils/content-config.jsx

@@ -72,7 +72,7 @@ const contentByDate = {
       "Can you guess which Christmas movie these emojis represent? 🎬.",
   },
   "2024-12-04": {
-    repeatable: false,
+    repeatable: true,
     illustration: <Illustration04 />,
     illustrationDimmed: <Illustration04 disabled />,
     content: (