feat() Add about page

src/main.tsx

@@ -5,7 +5,7 @@ import { RouterProvider, createHashRouter, redirect } from 'react-router-dom';
 
 import App from './App';
 import { Game, JoinGame } from './modules/game';
-import { Home, Rules } from './modules/home';
+import { About, Home, Rules } from './modules/home';
 
 import './index.css';
 
@@ -22,7 +22,7 @@ const router = createHashRouter([
     path: 'rules',
     element: (
       <React.StrictMode>
-        <App music>{(account, provider) => <Rules account={account} provider={provider} />}</App>
+        <App music>{() => <Rules />}</App>
       </React.StrictMode>
     ),
   },
@@ -48,6 +48,14 @@ const router = createHashRouter([
       </React.StrictMode>
     ),
   },
+  {
+    path: 'about',
+    element: (
+      <React.StrictMode>
+        <App music>{() => <About />}</App>
+      </React.StrictMode>
+    ),
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);

src/modules/home/components/About/About.css

@@ -0,0 +1,7 @@
+.About__list dt {
+  font-weight: bold;
+}
+.About__list dd {
+  margin-left: 0;
+  margin-bottom: 15px;
+}

src/modules/home/components/About/About.tsx

@@ -0,0 +1,39 @@
+import { Back, Subtitle, Title } from '../../../common-ui';
+
+import './About.css';
+
+export const About = () => {
+  return (
+    <div>
+      <Back />
+      <Title>About</Title>
+      <p>
+        Cipher Bomb is a blockchain game crafted using{' '}
+        <a href="https://zama.ai/fhevm" title="fhEVM website">
+          the fhEVM
+        </a>
+        . Developed in Solidity, Cipher Bomb leverages the encrypted types provided by the fhEVM to secure player cards
+        and utilizes the encrypted PRNG to distribute cards to each player on-chain. For a deeper understanding, you can
+        explore{' '}
+        <a href="https://github.com/immortal-tofu/cipherbomb" title="Cipherbomb repository">
+          the contract's source code
+        </a>
+        .
+      </p>
+
+      <Subtitle>Credits</Subtitle>
+      <dl className="About__list">
+        <dt>Contract & dapp</dt>
+        <dd>
+          <a href="https://twitter.com/immortofu">immortal tofu</a>
+        </dd>
+        <dt>Graphics</dt>
+        <dd>
+          <a href="https://www.instagram.com/brice.eljeji/">Brice Eljeji</a>
+        </dd>
+        <dt>Music</dt>
+        <dd>Eternal Lupin</dd>
+      </dl>
+    </div>
+  );
+};

src/modules/home/components/About/index.ts

@@ -0,0 +1 @@
+export * from './About';

src/modules/home/components/Home/Home.css

@@ -9,26 +9,41 @@
 }
 
 .Home__link {
+  display: flex;
+  align-items: center;
+}
+
+.Home__link a,
+.Home__link span {
   font-family: Bungee;
   font-size: 32px;
   color: #fff;
   text-shadow: -5px 5px 0 #000;
   text-decoration: none;
   cursor: pointer;
-  display: flex;
-  align-items: center;
 }
 
 .Home__link .lds-ripple {
   top: -2px;
   margin-left: 15px;
 }
 
-.Home__link:hover {
+.Home__link a:hover,
+.Home__link span:hover {
   color: var(--primary-color);
 }
 
-.Home__link--disabled {
-  color: #444;
+.Home__link--disabled a,
+.Home__link--disabled span {
+  color: #444 !important;
   pointer-events: none;
 }
+
+.Home__link--small {
+  margin-top: 30px;
+}
+
+.Home__link--small a {
+  color: var(--fifth-color);
+  font-size: 1.4em;
+}

src/modules/home/components/Home/Home.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { BrowserProvider, ContractFactory } from 'ethers';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import cipherbomb from '../../../../abi/cipherbomb.json';
@@ -26,25 +26,24 @@ export const Home = ({ account, provider }: HomeProps) => {
     const address = await c.getAddress();
     navigate(`/game/${address}`);
   };
+
   return (
     <div className="Home">
       <Title>Cipher Bomb</Title>
       <div className="Home__account">Welcome, {account}</div>
       <div className="Home__menu">
-        <div>
-          <span onClick={createARoom} className={classNames('Home__link', { 'Home__link--disabled': createLoading })}>
-            Create a room {createLoading && <Loader />}
-          </span>
+        <div className={classNames('Home__link Home__link', { 'Home__link--disabled': createLoading })}>
+          <span onClick={createARoom}>Create a room</span>
+          {createLoading && <Loader />}
+        </div>
+        <div className={classNames('Home__link Home__link', { 'Home__link--disabled': createLoading })}>
+          <Link to="/join">Join a room</Link>
         </div>
-        <div>
-          <Link to="/join" className={classNames('Home__link', { 'Home__link--disabled': createLoading })}>
-            Join a room
-          </Link>
+        <div className={classNames('Home__link Home__link', { 'Home__link--disabled': createLoading })}>
+          <Link to="/rules">Rules</Link>
         </div>
-        <div>
-          <Link to="/rules" className={classNames('Home__link', { 'Home__link--disabled': createLoading })}>
-            Rules
-          </Link>
+        <div className={classNames('Home__link Home__link--small', { 'Home__link--disabled': createLoading })}>
+          <Link to="/about">About</Link>
         </div>
       </div>
     </div>

src/modules/home/components/Rules/Rules.tsx

@@ -1,13 +1,6 @@
-import { BrowserProvider } from 'ethers';
-
 import { Back, Subtitle, Title } from '../../../common-ui';
 
-type RulesProps = {
-  account: string;
-  provider: BrowserProvider;
-};
-
-export const Rules = (_: RulesProps) => {
+export const Rules = () => {
   return (
     <div>
       <Back />

src/modules/home/index.ts

@@ -1,2 +1,3 @@
 export * from './components/Home';
 export * from './components/Rules';
+export * from './components/About';