diff --git a/src/pages/advent-calendar-2024/assets/decorations/decoration-patty.jsx b/src/pages/advent-calendar-2024/assets/decorations/decoration-patty.jsx index e495ed08ad..7ddf82be26 100644 --- a/src/pages/advent-calendar-2024/assets/decorations/decoration-patty.jsx +++ b/src/pages/advent-calendar-2024/assets/decorations/decoration-patty.jsx @@ -1,4 +1,4 @@ -import { skinVars, Text } from "@telefonica/mistica"; +import { skinVars } from "@telefonica/mistica"; import styles from "./decoration-patty.module.css"; const DecorationPatty = ({ diff --git a/src/pages/advent-calendar-2024/assets/icons/icon-lock-open.jsx b/src/pages/advent-calendar-2024/assets/icons/icon-lock-open.jsx index 96dbbbd5c4..dd19afe892 100644 --- a/src/pages/advent-calendar-2024/assets/icons/icon-lock-open.jsx +++ b/src/pages/advent-calendar-2024/assets/icons/icon-lock-open.jsx @@ -10,7 +10,7 @@ const IconLockOpen = ({ size, color = skinVars.colors.neutralHigh }) => ( > diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-02.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-02.jsx index 47df9dcfca..2eaf0774c7 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-02.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-02.jsx @@ -19,8 +19,8 @@ const Illustration02 = ({ disabled = false }) => { fill="#D1D5E4" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-03.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-03.jsx index e81b246c11..95c3bcbc6b 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-03.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-03.jsx @@ -15,8 +15,8 @@ const Illustration03 = ({ disabled = false }) => { fill="#D1D5E4" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-04.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-04.jsx index c3f5c0b1cd..985f67b17e 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-04.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-04.jsx @@ -19,8 +19,8 @@ const Illustration04 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -37,8 +37,8 @@ const Illustration04 = ({ disabled = false }) => { xmlns="http://www.w3.org/2000/svg" > diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-05.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-05.jsx index 1ecddea873..0cf7d7944e 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-05.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-05.jsx @@ -91,8 +91,8 @@ const Illustration05 = ({ disabled = false }) => { fill="#0066FF" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-06.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-06.jsx index 4401987261..9354b2d034 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-06.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-06.jsx @@ -19,8 +19,8 @@ const Illustration06 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -87,14 +87,14 @@ const Illustration06 = ({ disabled = false }) => { fill="#344A6A" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-09.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-09.jsx index eab4a0c56f..636191e8b7 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-09.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-09.jsx @@ -12,8 +12,8 @@ const Illustration09 = ({ disabled = false }) => { > diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-11.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-11.jsx index 823443b65b..f6f999caac 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-11.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-11.jsx @@ -11,8 +11,8 @@ const Illustration11 = ({ disabled = false }) => { xmlns="http://www.w3.org/2000/svg" > @@ -26,8 +26,8 @@ const Illustration11 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -75,8 +75,8 @@ const Illustration11 = ({ disabled = false }) => { fill="#FF6372" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-12.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-12.jsx index 009feb84b1..85353fe715 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-12.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-12.jsx @@ -11,8 +11,8 @@ const Illustration12 = ({ disabled = false }) => { xmlns="http://www.w3.org/2000/svg" > @@ -53,8 +53,8 @@ const Illustration12 = ({ disabled = false }) => { fill="#0066FF" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-13.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-13.jsx index 721afc7d70..152b8b6e88 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-13.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-13.jsx @@ -27,8 +27,8 @@ const Illustration13 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -77,8 +77,8 @@ const Illustration13 = ({ disabled = false }) => { fill="#273B58" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-16.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-16.jsx index a76c941bd0..33a86abf2f 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-16.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-16.jsx @@ -19,20 +19,20 @@ const Illustration16 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -49,8 +49,8 @@ const Illustration16 = ({ disabled = false }) => { xmlns="http://www.w3.org/2000/svg" > diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-17.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-17.jsx index e9451a2f78..828bab8d38 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-17.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-17.jsx @@ -15,8 +15,8 @@ const Illustration17 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -70,8 +70,8 @@ const Illustration17 = ({ disabled = false }) => { > diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-18.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-18.jsx index 676e6606e5..b776203f9e 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-18.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-18.jsx @@ -11,8 +11,8 @@ const Illustration18 = ({ disabled = false }) => { xmlns="http://www.w3.org/2000/svg" > @@ -45,8 +45,8 @@ const Illustration18 = ({ disabled = false }) => { fill="#D1D5E4" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-19.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-19.jsx index 66f932711b..23ef2fb3e0 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-19.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-19.jsx @@ -23,8 +23,8 @@ const Illustration19 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -33,8 +33,8 @@ const Illustration19 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -43,8 +43,8 @@ const Illustration19 = ({ disabled = false }) => { fill="#D1D5E4" /> @@ -65,8 +65,8 @@ const Illustration19 = ({ disabled = false }) => { xmlns="http://www.w3.org/2000/svg" > @@ -80,8 +80,8 @@ const Illustration19 = ({ disabled = false }) => { fill="#FF6372" /> @@ -101,8 +101,8 @@ const Illustration19 = ({ disabled = false }) => { /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-23.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-23.jsx index 23148e30ca..c5818a0845 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-23.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-23.jsx @@ -10,7 +10,7 @@ const Illustration23 = ({ disabled = false }) => { fill="none" xmlns="http://www.w3.org/2000/svg" > - + { fill="none" xmlns="http://www.w3.org/2000/svg" > - + { fill="#D1D5E4" /> @@ -117,8 +117,8 @@ const Illustration24 = ({ disabled = false }) => { fill="#273B58" /> diff --git a/src/pages/advent-calendar-2024/assets/illustrations/illustration-25.jsx b/src/pages/advent-calendar-2024/assets/illustrations/illustration-25.jsx index ab5f32b3f0..577f0c76b3 100644 --- a/src/pages/advent-calendar-2024/assets/illustrations/illustration-25.jsx +++ b/src/pages/advent-calendar-2024/assets/illustrations/illustration-25.jsx @@ -102,8 +102,8 @@ const Illustration25 = ({ disabled = false }) => { fill="#873941" /> diff --git a/src/pages/advent-calendar-2024/components/games/candy.jsx b/src/pages/advent-calendar-2024/components/games/candy.jsx index 4e0f783c3b..1c473aa7ac 100644 --- a/src/pages/advent-calendar-2024/components/games/candy.jsx +++ b/src/pages/advent-calendar-2024/components/games/candy.jsx @@ -11,11 +11,12 @@ import tu from "../../../../img/games/tu.svg"; import vivo from "../../../../img/games/vivo.svg"; import "./candy.css"; +const candyColors = [movistar, tu, vivo, blau, telefonica, o2]; + const CandyCrush = ({ onFinish }) => { const gameName = "candyCrush"; const { isMobile } = useScreenSize(); const width = 8; - const candyColors = [movistar, tu, vivo, blau, telefonica, o2]; const maxMoves = 10; const [squares, setSquares] = useState([]); @@ -25,15 +26,10 @@ const CandyCrush = ({ onFinish }) => { const [selectedIndex, setSelectedIndex] = useState(null); const [invalidMove, setInvalidMove] = useState(null); const [status, setStatus] = useState("playing"); - const [highlightedSquares, setHighlightedSquares] = useState([]); const handleGameEnd = () => { if (onFinish) onFinish(); - saveGameData( - gameName, - score, - true - ); + saveGameData(gameName, score, true); }; useEffect(() => { @@ -47,152 +43,158 @@ const CandyCrush = ({ onFinish }) => { }, [movesRemaining]); useEffect(() => { + function createBoard() { + const initialSquares = []; + for (let i = 0; i < width * width; i++) { + const randomColor = Math.floor(Math.random() * candyColors.length); + initialSquares.push(candyColors[randomColor]); + } + setSquares(initialSquares); + } + createBoard(); }, []); useEffect(() => { - const intervalId = setInterval(() => { - moveDown(); - checkMatches(); - }, 100); - - return () => clearInterval(intervalId); - }, [squares]); - - function createBoard() { - const initialSquares = []; - for (let i = 0; i < width * width; i++) { - const randomColor = Math.floor(Math.random() * candyColors.length); - initialSquares.push(candyColors[randomColor]); - } - setSquares(initialSquares); - } - - function moveDown() { - let newSquares = [...squares]; - for (let i = width * (width - 1) - 1; i >= 0; i--) { - if (newSquares[i + width] === undefined || newSquares[i + width] === "") { - newSquares[i + width] = newSquares[i]; - newSquares[i] = ""; + function moveDown() { + let newSquares = [...squares]; + for (let i = width * (width - 1) - 1; i >= 0; i--) { + if ( + newSquares[i + width] === undefined || + newSquares[i + width] === "" + ) { + newSquares[i + width] = newSquares[i]; + newSquares[i] = ""; + } } - } - for (let i = 0; i < width; i++) { - if (newSquares[i] === "") { - const randomColor = Math.floor(Math.random() * candyColors.length); - newSquares[i] = candyColors[randomColor]; + for (let i = 0; i < width; i++) { + if (newSquares[i] === "") { + const randomColor = Math.floor(Math.random() * candyColors.length); + newSquares[i] = candyColors[randomColor]; + } } + setSquares(newSquares); } - setSquares(newSquares); - } - function animateAndClear(squaresToClear) { - let newSquares = [...squares]; - squaresToClear.forEach((index) => { - newSquares[index] = ""; - }); - setSquares(newSquares); - } - - function checkMatches() { - if (movesRemaining <= 9) { - checkRowForFour(); - checkColumnForFour(); - checkRowForThree(); - checkColumnForThree(); + function checkMatches() { + if (movesRemaining <= 9) { + checkRowForFour(); + checkColumnForFour(); + checkRowForThree(); + checkColumnForThree(); + } } - } - - function checkRowForFour() { - for (let i = 0; i < 63; i++) { - if (i % width > width - 4) continue; - const rowOfFour = [i, i + 1, i + 2, i + 3]; - const decidedColor = squares[i]; - const isBlank = decidedColor === ""; - - if ( - rowOfFour.every((index) => squares[index] === decidedColor) && - !isBlank - ) { - setScore((prevScore) => prevScore + 4); - animateAndClear(rowOfFour); + + function checkRowForFour() { + for (let i = 0; i < 63; i++) { + if (i % width > width - 4) continue; + const rowOfFour = [i, i + 1, i + 2, i + 3]; + const decidedColor = squares[i]; + const isBlank = decidedColor === ""; + + if ( + rowOfFour.every((index) => squares[index] === decidedColor) && + !isBlank + ) { + setScore((prevScore) => prevScore + 4); + animateAndClear(rowOfFour); + } } } - } - - function checkColumnForFour() { - for (let i = 0; i < 47; i++) { - const columnOfFour = [i, i + width, i + width * 2, i + width * 3]; - const decidedColor = squares[i]; - const isBlank = decidedColor === ""; - - if ( - columnOfFour.every((index) => squares[index] === decidedColor) && - !isBlank - ) { - setScore((prevScore) => prevScore + 4); - animateAndClear(columnOfFour); + + function checkColumnForFour() { + for (let i = 0; i < 47; i++) { + const columnOfFour = [i, i + width, i + width * 2, i + width * 3]; + const decidedColor = squares[i]; + const isBlank = decidedColor === ""; + + if ( + columnOfFour.every((index) => squares[index] === decidedColor) && + !isBlank + ) { + setScore((prevScore) => prevScore + 4); + animateAndClear(columnOfFour); + } } } - } - - function checkRowForThree() { - for (let i = 0; i < 64; i++) { - if (i % width > width - 3) continue; - const rowOfThree = [i, i + 1, i + 2]; - const decidedColor = squares[i]; - const isBlank = decidedColor === ""; - - if ( - rowOfThree.every((index) => squares[index] === decidedColor) && - !isBlank - ) { - setScore((prevScore) => prevScore + 3); - animateAndClear(rowOfThree); + + function checkRowForThree() { + for (let i = 0; i < 64; i++) { + if (i % width > width - 3) continue; + const rowOfThree = [i, i + 1, i + 2]; + const decidedColor = squares[i]; + const isBlank = decidedColor === ""; + + if ( + rowOfThree.every((index) => squares[index] === decidedColor) && + !isBlank + ) { + setScore((prevScore) => prevScore + 3); + animateAndClear(rowOfThree); + } } } - } - - function checkColumnForThree() { - for (let i = 0; i < 48; i++) { - const columnOfThree = [i, i + width, i + width * 2]; - const decidedColor = squares[i]; - const isBlank = decidedColor === ""; - - if ( - columnOfThree.every((index) => squares[index] === decidedColor) && - !isBlank - ) { - setScore((prevScore) => prevScore + 3); - animateAndClear(columnOfThree); + + function checkColumnForThree() { + for (let i = 0; i < 48; i++) { + const columnOfThree = [i, i + width, i + width * 2]; + const decidedColor = squares[i]; + const isBlank = decidedColor === ""; + + if ( + columnOfThree.every((index) => squares[index] === decidedColor) && + !isBlank + ) { + setScore((prevScore) => prevScore + 3); + animateAndClear(columnOfThree); + } } } - } + + function animateAndClear(squaresToClear) { + let newSquares = [...squares]; + squaresToClear.forEach((index) => { + newSquares[index] = ""; + }); + setSquares(newSquares); + } + + const intervalId = setInterval(() => { + moveDown(); + checkMatches(); + }, 100); + + return () => clearInterval(intervalId); + }, [squares, movesRemaining]); const swapCandies = (startIndex, endIndex) => { if (movesRemaining === 0) return; - - const isAdjacent = Math.abs(startIndex - endIndex) === 1 || Math.abs(startIndex - endIndex) === width; - const isSameRow = Math.floor(startIndex / width) === Math.floor(endIndex / width); + + const isAdjacent = + Math.abs(startIndex - endIndex) === 1 || + Math.abs(startIndex - endIndex) === width; + const isSameRow = + Math.floor(startIndex / width) === Math.floor(endIndex / width); const isValidVertical = Math.abs(startIndex - endIndex) === width; - + if (isAdjacent && (isSameRow || isValidVertical)) { let newSquares = [...squares]; let temp = newSquares[endIndex]; newSquares[endIndex] = newSquares[startIndex]; newSquares[startIndex] = temp; setSquares(newSquares); - setMovesRemaining(prev => prev - 1); + setMovesRemaining((prev) => prev - 1); setInvalidMove(null); - setSelectedIndex(null); // Después del swap, reiniciar el índice seleccionado + setSelectedIndex(null); // Después del swap, reiniciar el índice seleccionado } else { setInvalidMove(startIndex); setSelectedIndex(null); - if (isMobile && 'vibrate' in navigator) { + if (isMobile && "vibrate" in navigator) { navigator.vibrate(200); } } }; - + const handleDragStart = (e, index) => { if (movesRemaining === 0 || isMobile) return; setDraggingIndex(index); @@ -212,32 +214,32 @@ const CandyCrush = ({ onFinish }) => { const handleMobileClick = (index) => { if (movesRemaining === 0 || !isMobile) return; - + document.querySelectorAll(".square.highlighted").forEach((square) => { square.classList.remove("highlighted"); }); - + if (selectedIndex === null) { setSelectedIndex(index); - + // Calcular las casillas adyacentes const adjacentSquares = []; - + // Izquierda if (index % width !== 0) { adjacentSquares.push(index - 1); } - + // Derecha if (index % width !== width - 1) { adjacentSquares.push(index + 1); } - + // Arriba if (index - width >= 0) { adjacentSquares.push(index - width); } - + // Abajo if (index + width < width * width) { adjacentSquares.push(index + width); @@ -246,7 +248,6 @@ const CandyCrush = ({ onFinish }) => { adjacentSquares.forEach((adjIndex) => { document.getElementById(adjIndex).classList.add("highlighted"); }); - } else { const swapAndClear = () => { swapCandies(selectedIndex, index); @@ -262,7 +263,7 @@ const CandyCrush = ({ onFinish }) => {
{status === "playing" ? (
-
+
{squares.map((color, index) => (
{ ${draggingIndex === index ? "dragging" : ""} ${selectedIndex === index ? "selected" : ""} ${invalidMove === index ? "invalid-move" : ""} - ${isMobile ? 'mobile-square' : ''} - ${highlightedSquares.includes(index) ? 'highlighted' : ''} + ${isMobile ? "mobile-square" : ""} `} style={{ backgroundImage: `url(${color})` }} {...(!isMobile && { @@ -287,12 +287,14 @@ const CandyCrush = ({ onFinish }) => { >
))}
-
+
diff --git a/src/pages/advent-calendar-2024/components/games/higher-or-lower.jsx b/src/pages/advent-calendar-2024/components/games/higher-or-lower.jsx index 84c3c0eb6f..0cf9b8eeb7 100644 --- a/src/pages/advent-calendar-2024/components/games/higher-or-lower.jsx +++ b/src/pages/advent-calendar-2024/components/games/higher-or-lower.jsx @@ -1,5 +1,4 @@ import { - Align, ButtonDanger, ButtonPrimary, ButtonSecondary, @@ -60,7 +59,7 @@ const HigherOrLower = ({ set, data, onFinish }) => { setScore(savedGame.score); setStatus("final"); } - }, []); + }, [set]); const current = data[index]; const next = data[index + 1]; diff --git a/src/pages/advent-calendar-2024/components/games/memory.jsx b/src/pages/advent-calendar-2024/components/games/memory.jsx index 7a0b7d9069..4762927f30 100644 --- a/src/pages/advent-calendar-2024/components/games/memory.jsx +++ b/src/pages/advent-calendar-2024/components/games/memory.jsx @@ -2,7 +2,6 @@ import { ButtonPrimary, Text, Stack, - Text3, IconBugFilled, IconChildFilled, IconCocktailFilled, diff --git a/src/pages/advent-calendar-2024/components/games/movie-emoji.jsx b/src/pages/advent-calendar-2024/components/games/movie-emoji.jsx index 1f267ceaf1..34c32e0a16 100644 --- a/src/pages/advent-calendar-2024/components/games/movie-emoji.jsx +++ b/src/pages/advent-calendar-2024/components/games/movie-emoji.jsx @@ -9,8 +9,6 @@ import { Text5, Text, Stack, - useScreenSize, - Align, ButtonSecondary, } from "@telefonica/mistica"; import { IconCompleted, IconWrong } from "../../assets/icons/icons"; @@ -93,7 +91,6 @@ const EmojiMovies = ({ movies, onFinish }) => { const [isCorrect, setIsCorrect] = useState(false); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); - const { isMobile } = useScreenSize(); const gameName = "Emoji Movies"; diff --git a/src/pages/advent-calendar-2024/components/games/simon.jsx b/src/pages/advent-calendar-2024/components/games/simon.jsx index 944f1586c5..88e13b01e4 100644 --- a/src/pages/advent-calendar-2024/components/games/simon.jsx +++ b/src/pages/advent-calendar-2024/components/games/simon.jsx @@ -1,8 +1,14 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import "./simon.css"; -import { Text, Text3, Text4, ButtonPrimary, Stack, IconButton } from "@telefonica/mistica"; - +import { + Text, + Text3, + Text4, + ButtonPrimary, + Stack, + IconButton, +} from "@telefonica/mistica"; import sound1 from "../../../../img/games/1.mp3"; import sound2 from "../../../../img/games/2.mp3"; @@ -17,19 +23,39 @@ import { DecorationPatty } from "../../assets/decorations/decorations"; const colors = ["green", "red", "yellow", "blue"]; const MuteIcon = () => ( - - - + + + ); const UnmuteIcon = () => ( - - + + ); - const SimonSays = ({ onFinish }) => { const [sequence, setSequence] = useState([]); const [playerSequence, setPlayerSequence] = useState([]); @@ -37,11 +63,11 @@ const SimonSays = ({ onFinish }) => { const [isPlayerTurn, setIsPlayerTurn] = useState(false); const [score, setScore] = useState(0); const [highlight, setHighlight] = useState(null); - const [message, setMessage] = useState('Press "Start" to begin'); const [isGameOver, setIsGameOver] = useState(false); const [status, setStatus] = useState("playing"); const [isMuted, setIsMuted] = useState(true); + let currentSound = React.useRef(null); const gameName = "simonSays"; @@ -49,59 +75,90 @@ const SimonSays = ({ onFinish }) => { if (onFinish) onFinish(); }; - useEffect(() => { const gameScores = JSON.parse(localStorage.getItem("gameScores")) || {}; const savedGame = gameScores[gameName]; if (savedGame?.completed) { setScore(savedGame.score); - setStatus("completed"); - - setMessage("Game Completed!"); } }, []); - const toggleMute = () => { setIsMuted((prevState) => !prevState); - }; + }; - let currentSound = null; + const playSound = useCallback( + (color) => { + if (isMuted) return; + if (currentSound.current) { + currentSound.current.pause(); + currentSound.current.currentTime = 0; + } - function playSound(color) { - if (isMuted) return; - - if (currentSound) { - currentSound.pause(); - currentSound.currentTime = 0; - } + let sound; + switch (color) { + case "green": + sound = new Audio(sound1); + break; + case "red": + sound = new Audio(sound2); + break; + case "yellow": + sound = new Audio(sound3); + break; + case "blue": + sound = new Audio(sound4); + break; + default: + return; + } + + sound.play(); + currentSound.current = sound; + }, + [isMuted] + ); - let sound; - switch (color) { - - case "green": - sound = new Audio(sound1); - break; - case "red": - sound = new Audio(sound2); - break; - case "yellow": - sound = new Audio(sound3); - break; - case "blue": - - sound = new Audio(sound4); - break; - default: - return; + const addColorToSequence = useCallback(() => { + function playSequence(sequence) { + let i = 0; + setIsPlayerTurn(false); + const interval = setInterval(() => { + setHighlight(sequence[i]); + playSound(sequence[i]); + i += 1; + setTimeout(() => setHighlight(null), 500); + if (i === sequence.length) { + clearInterval(interval); + + setTimeout(() => setIsPlayerTurn(true), 500); + } + }, 800); } - sound.play(); - currentSound = sound; - } + const newColor = colors[Math.floor(Math.random() * colors.length)]; + setSequence((prevSequence) => [...prevSequence, newColor]); + playSequence([...sequence, newColor]); + }, [sequence, playSound]); + + const checkPlayerSequence = useCallback(() => { + if (playerSequence.join("") === sequence.join("")) { + setScore(score + 10); + setPlayerSequence([]); + setTimeout(() => setIsPlayerTurn(false), 500); + setTimeout(() => { + addColorToSequence(); + }, 1000); + } else { + setIsGameOver(true); + setStatus("completed"); + setIsPlayerTurn(false); + saveGameData(gameName, score, isGameOver); + } + }, [isGameOver, playerSequence, score, sequence, addColorToSequence]); useEffect(() => { if ( @@ -111,13 +168,12 @@ const SimonSays = ({ onFinish }) => { ) { checkPlayerSequence(); } - }, [playerSequence]); + }, [playerSequence, isPlaying, sequence, checkPlayerSequence]); const startGame = () => { setSequence([]); setPlayerSequence([]); setScore(0); - setMessage("Follow the sequence!"); setIsGameOver(false); setIsPlaying(true); @@ -127,29 +183,6 @@ const SimonSays = ({ onFinish }) => { addColorToSequence(); }; - const addColorToSequence = () => { - const newColor = colors[Math.floor(Math.random() * colors.length)]; - setSequence((prevSequence) => [...prevSequence, newColor]); - playSequence([...sequence, newColor]); - }; - - function playSequence(sequence) { - let i = 0; - setIsPlayerTurn(false); - const interval = setInterval(() => { - setHighlight(sequence[i]); - playSound(sequence[i]); - i += 1; - setTimeout(() => setHighlight(null), 500); - if (i === sequence.length) { - clearInterval(interval); - - setTimeout(() => setIsPlayerTurn(true), 500); - - } - }, 800); - } - const handlePlayerInput = (color) => { if (!isPlayerTurn || highlight || isGameOver) return; @@ -158,7 +191,6 @@ const SimonSays = ({ onFinish }) => { playSound(color); - setHighlight(color); setTimeout(() => setHighlight(null), 500); @@ -166,8 +198,6 @@ const SimonSays = ({ onFinish }) => { newSequence[newSequence.length - 1] !== sequence[newSequence.length - 1] ) { setIsGameOver(true); - setMessage("Game Over! You clicked the wrong color."); - setStatus("completed"); setIsPlaying(false); setIsPlayerTurn(false); @@ -180,40 +210,17 @@ const SimonSays = ({ onFinish }) => { }); }; - const checkPlayerSequence = () => { - if (playerSequence.join("") === sequence.join("")) { - setScore(score + 10); - setPlayerSequence([]); - setTimeout(() => setIsPlayerTurn(false), 500); - setTimeout(() => { - addColorToSequence(); - }, 1000); - } else { - setIsGameOver(true); - setMessage("Game Over!"); - - setStatus("completed"); - setIsPlayerTurn(false); - saveGameData(gameName, score, isGameOver); - - } - }; - useEffect(() => { - if (isGameOver) { saveGameData(gameName, score, isGameOver); - } - }, [isGameOver]); + }, [isGameOver, score]); return ( <> -
-
{ Icon={isMuted ? MuteIcon : UnmuteIcon} onPress={toggleMute} /> -
{status === "playing" ? ( -
- {!isPlaying + {!isPlaying ? "Press 'Start' to begin" - : !isPlayerTurn - ? "Pay attention..." - : "Your turn!"} + : !isPlayerTurn + ? "Pay attention..." + : "Your turn!"}
@@ -253,9 +258,10 @@ const SimonSays = ({ onFinish }) => { highlight === color ? "highlight" : "" } ${isGameOver ? "gameover" : ""}`} onClick={() => handlePlayerInput(color)} - - style={{ pointerEvents: isGameOver || !isPlayerTurn ? "none" : "auto" }} - + style={{ + pointerEvents: + isGameOver || !isPlayerTurn ? "none" : "auto", + }} /> ))}
@@ -287,4 +293,4 @@ const SimonSays = ({ onFinish }) => { ); }; -export default SimonSays; \ No newline at end of file +export default SimonSays; diff --git a/src/pages/advent-calendar-2024/components/games/wordle.jsx b/src/pages/advent-calendar-2024/components/games/wordle.jsx index fa1e1ca644..56907bfbda 100644 --- a/src/pages/advent-calendar-2024/components/games/wordle.jsx +++ b/src/pages/advent-calendar-2024/components/games/wordle.jsx @@ -9,15 +9,14 @@ import { Align, } from "@telefonica/mistica"; import "./wordle.css"; -import React, { useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useRef, useCallback } from "react"; import Score from "../score"; import { saveGameData } from "../../utils/score-manager"; import { IconCompleted, IconWrong } from "../../assets/icons/icons"; -import { DecorationPatty } from "../../assets/decorations/decorations"; - + const words = ["tokens"]; const chosenWord = words[0].toLowerCase(); - + const WordleGame = ({ onFinish }) => { const [currentAttempt, setCurrentAttempt] = useState([]); const [attempts, setAttempts] = useState([]); @@ -27,53 +26,82 @@ const WordleGame = ({ onFinish }) => { const gameContainerRef = useRef(null); const inputRef = useRef(null); const isMobile = useScreenSize(); - + const maxAttempts = 10; const gameName = "wordle"; - + useEffect(() => { if (gameContainerRef.current) { setTimeout(() => { - gameContainerRef.current.scrollTop = gameContainerRef.current.scrollHeight; + gameContainerRef.current.scrollTop = + gameContainerRef.current.scrollHeight; }, 0); } }, [attempts, currentAttempt]); - + useEffect(() => { - const savedGame = JSON.parse(localStorage.getItem("gameScores"))?.[gameName]; + const savedGame = JSON.parse(localStorage.getItem("gameScores"))?.[ + gameName + ]; if (savedGame?.completed) { setScore(savedGame.score); setGameStatus("completed"); setMessage("Game Completed!"); } }, []); - + const handleInputChange = (event) => { const value = event.target.value.toLowerCase(); if (gameStatus === "playing") { - const letters = value.split('').filter(char => /^[a-z]$/.test(char)); + const letters = value.split("").filter((char) => /^[a-z]$/.test(char)); setCurrentAttempt(letters.slice(0, chosenWord.length)); } }; - + + const checkWord = useCallback(() => { + const input = currentAttempt.join("").toLowerCase(); + + if (input.length !== chosenWord.length) { + setMessage(`The word must be ${chosenWord.length} letters.`); + return; + } + + setAttempts((prev) => [...prev, input]); + setCurrentAttempt([]); + if (inputRef.current) { + inputRef.current.value = ""; + } + + if (input === chosenWord) { + setScore(calculateScore(attempts.length + 1)); + setMessage(`Amazing! The word was ${chosenWord.toUpperCase()}.`); + setGameStatus("completed"); + } else if (attempts.length + 1 === maxAttempts) { + setMessage( + `Too many attempts. The word was ${chosenWord.toUpperCase()}.` + ); + setGameStatus("failed"); + } + }, [attempts, currentAttempt]); + const handleKeyDown = (event) => { const { key } = event; - + if (key === "Enter" && gameStatus === "playing") { event.preventDefault(); checkWord(); } }; - + useEffect(() => { const handleGlobalKeyDown = (event) => { if (!isMobile) { const { key } = event; const lowerKey = key.toLowerCase(); - + event.preventDefault(); event.stopPropagation(); - + if (lowerKey === "enter" && gameStatus === "playing") checkWord(); if (lowerKey === "backspace") setCurrentAttempt((prev) => prev.slice(0, -1)); @@ -85,19 +113,19 @@ const WordleGame = ({ onFinish }) => { } } }; - + if (!isMobile) { document.addEventListener("keydown", handleGlobalKeyDown); return () => document.removeEventListener("keydown", handleGlobalKeyDown); } - }, [currentAttempt, gameStatus, isMobile]); - + }, [currentAttempt, gameStatus, isMobile, checkWord]); + const focusInput = () => { if (isMobile && inputRef.current && gameStatus === "playing") { inputRef.current.focus(); } }; - + const handleGameEnd = () => { if (onFinish) onFinish(); saveGameData( @@ -106,34 +134,10 @@ const WordleGame = ({ onFinish }) => { gameStatus === "completed" || gameStatus === "failed" ); }; - - const checkWord = () => { - const input = currentAttempt.join("").toLowerCase(); - - if (input.length !== chosenWord.length) { - setMessage(`The word must be ${chosenWord.length} letters.`); - return; - } - - setAttempts((prev) => [...prev, input]); - setCurrentAttempt([]); - if (inputRef.current) { - inputRef.current.value = ''; - } - - if (input === chosenWord) { - setScore(calculateScore(attempts.length + 1)); - setMessage(`Amazing! The word was ${chosenWord.toUpperCase()}.`); - setGameStatus("completed"); - } else if (attempts.length + 1 === maxAttempts) { - setMessage(`Too many attempts. The word was ${chosenWord.toUpperCase()}.`); - setGameStatus("failed"); - } - }; - + const calculateScore = (attemptCount) => Math.max(0, 100 - (attemptCount - 1) * 10); - + const getLetterStyles = (status) => ({ background: { @@ -149,32 +153,32 @@ const WordleGame = ({ onFinish }) => { }[status] || skinVars.colors.border }`, }); - + const getLetterStatus = (letter, index, input) => { const letterCount = [...chosenWord].reduce( (count, char) => ({ ...count, [char]: (count[char] || 0) + 1 }), {} ); - + const statuses = Array(input.length).fill("wrong"); - + input.split("").forEach((char, i) => { if (char === chosenWord[i]) { statuses[i] = "correct"; letterCount[char] -= 1; } }); - + input.split("").forEach((char, i) => { if (statuses[i] === "wrong" && letterCount[char] > 0) { statuses[i] = "partial"; letterCount[char] -= 1; } }); - + return statuses[index]; }; - + const GuessLabel = ({ correct }) => (
{correct ? : } @@ -186,33 +190,32 @@ const WordleGame = ({ onFinish }) => {
); - - -const renderRow = (word, isCurrent = false) => ( -
- {Array.from({ length: chosenWord.length }, (_, i) => ( -
- ( +
+ {Array.from({ length: chosenWord.length }, (_, i) => ( +
- {(word[i] || "").toUpperCase()} - -
- ))} -
-); - + + {(word[i] || "").toUpperCase()} + +
+ ))} +
+ ); + return ( <>
(
-
- {isMobile && ( - - )}
- {attempts.map((attempt, i) => renderRow(attempt))} - {gameStatus === "playing" - ? renderRow(currentAttempt.join(""), true) - : gameStatus === "failed"} -
- {gameStatus !== "playing" && gameStatus === "completed" && ( - - - - - Congratulations! You completed the game! - - - Back home - - )} - {gameStatus === "failed" && ( + {isMobile && ( + + )}
- - {message} - Back home + {attempts.map((attempt, i) => renderRow(attempt))} + {gameStatus === "playing" + ? renderRow(currentAttempt.join(""), true) + : gameStatus === "failed"}
- )} -
+ {gameStatus !== "playing" && gameStatus === "completed" && ( + + + + + Congratulations! You completed the game! + + + Back home + + )} + {gameStatus === "failed" && ( +
+ + {message} + Back home +
+ )} +
); }; - + export default WordleGame; diff --git a/src/pages/advent-calendar-2024/components/quizzes/guess-component.jsx b/src/pages/advent-calendar-2024/components/quizzes/guess-component.jsx index 4048b5e4f8..adb2d4efe6 100644 --- a/src/pages/advent-calendar-2024/components/quizzes/guess-component.jsx +++ b/src/pages/advent-calendar-2024/components/quizzes/guess-component.jsx @@ -8,8 +8,6 @@ import { skinVars, Text5, Text, - Align, - useScreenSize, Stack, } from "@telefonica/mistica"; import { IconCompleted, IconWrong } from "../../assets/icons/icons"; @@ -27,7 +25,7 @@ import { UI_LABEL } from "../../utils/constants"; export const guessComponentSet1 = [ { id: "nakedCard", - asset: , + asset: , answer: "Naked card", options: ["Data card", "Media card"], correctAnswer: "This is the Naked card component!", @@ -41,7 +39,7 @@ export const guessComponentSet1 = [ }, { id: "chip", - asset: , + asset: , answer: "Chip", options: ["Button", "Tag"], }, @@ -50,19 +48,19 @@ export const guessComponentSet1 = [ export const guessComponentSet2 = [ { id: "toltiop", - asset: , + asset: , answer: "Tooltip", options: ["Sheet", "Select"], }, { id: "badge", - asset: , + asset: , answer: "Badge", options: ["Radio button", "Logo"], }, { id: "switch", - asset: , + asset: , answer: "Switch", options: ["Stacking group", "Counter"], }, diff --git a/src/pages/advent-calendar-2024/components/quizzes/guess-what.jsx b/src/pages/advent-calendar-2024/components/quizzes/guess-what.jsx index 3f3d4e3b47..7600d57871 100644 --- a/src/pages/advent-calendar-2024/components/quizzes/guess-what.jsx +++ b/src/pages/advent-calendar-2024/components/quizzes/guess-what.jsx @@ -13,8 +13,6 @@ import { IconCocktailRegular, skinVars, TextLink, - Align, - useScreenSize, } from "@telefonica/mistica"; import DecorationPatty from "../../assets/decorations/decoration-patty"; import QuizProgress from "../quiz-progress"; @@ -291,7 +289,6 @@ export const GuessWhat = ({ quizType, questions }) => { const [answers, setAnswers] = useState(Array(questions.length).fill("")); // Store answers dynamically based on the number of questions const [finalResult, setFinalResult] = useState(null); const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); // Track the current question index - const { isMobile } = useScreenSize(); const quizName = `Guess what ${quizType} you are`; diff --git a/src/pages/advent-calendar-2024/components/static-content/christmas-movies.jsx b/src/pages/advent-calendar-2024/components/static-content/christmas-movies.jsx index b51fe95c74..10ca541742 100644 --- a/src/pages/advent-calendar-2024/components/static-content/christmas-movies.jsx +++ b/src/pages/advent-calendar-2024/components/static-content/christmas-movies.jsx @@ -9,16 +9,16 @@ import { import { useState, useEffect } from "react"; import ContentWrapper from "../content-wrapper"; -const ChristmasMovies = () => { - const titles = [ - "Gremlins", - "Jingle All The Way", - "Harry Potter and the Sorcerer's Stone", - "Resident Evil", - "Love Actually", - "Charlie and the Chocolate Factory", - ]; +const titles = [ + "Gremlins", + "Jingle All The Way", + "Harry Potter and the Sorcerer's Stone", + "Resident Evil", + "Love Actually", + "Charlie and the Chocolate Factory", +]; +const ChristmasMovies = () => { const [movies, setMovies] = useState({}); const { isMobile } = useScreenSize(); diff --git a/src/pages/advent-calendar-2024/components/static-content/music-list.jsx b/src/pages/advent-calendar-2024/components/static-content/music-list.jsx index bc42b4bafa..ba0bc3f0f4 100644 --- a/src/pages/advent-calendar-2024/components/static-content/music-list.jsx +++ b/src/pages/advent-calendar-2024/components/static-content/music-list.jsx @@ -1,111 +1,107 @@ import { - Stack, - Image, - MediaCard, - useScreenSize, - ButtonLink, - Carousel, - } from "@telefonica/mistica"; - import ContentWrapper from "../content-wrapper"; - - const MusicLists = () => { - const { isMobile } = useScreenSize(); - - return ( - - - - - - } - title="Christmas Chill" - media={ - - } - buttonLink={ - - Listen - - } - />, - - - - } - title="Punk Christmas" - media={ - - } - buttonLink={ - - Listen - - } - />, - + Stack, + Image, + MediaCard, + ButtonLink, + Carousel, +} from "@telefonica/mistica"; +import ContentWrapper from "../content-wrapper"; + +const MusicLists = () => { + return ( + + + } - title="Electronic Christmas" - media={ - - } - buttonLink={ - - Listen - - } - />, - ]} - /> - - - ); - }; - - export default MusicLists; - \ No newline at end of file + title="Christmas Chill" + media={ + + } + buttonLink={ + + Listen + + } + />, + + + + } + title="Punk Christmas" + media={ + + } + buttonLink={ + + Listen + + } + />, + + + + } + title="Electronic Christmas" + media={ + + } + buttonLink={ + + Listen + + } + />, + ]} + /> + + + ); +}; + +export default MusicLists; diff --git a/src/pages/advent-calendar-2024/components/static-content/top-contributors.jsx b/src/pages/advent-calendar-2024/components/static-content/top-contributors.jsx index 06e3e160c6..286a08e528 100644 --- a/src/pages/advent-calendar-2024/components/static-content/top-contributors.jsx +++ b/src/pages/advent-calendar-2024/components/static-content/top-contributors.jsx @@ -1,17 +1,13 @@ import { - Align, Avatar, Stack, Text4, BoxedRowList, BoxedRow, - useScreenSize, } from "@telefonica/mistica"; import ContentWrapper from "../content-wrapper"; const TopContributors = () => { - const { isMobile } = useScreenSize(); - return (