diff --git a/public/index.html b/public/index.html index aca39f92ae..8ffe93dd82 100644 --- a/public/index.html +++ b/public/index.html @@ -12,7 +12,11 @@ content="Mistica design team" data-react-helmet="true" /> - + { const { isDesktopOrBigger } = useScreenSize(); const { isDarkMode } = useTheme(); const projects = [ + { + title: "Mística 2024", + description: "Coming soon...", + link: "/advent-calendar-2024", + buttonLabel: "Visit", + image: ComingSoon, + }, { title: "Mistica wrapped 2023", description: @@ -175,109 +184,124 @@ const Home = () => { ]; return ( - - ( - - Project - - } - background="alternative" - title={project.title} - description={project.description} - media={ - - } - buttonLink={ - - {project.buttonLabel} - - } - > - ))} - > + <> + + Advent calendar + + + + + + + + + + ( + + Project + + } + background="alternative" + title={project.title} + description={project.description} + media={ + + } + buttonLink={ + + {project.buttonLabel} + + } + > + ))} + > - - - - - - Our resources + + + + + + Our resources - - {resources.map((resource, index) => ( - - {resource.icon} - - } - title={resource.title} - buttonLink={ - - {resource.buttonLabel} - - } - /> - ))} - - - - - - - Guides - - - {guides.map((guide, index) => ( - { - window.open(guide.link, "_blank"); - }} + + {resources.map((resource, index) => ( + + {resource.icon} + + } + title={resource.title} + buttonLink={ + + {resource.buttonLabel} + + } /> ))} - - - - + + + + + + + Guides + + + {guides.map((guide, index) => ( + { + window.open(guide.link, "_blank"); + }} + /> + ))} + + + + - - - Meet the team + + + Meet the team - - {team.map((member, index) => ( - - ))} - - - - - - - + + {team.map((member, index) => ( + + ))} + + + + + + + + ); }; diff --git a/src/pages/advent-calendar-2024/assets/images/coming-soon.png b/src/pages/advent-calendar-2024/assets/images/coming-soon.png new file mode 100644 index 0000000000..d9a72d9f6d Binary files /dev/null and b/src/pages/advent-calendar-2024/assets/images/coming-soon.png differ diff --git a/src/pages/advent-calendar-2024/components/calendar-card.jsx b/src/pages/advent-calendar-2024/components/calendar-card.jsx index 83366fd72e..63b0a2ad35 100644 --- a/src/pages/advent-calendar-2024/components/calendar-card.jsx +++ b/src/pages/advent-calendar-2024/components/calendar-card.jsx @@ -8,7 +8,7 @@ import { Text, Text5, } from "@telefonica/mistica"; -import { useRef, useState } from "react"; +import { useRef, useState, useEffect } from "react"; import { IconCompleted, IconLockOpen } from "../assets/icons/icons"; import { CARD_STATES } from "../utils/constants"; import styles from "./calendar-card.module.css"; @@ -26,36 +26,37 @@ const CalendarCard = ({ repeatable, }) => { const [isHovered, setIsHovered] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const dialogRef = useRef(null); const day = new Date(DateString).getDate(); const today = new Date().getDate(); - const isRepeatable = - repeatable && - DateString === today && - (status === CARD_STATES.AVAILABLE || status === CARD_STATES.COMPLETED); + const isRepeatable = repeatable && DateString === today; const handleClick = () => { if (status === CARD_STATES.AVAILABLE || isRepeatable) { - dialogRef.current.showModal(); - document.body.style.overflow = "hidden"; + setIsModalOpen((prev) => !prev); // Toggle modal state } }; + // Effect to show the modal when `isModalOpen` is true + useEffect(() => { + if (isModalOpen) { + dialogRef.current?.showModal(); + } + }, [isModalOpen]); + const handleEndDay = () => { dialogRef.current.close(); - document.body.style.overflow = "auto"; onEndDay(); // Notify the parent to update the state }; const handleCloseModal = () => { dialogRef.current.close(); // Close the modal - document.body.style.overflow = "auto"; onEndDay(); // Notify the parent to update the state }; const handleDismiss = () => { dialogRef.current.close(); - document.body.style.overflow = "auto"; }; let cardStatusStyles; @@ -155,7 +156,7 @@ const CalendarCard = ({ style={{ cursor: status !== CARD_STATES.AVAILABLE && !isRepeatable - ? "not-allowed" + ? "inherit" : "pointer", padding: 24, @@ -202,7 +203,6 @@ const CalendarCard = ({ } > {DayOfWeek} - {isRepeatable && "isRepeatable"} @@ -236,20 +236,22 @@ const CalendarCard = ({ - + {isModalOpen && ( + + )} ); }; diff --git a/src/pages/advent-calendar-2024/components/game-bar.jsx b/src/pages/advent-calendar-2024/components/game-bar.jsx index a07a07c5f4..73fae8884b 100644 --- a/src/pages/advent-calendar-2024/components/game-bar.jsx +++ b/src/pages/advent-calendar-2024/components/game-bar.jsx @@ -15,6 +15,7 @@ const GameBar = ({ score, time, timeRunning, movements }) => { left: isMobile ? 0 : 56, top: isMobile ? 0 : 56, marginBottom: isMobile ? 24 : 0, + zIndex: 2, }} > { - const { isMobile } = useScreenSize(); + ( + { title, day, dayOfWeek, description, content, onCancel, repeatable }, + ref + ) => { + const { isMobile, isLargeDesktop } = useScreenSize(); return ( -
- - - {day} - - - {dayOfWeek} - {" "} - -
+ + + {day} + + + {dayOfWeek} + {" "} + + {title} diff --git a/src/pages/advent-calendar-2024/index.jsx b/src/pages/advent-calendar-2024/index.jsx index c839d97677..6bca5ac0ed 100644 --- a/src/pages/advent-calendar-2024/index.jsx +++ b/src/pages/advent-calendar-2024/index.jsx @@ -3,6 +3,7 @@ import ComingSoonPage from "./pages/coming-soon"; import CalendarView from "./pages/calendar-view"; import { RELEASE_DATE } from "./utils/constants"; +import { Helmet } from "react-helmet"; const targetDate = new Date(RELEASE_DATE); @@ -29,7 +30,24 @@ const AdventCalendar2024 = () => { }, []); if (!isReleased) { - return ; + return ( + <> + + Advent calendar + + + + + + + + + + + ); } return ; diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx index d1aedac3ca..6667a512b2 100644 --- a/src/pages/advent-calendar-2024/pages/calendar-view.jsx +++ b/src/pages/advent-calendar-2024/pages/calendar-view.jsx @@ -1,6 +1,5 @@ import { Box, - ButtonPrimary, Carousel, Circle, GridLayout, @@ -26,11 +25,7 @@ import CornerLayout from "../components/corner-layout.jsx"; import NavBar from "../components/navbar"; import Snow from "../components/snow.tsx"; import ToastWrapper from "../components/toast-wrapper"; -import { - ACHIEVEMENT_PREFIX, - achievementsConfig, - checkAndUnlockAchievements, -} from "../utils/achievement-config"; +import { checkAndUnlockAchievements } from "../utils/achievement-config"; import { calendarDays } from "../utils/calendar-config.jsx"; import { CARD_STATES } from "../utils/constants"; import contentByDate from "../utils/content-config"; @@ -61,21 +56,6 @@ const CalendarView = () => { }; const [achievements, setAchievements] = useState([]); - const [availableDays, setAvailableDays] = useState([]); - const [isAllDaysAvailable, setIsAllDaysAvailable] = useState(false); - - const unlockAllDays = () => { - if (isAllDaysAvailable) { - // Lock all days - setAvailableDays([]); // Clear the available days - } else { - // Unlock all days - const allDates = calendarDays.map((day) => day.date); - setAvailableDays(allDates); // Set all days as available - } - // Toggle the availability state - setIsAllDaysAvailable((prevState) => !prevState); - }; const today = new Date().toISOString().split("T")[0]; const todayIndex = calendarDays.findIndex(({ date }) => date === today); @@ -98,22 +78,9 @@ const CalendarView = () => { } }; - const clearLocalStorage = () => { - localStorage.removeItem("completedDays"); // Clear from local storage - updateCompletedDays([], setCompletedDays); // Clear state - achievementsConfig.forEach(({ id }) => { - localStorage.removeItem(ACHIEVEMENT_PREFIX + id); - }); - - localStorage.removeItem("gameScores"); - localStorage.removeItem("quizData"); - }; - const getDayStatus = (date) => { if (completedDays.includes(date)) { return CARD_STATES.COMPLETED; - } else if (isAllDaysAvailable || availableDays.includes(date)) { - return CARD_STATES.AVAILABLE; // Available if all days are unlocked or the day is in availableDays } else if (date !== today) { return CARD_STATES.BLOCKED; // Block past dates } else { @@ -297,12 +264,6 @@ const CalendarView = () => { initialActiveItem={initialActiveDay} items={calendarItems} /> - - Clear Completed Days - - - {isAllDaysAvailable ? "Lock all days" : "Unlock all days"} - - {completedDays} of 25 + {completedDays} of {calendarDays.length} - {achievements} of 8 + {achievements} of {achievementsConfig.length} { const [completedDays, setCompletedDays] = useState([]); @@ -61,26 +60,6 @@ const ProgressView = () => { setAchievements(achievementsState); }, []); - const handleClearData = () => { - // Clear local storage for completed days and individual achievements - localStorage.removeItem("completedDays"); - - // Clear individual achievements based on the achievementsConfig - achievementsConfig.forEach(({ id }) => { - localStorage.removeItem(ACHIEVEMENT_PREFIX + id); - }); - - localStorage.removeItem("gameScores"); - - // Clear the combined achievements entry - localStorage.removeItem("achievements"); - - // Clear the component state - setCompletedDays([]); - setAchievements({}); - setGameScores({}); - }; - const completedAchievementsCount = achievementsConfig.filter( (achievement) => { const achievementStatus = achievements[achievement.id] || { @@ -181,7 +160,7 @@ const ProgressView = () => { of {" "} - {TOTAL_CALENDAR_DAYS} + {calendarDays.length} @@ -338,10 +317,6 @@ const ProgressView = () => { } > - - - Clear local stored data - diff --git a/src/pages/advent-calendar-2024/utils/constants.jsx b/src/pages/advent-calendar-2024/utils/constants.jsx index 0c3d960b6d..bd14042e2e 100644 --- a/src/pages/advent-calendar-2024/utils/constants.jsx +++ b/src/pages/advent-calendar-2024/utils/constants.jsx @@ -1,4 +1,4 @@ -export const RELEASE_DATE = "2024-10-25T00:00:01"; +export const RELEASE_DATE = "2024-12-02T00:00:00"; export const CLAIM_GIFT_DATE = "2024-12-25T00:00:01"; diff --git a/src/pages/wrapped2023/index.jsx b/src/pages/wrapped2023/index.jsx index dc2e2879de..1475fda32f 100644 --- a/src/pages/wrapped2023/index.jsx +++ b/src/pages/wrapped2023/index.jsx @@ -4,8 +4,6 @@ import { teamsMembers } from "./data/teamsData"; import { medianBFSessions } from "./data/brandFactoryData"; import { releases, mergedPRs } from "./data/devData"; import { formatCount } from "./utils"; -import { Helmet } from "react-helmet"; -import thumbnail from "./assets/thumbnail.png"; import { Title2, @@ -102,28 +100,6 @@ const Wrapped2023 = () => { return ( <> - - Wrapped 2023 - - - - - - - -