diff --git a/client/src/components/CaretRight.tsx b/client/src/components/CaretRight.tsx new file mode 100644 index 0000000..1e2a91b --- /dev/null +++ b/client/src/components/CaretRight.tsx @@ -0,0 +1,149 @@ +const CaretRight: React.FC = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); + }; + + export default CaretRight; + \ No newline at end of file diff --git a/client/src/components/Ludo.tsx b/client/src/components/Ludo.tsx index c95446f..d872bc5 100644 --- a/client/src/components/Ludo.tsx +++ b/client/src/components/Ludo.tsx @@ -6,6 +6,7 @@ import { useSize } from "../hooks/size-hook"; import { markers } from "../hooks/utils"; import "../styles/Ludo.scss"; import { BoardContext } from "../context/board-context"; +import CaretRight from "./CaretRight"; const Ludo: React.FC = () => { const { size, tileMap } = useSize(); @@ -20,6 +21,16 @@ const Ludo: React.FC = () => { .slice(0, options.playersLength * 4) .map((m) => )} + {!options.playersLength && ( +
+
+

+ Choose the number of players first to begin +

+ +
+
+ )} ); }; diff --git a/client/src/styles/Ludo.scss b/client/src/styles/Ludo.scss index f2bd88f..e0acf05 100644 --- a/client/src/styles/Ludo.scss +++ b/client/src/styles/Ludo.scss @@ -240,6 +240,91 @@ 0 15px 12px rgba(0, 0, 0, 0.22); } +.overlay{ + background-color: rgba($color: #F5F5F5, $alpha: 0.3); + backdrop-filter: blur(10px); + width: 100%; + height: 100%; + position: absolute; + margin-block-start: 0; + inset-block-start: 0; + display: grid; + place-items: center; + padding: 1rem; + cursor: default; +} + +.text-white { + color: #F5F5F5; + font-size: 2rem; + font-weight: 600; + text-shadow: 1px 1px 1px black; +} + +.vecstore{ + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + @media only screen and (min-width: 992px) { + flex-direction: row; + } +} + +.rot-down { + transform: rotate(90deg); + opacity: 0; + animation: fade 0.8s infinite ease-out; + + @media only screen and (min-width: 992px) { + transform: none; + } +} + +@keyframes fade { + 0% { + opacity: 1; + fill: #000179; + } + 50% { + opacity: 0.5; + fill: #2C0E4E; + } + 100% { + opacity: 0; + } +} + +.rot-down:nth-child(1) { + animation-delay: 0s; +} + +.rot-down:nth-child(2) { + animation-delay: 0.2s; +} + +.rot-down:nth-child(3) { + animation-delay: .4s; +} + +.rot-down:nth-child(4) { + animation-delay: 0.6s; +} + +.rot-down:nth-child(3), .rot-down:nth-child(4) { + @media only screen and (max-width: 992px) { + display: none; + } +} + +@media only screen and (min-width: 768px) { + .overlay-child { + width: 50%; + } +} + @media only screen and (max-width: 600px) { .container { width: 400px;