Skip to content

Commit

Permalink
Merge branch 'mistica-design-site' of https://github.com/Telefonica/m…
Browse files Browse the repository at this point in the history 
…istica-design into mistica-design-site
  • Loading branch information
@yceballost
yceballost committed Nov 25, 2024
2 parents a91cd10 + d5b8765 commit 9de3f61
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 107 deletions.
52 changes: 46 additions & 6 deletions src/pages/advent-calendar-2024/components/games/movie-emoji.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,74 @@ import QuizProgress from "../quiz-progress";
import ContentWrapper from "../content-wrapper";
import { UI_LABEL } from "../../utils/constants";

const movies = [
export const set1Movies = [
{
emojis: "🏠😱👦🎄",
answer: "Home Alone",
options: ["Elf", "Love Actually"],
options: ["The Santa Clause", "The Incredibles"],
correctAnswer: "Seems that you didn't forget this one!",
},
{
emojis: "🧙‍♂️⚡️🦉🎓🏰",
answer: "Harry Potter",
options: ["Frozen", "The Polar Express"],
options: ["The Chronicles of Narnia", "Percy Jackson & The Olympians"],
correctAnswer: "You're a wizard Harry!",
},
{
emojis: "🟢🎄🐶🎁",
answer: "The Grinch",
options: ["A Christmas Carol", "Elf"],
options: ["Beethoven", "The Santa Clause"],
correctAnswer: "You're a mean one, Mr. Grinch!",
},
{
emojis: "🧝‍♂️🎄🍝🍬",
answer: "Elf",
options: ["The Polar Express", "Jingle All the Way"],
correctAnswer:
"The best way to spread Christmas cheer is singing loud for all to hear!",
},
{
emojis: "🚂❄️🎅🎁",
answer: "The Polar Express",
options: ["The Snowman", "Miracle on 34th Street"],
correctAnswer: "Believe!",
},
];

export const set2Movies = [
{
emojis: "❤️🎄🎶🎁",
answer: "Love Actually",
options: ["Notting Hill", "Valentine's Day"],
correctAnswer: "To me, you are perfect.",
},
{
emojis: "👴🕯️🎄👻",
answer: "A Christmas Carol",
options: ["Scrooged", "The Muppet Christmas Carol"],
correctAnswer: "God bless us, everyone!",
},
{
emojis: "❄️👸⛄🧊",
answer: "Frozen",
options: ["The Grinch", "Harry Potter"],
options: ["Brave", "The Chronicles of Narnia"],
correctAnswer: "Let it go!",
},
{
emojis: "🎃🎄👻🎅",
answer: "The Nightmare Before Christmas",
options: ["Coraline", "Beetlejuice"],
correctAnswer: "What's this?",
},
{
emojis: "🏢🔫🎄🚨",
answer: "Die Hard",
options: ["Lethal Weapon", "The Rock"],
correctAnswer: "Yippee-ki-yay, motherf—!",
},
];

const EmojiMovies = ({ onFinish }) => {
const EmojiMovies = ({ movies, onFinish }) => {
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [showResult, setShowResult] = useState(false);
const [isCorrect, setIsCorrect] = useState(false);
Expand Down
141 changes: 40 additions & 101 deletions src/pages/advent-calendar-2024/utils/content-config.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ import {

import CandyCrush from "../components/games/candy";
import MemoryGame from "../components/games/memory";
import EmojiMovies from "../components/games/movie-emoji";
import EmojiMovies, {
set1Movies,
set2Movies,
} from "../components/games/movie-emoji";
import SimonSays from "../components/games/simon";
import WordleGame from "../components/games/wordle";
import GuessTheComponent, {
Expand All @@ -40,6 +43,7 @@ import ChristmasGreetings from "../components/static-content/christmas-greetings
import ChristmasMovies from "../components/static-content/christmas-movies";
import Horoscope from "../components/static-content/horoscope";
import TopContributors from "../components/static-content/top-contributors";
import HigherOrLower from "../components/games/higher-or-lower";

const contentByDate = {
"2024-12-02": {
Expand All @@ -55,7 +59,9 @@ const contentByDate = {
repeatable: false,
illustration: <Illustration03 />,
illustrationDimmed: <Illustration03 disabled />,
content: ({ closeModal }) => <EmojiMovies onFinish={closeModal} />,
content: ({ closeModal }) => (
<EmojiMovies movies={set1Movies} onFinish={closeModal} />
),
title: "Emoji movie",
description:
"Can you guess which Christmas movie these emojis represent? 🎬.",
Expand All @@ -69,13 +75,13 @@ const contentByDate = {
),
title: "Component Match",
description:
"If you were an Mística icon, which one would you be? Choose the answers that best fit you and find out! ",
"If you were a component, which one would you be? Find out here! 🧩",
},
"2024-12-05": {
content: ({ closeModal }) => <WordleGame onFinish={closeModal} />,
illustration: <Illustration05 />,
illustrationDimmed: <Illustration05 disabled />,
title: "Popcor",
title: "Wordle",
description: (
<>
<Text3 color={skinVars.colors.brand}>
Expand Down Expand Up @@ -148,75 +154,9 @@ const contentByDate = {
repeatable: false,
illustration: <Illustration06 />,
illustrationDimmed: <Illustration06 disabled />,
content: ({ closeModal }) => <WordleGame onFinish={closeModal} />,
title: "Wordle",
description: (
<>
<Text3 color={skinVars.colors.brand}>
Type your attempts, hit 'Enter,' and let the letters reveal their
secrets. <br />
Can you uncover the missing word and bring balance back to Mística?{" "}
<br />
<br />
</Text3>

<Text1 color={skinVars.colors.brand}>
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
<div
style={{
width: "20px",
height: "20px",
backgroundColor: "#d9d9d9",
border: `2px solid white`,
borderRadius: "4px",
}}
></div>
Gray means the letter is not in the word.
</div>
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
marginTop: "8px",
}}
>
<div
style={{
width: "20px",
height: "20px",
backgroundColor: skinVars.colors.warning,
border: `2px solid white`,
borderRadius: "4px",
}}
></div>
Yellow indicates the letter is in the word but in the wrong
position.
</div>
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
marginTop: "8px",
}}
>
<div
style={{
width: "20px",
height: "20px",
backgroundColor: skinVars.colors.success,
border: `2px solid white`,
borderRadius: "4px",
}}
></div>
Green shows that the letter is correct and in the right spot.
</div>
<br />
Use these clues wisely to solve the mystery!
</Text1>
</>
),
content: <AdventCalendarHistory />,
title: "Did you know...",
description: "Where the tradition Christmas calendar comes from?",
},
"2024-12-09": {
repeatable: true,
Expand All @@ -242,13 +182,23 @@ const contentByDate = {
repeatable: true,
illustration: <Illustration11 />,
illustrationDimmed: <Illustration11 disabled />,
content: <AdventCalendarHistory />,
title: "Did you know...",
description: "Where the tradition Christmas calendar comes from?",
content: ({ closeModal }) => <HigherOrLower onFinish={closeModal} />,
title: "Higher or Lower",
description:
"Answer the question by guessing whether the number is higher or lower than the given data.",
},
"2024-12-12": {
repeatable: true,
illustration: <Illustration12 />,
illustrationDimmed: <Illustration12 disabled />,
content: <GuessWhat questions={iconQuestions} quizType={"icon"} />,
title: "Icon Match",
description:
"If you were an Mística icon, which one would you be? Choose the answers that best fit you and find out! ",
},
"2024-12-13": {
illustration: <Illustration13 />,
illustrationDimmed: <Illustration13 disabled />,
content: ({ closeModal }) => <MemoryGame onFinish={closeModal} />,
title: "Memory cards",
description: (
Expand All @@ -262,28 +212,24 @@ const contentByDate = {
</Text3>
),
},
"2024-12-13": {
repeatable: true,
illustration: <Illustration13 />,
illustrationDimmed: <Illustration13 disabled />,
content: <GuessWhat questions={iconQuestions} quizType={"icon"} />,
title: "Icon Match",
description:
"If you were an Mística icon, which one would you be? Choose the answers that best fit you and find out! ",
},

"2024-12-16": {
illustration: <Illustration16 />,
illustrationDimmed: <Illustration16 disabled />,
content: ({ closeModal }) => <Placeholder />,
title: "Pending",
description: "Pending",
content: ({ closeModal }) => (
<EmojiMovies movies={set2Movies} onFinish={closeModal} />
),
title: "Emoji movie",
description:
"Can you guess which Christmas movie these emojis represent? 🎬.",
},
"2024-12-17": {
illustration: <Illustration17 />,
illustrationDimmed: <Illustration17 disabled />,
content: ({ closeModal }) => <Placeholder />,
title: "Pending",
description: "Pending",
content: ({ closeModal }) => <HigherOrLower onFinish={closeModal} />,
title: "Higher or Lower",
description:
"Answer the question by guessing whether the number is higher or lower than the given data.",
},
"2024-12-18": {
illustration: <Illustration18 />,
Expand All @@ -299,21 +245,14 @@ const contentByDate = {
"2024-12-19": {
illustration: <Illustration19 />,
illustrationDimmed: <Illustration19 disabled />,
content: ({ closeModal }) => <Placeholder />,
title: "Pending",
description: "Pending",
content: <TopContributors />,
title: "Top contributors",
description: "A big thank you to our contributors!",
},
"2024-12-20": {
illustration: <Illustration20 />,
illustrationDimmed: <Illustration20 disabled />,
repeatable: true,
content: <TopContributors />,
title: "Top contributors",
description: "A big thank you to our contributors!",
},
"2024-12-22": {
illustration: <Illustration11 />,
illustrationDimmed: <Illustration11 disabled />,
content: ({ closeModal }) => <SimonSays onFinish={closeModal} />,
title: "Simon says",
description: (
Expand Down

0 comments on commit 9de3f61

Please sign in to comment.