front: about page

webapp/src/App.js

@@ -1,14 +1,11 @@
 import './App.css';
 import React from 'react'
-import {
+import { BrowserRouter, Routes, Route } from "react-router-dom"
-  BrowserRouter,
-  Routes,
-  Route,
-} from "react-router-dom"
 
 import Header from "./components/Header"
 import Leaderboard from "./components/Leaderboard"
 import Game from "./components/Game"
+import About from "./components/About"
 import GameProposal from './components/Game/Proposal'
 
 function App() { 
@@ -20,6 +17,7 @@ function App() {
           <Routes>
             <Route path="/leaderboard" element={<Leaderboard/>} />
             <Route path="/game" element={<Game/>} />
+            <Route path="/about" element={<About/>} />
             <Route path="/game/proposal" element={<GameProposal/>} />
           </Routes>
         </div>

webapp/src/components/About/index.css

@@ -0,0 +1,5 @@
+.Leaderboard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

webapp/src/components/About/index.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+import './index.css';
+
+export default function Leaderboard() {
+
+  return <div className="About">
+      A simple american checkers game<br/>
+    </div>
+};

webapp/src/components/GameSelector/index.jsx

@@ -12,7 +12,6 @@ export default function Game() {
   // for (const [key, value] of Object.entries(data.games))
   //   console.log(key, value);
    
-  console.log("data.games", data.games)
   const waitForYou = data.games
     .filter(game => game.status === Status.WaitForYou)
     .map(game => {