update: Fri 09 Aug 2024 08:30:05 CEST

src/Routes.tsx

@@ -4,6 +4,7 @@ import ExpandableTable from './views/ExpandableTable';
 import { getAllGames } from './allGames';
 import StringUtils from './utils/StringUtils';
 import CreateCustomView from './views/CreateCustomView/CreateCustomView';
+import PrivacyView from './views/PrivacyView';
 
 function Routes() {
     const games = getAllGames();
@@ -25,6 +26,7 @@ function Routes() {
                         />
                     ))}
                     <Route path="/custom/create" Component={CreateCustomView} />
+                    <Route path="/privacy" Component={PrivacyView} />
                     <Route path="/" Component={HomeView} />
                     <Route path="*" Component={HomeView} />
                 </ReactRoutes>

src/components/HomeButton/HomeButton.scss

@@ -0,0 +1,2 @@
+.home-button {
+}

src/components/HomeButton/HomeButton.tsx

@@ -0,0 +1,17 @@
+import RouteButton from '../RouteButton/RouteButton';
+import './HomeButton.scss';
+
+/**
+ * This is a HomeButton component
+ * @author cophilot
+ * @version 1.0.0
+ * @created 2024-8-9
+ */
+function HomeButton() {
+    return (
+        <RouteButton to="/" small>
+            Home
+        </RouteButton>
+    );
+}
+export default HomeButton;

src/components/RouteButton/RouteButton.scss

@@ -0,0 +1,2 @@
+.route-button {
+}

src/components/RouteButton/RouteButton.tsx

@@ -0,0 +1,31 @@
+import { useNavigate } from 'react-router-dom';
+import './RouteButton.scss';
+
+interface RouteButtonProps {
+    to: string;
+    children: string;
+    small?: boolean;
+}
+
+/**
+ * This is a RouteButton component
+ * @author cophilot
+ * @version 1.0.0
+ * @created 2024-8-9
+ */
+function RouteButton({ to, children, small = false }: RouteButtonProps) {
+    const navigate = useNavigate();
+
+    const className = 'btn selected ' + (small ? '' : 'wide');
+
+    return (
+        <button
+            className={className}
+            onClick={() => {
+                navigate(to);
+            }}>
+            {children}
+        </button>
+    );
+}
+export default RouteButton;

src/index.scss

@@ -46,6 +46,10 @@ a {
     color: var(--primary-color);
 }
 
+p {
+    font-size: 20px;
+}
+
 .btn {
     cursor: pointer;
     margin: 10px;
@@ -139,3 +143,13 @@ a {
     margin: 10px;
     cursor: pointer;
 }
+
+.content {
+    max-width: 600px;
+}
+
+@media screen and (max-width: 600px) {
+    .content {
+        max-width: 95%;
+    }
+}

src/views/HomeView.tsx

@@ -7,6 +7,7 @@ import Logo from '../components/Logo';
 import DevMessage from '../components/DevMessage';
 import GameButton from '../components/GameButton/GameButton';
 import FavoriteGameSection from '../components/FavoriteGameSection/FavoriteGameSection';
+import RouteButton from '../components/RouteButton/RouteButton';
 
 export default function HomeView() {
     const navigate = useNavigate();
@@ -66,9 +67,11 @@ export default function HomeView() {
                 className="btn selected wide"
                 onClick={() => {
                     navigate('/custom/create');
-                }}>
-                Create <i className="bi bi-plus-circle"></i>
-            </button> */}
+                    }}>
+                    Create <i className="bi bi-plus-circle"></i>
+                    </button> */}
+            <h2>Other</h2>
+            <RouteButton to="privacy">Privacy</RouteButton>
             <By />
         </div>
     );

src/views/PrivacyView.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import StyleUtils from '../api/utils/StyleUtils';
+import HomeButton from '../components/HomeButton/HomeButton';
+import Logo from '../components/Logo';
+
+/**
+ * This is the PrivacyView
+ * @author cophilot
+ * @version 1.0.0
+ * @created 2024-8-9
+ */
+function PrivacyView() {
+    useEffect(() => {
+        StyleUtils.setDefaultValues();
+        document.title = 'BoardScoreHub';
+    }, []);
+    return (
+        <div className="content">
+            <Logo />
+            <h1>BoardScoreHub Privacy</h1>
+            <p>
+                Only data is <b>only</b> kept in your browser. No data will be
+                sent to any server. This garantuees your privacy, but also means
+                that you cannot access your data from another device. This also
+                does not garantuee the persistence of your data. If you clear
+                your browser data, your data will be lost without any way to
+                recover it.
+            </p>
+            <HomeButton />
+        </div>
+    );
+}
+
+export default PrivacyView;