Monty hall problem

package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "6",
     "react-scripts": "5.0.1",
     "sass": "^1.53.0",
     "typescript": "^4.4.2",

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/components/Box/Box.tsx

@@ -7,10 +7,10 @@ export const Box: React.FC<BoxProps> = ({ number, index }) => {
   return (
     <div
       id={`${index}-${number}`}
-      className="main-page__play__boxes__grid__box"
+      className="prisoner-riddle__play__boxes__grid__box"
     >
       {number + 1}
-      <div className="main-page__play__boxes__grid__box__cover">
+      <div className="prisoner-riddle__play__boxes__grid__box__cover">
         {index + 1}
       </div>
     </div>

src/components/Footer/Footer.tsx

@@ -1,9 +1,18 @@
+import { Link, useLocation } from "react-router-dom";
 import { CircularDivider } from "../Divider/Divider";
 import "./Footer.scss";
 
 export const Footer: React.FC = () => {
+  const location = useLocation();
+
   return (
     <div className="footer animation-slide-down">
+      {location.pathname !== "/" && (
+        <>
+          <Link to="/">Home</Link>
+          <CircularDivider />
+        </>
+      )}
       <a
         href="https://github.com/mohitkyadav/"
         target="_blank"

src/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import { MainPage } from "./pages";
+import { PrisonerRiddle, MontyHall, HomePage } from "./pages";
 import reportWebVitals from "./reportWebVitals";
 
 import "./sass/main.scss";
@@ -11,7 +12,13 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <MainPage />
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="monty-hall" element={<MontyHall />} />
+        <Route path="prisoner-riddle" element={<PrisonerRiddle />} />
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/pages/HomePage/HomePage.scss

@@ -0,0 +1,30 @@
+@import "../../sass/abstracts.scss";
+
+.home-page {
+  padding: 3rem 6rem;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  .footer {
+    padding-left: 0;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex: 1;
+    margin-top: 2rem;
+
+    a {
+      margin-bottom: 1rem;
+      font-size: 4.8rem;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+import { Footer } from "../../components";
+import "./HomePage.scss";
+
+export const HomePage: React.FC = () => {
+  return (
+    <div className="home-page animation-slide-down">
+      <h1>Statistical Riddles</h1>
+      <ul className="home-page__list animation-slide-down">
+        <Link to="/prisoner-riddle">100 Prisoners Riddle</Link>
+        <Link to="/monty-hall">Monty Hall Problem</Link>
+      </ul>
+      <Footer />
+    </div>
+  );
+};

src/pages/MontyHall/MontyHall.scss

@@ -0,0 +1,152 @@
+@import "../../sass/abstracts.scss";
+
+.mh {
+  padding: 3rem 6rem;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .console {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+
+  .footer {
+    padding-left: 0;
+  }
+
+  a {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    padding: 4rem 0;
+    flex: 1;
+
+    &__doors {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+      flex-wrap: wrap;
+      gap: 4rem;
+      margin-bottom: 2rem;
+
+      &__door {
+        width: 10rem;
+        height: 14rem;
+        background-color: $color-primary;
+        border: none;
+        border-radius: 1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+
+        &:hover {
+          background-color: $color-black;
+        }
+
+        &:hover &__content__text {
+          color: $color-white;
+        }
+
+        &:disabled {
+          pointer-events: none;
+          opacity: 0.6;
+        }
+
+        &__content {
+          position: relative;
+          flex: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          &__text {
+            font-size: 1.6rem;
+            color: $color-white;
+          }
+
+          &__icons {
+            font-size: 2rem;
+            position: absolute;
+            bottom: 0.5rem;
+          }
+        }
+      }
+    }
+
+    &__controls {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 2rem 0;
+      margin-bottom: 2rem;
+      gap: 2rem;
+
+      button {
+        border: 1px solid $color-primary;
+        padding: 1rem;
+        background-color: $color-white;
+        color: $color-primary;
+        font-size: 1.6rem;
+        font-weight: bold;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+
+        &:hover {
+          background-color: $color-primary;
+          color: $color-white;
+        }
+      }
+    }
+
+    &__settings {
+      display: flex;
+      gap: 2rem;
+
+      &__item {
+        display: flex;
+        flex-direction: column;
+
+        label, span {
+          font-size: 1.4rem;
+          font-weight: 700;
+          height: 4rem;
+          max-width: 18rem;
+        }
+
+        input, p {
+          appearance: textfield;
+          border: 0;
+          border-bottom: 1px solid #345d6a;
+          font-size: 2.8rem;
+          margin-top: 0.8rem;
+          max-width: 14rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 13rem;
+        }
+
+        p {
+          border: none;
+        }
+      }
+
+      .vertical-divider {
+        height: 100%;
+        margin: 0 2rem;
+        // height: 4rem;
+      }
+    }
+  }
+}