History/stopwatch 5

src/components/History/DialogueBox.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import styles from "./style.module.css";
+
+function DialogueBox({text}) {
+	return (
+		<div className={styles["dialogueWrapper"]} key={text}>
+			<div className={styles["dialogueBox"]}>
+				<p className={styles["dialogueText"]}>{text}</p>
+			</div>
+			<div className={styles["dialogueLabelWrapper"]}>
+				<div className={styles["dialogueLabel"]}>
+					<p className={styles["dialogueLabelText"]}>Scrum Master</p>
+				</div>
+                <div className={styles["dialogueLabelShadow"]}>
+
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default DialogueBox;

src/components/History/HistoryWrapper.jsx

@@ -0,0 +1,41 @@
+import {useState} from "react";
+import {useNavigate, Link} from "react-router-dom";
+import CountDown from "@components/common/CountDown";
+import styles from "./style.module.css";
+import DialogueBox from "./DialogueBox";
+import ScrumMaster from "./ScrumMaster";
+import ModularBackGround from "./ModularBackGround";
+
+function HistoryWrapper({dialogue, url}) {
+	const navigate = useNavigate();
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const [finishedHistory, setFinishedHistory] = useState(false);
+
+	const handleClick = () => {
+		setCurrentIndex((prev) => {
+			const nextIndex = prev + 1;
+
+			if (nextIndex === dialogue.length) {
+				setFinishedHistory(true);
+				return prev;
+			}
+
+			return nextIndex;
+		});
+	};
+
+	const {scrumExpr, text, backGround} = dialogue[currentIndex];
+
+	return (
+		<div className={styles["historyWrapper"]}>
+			<div className={styles["dialogueClickable"]} onClick={handleClick}>
+				<DialogueBox text={text} />
+			</div>
+			<ScrumMaster scrumExpr={scrumExpr} pos={currentIndex} />
+			<ModularBackGround backGround={backGround} />
+			{finishedHistory && <CountDown onComplete={() => navigate(url)} />}
+		</div>
+	);
+}
+
+export default HistoryWrapper;

src/components/History/ModularBackGround.jsx

@@ -0,0 +1,17 @@
+import {useEffect, useState} from "react";
+import styles from "./style.module.css";
+
+function ModularBackGround({backGround}) {
+	if (backGround === 0) return null;
+
+	return (
+		<img
+			key={backGround}
+			src={`../../../src/assets/backgrounds/BG-${backGround}.png`}
+			alt="Imagem de fundo"
+			className={styles["backGround"]}
+		/>
+	);
+}
+
+export default ModularBackGround;

src/components/History/ScrumMaster.jsx

@@ -0,0 +1,17 @@
+import {useEffect, useState} from "react";
+import styles from "./style.module.css";
+
+function ScrumMaster({scrumExpr, pos}) {
+	if (scrumExpr === 0) return null;
+
+	return (
+		<img
+			key={pos}
+			src={`../../../src/assets/scrum_expressions/Scrum-${scrumExpr}.png`}
+			alt="scrum-master"
+			className={styles["scrumMaster"]}
+		/>
+	);
+}
+
+export default ScrumMaster;

src/components/History/style.module.css

@@ -0,0 +1,117 @@
+.dialogueWrapper {
+	width: 90%;
+	position: relative;
+	z-index: 1;
+	opacity: 0;
+	animation: fadeIn 0.1s ease-in forwards;
+}
+
+.dialogueBox {
+	width: 100%;
+	background-color: var(--soft-white);
+	padding: 5% 5% 10% 5%;
+	outline: 3px solid var(--expert-vision);
+	border-radius: 5px;
+	position: relative;
+	min-height: 4em;
+	box-sizing: border-box;
+}
+
+.dialogueLabelWrapper {
+	position: relative;
+	justify-content: flex-start;
+	align-items: center;
+	border-radius: 0 5px 5px 5px;
+	width: 100%;
+	display: flex;
+	transform: translateY(-40%);
+}
+
+.dialogueClickable {
+	display: flex;
+	width: 100%;
+	height: max-content;
+	justify-content: center;
+	align-items: center;
+}
+
+.dialogueLabel {
+	background-color: var(--expert-horizon);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 0 5px 5px 5px;
+	outline: 3px solid var(--expert-vision);
+	padding: 0.5rem 1rem;
+	width: 55%;
+}
+
+.dialogueLabelShadow {
+	position: absolute;
+	bottom: 0;
+	height: 60%;
+	width: 55%;
+	background-color: rgba(0, 0, 0, 0.171);
+	clip-path: polygon(0 0%, 100% 15%, 100% 100%, 0% 100%);
+}
+
+.dialogueText {
+	color: var(--expert-vision);
+	display: block;
+	width: 100%;
+}
+
+.dialogueLabelText {
+	color: var(--soft-white);
+}
+
+.scrumMaster {
+	z-index: 1;
+	width: 90%;
+	transform: translateY(6%);
+	animation: jump 0.5s ease;
+}
+
+.backGround {
+	z-index: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	object-fit: cover;
+	opacity: 0;
+	animation: fadeIn 0.1s ease-in forwards;
+}
+
+
+.historyWrapper {
+	padding: 5dvh 0 0 0;
+	display: flex;
+	height: -webkit-fill-available;
+	height: -moz-available;
+	height: 100%;
+	width: 100%;
+	justify-content: space-between;
+	flex-direction: column;
+	align-items: center;
+	overflow: hidden;
+}
+
+
+@keyframes jump {
+  0% {
+    transform: translateY(calc(5% + 0px));
+  }
+  30% {
+    transform: translateY(calc(5% - 20px));
+  }
+  60%, 100% {
+    transform: translateY(calc(5% + 0px));
+  }
+}
+
+@keyframes fadeIn {
+	to {
+		opacity: 1;
+	}
+}

src/components/Map/Column.jsx

@@ -1,14 +1,25 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 
 import styles from "./style.module.css";
 
 function Column({title, children, length}) {
+	const listRef = useRef(null);
+
+	useEffect(() => {
+		const el = listRef.current;
+		if (el && title == "To-do") {
+			el.scrollTop = el.scrollHeight;
+		}
+	}, []);
+
 	return (
 		<div className={styles["column"]}>
 			<span className={styles["title"]}>
 				{length} {title}
 			</span>
-			<div className={styles["cards"]}>{children}</div>
+			<div className={styles["cards"]} ref={listRef}>
+				{children}
+			</div>
 		</div>
 	);
 }

src/components/Map/style.module.css

@@ -15,8 +15,10 @@
 .cards {
 	display: flex;
 	flex-direction: column;
-	gap: 5vh;
+	gap: 3vh;
 	width: 100%;
+	overflow-y: scroll;
+	padding: 1vh 0;
 }
 
 .easy {
@@ -116,9 +118,9 @@
 }
 
 .player-profile {
-	position: fixed;
-  z-index: 10;
-  top: 126px;
+	position: relative;
+    z-index: 10;
+    top: 4dvh;
 }
 
 .name-tickets {
@@ -147,6 +149,7 @@
 .column {
 	display: flex;
 	width: 100%;
+	max-height: 33%;
 }
 
 .column .title {

src/components/common/CountDown/index.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import styles from "./style.module.css";
+
+function CountDown({ onComplete }) {
+	const [count, setCount] = useState(3);
+
+	useEffect(() => {
+		if (count === 0) {
+			const timeout = setTimeout(() => {
+				onComplete();
+			}, 1000);
+			return () => clearTimeout(timeout);
+		}
+
+		const timer = setTimeout(() => {
+			setCount((prev) => prev - 1);
+		}, 1000);
+
+		return () => clearTimeout(timer);
+	}, [count, onComplete]);
+
+	return (
+		<div className={styles["overlay"]}>
+			<img
+				src={"../../../src/assets/wallpaper-mobile.png"}
+				alt="background"
+				className={styles["backgroundImage"]}
+			/>
+			<div className={styles["number"]} key={count}>{count === 0 ? "GO!" : count}</div>
+		</div>
+	);
+}
+
+export default CountDown;

src/components/common/CountDown/style.module.css

@@ -0,0 +1,55 @@
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 9999;
+	overflow: hidden;
+}
+
+.backgroundImage {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	z-index: -1;
+	opacity: 0;
+	animation: fadeIn 1s ease forwards;
+}
+.number {
+	color: var(--soft-white);
+	font-size: 9dvw;
+	animation: pop 1s ease;
+	text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
+	font-weight: bold;
+}
+
+@keyframes pop {
+	0% {
+		transform: scale(0.2);
+		opacity: 0;
+	}
+	50% {
+		transform: scale(1.2);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}